Mock，简言之，模拟数据生成器。
我们做的是前后端分离的通用系统，目前后端还没有开发，前端又需要数据，怎么办，Mock来了。
具体在我们这里，可以理解为
拦截所有的Ajax请求=>分析请求=>返回模拟数据
这里要用到：
// 实现axios拦截
import MockAdapter from 'axios-mock-adapter';
// Mock工具
import Mocker from 'mockjs';
尚未安装的通过npm安装
npm i mockjs --save-dev
npm i axios-mock-adapter --save-dev
我们在src目录下新建api目录，并新建文件mock.js.
贴入如下代码，具体看代码了解
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Mocker from 'mockjs';
// 装配起来
const mock = new MockAdapter(axios);
// 通过mock生成随机数据
const trace = Mocker.mock({
'rows|5-10': ['@name'],
});
// reply的参数格式 (status, data, headers)
/**
* 当Ajax通过Get方式获取login.json时
* 返回数据
* 状态：200
* 数据：json （{view:...}）
* 返回头： 默认值
*/
mock.onGet('/login.json').reply(200, {
view: {
name: 'login',
action: '/login.json',
title: 'EleAdmin后台',
verifyImgUrl: '/ver.jpg',
},
trace,
});
/**
* 当Ajax向login.json发送（POST）数据时
* 现实中应该干点事（比如通过查询数据库执行登录动作），
* 然后返回完成结果
* 这里返回数据
* 状态：200
* 数据：json （{...}）
* 返回头： 默认值
*/
mock.onPost('/login.json').reply(200, {
// 附加一些指令，比如跳转到
next: '/index.json',
});
mock.onGet('/index.json').reply(200, {
view: {
name: 'admin',
url: '/admin.json',
},
trace,
});
mock.onGet('/admin.json').reply(200, {
// ...
trace,
});
Mock搭建好了，我们来看看效果，怎么看呢， 这样我们先新建一个组件Trace,将来用来返回后端调试信息。
在components目录下新建Trace.vue
<template>
<div class="trace">
<el-badge :value="information.rows.length" class="trace-icon" v-show="!open">
<el-button size="small" @click="onOpen">调试</el-button>
</el-badge>
<el-card class="trace-card" v-show="open">
<div slot="header" class="clearfix">
<span>调试信息</span>
<el-button class="trace-close-btn" type="text" @click="open = false">关闭</el-button>
</div>
<div v-for="(o, i) in information.rows" :key="i" class="text item">
{{o}}
</div>
</el-card>
</div>
</template>
<script>
export default {
props: [
'information',
],
data() {
const value = this.information.rows.length;
return {
open: false,
value,
};
},
methods: {
onOpen() {
this.open = true;
this.value = 0;
},
},
};
</script>
<style scoped>
.trace {
position: fixed;
bottom: 30px;
right: 30px;
}
.trace-close-btn {
float: right; padding: 3px 0
}
</style>
这个组件设想时在右下角显示一个按钮，点击后拉出一个列表显示调试信息；点击列表的关闭按钮，收起列表。这个列表的数据，目前就是Mock的。
修改main.js引入mock
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App';
// 我们那个插件
import Http from './Util/Http';
// mock
import './api/mock';
// mock中用的，伏笔
Vue.createUrl = url => url;
Vue.config.productionTip = false;
Vue.use(ElementUI);
// 启用插件
Vue.use(Http);
/* eslint-disable no-new */
new Vue({
// ......
修改App.vue引入Trace组件，改了3个地方
<template>
<div id="app"><admin /><trace :information="trace"/></div>
</template>
<script>
import Admin from './components/Admin';
// 这里是第二处
import Trace from './components/Trace';
export default {
name: 'App',
data() {
return {
trace: {
rows: [],
},
};
},
// 这里第3处
created() {
created() {
this.$addReceiver((data) => {
console.log(data);
if (data.trace) this.trace = data.trace;
});
this.$httpGet('/index.json');
},
},
components: {
Admin,
Trace,
},
};
</script>
<style>
代码很简单，不详述了，有问题可讨论。
现在命令行npm run dev打开看看，刷新一下看看，
如果你愿意，在页面中写个按钮，发个请求到index.json看看
