Mock的使用----基于Vue和PHP打造前后端分离的通用管理系统（五）

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

这个组件设想时在右下角显示一个按钮，点击后拉出一个列表显示调试信息；点击列表的关闭按钮，收起列表。这个列表的数据，目前就是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个地方