为何先后端分离了，你比从前更痛苦？

你有没有遇到过：

• 前端代码刚写完，后端的接口又变了。

• 接口文档永远都是不对的。

• 测试工做永远只能临近上线才能开始。

 

为何先后端分离了，你比从前更痛苦？

　　先后端分离早已经不是新闻，当真正分离以后确遇到了更多问题。要想解决如今的痛，就要知道痛的缘由：

为何接口会频繁变更？

　　设计之初没有想好。 这须要提升需求的理解能力和接口设计能力。

　　变更的成本较低。

　　德国有句谚语：“朝汤里吐口水。” 只有这样，才能让人们放弃那碗汤，中止不合理的行为。先后端同窗坐在一块儿工做的时候效率会有提高，当后端同窗接口变化时，只须要口头上通知一下便可，咱们没有文档，咱们很敏捷啊。没错，咱们须要认可这样配合开发的效率会很高，可是频繁的变更会致使不断返工，形成了另外一种浪费，这种浪费是能够被减小，甚至是被消除的。

为何接口文档永远都是不对的？

　　接口文档在定接口时起到必定做用，写完接口就没有用了。后面接口的频繁变化，文档一定会永远落后于实际接口，维护文档的带来了必定的成本却没能带来价值。除非对外提供的接口，不然文档谁来看呢？没人看，用处又在哪？

　　有些公司干脆丢掉接口文档，说咱们要拥抱敏捷。

　　因此接口文档落后的缘由在于没有给咱们带来价值。

为何测试工做永远只能临近上线才能开始？

　　一个需求，后端开发 4 天，前端开发 4 天，联调 4 天，留给测试同窗只有2天时间甚至更少，测不完只能带 bug 上线。

　　在开发阶段测试同窗没法介入，接口在变，前端也在变， “提测” 以前只能喝茶，“提测” 以后又忙的要命。

　　自动化？想都别想，空有一身好本领，在 “拥抱变化” 以后只能手工测试。偶尔还要拉上前台美眉客串一下测试小妹。手工测试枯燥乏味，乏味的工做就容易出错，并且还不能快速重复，没法对测试过的功能快速回归。

 

怎么破？

　　解决以上问题要让接口文档发挥价值，提升变更接口的成本，测试尽早介入。

　　接口文档发挥出价值，就要赋予契约的意义，就如同签字画押谁也不准变，来约束咱们只认契约不认人。

　　契约应该由前端同窗来驱动，先后端共同协商。因为前端同窗与 UX 接触比较紧密，更了解页面所需的数据以及总体的 User Journey，前端同窗驱动会更加合理。

　　契约敲定以后要帮助咱们生成 Mock Server（后面咱们会介绍一个工具），先后端同窗就要依照契约各自开发。Mock Server 可暂时替代后台服务，帮组前端开发，同时，测试同窗也能够依照契约文档来编写测试脚本，使用 Mock Server 进行脚本验证。

　　当后端接口发生变化除了口头通知之外必须修改契约，前端同窗和测试同窗才能各自修改。如此一来修改契约的成本变高，人们在定契约时则会更加慎重，也会促使咱们提升接口的设计能力。

　　看到图中没有 “联调” 的环节，并非画错了，而是 “联调“ 再也不是一项工做，在部署后只须要更改代理的配置便可。甚至使用现代前端框架（如，vue 或者 react）只要在开发时配置一下，以后都不须要调整任何代码。

　　“提测” 呢？测试一直都在进行，也就再也不有一个 ”提测“ 的环节，不管先后端任意一方完成开发，测试同窗均可以进行测试。

　　理论终于扯完了，提及来容易作起来难啊，须要工具来帮助咱们。接口描述的工具备不少，比较知名的 Swagger 和 Raml，我我的更倾向于 Raml 。

　　描述工具生成文档还不够，还要生成 Mock Server，若是描述工具和 Mock Server 是分离又带来了额外的工做，好在有她——raml-mocker。

 

raml-mocker

