vue はモックでテストデータをどのように読み取りますか-Vue.js-php.cn

vue はモックでテストデータをどのように読み取りますか

下次还敢

リリース： 2024-04-02 00:33:21

オリジナル

694 人が閲覧しました

Vue 中读取 Mock 中的测试数据

在 Vue 项目中使用 Mock 数据进行测试时，可以通过以下步骤读取 Mock 中的数据：

1. 安装 Mock.js

npm install --save-dev mockjs

ログイン後にコピー

2. 创建 Mock.js 文件

在 src 目录下创建一个名为 mock.js 的文件，并在其中定义 Mock 数据：

const Mock = require('mockjs');

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

ログイン後にコピー

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

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

import mock from '@/mock'; // 导入 Mock.js 文件

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    this.$http.get('/api/users').then(response => {
      this.users = response.data;
    });
  },
};

ログイン後にコピー

4. 获取 Mock 数据

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

注意：