Mock

安装mock

npm install mockjs

// 表示当拦截到rurl和rtype的ajax请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。
Mock.mock( rurl, rtype, template )

// 记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
Mock.mock( rurl, rtype, function( options ) )

// rurl 可选
// 表示要拦截的url，可以使字符串，也可以是正则
// rtype 可选
// 表示要拦截的ajax请求方式，如get、post
// template 可选
// 数据模板，可以是对象也可以是字符串
// function(option) 可选
// 表示用于生成响应数据的函数
// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
  timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
  if (key === './index.js') return;
  configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|');
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
  }
});

// main.js
require('./mock');

// 在页面发起了ajax请求，路径是'/parameter/query'，并且请求方式是get
let demoList = [{
        id: 1,
        name: 'zs',
        age: '23',
        job: '前端工程师'
    },{
        id: 2,
        name: 'ww',
        age: '24',
        job: '后端工程师'
    }]

export default {
    'get|/parameter/query':  option => {
    return {
      status: 200,
      message: 'success',
      data: demoList
    };
  }
}