Vue项目中使用mock

1. 概念： mock是一个模拟数据生成器，旨在帮助前端独立于后端进行开发，帮助编写单元测试。
2. mock有如下功能：

根据数据模板生成模板数据
模拟ajax请求，生成请求数据
基于html模板生成模拟数据

3. 安装mockjs

npm install mockjs

4. 在src文件夹下新建mock文件夹

5. 在mock文件夹下新建index.js文件引入mock

/*
 * @Descripttion:
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-05 09:24:05
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-07-05 09:48:22
 */
// 首先引入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);
    }
});

6. 在main.js中引入mock

/*
 * @Descripttion: 
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-05-15 17:15:58
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-07-05 11:07:24
 */
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'


require('./mock/index.js');

Vue.use(ElementUI)


//引入axios
import axios from 'axios';
Vue.prototype.axios = axios;

// 导入一个当前系统的全局基本样式
import '../static/css/reset.css';

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

6. 在mock文件夹下新建demoList.js

/*
 * @Descripttion:
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-05 09:59:24
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-07-05 10:58:15
 */
let demoList = {
    status: 200,
    message: 'success',
    data: [{
        id: 1,
        name: 'xiaoming',
        age: '21',
        job: '前端工程师'
    }, {
        id: 2,
        name: 'xiaozhang',
        age: '28',
        job: '后端工程师'
    }]
};
let demoList2 = [{
    id: 1,
    name: 'lisi',
    age: '20',
    job: '测试工程师'
}, {
    id: 2,
    name: 'zhangsan',
    age: '30',
    job: '产品经理'
}];
export default {
    'get|/parameter/query': demoList,
    // 也可以这样写
    // 官方解释为：记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
    'get|/parameter/query': (option) => {
        // 可以在这个地方对demoList2进行一系列操作，例如增删改
        // option 指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性
        return {
            status: 200,
            message: 'success',
            data: demoList2
        };
    }
}

7. 在页面中调用在demoList.js创建的数据

<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-05-15 17:21:05
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-07-05 11:03:09
--> 
<template>
  <div class="hello">
    <el-button @click="getDemoList">获取数据</el-button>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {};
  },
  methods: {
    /**
     * @name:获取Mock.js中数据
     * @test: test font
     * @msg:
     * @param {type}
     * @return:
     */
    getDemoList() {
      this.axios({
        method: "get",
        url: "/parameter/query"
      })
        .then(res => {
          console.log(res);
        })
        .catch(resp => {
          console.log("请求失败：" + resp.status + "," + resp.statusText);
        });
    }
  }
};
</script>

<style scoped>
</style>