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

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

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

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

1. Mock.js

<code>npm install --save-dev mockjs</code>

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 서비스를 사용하여 요청을 시작합니다: 🎜rrreee🎜🎜4. 모의 데이터 가져오기 🎜🎜🎜요청이 전송된 후 Vue 구성 요소는 Mock.js에서 생성된 응답을 수신하고 응답 데이터는 this.users에 저장됩니다. 🎜🎜🎜참고: 🎜🎜

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

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