vue框架搭建之a(chǎn)xios使用教程
前后端數(shù)據(jù)交互作為項(xiàng)目最基礎(chǔ)需求（靜態(tài)的除外），同時(shí)也是項(xiàng)目中最重要的需求。
本文重點(diǎn)介紹axios如何配合vue搭建項(xiàng)目框架，而axios的詳細(xì)使用介紹請(qǐng)移步 使用說(shuō)明
1、安裝
cnpm install axios --save-dev
2、引入
main.js 文件引入：
import Vue from 'vue'//引入vue import axios from 'axios'//引入axios Vue.prototype.$axios = axios;//把a(bǔ)xios掛載到vue上
3、使用
getStore(){
let that = this
that.$axios({
method: "post",//指定請(qǐng)求方式
url: "/business-app/getCityShopList.cgi",//請(qǐng)求接口（相對(duì)接口，后面會(huì)介紹到）
data: {
cityId: cityId,
data:{},
isDebug:"1",
longitude: "",
latitude: ""
}
})
.then(function(res){
//接口成功返回結(jié)果執(zhí)行
})
.catch(function(err){
//請(qǐng)求失敗或者接口返回失敗或者.then()中的代碼發(fā)生錯(cuò)誤時(shí)執(zhí)行
})
}
4、跨域與代理
在vue本地開(kāi)發(fā)時(shí)請(qǐng)求總是發(fā)生跨域
解決方案：配置代理
config 下的index.js 文件
proxyTable: {
'/business-app/*': {
target: 'http://****:8080',//被代理的接口
changeOrigin: true,
secure:true // 如果是https接口，需要配置這個(gè)參數(shù)
}
},
當(dāng)URL以 '/business-app/'層級(jí)開(kāi)端時(shí)，把 'http://****:8080' 代理成本地IP
5、 baseURL與代理
兩者用途不一樣，
baseUrl會(huì)附加到你綁定的axios實(shí)例（如果是全局的，那就是所有實(shí)例）上，即如果get/post的url參數(shù)是相對(duì)路徑（如） /api/c/xx，那就會(huì)執(zhí)行 baseUrl + '/api/c/xx',如果未指定baseUrl，那就走瀏覽器地址欄里的base + baseUrl。
webpack里的proxyTable是測(cè)試環(huán)境為了避免瀏覽器下的跨域訪問(wèn)，而以nodejs代理成同前端頁(yè)面（即瀏覽器地址欄）同域的一種處理。指定proxyTable后， axios就不需要指定baseUrl了。proxyTable會(huì)把base + '/api/c/xx'代理到【base baseUrl + '/api/c/xx'】的接口地址上。
當(dāng)然工程發(fā)布時(shí)，后端和前端也需要發(fā)布到同一個(gè)域下。
6、axios與vue-axios
先看兩者的用法
Vue.prototype.$axios = axios 和 import Vueaxios from ‘vue-axios' Vue.use(VueAxios,axios)
解釋：使用vue-axios更多是為了符合規(guī)范，并且方便協(xié)作
7、其他待補(bǔ)充
對(duì)于跨域的處理，除了采用代理外，也可用JSONP或者Qs（axios官方推薦）方案，待詳細(xì)研究后再來(lái)補(bǔ)充
總結(jié)
以上所述是小編給大家介紹的vue框架搭建之a(chǎn)xios使用教程，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue?mixins代碼復(fù)用的項(xiàng)目實(shí)踐
本文主要介紹了vue?mixins代碼復(fù)用的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了vue-cli3 中跨域解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁(yè)面及刷新方法詳解
這篇文章主要給大家介紹了關(guān)于vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁(yè)面及刷新方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
mpvue將vue項(xiàng)目轉(zhuǎn)換為小程序
這篇文章主要介紹了mpvue將vue項(xiàng)目轉(zhuǎn)換為小程序的相關(guān)資料及mpvue開(kāi)發(fā)流程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
VUE實(shí)現(xiàn)移動(dòng)端列表篩選功能
這篇文章主要介紹了VUE實(shí)現(xiàn)移動(dòng)端列表篩選功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家介紹了vue3的二維碼組件vue3-next-qrcode示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
這篇文章主要介紹了vue實(shí)現(xiàn)自定義組件掛載原型上方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue.js中computed屬性高效的數(shù)據(jù)處理案例
computed是Vue中一個(gè)計(jì)算屬性,它可以根據(jù)依賴的數(shù)據(jù)動(dòng)態(tài)計(jì)算出一個(gè)新的值,并將其緩存起來(lái),這篇文章主要給大家介紹了關(guān)于Vue.js中computed屬性高效的數(shù)據(jù)處理的相關(guān)資料,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue中如何下載文件導(dǎo)出保存到本地，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
ElementUI修改實(shí)現(xiàn)更好用圖片上傳預(yù)覽組件
這篇文章主要為大家介紹了ElementUI修改實(shí)現(xiàn)更好用圖片上傳預(yù)覽組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09