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

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