vue mock.js

2021-07-07  本文已影响0人  我是syq吖

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

上一篇 下一篇

猜你喜欢

热点阅读