[JavaScript知识库]Mock.js基础

mock是干嘛的，这个直接去看官方文档Mock.js

在vue中使用mock

首先在项目中 npm install axios --save

然后?npm install mockjs

然后 npm install json5 --save-dev ，解决无法加注释问题

在src同级目录下建文件夹mock，在里面新建index写

// 首先引入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);
  }
});

然后再mock里面新建moudles文件，里面放对应的接口，比如userinfo，生成100条数据

let demoList = {
  status: 200,
  message: 'success',
  data: {
    total: 100,
    'rows|100': [{
      id: '@guid',
      name: '@cname',
      'age|20-30': 23,
      'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
    }]
  }
};
// 什么请求类型，请求路径，请求数据
export default {
    'get|/parameter/query': demoList
}

然后再main里面写

import mock from '../mock/index'
Vue.use(mock);

然后在页面获取数据

head() {
      this.$axios
        .get("/parameter/query")
        .then(res => {
          console.log(res.data.data.rows);
          this.tableData = res.data.data.rows
        })
        .catch(error => {
          console.log(error);
        });
    },