在前后端分離的當下，我們可以與后端並行開發來提高工作效率，但是在后端開發完成之前，我們一般是使用mock數據來進行前端的交互開發與前期bug排查的，常用的方式有：
1、mock一個json文件，比如json-server等工具。
2、使用mock.js配合例如koa等node服務器框架。
今天呢，我給大家推薦一個開源框架，叫easy-mock，官網地址。他可以基於swagger文檔自動生成前端mock數據，它內置mock.js。（前提是后端引入swagger）。他使用起來很方便，再也不用手寫mock代碼了。
1、工作環境
node -12.16.3
easy-mock -last
mongodb -4.2.8
redis -6.0.6
2、項目構建
使用easy-mock前需要安裝mongodb和redis，在這里我們使用homebrew工具（mac或liunx的安裝包管理器）官網鏈接。
安裝homebrew執行如下指令：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
1、redis安裝：（macos為例），執行如下指令：
brew install redis
等待安裝完成后，執行redis-server指令，另起一個終端，執行redis-cli出現如下畫面代表安裝完成。
2、mongodb安裝，其實和redis差不多，但是由於mongodb已不再開源，直接運行brew install mongodb會報錯，找不到，所以執行如下執行指令。
brew tap mongodb/brew brew install mongodb-community
執行指令mongod，運行mongodb，新建一個終端執行指令mongo鏈接，能連接成功即可。
3、把easy-mock從github上clone下來。
git clone https://github.com/easy-mock/easy-mock.git
cd easy-mock && npm install
打開config/default.json，把你的mongodb地址配置進去。查看代碼得知，項目使用的是mongoose，如果指定用戶請將db選項按照如下配置：（user:password替換為你自己mongodb的賬戶密碼，@后面未MongoDB鏈接地址）
mongodb://user:password@127.0.0.1:27099/easymock
（請先啟動mongodb和redis奧）然后執行指令,就可以運行起來了。
npm run dev
到這里你的easy-mock就簡單的搭建好了，更多配置請見官網。
3、使用指南
啟動服務以后，注冊賬號並登錄，然后點擊我的項目，新建項目，填寫項目信息，點擊創建即可創建一個項目
創建完項目以后，去獲取更新。
官網有詳細的使用教程，地址。
到這里基本上已經大功告成了，去你的項目里把路由轉發到上圖中的baseurl就可以使用了。
4、源碼改進
easy-mock內置了mock.js，但是mock.js內置的一些數據倉庫，會和世紀項目中的不匹配（比如：省市區數據，我們項目中是使用code來進行前后端數據傳輸的。），這里就需要對mock.js源碼進行一些修改：
1、把mock.js從github上clone下來，
2、找到src/mock/random目錄，將里面的address_customer.js內容替換為你們自己的省市區數據。
3、修改同目錄下的address.js修改生成部分實現。
4、執行打包指令。生成mock.min.js
5、打開easy-mock的plugin目錄，將生成的mock.min.js復制進去。
6、打開easy-mock的controllers目錄，修改里面的mock.js文件，將Mock的引入修改為本地，（還有utils/swagger.js文件也要修改）重啟easy-mock即可。
easy-mock的swagger解析器，因為官方考慮到對象交叉引用，可能會陷入死循環。所以部分接口可能同步不出來。文檔地址
1、clone解析器swagger-parser-mock項目的lib目錄，放到easy-mock的plugin目錄下。
2、修改解析器的index.js如下：
修改easy-mock的util/swagger.js將swaggerParserMock的引入改為本地
增加swagger文檔的標簽篩選功能，查看接口更加便利，項目視圖部分的實現使用的是vue和ivew，
1、打開util/swagger.js，添加tags的存儲。
2、修改models/fields_table.js，添加tags
'use strict'; module.exports = { ... mock: ['_id', 'url', 'method', 'description', 'mode', 'parameters', 'response_model', 'tags'], ... };
3、修改models/mock.js，添加tags
'use strict'; const mongoose = require('mongoose'); const Schema = mongoose.Schema; const schema = new Schema({ ... tags: String, ... }); ...
4、修改proxy/mock.js，添加tags
static updateById (mock) { return Mock.update({ _id: mock.id }, { $set: { ... tags: mock.tags } }) }
5、最后在views/pages/project-detail/index.vue中，給表哥添加一列tags展示，並且提供篩選。
5、參考文章