tags: 前后端分離 mock AJAX 工作流 前端
引入
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]。
接口書寫轉換為接口文檔.png -
類型2：提供在線的接口編輯平臺，進行可交互的接口編輯
接口文檔服務器.png
接口查看功能
- 提供友好的接口文檔查看功能
用法
- 后臺開發人員進行接口文檔編寫
-- 定義接口路徑、接口上傳字段、接口返回字段、字段含義、字段類型、字段取值 - 前端開發人員查看接口文檔
優點
- 統一管理和維護接口文檔
-- 提供了接口導入、接口模塊化、接口版本化、可視化編輯等功能 - 接口文檔規范，可讀性強，減少前后端接口溝通成本
前端 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 數據。
實例
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 文件非常多
- 接口文檔變化需要手動更新
代理服務器
map local
- 接口請求的返回映射為本地 mock 數據
https://github.com/CntChen/userInfo-->localPath/userInfo
-
編輯映射規則
map rule.png
map remote
-
接口請求的返回映射為另一個遠程接口的調用
map remote.png
rewrite
-
修改接口調用的 request 或 response，添加/刪除/修改 HTTP request line/response line/headers/body
rewrite data.png -
解決跨域問題
使用 map 后，接口調用的 response 不帶 CORS headers，跨域請求在瀏覽器端會報錯。需要重寫接口返回的 header，添加 CORS 的字段。
rewrite cors.png
優點
- 前端直接請求真實接口，無需修改代碼
- 可以修改接口返回數據
痛點
- 需要處理跨域問題
- 一個變更需要代理服務器進行多處改動，配置效率低下
- 不支持 HTTP method 的區分
-- CORS 的 preflight 請求(OPTION)也會返回數據 - 需要有遠程接口或本地 mock 文件，與使用本地 mock 文件相同的痛點
mock 平臺
接口文檔服務器
使用接口文檔服務器來定義接口數據結構
mock服務器
mock 服務器根據接口文檔自動生成 mock 數據，實現了接口文檔即API
優點
- 接口文檔自動生成和更新 mock 數據
- 前端代碼聯調時改動小
缺點
- 可能存在跨域問題
業界實踐
公司實踐
沒有找到公司級別的框架，除了阿里的 RAP。可能原因：
- 非關鍵性、開創性技術，沒有太多研究價值
- 許多大公司是小團隊作戰，沒有統一的 mock 平臺
- 已經有一些穩定的接口，并不存在后臺接口沒有開發完成的問題
-- 而我們想探究的問題是：前后端同時開發時的 mock
github 開源庫
A powerful high-level API design language for web APIs.
一種使用類markdown語法的接口編寫語言，使用[json-schema][json-schema]和[mson][mson]作為接口字段描述。有完善的工具鏈進行接口文件 Edit，Test，Mock，Parse，Converter等。
Swagger是一種 Rest API 的簡單但強大的表示方式，標準的，語言無關，這種表示方式不但人可讀，而且機器可讀。可以作為 Rest API 的交互式文檔，也可以作為 Rest API 的形式化的接口描述，生成客戶端和服務端的代碼。 --[Swagger：Rest API的描述語言][Swagger：Rest API的描述語言]
定義了一套接口文檔編寫語法，然后可以自動生成接口文檔。相關項目: Swagger Editor ，用于編寫 API 文檔。Swagger UI restful 接口文檔在線自動生成與功能測試軟件。點擊查看Swagger-UI在線示例。
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.
商業化方案
其他實踐
總結
對于前后端分離開發方式，已經有比較成熟的 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.lxweimin.com/p/d6626e6bd72c#
[Swagger UI教程 API 文檔神器 搭配Node使用]:http://www.lxweimin.com/p/d6626e6bd72c#
