Vue axios的使用和全局baseURL的配置

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

 测试: 正确