1.下载mock.js npm install mockjs --save-dev
2.新建文件夹 mock
3.在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.新建一个api接口
let demoList = {
status: 200,
message: 'success',
data: {
total: 100,
'rows|10': [{
id: '@guid',
name: '@cname',
'age|20-30': 23,
'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
}]
}
};
export default {
'get|/parameter/query': demoList
}
5.在main.js中引入mock index.jsrequire('./mock');
6.在vue文件中使用
this.$axios.get("/parameter/query").then(
(data)=>{
console.log(data);
}
)
*Mock.js开发中拦截Ajax,所以在network中看不到
网友评论