淺談前端mock
引言
前端開發經常需要等待後端的介面,嚴重影響了開發效率,我們一般採用mock方式來避免這個問題。本人蔘考了大量文章,結合自己的經驗,給出自己在mock上的一些理解。由於作者剛參加工作,水平有限,如果哪裡寫到不對,請評論指出。
1. 原理
何為mock,我認為mock主要就是通過正常請求
在後端介面進度落後
的情況下,還
能獲取到和後端約定資料結構一樣的模擬資料
的一門技術,以避免後端介面進度滯後影響我們正常的開發。
mock可能會涉及到4門技術,分別是服務端技術、隨機生成特定格式資料的技術、請求轉發、請求攔截。
2. 常用手段分類
2.1硬剛型
將模擬資料直接寫在程式碼裡
優點:簡單暴力
缺點:改變了程式碼原有邏輯,且耦合度高,當後端介面完成的時候還需要再改程式碼。
2.2攔截型
mockjs
mockjs通過改寫ajax函式來實現攔截請求,同時它還能偽造各種隨機資料,通過mockjs我們能很方便的實現簡單的mock效果,
優點:簡單方便
缺點:無法模擬真實的請求,不支援fetch(需要額外呼叫外掛)
Mock.mock('/api/news', { name: 'Jack', 'age|10-20': 10 });
Charles、 Fiddler 、postman
利用 Charles、 Fiddler 等代理工具攔截請求
優點:有真實的請求
缺點:配置上優點複雜
2.3Mock Server
node/express/json-server + mockjs/fakejs
Mock Server簡單的說就是起一個伺服器,伺服器提供介面產生相應的mock資料
前者用來起服務,後者用來產生模擬資料。
json-server是對express的一個封裝,用於快速構建伺服器而不用寫後臺程式碼
這裡重點注意一下,對於一般的專案我們可以用json-server,但是如果是在vue-cli之類生成的專案裡面,實際上webpack已經幫我們起了一個服務,這是我如果我們想額外起一個json-server,就需要在vue.config.js裡面配置proxy。當然我們也可以不另外起服務,就用dev-server,在webpack的devServer.before裡面進行配置
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自動同步介面變化,然後自動修改程式碼,不是爽歪歪!
總結
如果你目前的專案是中小型專案,那麼可以使用mockjs或者Mock Server之類,如果專案比較大,還是建議使用線上mock平臺。