　　raml-mocker (https://github.com/xbl/raml-mocker) 是一个基于 Raml 使用 Nodejs 开发的 Mock Server 工具，使用 Raml 描述接口中设置 response 的 example 指令便可，raml-mocker 会解析 Raml 文件，并启动一个 Mock Server，将 example 的内容返回给浏览器。

开始

初始化项目

git clone https://github.com/xbl/raml-mocker-starter.git raml-api
cd raml-api
git remote rm origin

　　

安装

yarn
# or
npm install

　　

启动 mock server

yarn start
# or
npm start

　　

测试

curl -i http://localhost:3000/api/v1/users/1/books/
# or
curl -i http://localhost:3000/api/v1/users/1/books/1

　　

生成 API 可视化文档

yarn run build
# or
npm run build

　　

此功能使用了raml2html。

配置 .raml-config.json

{
  "controller": "./controller",
  "raml": "./raml",
  "main": "api.raml",
  "port": 3000,
  "plugins": []
}

　　

• controller: controller 目录路径，在高级篇中会有更详细说明
• raml: raml 文件目录
• main: raml 目录下的入口文件
• port: mock server 服务端口号
• plugins: 插件

入门篇：Mock Server

raml-mocker 只须要在response 添加 example:

/books:
  /:id:
    post:
      body:
        application/json:
          type: abc
      responses:
        200:
          body:
            application/json:
              type: song
              # 返回的 Mock 数据
              example: !include ./books_200.json
books_200.json

{
  "code": 200,
  "data": [
    {
      "id": 1,
      "title": "books title",
      "description": "books desccription1"
    },
    {
      "id": 2,
      "title": "books title",
      "description": "books desccription2"
    }
  ]
}

字由https://www.wode007.com/sites/73248.html 中国字体设计网https://www.wode007.com/sites/73245.html

经过 curl 请求：

curl -i http://localhost:3000/api/v1/users/1/books

　　

就会获得 example 的数据，惟一不足是没法根据参数动态返回不一样数据。别急，请往下看。

高级篇：动态 Server

若是静态的 Mock 数据不能知足你的需求，Raml-mocker 还提供了动态的功能。

在 raml 文档中添加 (controller) 指令，便可添加动态的 Server，如：

/books:
  type:
    resourceList:
  get:
    description: 获取用户的书籍
    (controller): user#getBook
    responses:
      200:
        body:
          type: song[]
          example: !include ./books_200.json

　　

在文档中 (controller) 表示 controller 目录下 user.js 中 getBook 函数。

controller/user.js

exports.getBook = (req, res, webApi) => {
  console.log(webApi);
  res.send('Hello World!');
}

　　

Raml-mocker 是在 expressjs 基础上进行开发，req、res 能够参考 express 文档。

webApi 会返回文档中的配置：

{
  "absoluteUri": "/api/:version/users/:user_id/books",
  "method": "get",
  "controller": "user#getBook",
  "responses": [
    {
      "code": "200",
      "body": "... example ...",
      "mimeType": "application/json"
    }
  ]
}

　　

如此，raml-mocker 提供了更多可扩展空间，咱们甚至能够在 controller 中实现必定的逻辑。

插件

Raml-mocker 提供了插件机制，容许咱们在不使用 controller 指令的时候对 response 的内容进行处理，例如使用 Mockjs。

.raml-config.json

{
  "controller": "./controller",
  "raml": "./raml",
  "main": "api.raml",
  "port": 3000,
  "plugins": ["./plugins/mock.js"]
}

./plugins/mock.js

var { mock } = require('mockjs');

module.exports = (body) => {
  try {
    return mock(JSON.parse(body));
  } catch(e) {}
  return body;
}

Enjoy it！

　　

 

总结

　　先后端分离可让咱们的职责更清晰，打破前端发挥的局限，工做解耦以后能更好的提升开发效率。然而由于没有规划好开发流程，致使了咱们没有发挥出其应有的价值，形成了更多的浪费。

　　raml-mocker 可以帮助咱们在工具上解决必定的问题，更重要的是持续改进的思想，只有团队的思想是统一的才有可能达到快速交付