Vue axios的使用和全局baseURL配置方式
更新時間：2024年05月29日 08:50:01 作者：勤奮的Mr.Li
作為一個全棧開發(fā)人員,前端UI框架和網(wǎng)絡(luò)請求都得有基本的掌握,我以最簡潔易懂的方式講解axios的使用和全局baseURL的配置
1.axios的使用
搭建好vue項(xiàng)目后，安裝axios依賴.
npm i axios
npm i
給登錄button一個點(diǎn)擊事件,發(fā)送post請求,函數(shù)如下:
login(){
axios.post("http://localhost:9000/login",{
username:this.formData.username,
password:this.formData.password,
})
.then(res=>{
console.log(res.data)
})
}后端代碼如下: (這里涉及跨域)
@RestController
@CrossOrigin
public class LoginController {
@PostMapping("/login")
public Map login(@RequestBody Map<String,String> map){
System.out.println(map);
return map;
}
}測試：正確.
2.baseURL配置
不想每次請求都寫一長串url地址,就先配置一個baseURL.
先在src寫一個自定義的網(wǎng)絡(luò)請求文件http.js: 其中配置baseURL,并且掛在到所有Vue實(shí)例上.
后面發(fā)送請求.直接this.$http,并且不需要寫完整url,只需要寫部分:
測試：正確
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue 組件的掛載與父子組件的傳值實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
分析 Vue 中的 computed 和 watch 的區(qū)別
這篇文章分析 Vue 的 computed 和 watch 的區(qū)別，computed 用來監(jiān)控自己定義的變量，頁面上可直接使用。watch 是監(jiān)測 Vue 實(shí)例上的數(shù)據(jù)變動，通俗地講，就是檢測 data 內(nèi)聲明的數(shù)據(jù),需要的朋友可以參考一下2021-09-09
Vue3 Pinia獲取全局狀態(tài)變量的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue3 Pinia獲取全局狀態(tài)變量的實(shí)現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
解決Can''t find variable: SockJS vue項(xiàng)目的問題
這篇文章主要介紹了解決Can't find variable: SockJS vue項(xiàng)目的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue項(xiàng)目webpack打包部署到服務(wù)器的實(shí)例詳解
這篇文章主要介紹了Vue項(xiàng)目webpack打包部署到服務(wù)器的實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
element中TimePicker時間選擇器禁用部分時間(顯示禁用到分鐘)
這篇文章主要介紹了element中TimePicker時間選擇器禁用部分時間(顯示禁用到分鐘)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
VUE 實(shí)現(xiàn)動態(tài)給對象增加屬性，并觸發(fā)視圖更新操作示例
這篇文章主要介紹了VUE 實(shí)現(xiàn)動態(tài)給對象增加屬性，并觸發(fā)視圖更新操作,涉及vue.js對象屬性動態(tài)操作及視圖更新相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-11-11
Vue v2.4中新增的$attrs及$listeners屬性使用教程
這篇文章主要給大家介紹了關(guān)于Vue v2.4中新增的$attrs及$listeners屬性的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要介紹了如何去除element-ui中table的hover效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue.js 打包時出現(xiàn)空白頁和路徑錯誤問題及解決方法
這篇文章主要介紹了vue.js 打包時出現(xiàn)空白頁和路徑錯誤問題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06