vue框架搭建之a(chǎn)xios使用教程
前后端數(shù)據(jù)交互作為項(xiàng)目最基礎(chǔ)需求（靜態(tài)的除外），同時(shí)也是項(xiàng)目中最重要的需求。
本文重點(diǎn)介紹axios如何配合vue搭建項(xiàng)目框架，而axios的詳細(xì)使用介紹請移步 使用說明
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",//指定請求方式
url: "/business-app/getCityShopList.cgi",//請求接口（相對接口，后面會(huì)介紹到）
data: {
cityId: cityId,
data:{},
isDebug:"1",
longitude: "",
latitude: ""
}
})
.then(function(res){
//接口成功返回結(jié)果執(zhí)行
})
.catch(function(err){
//請求失敗或者接口返回失敗或者.then()中的代碼發(fā)生錯(cuò)誤時(shí)執(zhí)行
})
}
4、跨域與代理
在vue本地開發(fā)時(shí)請求總是發(fā)生跨域
解決方案：配置代理
config 下的index.js 文件
proxyTable: {
'/business-app/*': {
target: 'http://****:8080',//被代理的接口
changeOrigin: true,
secure:true // 如果是https接口，需要配置這個(gè)參數(shù)
}
},
當(dāng)URL以 '/business-app/'層級開端時(shí)，把 'http://****:8080' 代理成本地IP
5、 baseURL與代理
兩者用途不一樣，
baseUrl會(huì)附加到你綁定的axios實(shí)例（如果是全局的，那就是所有實(shí)例）上，即如果get/post的url參數(shù)是相對路徑（如） /api/c/xx，那就會(huì)執(zhí)行 baseUrl + '/api/c/xx',如果未指定baseUrl，那就走瀏覽器地址欄里的base + baseUrl。
webpack里的proxyTable是測試環(huán)境為了避免瀏覽器下的跨域訪問，而以nodejs代理成同前端頁面（即瀏覽器地址欄）同域的一種處理。指定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ǔ)充
對于跨域的處理，除了采用代理外，也可用JSONP或者Qs（axios官方推薦）方案，待詳細(xì)研究后再來補(bǔ)充
總結(jié)
以上所述是小編給大家介紹的vue框架搭建之a(chǎn)xios使用教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue實(shí)現(xiàn)點(diǎn)擊后文字變色切換方法
下面小編就為大家分享一篇Vue實(shí)現(xiàn)點(diǎn)擊后文字變色切換方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue3中子組件改變父組件傳過來的值(props)的方法小結(jié)
在 Vue 3 中,子組件改變父組件傳過來的值（props）的方法主要有以下幾種：通過事件發(fā)射、使用 v-model、模擬 .sync 修飾符的功能（Vue 3 中已移除）,以及使用 ref 或 reactive,下面我將結(jié)合代碼示例和使用場景詳細(xì)講解這些方法,需要的朋友可以參考下2025-04-04
element-ui table行點(diǎn)擊獲取行索引（index）并利用索引更換行順序
這篇文章主要介紹了element-ui table行點(diǎn)擊獲取行索引（index）并利用索引更換行順序，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
在Vue3中,toRaw方法允許用戶獲取響應(yīng)式對象的原始值,有助于性能優(yōu)化和與外部庫集成,它通過繞過Vue的響應(yīng)式系統(tǒng),僅在必要時(shí)觸發(fā)更新,從而提升效率,本文就來具體介紹一下,感興趣的可以了解一下2024-09-09
Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能（利用pdf.js/iframe/embed）
項(xiàng)目要求需要預(yù)覽pdf文件,網(wǎng)上找了很久，發(fā)現(xiàn)pdf.js的效果,這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能,主要利用pdf.js/iframe/embed來實(shí)現(xiàn)的,需要的朋友可以參考下2021-06-06
vue-cli 3.0 引入mint-ui報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vue-cli 3.0 引入mint-ui報(bào)錯(cuò)問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vxe-list?vue?如何實(shí)現(xiàn)下拉框的虛擬列表
這篇文章主要介紹了vxe-list?vue?如何實(shí)現(xiàn)下拉框的虛擬列表，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
公共組件父子依賴調(diào)用及子校驗(yàn)父條件問題解決
這篇文章主要介紹了如何解決公共組件父子組件依賴調(diào)用和子組件校驗(yàn)父組件條件的問題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue-draggable實(shí)現(xiàn)pc端拖拽效果
這篇文章主要為大家詳細(xì)介紹了vue-draggable實(shí)現(xiàn)pc端拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
前端使用vue點(diǎn)擊上傳文件傳送給后端并進(jìn)行文件接收的方法
這篇文章主要介紹了如何在前端和后端實(shí)現(xiàn)文件傳輸,前端使用Vue.js發(fā)送文件,后端使用Java接收文件并處理,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01