Javaweb之Axios的详细解析

本文介绍: 前端首先是一张表格，我们缺少数据，而提供数据的地址已经有了，所以意味这我们需要使用Ajax请求获取后台的数据。但是Ajax请求什么时候发送呢？页面的数据应该是页面加载完成，自动发送请求，展示数据，所以我们需要借助vue的mounted钩子函数。ajax 请求的数据我们应该绑定给vue的data 属性，之后才能进行数据绑定到视图；首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js 文件的引入。首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入。

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 =&gt; {
    console.log(result.data);
})

post请求改写成如下：

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result =&gt; {
    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. 在<tr>标签上通过v-for指令遍历数据，展示数据

代码实现：

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

提供初始代码如下：

<!DOCTYPE html&gt;
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios-案例</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" >
                <td>1</td>
                <td>Tom</td>
                <td>
                    <img src="" width="70px" height="50px">
                </td>
                <td>
                    <span>男</span>
                   <!-- <span>女</span>-->
                </td>
                <td>班主任</td>
                <td>2009-08-09</td>
                <td>2009-08-09 12:00:00</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
        
       }
    });
</script>
</html>

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

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

ajax请求的数据我们应该绑定给vue的data属性，之后才能进行数据绑定到视图；并且浏览器打开后台地址，数据返回格式如下图所示：
因为服务器响应的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:[]
},
```

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

<tr align="center" v-for="(emp,index) in emps">
    <td>{{index + 1}}</td>
    <td>{{emp.name}}</td>
    <td>
        <img :src="emp.image" width="70px" height="50px">
    </td>
    <td>
        <span v-if="emp.gender == 1">男</span>
        <span v-if="emp.gender == 2">女</span>
    </td>
    <td>{{emp.job}}</td>
    <td>{{emp.entrydate}}</td>
    <td>{{emp.updatetime}}</td>
</tr>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios-案例</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
            this.emps = result.data.data;
          })
       }
    });
</script>
</html>