前端mock數據常用方案

本文介紹幾種前端常用的數據mock方案，通過了解自動化mock的方式，減少重復工作，減少真實聯調問題

1： 接口管理工具

代表：

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

swagger

moco（參考, 和前端處理mock類似，json假數據+服務）

yapi(去哪兒網開發yapi 官網)

優缺點(接口管理工具)

優點：

1. 配置功能強大，接口管理與 Mock 一體，后端修改接口 Mock 也跟着更改，可靠
2. 有統一的接口管理后台，查找使用方便。

缺點：

1. 配置復雜，依賴后端，可能會出現后端不願意出手，或者等配置完了，接口也開發出來了的情況。mock數據都由后台控制，有什么異常情況 前端同學基本上使不上力。有背前后台分離的原則。
2. 一般會作為大團隊的基礎建設而存在， 沒有這個條件的話需慎重考慮
3. 增加后台負擔，與其讓后台處理mock數據相關問題，倒不如加快提供真實接口數據。

---

2：本地 node 服務器

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

• 可以獨立使用，也可以作為node服務的中間件 server.use(db)
• db可以是json文件(更直觀)，也可以使js文件(靈活性更高)
• 可以設置跨域、開啟gzip、設置延時、日志、指定路由等。 json-server [options] <source>
• 可命令行啟動或 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模式）

優點：

1. 配置簡單，json-server 甚至可以 0 代碼 30 秒啟動一個 REST API Server
2. 自定義程度高，一切盡在掌控中
3. 增刪改查真實模擬

缺點：

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

---

3：請求攔截[MOCKJS]

代表：Mock.js

特點：

• 通過攔截特定的AJAX請求，並生成給定的數據類型的隨機數，以此來模擬后端同學提供的接口。
• 使用數據模板定義，隨機生成定義數據的自由度大。使用MockJS的Random工具類的方法定義，這種方式自由度小，只能隨機出MockJS提供的數據類型。
• 一般配合其它庫使用或單獨在項目中使用或者通過反向代理來實現。

使用格式說明:

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')
"[e-mail]"

隨機生成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()
// => "22:44:56"
Mock.mock('@time')
// => "01:48:17"

按規則生成字符串

// 指定范圍的數量
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
        }
    ]
}

語法規范

> 數據模板定義

定義規則：'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

1. 全局使用

npm install mockjs -g
random -h 查看可使用的模板

2. 局部使用

隨機生成數據

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

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

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

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

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

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

> Mock.toJSONSchema( template )

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

> Mock.setup( settings )

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

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

優缺點(MOCKJS)

優點：

1. 與前端代碼分離
2. 可生成隨機數據

缺點：

1. 數據都是動態生成的假數據，無法真實模擬增刪改查的情況
2. 只支持 ajax，不支持 fetch

---

4： 抓包工具

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

• 將 URL 映射到本地文件；(調試APP混合開發等)
• debugger某個url，修改響應數據。
• 攔截后返回本地的數據，如Charles，直接采用Map locale 或者 Map Remote的方式。

1. 右擊url, copy response
2. 在本地新建mock json數據，然后將response粘貼修改
3. 再次訪問url，觀察api的變化。

優缺點：

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

---

5： 組合模式

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

REST API

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

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

• 點 我 了解 patch vs put

---

其它方案參考

• apifox

API 文檔、調試、Mock、自動化測試一體化協助平台
支持 HTTP、TCP、RPC,

• apipost

支持團隊協作、可直接生成文檔的API調試、管理工具

常用解決方案：

1. 使用 Swagger 管理 API 文檔
2. 使用 Postman 調試 API
3. 使用 RAP 等工具 Mock API 數據
4. 使用 JMeter 做 API 自動化測試

• jsonplaceholder

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

• JSON Schema 數據校驗json-schema.org