推薦一個線上介面Mock工具fastmock

龔明華發表於2019-02-16
MockAST

如果想直接進入實戰請猛戳這裡fastmock線上地址www.fastmock.site

fastmock可以讓你在沒有後端程式的情況下能真實地線上模擬ajax請求，你可以用fatmock實現專案初期純前端的效果演示，也可以用fastmock實現開發中的資料模擬從而實現前後端分離。如下面的介面

您可以直接在瀏覽器開啟上面的連結或者用ajax請求檢視返回的資料

在使用fastmock之前，你的團隊實現資料模擬可能是下面的方案中的一種或者多種

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

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

// 產品配置
  {
    url: `/pms/product/list`,
    on: true,
    type: `get`,
    resp: Mock.mock({
      `body`: {
        `currentPage`: 1,
        `isMore`: 0,
        `pageSize`: 15,
        `resultList|10`: [
          {
            `productNo`: `11111`,
            `productName|1`: [`產品名稱1`, `產品名稱2`, `產品名稱3`, `產品名稱4`, `產品名稱5`],
            `productType|1`: [`1`, `2`, `3`, `4`, `5`],
            `status|1`: [`1`, `2`],
            `gmtCreate`: `@DATETIME("yyyy-MM-dd HH:mm:ss")`,
            `gmtModified`: `@now("yyyy-MM-dd HH:mm:ss")`,
            `createUserCode`: `@name`
          }
        ],
        `startIndex`: 0,
        `totalNum`: 100,
        `totalPage`: 1
      },
      `reCode`: `0000`,
      `reMsg`: `成功`,
      `success`: true
    })
  },
  // 產品配置-貸款材料配置
  {
    url: `/pms/cfgLoanDoc/list`,
    on: true,
    resp: Mock.mock({
      `body`: {
        `currentPage`: 1,
        `isMore`: 0,
        `pageSize`: 15,
        `resultList|10`: [
          {
            `loanDocCode|+1`: 1,
            `loanDocName`: /[測試字型]{4,30}/
          }
        ],
        `startIndex`: 0,
        `totalNum`: 100,
        `totalPage`: 1
      },
      `reCode`: `0000`,
      `reMsg`: `成功`,
      `success`: true
    })
  }

上面的程式碼為mockjs的事例程式碼，更多mockjs相關資料參考連結mockjs文件

為此，我們將mock層獨立出來，通過中間服務的形式在前端和後端服務之前建立一道圍欄，使用fastmock，前端只需要修改自己的XHR請求地址，後端只需要在開發前和前端約定好介面文件即可。等到後端服務開發完成，前端再將XHR請求地址替換回來進行聯調測試即可。

tip:當然，你也可以通過npm script不同命令載入不同配置檔案的形式切換你的XHR地址，這裡不作詳細介紹。

還是不瞭解fastmock？讓我們跟著教程一探究竟吧瞭解並開始使用fastmock

相關文章