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

時間 2019-11-05

標籤後端分離開發模式 mock 平臺简体版

原文原文鏈接

原文地址html

引入

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

背景

先後端分離

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

開發流程

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

面臨問題

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

解決方法

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

接口文檔服務器

功能

接口編輯功能

類型1：根據接口描述語法書寫接口，並保存爲文本文件，而後使用生成工具生成在線接文檔（HTML）
-- 也有一些相似 Markdown 的接口文檔編輯器，參見：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和mson做爲接口字段描述。有完善的工具鏈進行接口文件 Edit，Test，Mock，Parse，Converter等。

swagger

Swagger是一種 Rest API 的簡單但強大的表示方式，標準的，語言無關，這種表示方式不但人可讀，並且機器可讀。能夠做爲 Rest API 的交互式文檔，也能夠做爲 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.