QuickMock：基于Express的快速mock平臺

mdluo 發布于2019-08-20 17:41 / 2196人閱讀

摘要：并將請求通過特定的，開發環境指定到對應的本地文件。聯調或者生產環境發布前，再修改特定的。聯調發布前，也同樣需要將關鍵代碼進行處理，將請求真正發送到后端服務器中，而不是被攔截到。項目列表項目面板，展示已存在的所有項目。

前言

感興趣的話，可以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 +=
        "" +
        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

功能

支持保存多個項目的接口數據

根據接口名稱或url模糊查詢接口

支持重新編輯以保存接口

創建接口后以json文件保存在本地，不同項目的接口數據，放在不同的目錄下

編輯接口數據實時預覽及錯誤提示

預覽 新增項目

輸入項目名稱，項目url（可以理解為，對于區分不同項目的特定字符串），項目描述。

項目列表

項目面板，展示已存在的所有項目。

項目添加接口

選擇一個項目后，可以查看該項目下的接口信息和為該項目添加接口。

編輯接口

輸入接口名稱和接口URL，將相對應json數據輸入左側，同時右側預覽json數據格式是否合法，下方填入此接口的備注說明。

接口列表

可以查看項目中有哪些接口，如果接口過多，支持接口的模糊查詢。

postman驗證接口有效

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

最后

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

原文地址：戳我

GPU云服務器云服務器基于云計算的平臺基于物聯網的云平臺基于大數據平臺的應用服務基于云計算的電子政務公共平臺

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83783.html

基于webpack的前后端分離開發環境實戰

摘要：背景隨著互聯網應用工程規模的日益復雜化和精細化，我們在開發一個標準應用的早已開始告別單干模式，為了提升開發效率，前后端分離的需求越來越被重視，前端負責展現交互邏輯，后端負責業務數據接口，基本上也成為了我們日常項目分工中的標配，但是前后端分離背景隨著互聯網應用工程規模的日益復雜化和精細化，我們在開發一個標準web應用的早已開始告別單干模式，為了提升開發效率，前后端分離的需求越來越被重...

soasme 2019-08-22 11:03 評論0 收藏0
超簡單工具puer——“低碳”的前后端分離開發

摘要：本文有點大哈，相較于目前國內正流行起來的前端后移的前后端分離方案，本文介紹是一種低碳的版本，所以不要糾結于這個的正確性哈。碰到問題先看看有沒有你的答案資源匯總推薦低碳的前端服務器工具推薦常用遠程調試工具推薦工具，快速跳轉到最常用的目錄。本文由作者鄭海波授權網易云社區發布。前幾天，跟一同事(MIHTool作者)討教了一下開發調試工具。其實個人覺得相較于定制一個類似MIHTool的Hy...

Airy 2019-06-28 11:09 評論0 收藏0
前端常用插件、工具類庫匯總

摘要：頁面調試騰訊開發維護的代碼調試發布，錯誤監控上報，用戶問題定位。同樣是由騰訊開發維護的代碼調試工具，是針對移動端的調試工具。前端業務代碼工具庫。動畫庫動畫庫，也是目前通用的動畫庫。本人微信公眾號：前端修煉之路，歡迎關注本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。另外，感謝白小明，文中很多的工具來源于此。彈出框 layer：http://layer....

GitCafe 2019-08-23 13:57 評論0 收藏0
淺談前端mock

摘要：引言前端開發經常需要等待后端的接口，嚴重影響了開發效率，我們一般采用方式來避免這個問題。可能會涉及到門技術，分別是服務端技術隨機生成特定格式數據的技術請求轉發請求攔截。引言前端開發經常需要等待后端的接口，嚴重影響了開發效率，我們一般采用mock方式來避免這個問題。本人參考了大量文章，結合自己的經驗，給出自己在mock上的一些理解。 1. 原理何為mock,我認為mock主要就是通...

elina 2019-08-23 15:24 評論0 收藏0