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