VUE下如何高效快捷的使用MOCK數據

stackvoid 發布于2019-08-22 18:50 / 1340人閱讀

摘要：實際工作現狀實際工作中前后端分離的情況下，前后端達成接口協議，前端往往需要根據接口文檔數據。實現過程為了高效快捷的開發，我搭建了一個的，最主要的就是解決了以上提到的問題。以下截圖分別為配置，請求接口，以及環境下接口返回結果。

實際工作現狀

實際工作中前后端分離的情況下，前后端達成接口協議，前端往往需要根據接口文檔mock數據。這些數據基本都是靜態數據，有的可能是寫死在代碼中，等到后端開啟服務調試再替換這部分mock數據，有的可能是讀取靜態json、js等文件獲取mock數據，實現頁面效果，但是實際調用接口和讀取文件獲取mock數據，兩種方式是存在差異的，正式與后端對接接口時又需要調整代碼。那我就想能不能直接在dev環境下直接調用接口的時候就調取到mock數據，而在不修改任何代碼的情況下直接build，打包出來的頁面請求的就是正式接口呢。

實現過程

為了高效快捷的開發，我搭建了一個VUE+MOCK的DEMO，最主要的就是解決了以上提到的問題。

這邊提供一下我的思路：把所有接口寫入配置文件。在dev模式下，node啟動webpack時，通過webpack讀取到接口配置，并做好接口代理。然后通過node的環境變量來識別環境。若是dev環境把所有接口的HOST換成本地HOST，這樣請求接口直接進入接口代理，通過代理獲取mock數據。若是pro環境則直接請求配置文件中的正式接口。

以下截圖分別為mock配置，請求接口，以及dev環境下接口返回結果。

另外此demo還配置了一鍵啟用，自由切換是否mock數據，以及對未啟用mock數據直接調試接口自動做了跨域代理，方便大家在實際開發中更好更快的開發。

具體代碼實現，大家可以看看我的demo，也希望大家給出一些改進建議，希望可以多多交流學習。
demo地址：FastDev-VUE

GPU云服務器云服務器阿里云購買服務器時的高效云盤怎么使用 js的mock數據云服務器的數據盤如何使用如何使用云服務器的數據庫

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

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

uni-app官方教程學習手記

摘要：當時下載了一個，下載了官方提供的示例教程。關于項目目錄開發規范一定要遵守，直接通過官網學習即可。最后就是發布安卓包和蘋果包了。我將自己做的第一個新聞列表新聞詳情程序打包，安裝到了安卓手機上測試了下，效果非常棒。本人微信公眾號：前端修煉之路，歡迎關注背景介紹大概在今年的十月份左右，我了解到Dcloud推出了uni-app。當時下載了一個Hbuilder X，下載了官方提供的hell...

bovenson 2019-08-26 12:22 評論0 收藏0
一張圖教你快速玩轉vue-cli3

摘要：前言本文系統的梳理了搭建項目的常見用法，目的在于讓你快速掌握獨立搭建項目的能力。思維導圖接下來，我們根據思維導圖，一步步來解釋和實現我們的目標。這確保了最終包里數量的最小化。但是如果其中一個依賴需要特殊的，默認情況下無法將其檢測出來。前言本文系統的梳理了vue-cli3搭建項目的常見用法，目的在于讓你快速掌握獨立搭建vue項目的能力。你將會了解如下知識點：如何安裝項目插件添加...

chaosx110 2019-08-26 10:12 評論0 收藏0
Vue-項目從本地搭建到線上部署（wǒ shì biaō tí dǎng）

摘要：放置在目錄下或通過絕對路徑被引用。對于相關來說，我們推薦使用而不是直接鏈式指定。在不更改配置文件的情況下，前端頁面迭代發布，不需要重啟服務。作者：gauseen 0. 關于 Vuejs 簡介：Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，易用、靈活、高效。生態系統項目介紹 awesome-vue Vue.js 相關很棒的...

Arno 2019-08-26 13:49 評論0 收藏0