QuickMock：基於Express的快速mock平臺

前言

感興趣的話，能夠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能夠將數據真實有效的返回

最後

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

原文地址：戳我