前言

工具好不好用，關鍵在于用。

肯定有很多前端程序猿聯調前很悠閑，但聯調階段持續加班，直到提測、上線。

這其中緣由不外乎需求不明確等原因，但如果我們能在聯調前完成大部分工作，相信就能準點下班啦。如果你也有類似的現象，希望能看完此篇，或許能讓你在不協調的工作中解放出來。

背景

在開發環境中，由于后端與前端并行開發、或者前端需要等待后臺接口開發。接口直接嚴重依賴，生成數據的業務邏輯復雜等，嚴重影響了開發效率。

因此學會使用最適合自己的 Mock 數據的方法就非常重要。

下面介紹了幾種常用的mock方案，通過了解自動化mock的方式，減少重復工作，減少真實聯調問題，我們可以根據開發場景，選擇并配置最合適自己的方案。

六類常用的MOCK方案說明

方案①：代碼侵入 (實際開發中最常用，但不推薦)

特點：直接在代碼中寫死 Mock 數據，或者請求本地的 JSON 文件
優點：無
缺點：

和其他方案比 Mock 效果不好

與真實 Server 環境的切換非常麻煩，一切需要侵入代碼切換環境的行為都是不好的

方案②：接口管理工具

代表：

rap[1]（阿里，已停止維護，使用rap2）

地址: https://github.com/thx/RAP

swagger[2]

地址:https://swagger.io/

moco[3]（和前端處理mock類似，json假數據+服務）

地址:https://github.com/dreamhead/moco

yapi[4](去哪兒網開發yapi 官網)

地址：https://github.com/YMFE/yapi

優缺點(接口管理工具)

優點：

配置功能強大，接口管理與 Mock 一體，后端修改接口 Mock 也跟著更改，可靠

有統一的接口管理后臺，查找使用方便。

缺點：

配置復雜，依賴后端，可能會出現后端不愿意出手，或者等配置完了，接口也開發出來了的情況。mock數據都由后臺控制，有什么異常情況 前端同學基本上使不上力。有背前后臺分離的原則。

一般會作為大團隊的基礎建設而存在， 沒有這個條件的話需慎重考慮

增加后臺負擔，與其讓后臺處理mock數據相關問題，倒不如加快提供真實接口數據。

方案③：本地 node 服務器

代表：json-server[5]
原理：使用lowdb，操作本地小型的數據庫(遵循 REST API)。特點：

可以獨立使用，也可以作為node服務的中間件server.use(db)

db可以是json文件(更直觀)，也可以使js文件(靈活性更高)

可以設置跨域、開啟gzip、設置延時、日志、指定路由等。json-server [options]

可命令行啟動或json-server.json配置后直接啟動

可以自定義路由映射(key為真實路由、value為mock路由)

輕而易舉的實現后臺功能

過濾：GET /list?name.age=18；
分頁:/users?_page=3&_limit=5
排序：/users?_sort=id&_order=desc
分隔：/users?_start=2&_end=5
運算：使用_gte 或_lte 選取一個范圍、使用_ne 排除一個值、使用_like 進行模糊查找(支持正則表達式)
......

服務管理

增刪改查參考postman示例。（注意body-raw要選擇json模式）

優點：

配置簡單，json-server 甚至可以 0 代碼 30 秒啟動一個 REST API Server

自定義程度高，一切盡在掌控中

增刪改查真實模擬

缺點：

與接口管理工具相比，無法隨著后端 API 的修改而自動修改

地址：https://github.com/typicode/json-server

方案④：請求攔截[MOCKJS]

代表：Mock.js[6]

特點：

通過攔截特定的AJAX請求，并生成給定的數據類型的隨機數，以此來模擬后端同學提供的接口。

使用數據模板定義，隨機生成定義數據的自由度大。使用MockJS的Random工具類的方法定義，這種方式自由度小，只能隨機出MockJS提供的數據類型。

一般配合其它庫使用或單獨在項目中使用或者通過反向代理來實現。

地址：http://mockjs.com/

使用格式說明:

Mock.mock( rurl?, rtype?, template|function( options ) )

rurl：可選，攔截的url地址，可以是字符串或正則(常用)

rtype: 可選，攔截的請求類型，字符串（對大小寫敏感，必須小寫）。

template|function( options )：必須，攔截后返回的數據。template一般為json對象類型；function在return時需要返回template，其中option包含請求的url、type和body屬性

只傳template，則執行Mock.mock后返回的是``template的實際結果``。

簡單示例展示：

隨機生成顏色

Mock.mock('@color')
"#f279ba"

隨機生成郵箱

Mock.mock('@email')
"k.fxnx@newvwi.gf"

隨機生成ip

Mock.mock('@ip')
"44.122.28.106"

隨機生成區域地址

Mock.mock('@region')
"東北"

還能隨機生成圖片（并可傳參配置圖片大小、顏色等）

Random.image()

隨機生成日期時間

Random.date()
//=>"2020-10-23"
Random.date('yyyy-MM-dd')
//=>"1998-01-29"
Random.time()
//=>"2256"
Mock.mock('@time')
//=>"0117"

按規則生成字符串

//指定范圍的數量
Mock.mock({"string|1-10":"★"})//執行后
{"string":"★★"}//隨機生成數量為1-10個'*'字符串

//固定數量
Mock.mock({"string|3":"*"})//執行后
{"string":"***"}//生成指定數量的'*'（示例是3個）字符串

