Mock，簡(jiǎn)言之，模擬數(shù)據(jù)生成器。
我們做的是前后端分離的通用系統(tǒng)，目前后端還沒(méi)有開(kāi)發(fā)，前端又需要數(shù)據(jù)，怎么辦，Mock來(lái)了。
具體在我們這里，可以理解為

攔截所有的Ajax請(qǐng)求=>分析請(qǐng)求=>返回模擬數(shù)據(jù)
這里要用到：

// 實(shí)現(xiàn)axios攔截
import MockAdapter from 'axios-mock-adapter';

// Mock工具
import Mocker from 'mockjs';

尚未安裝的通過(guò)npm安裝

npm i mockjs --save-dev
npm i axios-mock-adapter --save-dev

我們?cè)?code>src目錄下新建api目錄，并新建文件mock.js.
貼入如下代碼，具體看代碼了解

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Mocker from 'mockjs';

// 裝配起來(lái)
const mock = new MockAdapter(axios);
// 通過(guò)mock生成隨機(jī)數(shù)據(jù)
const trace = Mocker.mock({
  'rows|5-10': ['@name'],
});
// reply的參數(shù)格式 (status, data, headers)
/**
 * 當(dāng)Ajax通過(guò)Get方式獲取login.json時(shí)
 * 返回?cái)?shù)據(jù)
 *   狀態(tài)：200
 *   數(shù)據(jù)：json （{view:...}）
 *   返回頭： 默認(rèn)值
 */
mock.onGet('/login.json').reply(200, {
  view: {
    name: 'login',
    action: '/login.json',
    title: 'EleAdmin后臺(tái)',
    verifyImgUrl: '/ver.jpg',
  },
  trace,
});
/**
 * 當(dāng)Ajax向login.json發(fā)送（POST）數(shù)據(jù)時(shí)
 * 現(xiàn)實(shí)中應(yīng)該干點(diǎn)事（比如通過(guò)查詢(xún)數(shù)據(jù)庫(kù)執(zhí)行登錄動(dòng)作），
 * 然后返回完成結(jié)果
 * 這里返回?cái)?shù)據(jù)
 *   狀態(tài)：200
 *   數(shù)據(jù)：json （{...}）
 *   返回頭： 默認(rèn)值
 */
mock.onPost('/login.json').reply(200, {
 // 附加一些指令，比如跳轉(zhuǎn)到
  next: '/index.json',
});

mock.onGet('/index.json').reply(200, {
  view: {
    name: 'admin',
    url: '/admin.json',
  },
  trace,
});

mock.onGet('/admin.json').reply(200, {
  // ...
  trace,
});

Mock搭建好了，我們來(lái)看看效果，怎么看呢， 這樣我們先新建一個(gè)組件Trace,將來(lái)用來(lái)返回后端調(diào)試信息。
在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">調(diào)試</el-button>
  </el-badge>
  <el-card class="trace-card" v-show="open">
    <div slot="header" class="clearfix">
      <span>調(diào)試信息</span>
      <el-button class="trace-close-btn" type="text" @click="open = false">關(guān)閉</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>

這個(gè)組件設(shè)想時(shí)在右下角顯示一個(gè)按鈕，點(diǎn)擊后拉出一個(gè)列表顯示調(diào)試信息；點(diǎn)擊列表的關(guān)閉按鈕，收起列表。這個(gè)列表的數(shù)據(jù)，目前就是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';
// 我們那個(gè)插件
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個(gè)地方

<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>

代碼很簡(jiǎn)單，不詳述了，有問(wèn)題可討論。

現(xiàn)在命令行npm run dev打開(kāi)看看，刷新一下看看，
如果你愿意，在頁(yè)面中寫(xiě)個(gè)按鈕，發(fā)個(gè)請(qǐng)求到index.json看看