vue는 모의 테스트 데이터를 어떻게 읽습니까?-View.js-php.cn

Vue 프로젝트에서 모의 데이터를 읽는 단계: Mock.js 설치, Mock.js 파일 생성, 모의 데이터 정의, Vue 구성 요소의 $http 서비스를 사용하여 모의 데이터를 얻고 저장하는 요청 시작

vue는 모의 테스트 데이터를 어떻게 읽습니까?

Vue에서 Mock의 테스트 데이터 읽기

Vue 프로젝트에서 테스트를 위해 Mock 데이터를 사용할 때 다음 단계를 통해 Mock의 데이터를 읽을 수 있습니다.

1. Mock.js

npm install --save-dev mockjs

로그인 후 복사

2 . Mock.js 파일 만들기

src 디렉터리에mock.js라는 파일을 만들고 여기에 모의 데이터를 정의합니다:

const Mock = require('mockjs'); // 定义 Mock 数据 Mock.mock(/api\/users/, { 'list|10': [{ id: '@id', name: '@cname', age: '@integer(18, 60)', }] });

로그인 후 복사

mock.js的文件，并在其中定义 Mock 数据：

import mock from '@/mock'; // 导入 Mock.js 文件 export default { data() { return { users: [], }; }, created() { this.$http.get('/api/users').then(response => { this.users = response.data; }); }, };

로그인 후 복사

3. 在 Vue 组件中使用 Mock 数据

在需要使用 Mock 数据的 Vue 组件中，引入 Mock.js 文件并使用$http服务发起请求：

rrreee

4. 获取 Mock 数据

请求发送后，Vue 组件将收到 Mock.js 生成的响应，响应数据会存储在this.users中。

注意：

Mock.js 文件中的 URL 路径与 Vue 组件中发起的请求 URL 路径必须一致。
$http3. Vue 구성 요소에서 모의 데이터 사용

모의 데이터를 사용해야 하는 Vue 구성 요소에서 Mock.js 파일을 도입하고 $http서비스를 사용하여 요청을 시작합니다: rrreee4. 모의 데이터 가져오기 요청이 전송된 후 Vue 구성 요소는 Mock.js에서 생성된 응답을 수신하고 응답 데이터는 this.users에 저장됩니다. 참고:

Mock.js 파일의 URL 경로는 Vue 구성 요소에서 시작된 요청 URL 경로와 일치해야 합니다.
$http서비스는 Vue-resource 플러그인을 통해 제공됩니다. Vue-resource를 사용하지 않는 경우 실제 상황에 따라 다른 HTTP 요청 라이브러리(예: Axios)를 사용할 수 있습니다.

위 내용은 vue는 모의 테스트 데이터를 어떻게 읽습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!