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中看不到
© 版权声明
文章版权归作者所有,未经允许请勿转载。
相关文章
暂无评论...


