如何在Vue项目中使用Mockjs，模拟接口返回的数据，实现前后端分离独立开发

前后端分离分工协作是一个非常高效的做法，但是有时前后端分离不彻底会很痛苦。前后端本来应该是异步进行的，进度互不影响，但是在没有mock的时候，前端却严重依赖后端的接口，总会苦苦等待后端接口出来才能继续开发。自己写一些模拟数据一定程度上能解决这个矛盾，但是配置烦琐，且开发环境和生产环境切换，开发时mock数据与后端接口切换很麻烦。可能一不小心就把自己的模拟数据就扔到线上去了！
还有，对于后端工程师对前端不熟，又要兼顾写前端的，遇到各种前端问题会有点抓瞎。可能习惯了mvc的框架，页面跟后端项目都是在同一个站点，但是vue项目开发时是独立的站点，结果会出现跨域问题。第一次遇到跨域问题比较烦躁——明明最终都是放在同一个站点下面，居然会出现跨域问题？
有问题存在，而且是很普遍的痛点，那么就肯定会有成熟的解决方案。
找了一下，发现了mockjs。于是趁着周末看了一下官方文档，写个demo测试了一下。同时自己想了个方法解决mock和后端接口的切换问题和生产环境、开发环境配置的问题。写完能强烈感受到它的强大之处。简单，直接，强大！
相信深受前后分离不彻底之害的开发同仁，看到mock这东西会心跳加速，拍案叫绝。
写了个简单教程，以供参考。

============上面是几句想说的话============
===============下面是正文================Mock.js 是一个模拟数据生成器，利用它，可以拦截ajax请求，直接模拟返回数据，这样前后端只要约定好数据格式，前端就不需要依赖后端的接口，可以直接使用模拟的数据了。这里介绍在Vue工程中使用Mockjs，并且实现配置化

1. 安装

npm install --save-dev mockjs

2. 引入

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置dev.envmodule.exports = merge(prodEnv, {  NODE_ENV: '"development"',  MOCK: 'true',})
prod.envmodule.exports = {  NODE_ENV: '"production"',  MOCK: 'false',}
在main.jsprocess.env.MOCK && require('@/mock')

3. 目录和文件创建

在src目录下创建mock目录，添加index.js文件，这里建议给每类api使用单独的mock文件，例如userapi中使用的所有接口要使用的mock放到usermock.js文件里。


mock/index.js// 将所有的mock文件引入require('@/mock/usermock')require('@/mock/wxmock')
// 在这里可以做一些通用的配置const Mock = require("mockjs")// 设置所有ajax请求的超时时间，模拟网络传输耗时Mock.setup({    timeout: 0-300})

4.拦截ajax请求，配置mock的数据

这里以userapi中的getUserInfo为例
mock/usermock.jsimport ApiPath from "@/api/ApiPath"const Mock = require("mockjs")
Mock.mock(ApiPath.user.getUserInfo, "get", {    "code": 0,    "data": {      "fullName": "@CNAME", // 随机生成中文人名      "userId": 1000234234001,      "username": "zhangsan"    },    "msg": "success"})
拦截ajax请求主要可以使用Mock中的两个方法：Mock.mock( rurl, rtype, template )Mock.mock( rurl, rtype, function( options ) )
rurl: 表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。* 在vue 工程中，建议将api的url全部放在apipath中统一管理，然后在Mock中使用与发请求的时候使用的同一个引用rtype: 表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。template: 表示数据模板，可以是对象或字符串。如果需要要把数据写死，可以直接写一个普通的对象。如果要让Mock随机生成，可以根据Mock模板的规则自定义例如： { 'data|1-10':[{}] } 表示生成生成包含 1到10个空对象的数据'@EMAIL' 表示随机生成一个email地址'@CNAME' 表示随机生成一个中文人名
模板的功能非常强大，可以生成几乎所有类型的数据，具体参考：https://github.com/nuysoft/Mock/wiki/Syntax-Specification
配置完成，现在当你在开发的时候发送请求到 ApiPath.user.getUserInfo，将返回Mock中配置的模拟对象HttpUtil.get(ApiPath.user.getUserInfo, {}, (rs) => {    console.log("ApiPath.user.getUserInfo接口返回数据:")    console.log(rs)})


参考文献：https://github.com/nuysoft/Mock/wiki