介绍一下前景

大量前端项目, 无mock环境, 故需要mock数据实现前后端开发分离

step 1 设计

前端mock包大家都是用mockjs这个没什么问题吧, 所以包的问题解决了;

在没有mock服务的时候, 曾经考虑过每个项目维护自己的mock.js文件, 但是一来我不想每个项目里面都有一大堆mock文件, 另一个是我不希望mock只被前端所用, 测试也可以用, 于是考虑独立出来做成一个服务的形式;

step 2 选型

没怎么选, 最后用了express + express-mock-doc; 原本用的是express-mockjs, 后来发现这个货有bug, 它采用的是express-lite, 有一些隐藏bug例如:

//规则:
{
    code:200,
    data:{...巴拉巴拉},
    msg:""
}
//实际输出:
{
    code:200,
    data:{...巴拉巴拉崩},
    msg:"ASDFExq"
}

它会在msg我期望是空串的时候给我随机字符串...

还有, 在msg这一层不支持function(){} 也不支持正则, 就很迷;

step 3 新包

然后我在issue里面看到了express-mock-doc这个库, 非常舒适; github上的demo足以满足我的需求, cv一下五分钟就决定是它了;

本地测试

本地测试非常ok, get/post方式基本没有问题, put/delete没测, 需要用的同事可以自行在express内自行添加测试;

附项目结构和关键代码

• mock-server
  • mocks
    • api.js
    • llz.js
    • zxh.js ...
  • app.js
  • package.json ...

#app.js

const path = require('path');
const express = require('express');
const mock = require('express-mock-doc');
const bodyParser = require('body-parser')
const apiList = require('./mocks/api')//demo
const zxhList = require('./mocks/zxh')//在线化mock列表
const llzList = require('./mocks/llz')

const app = express();

// 使用默认路径 '/'（不推荐）
// app.use(mockjs(path.join(__dirname, 'mocks')))

// 自定义路径
app.use(bodyParser.json());
app.use('/mocks',mock(express,apiList))
app.use('/zxhmocks',mock(express,zxhList))
app.use('/llzmocks',mock(express,llzList))

// 这里可以添加你的自定义代码.

app.listen(8874);

#mocks/api.js

const list = {
  "/getUserByUid/:uid":{
    eq:"/getUserByUid/1",
    type: "get",
    title: "根据用户id查询用户信息",
    data: (req)=>{
      return {
        "uid":req.params.uid,
        "name":"@cname"
      }
    }
  },
  "/login/":{
    type: "post",
    title: "用户登录接口",
    params:{
      loginId:"123456",
      password:"111111"
    },
    data: (req)=>{
      let returnData;
      if(req.body.loginId == "123456"&& req.body.password == "111111"){
        returnData =  {
          code:"1",
          msg:"login success",
          userInfo:""
        }
      }else{
        returnData =  {
          code:"0",
          msg:"login error",
        }
      }
      return returnData
    }
  },
  "/mocklist":{
    type: "get",
    title: "mocklist列表接口",
    data: (req)=>{
      return {
        code:200,
        data:{
          "list|0-5":[
            {
              username:"@cname",
              "code|8":""
            }
          ],
          pageNo:1
        },
        msg:""
      }
    }
  },

}
module.exports = list;

访问 http://localhost:8874/mocks/mocklist 可得到:

// http://localhost:8874/mocks/mocklist
{
  "code": 200,
  "data": {
    "list": [
      {
        "username": "侯霞",
        "code": "&FVUnLb["
      },
      {
        "username": "武伟",
        "code": "jiEq!4gd"
      },
      {
        "username": "魏秀英",
        "code": "F3LgZL2r"
      },
      {
        "username": "傅军",
        "code": "0csL^8YA"
      },
      {
        "username": "杜丽",
        "code": "s*HG*llD"
      }
    ],
    "pageNo": 1
  },
  "msg": ""
}

部署

简单的选用了pm2来管理node进程;我就是懒别的我也不会

为了用jenkins部署后自动重启, 写了几个生硬关键的重启/启动/清空/列表命令

#package.json

"scripts": {
  ...
  "stopall": "npx pm2 stop all",
  "start": "npx pm2 start app.js",
  "reload": "npx pm2 reload 0",//本地用的, 部署用不上;
  "list": "npx pm2 list",
  "deleteall": "npx pm2 delete all"
},

然后部署的时候非常粗暴的执行下面三条命令

...
npm run stopall
npm run deleteall
npm run start

热重启什么的...好麻烦啊下次一定

附上mockjs规则地址: mockjs.com/examples.ht…