Vue axios的使用和全局baseURL配置方式
作者：勤奋的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,只需要写部分:
测试：正确
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。