生成指定范圍內的數字

//整數
Mock.mock({"number|1-100":100})//執行后
{"number":84}//生成1-100范圍內的數字

//小數
Mock.mock({"number|1-100.1-10":1})//執行后
{"number":72.15917}//生成1-100的數字，隨機保留1-10位小數

生成隨機的對象數量

Mock.mock({"object|2-4":{
"110000":"北京市",
"120000":"天津市",
"130000":"河北省",
"140000":"山西省"
}})
//執行后，隨機獲取對象中的2-4項
{"object":{
"120000":"天津市",
"130000":"河北省"
}}

生成指定數量的數組

Mock.mock({"array|1":["AMD","CMD","UMD"]})
{"array":"CMD"}//隨機獲取對象中的一項

生成對象數組

// list指定了數組當中的對象數量，最少一項，最多10項。
Mock.mock({
//屬性list的值是一個數組，其中含有1到10個元素
'list|1-10':[{
//屬性id是一個自增數，起始值為1，每次增1
'id|+1':1
}]
})
//隨機的結果
{
"list":[
{
"id":1
},
{
"id":2
}
]
}

......

更多示例可查看官方鏈接: http://mockjs.com/examples.html

語法規范

> 數據模板定義

定義規則：'key|rules': value

屬性值的數據類型可以是Number、Boolean、String、Object、Array、Function、Null，不可以是Undefined

'name|min-max':value
'name|count':value
'name|min-max.dmin-dmax':value
'name|min-max.dcount':value
'name|count.dmin-dmax':value
'name|count.dcount':value
'name|+step':value
'regexp':/d{5,10}/,

攔截接口返回示例：

步驟：
1.創建mock.js文件
//正則匹配/notification/count/的接口
Mock.mock(/notification/count/,{
"code":200,
"msg":"success",
"data":{
"count":3
}
})
2.在入口中引入mock即可

其它優化：
在npm script中增加命令并添加mock環境變量，開發環境中用該命令啟動。
在入口文件中使用mock環境變量判斷是否加載mock.js，使mock數據和業務代碼徹底分離。

> 查看和使用random

全局使用

npminstallmockjs-g
random-h查看可使用的模板

局部使用

隨機生成數據

Mock.mock( { email: '@email' } )占位符 等同于 調用了Mock.Random.email(), 隨機生成email。

還可隨機生成圖片、顏色、地址、網址、自增數等。

3.擴展模板（自定義MOCK數據的模板）

Random.extend({
constellation:function(date){
varconstellations=['白羊座','金牛座','雙子座','巨蟹座','獅子座','處女座','天秤座','天蝎座','射手座','摩羯座','水瓶座','雙魚座']
returnthis.pick(constellations)
}
})

> Mock.valid(template, data) 校驗數據

vartempObj={
"user|1-3":[{'name':'@name','id|28-338':88}]
};
varrealData={"user":[{'name':'張三','id':90}]};
//校驗通過返回空數據，不通過則返回原因。（可以有多條原因，因此返回的是數組對象結構）
console.log(Mock.valid(tempObj,realData));

> Mock.toJSONSchema( template )

把 Mock.js 風格的數據模板template轉換成JSON Schema[11]。

> Mock.setup( settings )

配置攔截 Ajax 請求時的行為。支持的配置項有：timeout。

Mock.setup({
timeout:400
})
Mock.setup({
timeout:'200-600'
})

優缺點(MOCKJS)

優點：

與前端代碼分離

可生成隨機數據

缺點：

數據都是動態生成的假數據，無法真實模擬增刪改查的情況

只支持 ajax，不支持 fetch

方案⑤：抓包工具

利用Charles、Fiddler等代理工具，
常見的處理方式有

將 URL 映射到本地文件；(調試APP混合開發等)

debugger某個url，修改響應數據。

攔截后返回本地的數據，如Charles，直接采用Map locale 或者 Map Remote的方式。

右擊url, copy response

在本地新建mock json數據，然后將response粘貼修改

再次訪問url，觀察api的變化。

優缺點：

優點：mock便于混合開發的問題排查、線上問題排查等。
缺點：調試相對繁瑣。

方案⑥：組合模式

代表：easy-mock（提供在線服務和接口代理，支持mockjs、Swagger、restapi風格）
node框架生成器 +json-server+ mockjs。

REST API

URI 代表 資源/對象，METHOD 代表行為www.ruanyifeng.com/blog/2014/0…[15]

GET/tickets//列表
GET/tickets/12//詳情
POST/tickets//增加
PUT/tickets/12//替換
PATCH/tickets/12//修改
DELETE/tickets/12//刪除
資源負數名稱表示對應表的資源集合，方法動詞。

其它方案參考

apifox

API 文檔、調試、Mock、自動化測試一體化協助平臺[17]
看評論推薦的人還真不少，感興趣的小伙伴可以嘗試一下。支持 HTTP、TCP、RPC,(2020-12-28首版發布)

常用解決方案：

使用 Swagger 管理 API 文檔

使用 Postman 調試 API

使用 RAP 等工具 Mock API 數據

使用 JMeter 做 API 自動化測試

jsonplaceholder

很方便，直接fetch遠程的數據即可，高效易用jsonplaceholder官方文檔

地址：https://jsonplaceholder.typicode.com

最后

Mock不只是mock數據，還可以mock功能的。我們通過使用Mock盡可能的完善功能，才能在聯調時事半功倍。

審核編輯：彭菁