QuickMock：基於Express的快速mock平台

最新 07-03

前言

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

前端模擬API數據的方式有很多種。

1 手動模擬

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

let getData = (cb) => { // 在模擬的時候不走介面請求直接返回數據 return cb && cb() // 真實的請求 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 += + JSON.stringify(data, null, 4) + })

4 Mock Server

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

友好的交互界面

錄入/保存介面數據

分項目存儲介面數據，適合不同團隊使用

響應請求，返回相應數據

生成介面文檔，方便前後端查閱

支持介面自動化測試

關於QuickMock

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

感興趣的話，可以關注支持下，項目地址。

啟動# install dependencies npm install # 訪問localhost:3000/list npm start功能