[轉] 先後端分離開發模式的 mock 平臺預研

引入

mock（模擬）: 是在項目測試中，對項目外部或不容易獲取的對象/接口，用一個虛擬的對象/接口來模擬，以便測試。

背景

先後端分離

• 先後端僅僅經過異步接口(AJAX/JSONP)來編程
• 先後端都各自有本身的開發流程，構建工具，測試集合
• 關注點分離，先後端變得相對獨立並鬆耦合

開發流程

• 後臺編寫和維護接口文檔，在 API 變化時更新接口文檔
• 後臺根據接口文檔進行接口開發
• 前端根據接口文檔進行開發
• 開發完成後聯調和提交測試

面臨問題

• 沒有統一的文檔編寫規範，致使文檔愈來愈亂，沒法維護和閱讀
• 開發中的接口增刪改等變更，須要較大的溝通成本
• 對於一個新需求，前端開發的接口調用和自測依賴後臺開發完畢
• 將接口的風險後置，耽誤項目時間

解決方法

• 接口文檔服務器 -- 解決接口文檔編輯和維護的問題
• mock 數據 -- 解決前端開發依賴真實後臺接口的問題

接口文檔服務器

功能

接口編輯功能

• 類型1：根據接口描述語法書寫接口，並保存爲文本文件，而後使用生成工具生成在線接文檔（HTML）
  -- 也有一些相似 Markdown 的接口文檔編輯器，參見：[There Are Four API Design Editors To Choose From Now][There Are Four API Design Editors To Choose From Now]。
  

• 類型2：提供在線的接口編輯平臺，進行可交互的接口編輯
  

接口查看功能

• 提供友好的接口文檔查看功能

用法

• 後臺開發人員進行接口文檔編寫
  -- 定義接口路徑、接口上傳字段、接口返回字段、字段含義、字段類型、字段取值
• 前端開發人員查看接口文檔

優勢

• 統一管理和維護接口文檔
  -- 提供了接口導入、接口模塊化、接口版本化、可視化編輯等功能
• 接口文檔規範，可讀性強，減小先後端接口溝通成本

前端 mock 方法回顧

前端開發過程當中，使用 mock 數據來模擬接口的返回，對開發的代碼進行業務邏輯測試。解決開發過程當中對後臺接口的依賴。

硬編碼數據

將 mock 數據寫在代碼中。

示例

// $.ajax({
// url: ‘https://cntchen.github.io/userInfo’, // type: 'GET', // success: function(dt) { var dt = { "isSuccess": true, "errMsg": "This is error.", "data": { "userName": "Cntchen", "about": "FE" }, }; if (dt.isSuccess) { render(dt.data); } else { console.log(dt.errMsg); } // }, // fail: function() {} // });

優勢

• 能夠快速修改測試數據

痛點

• 沒法模擬異步的網絡請求，沒法測試網絡異常
• 骯代碼，聯調前須要作較多改動，增長最終上真實環境的切換成本
  -- 添加網絡請求，修改接口、添加錯誤控制邏輯
• 接口文檔變化須要手動更新

請求攔截 & mock 數據

hijack（劫持）接口的網絡請求，將請求的返回替換爲代碼中的 mock 數據。

實例

jquery-mockjax

The jQuery Mockjax Plugin provides a simple and extremely flexible interface for mocking or simulating ajax requests and responses

優勢

• 能夠模擬異步的網絡請求
• 能夠快速修改測試數據

痛點

• 依賴特定的框架，如Jquery
• 增長最終上真實環境的切換成本
• 接口文檔變換須要手動更新

本地 mock 服務器

將 mock 數據保存爲本地文件。在前端調試的構建流中，用 node 開本地 mock 服務器，請求接口指向本地 mock 服務器，本地 mock 服務器 response mock 文件。

mock 文件

.mock
├── userInfo.json
├── userStars.json
├── blogs.json
└── following.json

接口調用

https://github.com/CntChen/userInfo --> localhost:port/userInfo

優勢

• 對代碼改動較小，聯調測試只須要改動接口 url
• 能夠快速修改測試數據

痛點

• json 文件很是多
• 接口文檔變化須要手動更新

代理服務器

• 使用 charles 或 fiddler 做爲代理服務器
• 使用代理服務器的 map（映射）& rewrite（重寫） 功能

map local

• 接口請求的返回映射爲本地 mock 數據
  https://github.com/CntChen/userInfo --> localPath/userInfo

• 編輯映射規則
  

map remote

• 接口請求的返回映射爲另外一個遠程接口的調用
  

rewrite

• 修改接口調用的 request 或 response，添加/刪除/修改 HTTP request line/response line/headers/body
  

• 解決跨域問題
  使用 map 後，接口調用的 response 不帶 CORS headers，跨域請求在瀏覽器端會報錯。須要重寫接口返回的 header，添加 CORS 的字段。
  

