第 06 課 搭建本地 Mock 服務

2021-10-09 16:27:52 字數 696 閱讀 8666

前後端分離的協作模式下,前後端之間的資料傳輸都是基於 http 介面實現。顯然前端的開發是依賴後端介面實現的。在講求快速迭代的網際網路公司這種序列的等待肯定是不會出現的。前後端約定好介面的出參和入參之後,前端資料模擬(mock)就很有必要了。前端基於介面文件自己模擬乙份假資料作為前端的資料來源。後端按照約定的文件實現介面功能。待介面完全實現之後,前後端切換到真實的介面進行聯調。顯然,mock 對於開發效率的提公升是非常重要的。

mock 有很多的方式,我們可以根據團隊的情況、專案的複雜度、人員的能力綜合評估選擇適合自己團隊的方式。

1.1 前端**中寫死資料

這種方式是最簡單的一種 mock 方式,前端通常會將請求某個介面的動作封裝到乙個方法中,呼叫的時候直接返回前端在本地寫死的資料。

async function getdata ())

}, 200)

})// 真實的請求

return await axios.get('/api/getuserinfo');

}

這種方式最大的有點就是簡單,比較適合介面數量不多,簡單的專案。不足之處是在聯調階段,必須將模擬的資料從**中刪掉,切換成本還是不小。

1.2 **工具攔截請求

這種方式是利用 fiddler 和 charles 攔截網路請求的能力,將請求攔截到後,將響應資料替換成我們的 mock 資料。通過**工具做資料 mock

搭建本地 mock 服務

工作中,有時候前端的很多任務作需要後端的支援,但是可能後端的介面還沒有開發完,或者有些時候在聯調階段,修復某個 bug 的時候,環境掛了。那麼這個時候,我們的很多任務作無法順利的進行下去。於是萌生了搭建本地伺服器的想法。首先粗略的說一下它的好處jsonserver gulp 實現 缺點 大部分需求都...

第06課 服務閘道器

在服務提供者的 module 下建立 hellocontroller 類,新增內容如下 restcontroller public class hellocontroller 然後分別啟動服務註冊中心和服務提供者,瀏覽器輸入 http localhost 8762 index,即可看見如下畫面 在實...

vue最新的本地mock資料服務搭建教程

在webpack.dev.conf.js下找到 const portfinder require portfinder 增加以下 const express require express 請求server const express 載入本地資料檔案 varrequire mock goods.j...