Javaweb之Axios的详细解析

1.3.3 请求方法的别名

Axios还针对不同的请求，提供了别名方式的api,具体如下：

方法	描述
axios.get(url [, config])	发送get请求
axios.delete(url [, config])	发送delete请求
axios.post(url [, data[, config]])	发送post请求
axios.put(url [, data[, config]])	发送put请求

我们目前只关注get和post请求，所以在上述的入门案例中，我们可以将get请求代码改写成如下：

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
    console.log(result.data);
})

post请求改写成如下：

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
    console.log(result.data);
})

1.3.4 案例

• 需求：基于Vue及Axios完成数据的动态加载展示，如下图所示

• 

  其中数据是来自于后台程序的，地址是：http://yapi.smart-xwork.cn/mock/169327/emp/list

• 分析：

  前端首先是一张表格，我们缺少数据，而提供数据的地址已经有了，所以意味这我们需要使用Ajax请求获取后台的数据。但是Ajax请求什么时候发送呢？页面的数据应该是页面加载完成，自动发送请求，展示数据，所以我们需要借助vue的mounted钩子函数。那么拿到数据了，我们该怎么将数据显示表格中呢？这里就得借助v-for指令来遍历数据，展示数据。

• 步骤：

  1. 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入

  2. 我们需要在vue的mounted钩子函数中发送ajax请求，获取数据

  3. 拿到数据，数据需要绑定给vue的data属性

  4. 在标签上通过v-for指令遍历数据，展示数据

• 代码实现：

  1. 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入

  2. 

     提供初始代码如下：

     
     
     
         
         
         
         
         
         
     
     
         
     
             
                 
                     
                     
                     
                     
                     
                     
                     
                 
     ​
                 
                     
                     
                     
                     
                     
                     
                     
                 
             
     编号
     姓名
     图像
     性别
     职位
     入职日期
     最后操作时间
     1
     Tom
     
                         
                     
     
                         男
                        
                     
     班主任
     2009-08-09
     2009-08-09 12:00:00
         
     
     
     

  3. 在vue的mounted钩子函数，编写Ajax请求，请求数据，代码如下：

     mounted () {
         //发送异步请求,加载数据
         axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
             
         })
     }

  4. ajax请求的数据我们应该绑定给vue的data属性，之后才能进行数据绑定到视图；并且浏览器打开后台地址，数据返回格式如下图所示：

  5. 

     因为服务器响应的json中的data属性才是我们需要展示的信息，所以我们应该将员工列表信息赋值给vue的data属性，代码如下：

      //发送异步请求,加载数据
     axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
         this.emps = result.data.data;
     })

     其中，data中生命emps变量，代码如下：

     data: {
         emps:[]
     },

  6. 在标签上通过v-for指令遍历数据，展示数据，其中需要注意的是图片的值，需要使用vue的属性绑定，男女的展示需要使用条件判断，其代码如下：

     
         {{index + 1}}
         {{emp.name}}
         
             
         
         
             男
             女
         
         {{emp.job}}
         {{emp.entrydate}}
         {{emp.updatetime}}
     

完整代码如下：

    
    
    
    
    
    


    

        
            
                
                
                
                
                
                
                
            
​
            
                
                
                
                
                
                
                
            
        
编号
姓名
图像
性别
职位
入职日期
最后操作时间
{{index + 1}}
{{emp.name}}

                    
                

                    男
                    女
                
{{emp.job}}
{{emp.entrydate}}
{{emp.updatetime}}