優勢

• 前端直接請求真實接口，無需修改代碼
• 能夠修改接口返回數據

痛點

• 須要處理跨域問題
• 一個變動須要代理服務器進行多處改動，配置效率低下
• 不支持 HTTP method 的區分
  -- CORS 的 preflight 請求(OPTION)也會返回數據
• 須要有遠程接口或本地 mock 文件，與使用本地 mock 文件相同的痛點

mock 平臺

接口文檔服務器

使用接口文檔服務器來定義接口數據結構

mock服務器

mock 服務器根據接口文檔自動生成 mock 數據，實現了接口文檔即API

優勢

• 接口文檔自動生成和更新 mock 數據
• 前端代碼聯調時改動小

缺點

• 可能存在跨域問題

業界實踐

公司實踐

沒有找到公司級別的框架，除了阿里的 RAP。可能緣由：

• 非關鍵性、開創性技術，沒有太多研究價值
• 許多大公司是小團隊做戰，沒有統一的 mock 平臺
• 已經有一些穩定的接口，並不存在後臺接口沒有開發完成的問題
  -- 而咱們想探究的問題是：先後端同時開發時的 mock

github 開源庫

• faker.js
  隨機生成固定字段的 mock 數據,如email，date，images等，支持國際化。

• blueprint

A powerful high-level API design language for web APIs.

一種使用類markdown語法的接口編寫語言，使用[json-schema][json-schema]和[mson][mson]做爲接口字段描述。有完善的工具鏈進行接口文件 Edit，Test，Mock，Parse，Converter等。

• swagger

Swagger是一種 Rest API 的簡單但強大的表示方式，標準的，語言無關，這種表示方式不但人可讀，並且機器可讀。能夠做爲 Rest API 的交互式文檔，也能夠做爲 Rest API 的形式化的接口描述，生成客戶端和服務端的代碼。 --[Swagger：Rest API的描述語言][Swagger：Rest API的描述語言]

定義了一套接口文檔編寫語法，而後能夠自動生成接口文檔。相關項目: Swagger Editor ，用於編寫 API 文檔。Swagger UI restful 接口文檔在線自動生成與功能測試軟件。點擊查看Swagger-UI在線示例。

• wireMock

WireMock is a simulator for HTTP-based APIs. Some might consider it a service virtualization tool or a mock server. It supports testing of edge cases and failure modes that the real API won't reliably produce.

商業化方案

• apiary
  商業化方案，blueprint開源項目的創造者。界面化，提供mock功能，生成各編程語言的調用代碼(跟 postman 的 generate code snippets相似)。

其餘實踐

API Evangelist(API 佈道者)

總結

對於先後端分離開發方式，已經有比較成熟的 mock 平臺，主要解決了2個問題：

• 接口文檔的編輯和維護
• 接口 mock 數據的自動生成和更新

後記

預研時間比較有限，有一些新的 mock 模式或優秀的 mock 平臺沒有覆蓋到，歡迎補充。
筆者所在公司選用的平臺是 RAP，後續會整理一篇 RAP 實踐方面的文章。
問題來了：你開發中的 mock 方式是什麼？

References

• 圖解基於node.js實現先後端分離

http://yalishizhude.github.io/2016/04/19/front-back-separation/
[圖解基於node.js實現先後端分離]:http://yalishizhude.github.io/2016/04/19/front-back-separation/

• TestDouble(介紹 mock 相關的概念)

http://martinfowler.com/bliki/TestDouble.html
[mock 相關的概念]:http://martinfowler.com/bliki/TestDouble.html

• There Are Four API Design Editors To Choose From Now

https://apievangelist.com/2014/11/21/there-are-four-api-design-editors-to-choose-from-now/
[There Are Four API Design Editors To Choose From Now]:https://apievangelist.com/2014/11/21/there-are-four-api-design-editors-to-choose-from-now/

• 聯調之痛--契約測試

http://www.ituring.com.cn/article/42460
[聯調之痛]:http://www.ituring.com.cn/article/42460

• Swagger：Rest API的描述語言

https://zhuanlan.zhihu.com/p/21353795
[Swagger：Rest API的描述語言]:https://zhuanlan.zhihu.com/p/21353795

• Swagger - 先後端分離後的契約

http://www.cnblogs.com/whitewolf/p/4686154.html
[Swagger - 先後端分離後的契約]:http://www.cnblogs.com/whitewolf/p/4686154.html

• Swagger UI教程 API 文檔神器 搭配Node使用

http://www.jianshu.com/p/d6626e6bd72c#
[Swagger UI教程 API 文檔神器 搭配Node使用]:http://www.jianshu.com/p/d6626e6bd72c#

END