在以往的前端开发中，前端严重依赖后端，必须等待后端接口开发出来才能继续开发。使用mock，可以使得前后端开发异步进行，互不影响。Mock.js 是一个模拟数据生成器，使用它可以拦截ajax请求，直接模拟返回数据，这样前后端只要约定好数据格式即可。这样前端就不需要依赖后端的接口，使用模拟的数据独立的完成开发，以下使用vue+mock.js的一个例子。
安装mock
打开命令行窗口，进入工程目录，输入以下命令，完成mock.js安装。
npm install mockjs --save-dev
只在开发环境使用mock，而打包到生产环境不使用mock，打开config目录下dev.env.js文件，做如下配置：
const merge = require('webpack-merge')const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {NODE_ENV: '"development"',MOCK: 'true'})
prod.env.js文件配置如下：
module.exports = {NODE_ENV: '"production"',MOCK: 'false'}
示例代码
通过查询用户列表为例说明，mock的使用。
前端对api接口进行统一管理，与后端正常交互的API文件，代码如下，其中：httpnew.js文件完成对axois的封装：
import {get, post, postWithParm} from './httpnew'var apiBase = 'http://xx.99.45.xxx:8080/yc'var api = {Userlist: (param) => get(apiBase + '/sys/user/list', param)}export default api
在main.js中添加如下代码，通过判断开关变量，决定是否启用mock
import Vue from 'vue'import App from './App'import router from './router'/*判断*/if (process.env.MOCK) {require('./mock/index.js')}Vue.config.productionTip = false/* eslint-disable no-new */new Vue({el: '#app',router,components: {App },template: '<App/>'})
在src目录下，创建mock目录，创建index.js文件，对模拟数据进行统一管理，按照模块分别创建js文件，示例中创建user.js,代码如下
import Mock from 'mockjs'// 生成数据列表let dataList = []for (let i = 0; i < Math.floor(Math.random() * 10 + 1); i++) {dataList.push(Mock.mock({'userId': '@increment','username': '@cname','email': '@email','mobile': /^1[0-9]{10}$/,'status': 1,'roleIdList': null,'createUserId': 1,'createTime': 'datetime'}))}Mock.mock(RegExp('/sys/user/list'), 'get', () => {return dataList})
在user.js文件完成数据的CURD（数据增、删、改、查），注意：这里使用RegExp完成正则表达式模式匹配，为了与正常后端的api能够匹配。如：Mock中的“/sys/user/list ”能够与后端的http://xx.99.45.xxx:8080/yc/sys/user/list完成匹配
index.js文件代码如下：
import Mock from 'mockjs'import user from './user'export default Mock;
这样做的目的是功能相近的内容放置一个文件，index.js文件对其统一管理
编写页面文件（HelloWorld.vue），调用方式与后端的交互完全相同，代码如下：
<script>import api from '../api/api.js'export default {name: 'HelloWorld',data () {return {msg: 'mock测试',datas: [{}]}},created () {this.datalist()console.log(this.datas)},methods: {datalist: function () {api.Userlist({}).then((res) => {console.log(res)this.datas = res}).catch((err) => {console.log(err)})}}}</script>
查看结果：
小结
前后端分离开发中，前端与后端是异步进行的，当前后端交互接口确定下来后，当后端没有完成情况下，前端使用mock完全可以独立的开发。当后端接口开发完成，只需将dev.env.js中mock开关变量设置为false即可完成与后端的对接。本文仅对企业级开发中mock的使用简单说明，mock模拟数据的生成参考添加链接描述及带参数mock前参考Mock数据实现增删改查
