Axios 是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染 页面局部更新技术 Ajax

中文网站:https://www.kancloud.cn/yunye/axios/234845

安装: https://unpkg.com/axios/dist/axios.min.js

	  //发送GET方式请求
    axios.get("http://localhost:8989/user/findAll?name=xiaochen").then(function(response){
        console.log(response.data);
    }).catch(function(err){
        console.log(err);
    });

		//发送POST方式请求
    axios.post("http://localhost:8989/user/save",{
        username:"xiaochen",
        age:23,
        email:"xiaochen@zparkhr.com",
        phone:13260426185
    }).then(function(response){
        console.log(response.data);
    }).catch(function(err){
        console.log(err);
    });

并发请求: 将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
}));

   axios.put("http://localhost:8080/test",{name:"松崎乡",age:"21"}).then(function (response) {
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    });

 axios.path("http://localhost:8080/test",{name:"松崎乡",age:"21"}).then(function (response) {
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    });

 axios.delete("url?id=21").then(function (response) {

    }).catch(function (error) {

    });

拦截器：请求拦截器 + 响应拦截器

配置一个拦截器

我们通过基础指令和Axios+Bootstrap，结合我们的SpringBoot快速打通并实现一个简单的CRUD

实现效果

前端代码：

    
    
    
    


        

            

                
                

                   

                       
{{msg}}
                   
                

                

                    

                        新增员工
                    
                

                

                    

                        

                            

                                
编号
                                
姓名
                                
年龄
                                
工资
                                
操作
                            
                            

                                
{{emp.id}}
                                
{{emp.name}}
                                
{{emp.age}}
                                
{{emp.salary}}
                                
删除   
                                    修改
                            
                        
                    
                

                

                    

                        

                            
                            

                                姓名：
                                
                            
                            

                                年龄：
                                
                            
                            

                                 工资：
                                
                            
                            
                        
                    
                

            

        

参考视频：编程不良人Vue全家桶