VUE开发环境下mock模拟数据与后端接口对接示例

在以往的前端开发中，前端严重依赖后端，必须等待后端接口开发出来才能继续开发。使用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数据实现增删改查