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