Vue实战（三）Mock服务JSON Server

本文是Vue实战系列的第三篇文章，主要介绍Falcon项目所依赖的Mock服务JSON Server。
Falcon项目地址：https://github.com/thierryxing/Falcon

前言

由于Jaguar服务目前还没有任何的API输出，一边写前端功能，一边写后端API显然不利于整体的项目进展。所以我计划先定义好接口，然后将所有的API都先部署在一个Mock服务器上，等前端界面和功能流程完全走通后，再转过头来在Jaguar上编写对应的API。
说到这里，不禁想到前后端协作一直存在的一个效率瓶颈。

前后端协作的效率瓶颈

在前（客户端）后端协作开发中，有不少影响效率的地方，其中最为典型的就是：

1. 前端的界面和功能中，因为存在不少功能依赖后端数据接口的，所以需要等待后端给出。
2. 后端接口给出后，由于初期设计不合理，或联调中遇到特殊情况，或需求有变动，导致需要改写部分接口逻辑，所以需要等待并重新联调。

虽然每次等待的时间也许不长，但是这样的等待多了之后，势必会造成开发时间变得支离破碎，开发流程常常中断，而一旦中断，重新进入开发状态也需要花一定的时间，相信大家对此都有所体会。
其带来的严重后果就是，时间一点一点被浪费掉了，实际的开发时间比预计的要长出不少，更惨的是由于项目的工期之前已经定好，所以大家就只能加班了，由于这样的“教训”，大家在下次估算时间的时候，往往会增加更多的Buffer，从而导致整个团队的效率降低。

理想情况

那么上面的这种情况能否避免呢？答案是肯定的。关于前后端协作的理想状态，我认为是：

开始前

在项目开始前各个端的开发同学坐在一起干两件事：

1. 讨论并定义好涉及到的接口，接口中需要的参数，字段，类型及各种状态处理
2. 形成一份接口文档供多方使用

开发中

到此为止，双方分开，前端去写UI部分的功能，涉及到后端接口的全部由Mock服务给出，前端在Mock服务中增加自己所需要的各种Json数据，模拟各种状态的逻辑处理。

联调阶段

最后联调时将Mock服务的地址换成后端联调环境的地址，即可完成全部功能，中间不存在等待的情况。由于双方都不会被打断，团队效率由此提升。

当然，我描述的情况过于理想，在开发工程中难免会遇到不清楚或双方都没有考虑到的问题，需要随时沟通的，即便是这样，沟通清楚后前端修改Mock接口，后端修改业务接口即可，也不存在互相等待的情况，效率依然能有显著的提升。

Mock服务

如果要达到以上描述的理想情况，前端同学需要在开发中引入Mock服务，这样可以最大限度的不依赖后端输出，从而避免了等待。
一个标准的Mock服务需要满足如下条件：

1. 提供能够快速部署的基础Http服务
2. 能够方便而灵活的配置路由，最好提供Restful支持
3. 能够方便的制造Mock数据
4. 能够处理简单业务逻辑

JSON Server

这里推荐一款非常强大的Mock服务-JSON Server
https://github.com/typicode/json-server
JSON Server除了满足以上4点外，还可以：

1. 支持路由参数过滤数据
2. 支持分页，排序和全文搜索
3. 支持JSONP，支持Https
4. 支持两级路由资源嵌套

除此之外，更加令人惊喜的是，其能够和webpack做到无缝集成，可以通过配置和npm server一起启动，安装方法很简单，不再赘述。配置方法如下：

第一步

在项目的根目录下创建一个mock文件夹，然后在里面增加一个db.json文件，在里面写入所有的mock数据，比如：

  "projects": [
    {
      "id": 4,
      "title": "Gengmei",
      "icon": "http://git.gengmei.cc/uploads/project/avatar/310/512-new.png",
    },
  "environments": [
    {
      "id": 1,
      "name": "Production",
      "projectId": 4
    },
    {
      "id": 2,
      "name": "Test",
      "projectId": 4
    }
  ]]

第二步

在package.json中的script中增加命令mock和mockdev：

 "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "mock": "json-server mock/db.json --port 9090", // 配置db路径和端口
    "mockdev": "npm run mock & npm run dev",
  },

这样就可以通过

npm run mockdev

的方式同时启动npm服务和mock服务了。
如果我想访问第一步中配置的projects列表，那么地址为：

http://localhost:9090/projects

访问id为4的project，地址为：

http://localhost:9090/projects/4

由于支持路由资源嵌套，而environments下存在projectId为4的对象，所以访问id为4的project下的environments地址为：

http://localhost:9090/projects/4/enviroments

第三步

在config下的index.js中，增加proxyTable，将所有api请求转发到mock server上

    proxyTable: { // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://localhost:9090',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

进阶

如果是一个简单的项目，以上的三步基本满足了对mock服务的基本要求，但是稍微复杂些的项目往往会遇到如下几个情况：

1. 默认情况下JSON Server启动命令中只能带一个db.json，而实际项目中，如果所有接口数据都写在一个json文件中，显然不利于维护，最好每类接口对应一个json文件，如下图

2. 通常情况下，接口返回的数据不仅包含业务数据，还包含状态数据和错误消息，一个常见的接口返回数据格式如下：

{
    data: {}, //业务数据
    status: 0,
    msg: ''
  }

那么不可能把这些数据写在每个mock接口中，维护起来成本太高，所以需要找一个地方统一处理。

为了解决以上两个问题，首先创建一个server.js文件，在里面编写对应的逻辑：

const jsonServer = require('json-server')
const server = jsonServer.create()

// Support middleware
const middleware = jsonServer.defaults()
server.use(middleware)

// 支持加载多个db json文件
const _ = require('underscore')
const path = require('path')
const fs = require('fs')
const mockDir = path.join(__dirname, 'data')
const base = {}
const files = fs.readdirSync(mockDir)
files.forEach(function (file) {
  _.extend(base, require(path.resolve(mockDir, file)))
})
const router = jsonServer.router(base)
server.use(router)

// 返回自定义格式数据
router.render = (req, res) => {
  console.log(res.locals.data)
  res.jsonp({
    data: res.locals.data,
    status: 0,
    msg: ''
  })
}

server.listen(9090, () => {
  console.log('JSON Server is running')
})

同时，修改package.json中的script为：

 "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "mock": "node mock/server.js", 
    "mockdev": "npm run mock & npm run dev",
  },

除此之外，简单的数据校验，用户权限验证等逻辑也可以写到server.js中，如：

server.use((req, res, next) => {
 if (isAuthorized(req)) { // add your authorization logic here
   next() // continue to JSON Server router
 } else {
   res.sendStatus(401)
 }
})

Post请求

对于Post请求，需要在server.js中进行处理，比如：访问登录接口/account/login之后，返回当前登录用户的信息。
首先在db中增加返回的信息内容：

  "login": {
    "id": 33,
    "name": "邢天宇",
    "avatar_url": "https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg",
    "created_at": "17 Aug 16:22",
    "platform": "ios"
  },

然后在server.js中增加如下代码：

// 处理登录逻辑
server.post('/account/login', function (req, res) {
  let db = router.db 
  let data = db.get('login').value() //这里的login就是db中的key
  res.jsonp({
    data: data,
    status: 0,
    message: ''
  })
})

关于JSON Server完整的例子在此:
https://github.com/thierryxing/Falcon/tree/mock

结语

经过本人及团队内部实际使用，前端同学完全可以在不依赖后端的情况下，完成所有的界面和功能编写。
下一步，准备将其推广到移动客户端团队中使用。