成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

QuickMock：基于Express的快速mock平臺(tái)

mdluo / 2199人閱讀

摘要：并將請(qǐng)求通過(guò)特定的，開發(fā)環(huán)境指定到對(duì)應(yīng)的本地文件。聯(lián)調(diào)或者生產(chǎn)環(huán)境發(fā)布前，再修改特定的。聯(lián)調(diào)發(fā)布前，也同樣需要將關(guān)鍵代碼進(jìn)行處理，將請(qǐng)求真正發(fā)送到后端服務(wù)器中，而不是被攔截到。項(xiàng)目列表項(xiàng)目面板，展示已存在的所有項(xiàng)目。

前言

感興趣的話，可以star關(guān)注支持下，項(xiàng)目地址。

在日常的開發(fā)中，前端mock后端api數(shù)據(jù)，是實(shí)現(xiàn)前后端并行開發(fā)非常重要的一步。有了數(shù)據(jù)，才能更加真實(shí)反饋實(shí)際操作流程，交互效果才能更好的編碼實(shí)現(xiàn)，也能很好的規(guī)避后期聯(lián)調(diào)會(huì)有的各種問題。

前端模擬API數(shù)據(jù)的方式有很多種。

1 手動(dòng)模擬

在js中寫死數(shù)據(jù)，聯(lián)調(diào)發(fā)布時(shí)，將模擬的數(shù)據(jù)刪除?；蛘呖梢苑庋b個(gè)開關(guān)。

let getData = (cb) => {
    // 在模擬的時(shí)候不走接口請(qǐng)求直接返回?cái)?shù)據(jù)
    return cb && cb({a: 1})
    // 真實(shí)的請(qǐng)求
    http.get("/api/test", (res) => {
        cb && cb(res)
    })
}

2 本地json文件

這比上一種方法頗為模塊化。依據(jù)后端接口路徑，在開發(fā)的目錄中生成對(duì)應(yīng)的目錄和文件。并將請(qǐng)求通過(guò)特定的url，開發(fā)環(huán)境指定到對(duì)應(yīng)的本地文件。聯(lián)調(diào)或者生產(chǎn)環(huán)境發(fā)布前，再修改特定的url。

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

// 兩種請(qǐng)求路徑，一種請(qǐng)求到項(xiàng)目真實(shí)后臺(tái)，一種請(qǐng)求本地json文件

3 mockjs

這像是一種更加高級(jí)的手動(dòng)模擬的實(shí)現(xiàn)方式。借助mockjs，可以產(chǎn)生更多樣的返回?cái)?shù)據(jù)。聯(lián)調(diào)發(fā)布前，也同樣需要將關(guān)鍵代碼進(jìn)行處理，將請(qǐng)求真正發(fā)送到后端服務(wù)器中，而不是被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
        }]
    })
    // 輸出結(jié)果
    document.body.innerHTML +=
        "
" +
        JSON.stringify(data, null, 4) +
        "
"
})

4 Mock Server

Mock Server應(yīng)該具備以下幾點(diǎn)功能：

友好的交互界面

錄入/保存接口數(shù)據(jù)

分項(xiàng)目存儲(chǔ)接口數(shù)據(jù)，適合不同團(tuán)隊(duì)使用

響應(yīng)請(qǐng)求，返回相應(yīng)數(shù)據(jù)

生成接口文檔，方便前后端查閱

支持接口自動(dòng)化測(cè)試

關(guān)于QuickMock

基于Express的快速mock平臺(tái)，無(wú)需配置數(shù)據(jù)庫(kù)，啟動(dòng)后即可實(shí)現(xiàn)本地mock接口數(shù)據(jù)。通過(guò)接口url,返回對(duì)應(yīng)接口json數(shù)據(jù)。

啟動(dòng) 
# install dependencies
npm install

# 訪問localhost:3000/list
npm start
功能

支持保存多個(gè)項(xiàng)目的接口數(shù)據(jù)

根據(jù)接口名稱或url模糊查詢接口

支持重新編輯以保存接口

創(chuàng)建接口后以json文件保存在本地，不同項(xiàng)目的接口數(shù)據(jù)，放在不同的目錄下

編輯接口數(shù)據(jù)實(shí)時(shí)預(yù)覽及錯(cuò)誤提示

預(yù)覽 新增項(xiàng)目

輸入項(xiàng)目名稱，項(xiàng)目url（可以理解為，對(duì)于區(qū)分不同項(xiàng)目的特定字符串），項(xiàng)目描述。

項(xiàng)目列表

項(xiàng)目面板，展示已存在的所有項(xiàng)目。

項(xiàng)目添加接口

選擇一個(gè)項(xiàng)目后，可以查看該項(xiàng)目下的接口信息和為該項(xiàng)目添加接口。

編輯接口

輸入接口名稱和接口URL，將相對(duì)應(yīng)json數(shù)據(jù)輸入左側(cè)，同時(shí)右側(cè)預(yù)覽json數(shù)據(jù)格式是否合法，下方填入此接口的備注說(shuō)明。

接口列表

可以查看項(xiàng)目中有哪些接口，如果接口過(guò)多，支持接口的模糊查詢。

postman驗(yàn)證接口有效

利用postman，驗(yàn)證Mock Server可以將數(shù)據(jù)真實(shí)有效的返回

最后

生活并不缺少美，缺少的是發(fā)現(xiàn)美的眼睛。

原文地址：戳我

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83783.html

相關(guān)文章

  • 基于webpack的前后端分離開發(fā)環(huán)境實(shí)戰(zhàn)

    摘要：背景隨著互聯(lián)網(wǎng)應(yīng)用工程規(guī)模的日益復(fù)雜化和精細(xì)化，我們?cè)陂_發(fā)一個(gè)標(biāo)準(zhǔn)應(yīng)用的早已開始告別單干模式，為了提升開發(fā)效率，前后端分離的需求越來(lái)越被重視，前端負(fù)責(zé)展現(xiàn)交互邏輯，后端負(fù)責(zé)業(yè)務(wù)數(shù)據(jù)接口，基本上也成為了我們?nèi)粘ｍ?xiàng)目分工中的標(biāo)配，但是前后端分離 背景 隨著互聯(lián)網(wǎng)應(yīng)用工程規(guī)模的日益復(fù)雜化和精細(xì)化，我們?cè)陂_發(fā)一個(gè)標(biāo)準(zhǔn)web應(yīng)用的早已開始告別單干模式，為了提升開發(fā)效率，前后端分離的需求越來(lái)越被重...

    soasme 評(píng)論0 收藏0

  • 超簡(jiǎn)單工具puer——“低碳”的前后端分離開發(fā)

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

    Airy 評(píng)論0 收藏0

  • 前端常用插件、工具類庫(kù)匯總

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

    GitCafe 評(píng)論0 收藏0

  • 淺談前端mock

    摘要：引言前端開發(fā)經(jīng)常需要等待后端的接口，嚴(yán)重影響了開發(fā)效率，我們一般采用方式來(lái)避免這個(gè)問題?？赡軙?huì)涉及到門技術(shù)，分別是服務(wù)端技術(shù)隨機(jī)生成特定格式數(shù)據(jù)的技術(shù)請(qǐng)求轉(zhuǎn)發(fā)請(qǐng)求攔截。 引言 前端開發(fā)經(jīng)常需要等待后端的接口，嚴(yán)重影響了開發(fā)效率，我們一般采用mock方式來(lái)避免這個(gè)問題。本人參考了大量文章，結(jié)合自己的經(jīng)驗(yàn)，給出自己在mock上的一些理解。 1. 原理 何為mock,我認(rèn)為mock主要就是通...

    elina 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<