自从有了mockjs,我们前端工程师再也不用等后端人员开发好之后再测数据了,因为mockjs可以拦截ajax请求,有了mockjs我们可以模拟后台返回数据,以方便的进行一系列的操作。
1、首先安装mock.js
npm install mockjs
2、在我们的vue项目中创建一个mock 的目录
3、在mock的文件夹下创建index.js文件,这里就是我们注册所有mock服务的地方,index.js的内容如下:
// 首先引入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);
}
});
4、服务注册好之后,在main.js中引入
import mock from "../mock/index";
Vue.use(mock)
5、在mock文件夹下随便创建一个文件jobList.js
在该文件中,我们可以按照index注册服务的格式来写我们的mock
let jobList = [{
id: 1,
professionId: '230000',
job: '教师'
},{
id: 2,
professionId: '240000',
job: '医生'
},{
id: 3,
professionId: '250000',
job: '公务员'
}]
export default {
'get|/api/parameter/query': option => {
return {
status: 200,
message: 'success',
data: jobList
};
},
}
6、当我们在页面发起了ajax请求,路径是’/parameter/query’,并且请求方式是get时,就会返回我们写好的mock数据。