Vue中使用mockjs ，自动注册mock服务，代理请求

1。创建index.js文件 , 目录位置如下图

index.js代码如下

const Mock = require('mockjs')

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

const configArray = []
const files = require.context('.', true, /\.js$/);

// 遍历目录下的文件，去掉index文件
files.keys().forEach((key) => {
  if (key === './index.js') return;

  // 获取导出对象并合并
  console.log('files(key).default',files(key).default);
  configArray.push(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);
  }
});
console.log(22);

把这个文件导入到main.js注册下

这样以后所有的mock服务都写在这个mock目录下，一个拦截是一个文件
比如上面的job.js中的代码如下

import Mock from 'mockjs'
// const jobList = [{
//   id: 1,
//   professionId: '230000',
//   job: '教师'
// }, {
//   id: 2,
//   professionId: '240000',
//   job: '医生'
// }, {
//   id: 3,
//   professionId: '250000',
//   job: '公务员'
// }]

const jobList = Mock.mock({
	id: "@id()", //得到随机的id
	username: "@cname()", //随机生成中文名字
	date: "@date()", //随机生成日期
	avator: "@image('200x200','#50B347','#fff','avatar')", //生成图片，参数：size,background,foreground,text
	description: "@paragraph()", //描述
	ip: "@ip()", //IP地址
	email: "@email()" //email
})



export default {
  // /api/joblist 就是地址
  'get|/api/joblist': option => {
    return {
      status: 200,
      message: 'success',
      data: jobList
    };
  },
}

axios如下

请求发出

下图就是拦截的数据，具体的格式可以自定义