使用 mock.js 給前端生成需要的資料

soul_12138發表於2021-08-24

Mock的意義

通過 Mock 事先編寫好 API 的資料生成規則，由工具動態生成 API 的返回資料。開發人員通過訪問 Mock 來獲得頁面所需要的資料，就可以輕鬆地完成對接工作。前後端人員只需要定義好介面文件就可以開始並行工作，互不影響，只在最後的聯調階段往來密切；

後端與後端之間如果有介面耦合，也同樣能被Mock解決。

測試過程中如果遇到依賴介面沒有準備好，同樣可以藉助Mock，不會出現一個團隊等待另一個團隊的情況。

這樣的話，開發自測階段就可以及早開展，從而發現缺陷的時機也提前了，有利於整個產品質量以及進度的保證。

在APIPOST中使用Mock

APIPOST可以讓你在沒有後端程式的情況下能真實地返回介面資料，你可以用APIPOST實現專案初期純前端的效果演示，也可以用APIPOST實現開發中的資料模擬從而實現前後端分離。在使用APIPOST之前，你的團隊實現資料模擬可能是下面的方案中的一種或者多種：

本地手寫資料模擬，在前端程式碼中產生一大堆的mock程式碼。
利用mockjs或者canjs的can-fixture實現ajax攔截，本地配置必要的json規則。
後端在Controller層造假資料返回給前端。

上面的方式中，不管哪一種方式，都會要求開發人員寫一些跟專案本無任何關聯的程式碼，第一個和第二個方式還會需要前端專案在本地引入不必要的js檔案。

使用APIPOST 的Mock 服務

您可以通過APIPOST 提供的Mock 服務實現上述功能。

編寫Mock 規則

在APIPOST中，Mock 規則模板支援型別豐富（5.4版本起）。

基本資料(固定json結構)

{
  "code": "0",
  "data": {
    "name": "張三丰",
    "age": 100
  },
  "desc": "成功"
}

基本資料(Mock隨機json結構)

{
  "code": "0",
  "data": {
    "list|20": [{
      "name": "@name",
      "age": "@integer(2)"
    }],
    "url": "https://echo.apipost.cn"
  },
  "desc": "成功"
}

RESTFUL邏輯資料

某些場景中，我們可能需要根據介面的入參規則，加入適當的邏輯處理後再返回資料。一個簡單的場景就是登入場景，需要根據使用者名稱密碼，判斷是否登入成功。再或者，我們需要根據產品ID動態返回產品資訊，等等。

現在，ApiPost 的Mock 服務提供了這種場景的解決方案。
以下示例中，我們用到了 _req.body物件，其含義是：

當 post 請求以 x-www-form-urlencoded 或者application/json 方式提交時，我們可以拿到請求的引數物件。

{
“code”: “0000”,
“data”: {
“verifySuccess”: function() {
let body = _req.body;
return body.username === ‘admin’ && body.password === ‘123456’;
},
“userInfo”: function() {
let body = _req.body;
if (body.username === ‘admin’ && body.password === ‘123456’) {
return Mock.mock({
username: “admin”,
email: “@email”,
address: “@address”
});
} else {
return null;
}
},
},
“desc”: “成功”
}