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 elementUI 自定义表单模板组件,需要的朋友可以参考下2022-12-12
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
本篇文章主要介绍了Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输示例，非常具有实用价值，需要的朋友可以参考下。2017-02-02
使用el-row及el-col页面缩放时出现空行的问题及解决
这篇文章主要介绍了使用el-row及el-col页面缩放时出现空行的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue中自定义组件双向绑定的三种方法总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要给大家分享的是Vue3的几个优势，Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化，下面我们一起进入文章看看具体详情吧2021-10-10
Vue轮播图组件的封装可通过封装组件、使用插件、配置化等方式实现，主要包括图片预加载、定时轮播、无限滚动、手势滑动、响应式布局等功能，实现方式可使用Vue的生命周期函数、自定义事件、计算属性等技术2023-04-04
elementUI表格多选框this.$refs.xxx.toggleRowSelection无效问题
这篇文章主要介绍了elementUI表格多选框this.$refs.xxx.toggleRowSelection无效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
下面小编就为大家带来一篇浅谈mint-ui loadmore组件注意的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要为大家详细介绍了vue2如何使用el-tag实现自定义菜单导航标签,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
这篇文章主要介绍了vue 组件开发原理与实现方法,结合实例形式详细分析了vue.js组件开发的原理与实现方法,需要的朋友可以参考下2019-11-11
最新评论