Vue axios的使用和全局baseURL配置方式
更新时间：2024年05月29日 08:50:01 作者：勤奋的Mr.Li
作为一个全栈开发人员,前端UI框架和网络请求都得有基本的掌握,我以最简洁易懂的方式讲解axios的使用和全局baseURL的配置
1.axios的使用
搭建好vue项目后，安装axios依赖.
npm i axios
npm i
给登录button一个点击事件,发送post请求,函数如下:
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写一个自定义的网络请求文件http.js: 其中配置baseURL,并且挂在到所有Vue实例上.
后面发送请求.直接this.$http,并且不需要写完整url,只需要写部分:
测试：正确
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue 组件的挂载与父子组件的传值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
分析 Vue 中的 computed 和 watch 的区别
这篇文章分析 Vue 的 computed 和 watch 的区别，computed 用来监控自己定义的变量，页面上可直接使用。watch 是监测 Vue 实例上的数据变动，通俗地讲，就是检测 data 内声明的数据,需要的朋友可以参考一下2021-09-09
这篇文章主要介绍了Vue3 Pinia获取全局状态变量的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
解决Can''t find variable: SockJS vue项目的问题
这篇文章主要介绍了解决Can't find variable: SockJS vue项目的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了Vue项目webpack打包部署到服务器的实例详解的相关资料,需要的朋友可以参考下2017-07-07
element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)
这篇文章主要介绍了element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了VUE 实现动态给对象增加属性，并触发视图更新操作,涉及vue.js对象属性动态操作及视图更新相关实现技巧,需要的朋友可以参考下2019-11-11
Vue v2.4中新增的$attrs及$listeners属性使用教程
这篇文章主要给大家介绍了关于Vue v2.4中新增的$attrs及$listeners属性的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要介绍了如何去除element-ui中table的hover效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue.js 打包时出现空白页和路径错误问题及解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
最新评论