- 概念： mock是一个模拟数据生成器，旨在帮助前端独立于后端进行开发，帮助编写单元测试。
- mock有如下功能：
根据数据模板生成模板数据 |
模拟ajax请求，生成请求数据 |
基于html模板生成模拟数据 |
- 安装mockjs
npm install mockjs- 在src文件夹下新建mock文件夹
5. 在mock文件夹下新建index.js文件引入mock
/*
* @Descripttion:
* @version:
* @Author: zhangfan
* @email: [email protected]
* @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);
}
});- 在main.js中引入mock
/*
* @Descripttion:
* @version:
* @Author: zhangfan
* @email: [email protected]
* @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/>'
})- 在mock文件夹下新建demoList.js
/*
* @Descripttion:
* @version:
* @Author: zhangfan
* @email: [email protected]
* @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
};
}
}- 在页面中调用在demoList.js创建的数据
<!--
* @Descripttion:
* @version:
* @Author: zhangfan
* @email: [email protected]
* @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>