溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
隨著互聯網技術的發展，現在很多互聯網公司分工越來越明確了。后端開發人員只負責后端開發及接口的提供，前端人員負責按照設計圖出頁面及套頁面，這個時候就出現了一種新的開發模式。即前后端分離模式。前端框架更新及普及更加推動了前后端分離開發。這種模式縮短了項目開發周期。但是，有時候會會出現比較尷尬的情況。比如再使用VUE寫項目的時候，就會遇到。
在寫vue項目的時候，后臺沒有及時提供數據，我們前臺會在本地模擬一些數據進行開發測試，在axios請求這些假數據的時候，我們需要添加一個請求路徑，按道理來說我們寫上本地數據路徑即可，但是在項目上線的時候就得修改這些本地路徑，這樣很容易出現漏改，所以，vue給出了一個代理轉換機制。
首先，在static文件夾下新建一個mock文件夾用于存放假數據index.json文件：
其次，在?.gitignore?文件，添加static/mock?，目的以后在提交代碼的時候既不會提交到本地git倉庫中也不會提交到線上git倉庫中；
再次，在你的組件中寫好axios請求事件：?
methods:{
??getHomeInfo?(){
? ? ?axios.get('/api/index.json')
? ? ? ? ?.then(this.getHomeInfoSuccess)
? },
??getHomeInfoSuccess(res){
? ? ?console.log(res)
? }
},
mounted(){
??this.getHomeInfo()
}
?然后，找到?config?-- index.js --?proxyTable: { }配置項：
vue中的代理功能（其實是?webpack-dev-server提供的此方法），使用轉發機制，能將?api/index.json?請求路徑轉發到?static/mock/index.json?文件下
proxyTable: {
?'/api':{
? ?target:'http://localhost:8080',
? ?pathRewrite:{
? ? ?'^/api':'/static/mock'
? ?}
?}
},
最后，可以輸入localhost:8080/static/mock/index.json訪問到你的假數據（因為上面提到了，static文件夾里的文件從外部是可以訪問到的）；你也可以啟動項目將數據打印到控制臺查看；
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
