作为一个全栈开发人员,前端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@CrossOriginpublic 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,只需要写部分:
测试: 正确
