vue 使用 mock.js

零、mock.js 官方说明文档
https://github.com/nuysoft/Mock/wiki

一、安装 mockjs
npm install mockjs --save-dev

二、mock目录配置
1、在src里面新建一个mock文件夹
2、在mock文件夹下新建一个mock.js 和 data 文件夹
3、在 data 文件夹下用于存放所有的http模拟返回的接口数据，
这里我们新建一个文件名为 mockDataSystemDetail.js
注意要引入mock.js
for循环的次数就是需要返回mock数据的条数

import Mock from 'mockjs';

const MockDataSystemDetails = [];

for (let i = 0; i < 5; i++) {
  MockDataSystemDetails.push(Mock.mock({
    //在数组中随机找一个
    'appname|1':['be-app','be-kyc-biz','common-biz','coupon-biz','mpf-biz','ops-gw','sa-biz','trade-biz','trade-gw'],
    tag: 'dev_ph_'+Mock.Random.date('yyyyMMdd')+'_01',
    createdUser: Mock.mock('@email'),
    createdTime: Mock.Random.date(),
    isBlock: Mock.Random.integer(0, 1),
    'description': '@string("lower", 5, 10)', //一串随机字符串 5-10 小写字符串
  }));
}

export { MockDataSystemDetails };

4、修改 mock.js

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
//引入mock data js
import { MockDataSystemDetails } from './data/mockDataSystemDetail';

let _SystemDetails = MockDataSystemDetails;

export default {
  /**
   * mock bootstrap
   */
  bootstrap() {
    let mock = new MockAdapter(axios);

    //获取系统列表
    mock.onGet('/system/list').reply(config => {
      let {name} = config.params;
      let mockSystemDetails =  _SystemDetails.filter(systemDetail => {
        //根据mock返回体的appname字段筛选
        if (name && systemDetail.appname.indexOf(name) == -1) return false;
        return true;
      });
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200, {
            //  把mock结果放入接口返回 apiResponseSystemDetails节点
            apiResponseSystemDetails: mockSystemDetails
          }]);
        }, 1000);
      });
    });

  }
};

三、配置mock生效
为了方便在所有组件中使用mock模拟数据在项目 main.js中导入刚编辑的接口数据

import Mock from './mock'
Mock.bootstrap();

在项目接口调试完成后需要移除这2行代码，不再对mock数据的引用，从而组件中不用做任何修改，最大减少反复工作量