淺談前端mock

elina 發布于2019-08-23 15:24 / 3147人閱讀

摘要：引言前端開發經常需要等待后端的接口，嚴重影響了開發效率，我們一般采用方式來避免這個問題。可能會涉及到門技術，分別是服務端技術隨機生成特定格式數據的技術請求轉發請求攔截。

引言

前端開發經常需要等待后端的接口，嚴重影響了開發效率，我們一般采用mock方式來避免這個問題。本人參考了大量文章，結合自己的經驗，給出自己在mock上的一些理解。

1. 原理

何為mock,我認為mock主要就是通過正常請求在后端接口進度落后的情況下，還能獲取到和后端約定數據結構一樣的模擬數據的一門技術，以避免后端接口進度滯后影響我們正常的開發。
mock可能會涉及到4門技術，分別是服務端技術、隨機生成特定格式數據的技術、請求轉發、請求攔截。

2. 常用手段分類 2.1 硬剛型

將模擬數據直接寫在代碼里

優點：簡單暴力
缺點：改變了代碼原有邏輯，且耦合度高，當后端接口完成的時候還需要再改代碼。

2.2 攔截型

mockjs

mockjs通過改寫ajax函數來實現攔截請求，同時它還能偽造各種隨機數據，通過mockjs我們能很方便的實現簡單的mock效果，
優點：簡單方便
缺點：在chrome里面沒法看請求（查看傳遞的參數是否正確），不支持fetch（需要額外調用插件）

Mock.mock("/api/news", { name: "Jack", "age|10-20": 10 });

Charles、 Fiddler 、postman

利用 Charles、 Fiddler 等代理工具攔截請求
優點：有真實的請求
缺點：配置上優點復雜

2.3 Mock Server

node/express/json-server + mockjs/fakejs

Mock Server簡單的說就是起一個服務器，服務器提供接口產生相應的mock數據
前者用來起服務，后者用來產生模擬數據。
json-server是對express的一個封裝，用于快速構建服務器而不用寫后臺代碼
這里重點注意一下，對于一般的項目我們可以用json-server起一個服務，但是如果是在vue-cli之類的webpack生成的項目里面，實際上webpack已經幫我們起了一個服務，我們可以在webpack的devServer.before里面進行配置。當然你要不嫌麻煩，可以用proxy代理到自己到json-server起的服務上....

devServer: {
    // proxy: {  //額外起一個服務，然后進行轉發
    //   "/api": {
    //     target: "json-server服務的ip：端口號",
    //     pathRewrite: { "/api": "" }
    //   }
    // }
    before: function(app) {  //直接用devserver這個服務
      app.get("/api/news", function(req, res) {
        res.json({ msg: "dev-before" })
      })
    }
  }

優點：真實，低耦合，可擴展
缺點：后端參與較少

2.4 Mock 平臺

RAP/Easy-Mock

對于小型開發團隊的話，Mock Server或者mockjs完全夠了，因為此時前后端溝通代價比較小。但是如果是大型開發團隊呢，這時候，文檔的編寫，接口的變更，通知到每一個人，代價就比較大了。
這也是RAP，Easy-Mock這類mock平臺由來的原因。
優點：接口代理，協同編輯，mock數據，智能提醒，自動生成文檔
缺點：你要說服后端使用它

3 具體開發流程舉例

這里就假設我們用devServer.before + mock.js來開發
假設后端要開發兩個接口 www.test/api/news/, www.test/api/price/
3.1 后端開沒開動
我們在devServer虛擬兩個接口

//在devserver里面配置before進行接口攔截

devServer: {
    before: function(app) {
      app.get("www.test/api1/news", function(req, res) { //只對api1進行攔截
        res.json({ mockjs產生的模擬數據 })
      })
      app.get("www.test/api1/price", function(req, res) { //只對api1進行攔截
        res.json({ mockjs產生的模擬數據 })
      })
    }
  }

//在/src/api/index.js里面
const getNews = axios.get(www.test/api1/news)
const getPrice = axios.get(www.test/api1/price)
export {
getNews,getPrice
}
// 由于/api1會被before攔截從而得到mock數據，沒有問題

3.2 后端開發了部分接口，比如www.test/api/news/開發完畢

//在/src/api/index.js里面修改/api1為/api
const getNews = axios.get(www.test/api/news)  //此時這個請求不會被攔截，走真實接口，而未開發完的接口請求還是走模擬數據接口

3.3 后端全部開發完畢

全部將/api1修改為/api,同時注釋掉devserver.before

當然，這個攔截功能也可以直接用mockjs來做，步驟差不多，但是更簡單

4. 展望

現階段暫時無法接口聯動，也就是對于前端來說，接口變更或者開發完成，還需要手動在ide上修改代碼。如果能夠開發一套插件，前端只需初始編寫一次代碼，后面ide自動同步接口變化，然后自動修改代碼，不是爽歪歪！

總結

今天關于前端mock的介紹就到這里，具體的代碼實現可以自行google。由于作者剛參加工作，水平有限，如果哪里寫到不對，請評論指出。

中小型項目，推薦使用mockjs或者devServer.before，如果項目比較大,多人協作，還是建議使用在線mock平臺。

GPU云服務器云服務器設計淺談淺談javascript 淺談sdwan解決方案淺談正則表達式

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

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

淺談前后端分離與實踐（一）

摘要：前后端的界限是按照瀏覽器和服務器的劃分。前后端彼此互不關聯。關于作者本文部分圖片段落參考文章實踐中的前后端分離。淘寶前后端分離實踐本文源碼詳見服務端代碼。一、起源（故事純屬虛構，如有雷同，純屬巧合）傳說在很久很久以前，我們有志之士有了個創業的想法，于是乎開始了自己的創業之夢，但是人手不足啊，于是乎所有角色老子一個人全包了： Roles: PM, DBA, RD, FED, Des...

dantezhao 2019-08-01 17:46 評論0 收藏0
淺談前后端分離與實踐（一）

摘要：前后端的界限是按照瀏覽器和服務器的劃分。前后端彼此互不關聯。關于作者本文部分圖片段落參考文章實踐中的前后端分離。淘寶前后端分離實踐本文源碼詳見服務端代碼。一、起源（故事純屬虛構，如有雷同，純屬巧合）傳說在很久很久以前，我們有志之士有了個創業的想法，于是乎開始了自己的創業之夢，但是人手不足啊，于是乎所有角色老子一個人全包了： Roles: PM, DBA, RD, FED, Des...

yy13818512006 2019-08-21 16:59 評論0 收藏0
淺談easy-mock 最好的備胎沒有之一

摘要：引言今天我們來聊聊，隨著互聯網發展，這兩年前后端分離的開發模式興起，也從以住的幕后走上了臺面，讓更多的人而得知，以前傳統的開發方式大多局限在后端人員接觸較多一些。 showImg(https://segmentfault.com/img/bVbi8JE?w=1008&h=298); 引言 ?　　今天我們來聊聊Mock，隨著互聯網發展，這兩年前后端分離的開發模式興起，Mock也從以住的幕...

cyrils 2019-08-23 12:50 評論0 收藏0