vue mock.js

内容分享1个月前发布
0 0 0

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中看不到

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
none
暂无评论...