QuickMock：基於Express的快速mock平臺

逸風發表於2019-02-16
UIMockExpress

前言

感興趣的話，可以star關注支援下，專案地址。

在日常的開發中，前端mock後端api資料，是實現前後端並行開發非常重要的一步。有了資料，才能更加真實反饋實際操作流程，互動效果才能更好的編碼實現，也能很好的規避後期聯調會有的各種問題。

前端模擬API資料的方式有很多種。

1 手動模擬

在js中寫死資料，聯調發布時，將模擬的資料刪除。或者可以封裝個開關。

let getData = (cb) => {
    // 在模擬的時候不走介面請求直接返回資料
    return cb && cb({a: 1})
    // 真實的請求
    http.get(`/api/test`, (res) => {
        cb && cb(res)
    })
}

2 本地json檔案

這比上一種方法頗為模組化。依據後端介面路徑，在開發的目錄中生成對應的目錄和檔案。並將請求通過特定的url，開發環境指定到對應的本地檔案。聯調或者生產環境釋出前，再修改特定的url。

const config = {
    baseUrl: `/quxue`,
    initialUrl: `../`
};

// 兩種請求路徑，一種請求到專案真實後臺，一種請求本地json檔案

3 mockjs

這像是一種更加高階的手動模擬的實現方式。藉助mockjs，可以產生更多樣的返回資料。聯調發布前，也同樣需要將關鍵程式碼進行處理，將請求真正傳送到後端伺服器中，而不是被mockjs攔截到。

如RequireJs中載入mockjs

// 配置 Mock 路徑
require.config({
    paths: {
        mock: `http://mockjs.com/dist/mock`
    }
})
// 載入 Mock
require([`mock`], function(Mock){
    // 使用 Mock
    var data = Mock.mock({
        `list|1-10`: [{
            `id|+1`: 1
        }]
    })
    // 輸出結果
    document.body.innerHTML +=
        `<pre>` +
        JSON.stringify(data, null, 4) +
        `</pre>`
})

4 Mock Server

Mock Server應該具備以下幾點功能：

  • 友好的互動介面
  • 錄入/儲存介面資料
  • 分專案儲存介面資料，適合不同團隊使用
  • 響應請求，返回相應資料
  • 生成介面文件，方便前後端查閱
  • 支援介面自動化測試

關於QuickMock

基於Express的快速mock平臺，無需配置資料庫，啟動後即可實現本地mock介面資料。通過介面url,返回對應介面json資料。

啟動

# install dependencies
npm install

# 訪問localhost:3000/list
npm start

功能

  • 支援儲存多個專案的介面資料
  • 根據介面名稱或url模糊查詢介面
  • 支援重新編輯以儲存介面
  • 建立介面後以json檔案儲存在本地，不同專案的介面資料，放在不同的目錄下
  • 編輯介面資料實時預覽及錯誤提示

預覽

新增專案

輸入專案名稱，專案url（可以理解為，對於區分不同專案的特定字串），專案描述。

新增專案

專案列表

專案皮膚，展示已存在的所有專案。

專案列表

專案新增介面

選擇一個專案後，可以檢視該專案下的介面資訊和為該專案新增介面。

專案新增介面

編輯介面

輸入介面名稱和介面URL，將相對應json資料輸入左側，同時右側預覽json資料格式是否合法，下方填入此介面的備註說明。

編輯介面

編輯介面完成

介面列表

可以檢視專案中有哪些介面，如果介面過多，支援介面的模糊查詢。

介面列表

postman驗證介面有效

利用postman，驗證Mock Server可以將資料真實有效的返回

postman驗證介面有效

最後

生活並不缺少美，缺少的是發現美的眼睛。

原文地址：戳我

相關文章