使用mock.js和node.js搭建模拟后端服务设计。使用node搭建本地服务器，实现真实请求。mock造假数据响应请求。
功能点：

  1.   - 一键开启mock服务
  2.   - 拆分不同模块api
  3.   - 修改文件后自动重启服务 （nodemon）

前言

在实际开发中，往往是前后端同时开发，后端通过写好接口文档，前端进行对接。但是并没有数据，前端只能自己造假数据进行渲染。而造假数据的一般都是使用mock.js或者是在线的mock服务，比如：easy-mock、fastmock，但是这些在线mock往往服务不稳定经常挂掉。当然我们也可以使用easy-mock部署到自己的服务器。但是也是坑比较多。我们可以在本地使用mock.js来拦截请求，通过mock假数据返回，但是这样的拦截在network里面是获取不到的，因为压根没有发起请求。为了模拟真实的请求，这里使用node.js搭配express框架搭建本地mock服务。具体mock.js的使用请参考官网教程。

node服务搭建

  1. 安装express

npm i express --save-dev

  1. 安装mockjs

npm i mockjs --save-dev

  1. 新建目录文件夹

在src目录下新建以下结构的文件夹

  1. ├─mocks
  2. |   ├─modules          //路由模块
  3. |   |      └login.js
  4. |   |      └user.js
  5. |   ├─index.js        //node服务主文件

4.index.js文件
需要配置跨域才能够通过请求

  1. let express = require('express')//引入express框架
  3. let app = express()
  4. app.use(function (req, res, next) { //配置跨域
  5.  res.header("Access-Control-Allow-Origin", "*");
  6.  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  7.  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  8.  res.header('Access-Control-Allow-Headers', 'Content-Type');
  9.  next();
  10. });
  12. let login = require('./modules/login') //引入不同模块的api
  13. let user = require('./modules/user')
  15. app.use('/api',login)
  16. app.use('/api',user)
  20. app.listen('8090', () => {
  21.  console.log('监听端口 8090')
  22. })

5.不同业务场景api举例
使用路由拆分不同的模块api
login.js

  1. let app = require('express').Router();  
  2. let Mock = require('mockjs')
  4. //获取验证码
  5. app.post('/login/codeImage/', (req, res) => {
  6.  res.json(Mock.mock({
  7.   "code": 0,
  8.   "data": {
  9.   }, 
  10.   "message": "成功", 
  11.   "timestamp": "1594018370", 
  12.   "type": "success"
  13.  }))
  14. })
  16. module.exports = app

user.js

  1. let app = require('express').Router()
  2. let Mock = require('mockjs')
  4. app.post('/userInfo', (req, res) => {
  5.  res.json(Mock.mock({
  6.   "code": 0,
  7.   "data": {
  8.   },
  9.   "message": "成功",
  10.   "timestamp": "1594018370",
  11.   "type": "success"
  12.  }))
  13. })
  15. module.exports = app

服务启动

在命令行进入到mocks目录下，运行node index命令即可启动服务。

端口监听

在vue.config.js文件代理中,将代理服务改为我们的node服务端口即可。

  1. proxy: { //配置跨域
  2.   "/api": {
  3.     target: "http://localhost:8090",
  4.         //...
  5.   },

现在运行server服务能够发现真实的服务请求了，并且返回的数据是我们mock的。

扩展

以上已经能够模拟真实请求，返回mock数据了。但是会发现一个问题，就是我们只要修改了mock文件夹里面的文件，必须重新运行命令，重启node服务。未免太麻烦了。这里我们安装nodemon插件。
npm i nodemon --save-dev
引入后，我们使用nodemon mocks/index命令来启动node服务，可以发现在我们修改来mocks文件夹里面的文件，node服务会自动重启。

每次输入命令也是很烦的，我们可以在package.json文件里面像配置serve服务一样的命令，配置指令。
"mock": "nodemon ./src/mocks/index"，添加一行这条命令。在vscode 或webstorm里面就有一键启动的指令。

完…