資訊專欄INFORMATION COLUMN
摘要：實(shí)際工作現(xiàn)狀實(shí)際工作中前后端分離的情況下，前后端達(dá)成接口協(xié)議，前端往往需要根據(jù)接口文檔數(shù)據(jù)。實(shí)現(xiàn)過(guò)程為了高效快捷的開(kāi)發(fā)，我搭建了一個(gè)的，最主要的就是解決了以上提到的問(wèn)題。以下截圖分別為配置，請(qǐng)求接口，以及環(huán)境下接口返回結(jié)果。
實(shí)際工作現(xiàn)狀
實(shí)際工作中前后端分離的情況下，前后端達(dá)成接口協(xié)議，前端往往需要根據(jù)接口文檔mock數(shù)據(jù)。這些數(shù)據(jù)基本都是靜態(tài)數(shù)據(jù)，有的可能是寫(xiě)死在代碼中，等到后端開(kāi)啟服務(wù)調(diào)試再替換這部分mock數(shù)據(jù)，有的可能是讀取靜態(tài)json、js等文件獲取mock數(shù)據(jù)，實(shí)現(xiàn)頁(yè)面效果，但是實(shí)際調(diào)用接口和讀取文件獲取mock數(shù)據(jù)，兩種方式是存在差異的，正式與后端對(duì)接接口時(shí)又需要調(diào)整代碼。那我就想能不能直接在dev環(huán)境下直接調(diào)用接口的時(shí)候就調(diào)取到mock數(shù)據(jù)，而在不修改任何代碼的情況下直接build，打包出來(lái)的頁(yè)面請(qǐng)求的就是正式接口呢。
實(shí)現(xiàn)過(guò)程為了高效快捷的開(kāi)發(fā)，我搭建了一個(gè)VUE+MOCK的DEMO，最主要的就是解決了以上提到的問(wèn)題。
這邊提供一下我的思路：把所有接口寫(xiě)入配置文件。在dev模式下，node啟動(dòng)webpack時(shí)，通過(guò)webpack讀取到接口配置，并做好接口代理。然后通過(guò)node的環(huán)境變量來(lái)識(shí)別環(huán)境。若是dev環(huán)境把所有接口的HOST換成本地HOST，這樣請(qǐng)求接口直接進(jìn)入接口代理，通過(guò)代理獲取mock數(shù)據(jù)。若是pro環(huán)境則直接請(qǐng)求配置文件中的正式接口。
以下截圖分別為mock配置，請(qǐng)求接口，以及dev環(huán)境下接口返回結(jié)果。
另外此demo還配置了一鍵啟用，自由切換是否mock數(shù)據(jù)，以及對(duì)未啟用mock數(shù)據(jù)直接調(diào)試接口自動(dòng)做了跨域代理，方便大家在實(shí)際開(kāi)發(fā)中更好更快的開(kāi)發(fā)。
具體代碼實(shí)現(xiàn)，大家可以看看我的demo，也希望大家給出一些改進(jìn)建議，希望可以多多交流學(xué)習(xí)。
demo地址：FastDev-VUE
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96260.html
摘要：當(dāng)時(shí)下載了一個(gè)，下載了官方提供的示例教程。關(guān)于項(xiàng)目目錄開(kāi)發(fā)規(guī)范一定要遵守，直接通過(guò)官網(wǎng)學(xué)習(xí)即可。最后就是發(fā)布安卓包和蘋(píng)果包了。我將自己做的第一個(gè)新聞列表新聞詳情程序打包，安裝到了安卓手機(jī)上測(cè)試了下，效果非常棒。 本人微信公眾號(hào)：前端修煉之路，歡迎關(guān)注 背景介紹 大概在今年的十月份左右，我了解到Dcloud推出了uni-app。當(dāng)時(shí)下載了一個(gè)Hbuilder X，下載了官方提供的hell...
摘要：前言本文系統(tǒng)的梳理了搭建項(xiàng)目的常見(jiàn)用法，目的在于讓你快速掌握獨(dú)立搭建項(xiàng)目的能力。思維導(dǎo)圖接下來(lái)，我們根據(jù)思維導(dǎo)圖，一步步來(lái)解釋和實(shí)現(xiàn)我們的目標(biāo)。這確保了最終包里數(shù)量的最小化。但是如果其中一個(gè)依賴需要特殊的，默認(rèn)情況下無(wú)法將其檢測(cè)出來(lái)。 前言 本文系統(tǒng)的梳理了vue-cli3搭建項(xiàng)目的常見(jiàn)用法，目的在于讓你快速掌握獨(dú)立搭建vue項(xiàng)目的能力。你將會(huì)了解如下知識(shí)點(diǎn)： 如何安裝項(xiàng)目插件 添加...
摘要：放置在目錄下或通過(guò)絕對(duì)路徑被引用。對(duì)于相關(guān)來(lái)說(shuō)，我們推薦使用而不是直接鏈?zhǔn)街付?。在不更改配置文件的情況下，前端頁(yè)面迭代發(fā)布，不需要重啟服務(wù)。 作者：gauseen 0. 關(guān)于 Vuejs 簡(jiǎn)介：Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，易用、靈活、高效。 生態(tài)系統(tǒng) 項(xiàng)目 介紹 awesome-vue Vue.js 相關(guān)很棒的...
閱讀 858·2021-11-24 10:44
閱讀 2794·2021-11-11 16:54
閱讀 3203·2021-10-08 10:21
閱讀 2107·2021-08-25 09:39
閱讀 2915·2019-08-30 15:56
閱讀 3467·2019-08-30 13:46
閱讀 3504·2019-08-23 18:09
閱讀 2096·2019-08-23 17:05
