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请求代码改写成如下:

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

post请求改写成如下:

javascript 复制代码
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. 在<tr>标签上通过v-for指令遍历数据,展示数据

  • 代码实现:

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


    提供初始代码如下:

    html 复制代码
    <!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" >
                    <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>
    1. 在vue的mounted钩子函数,编写Ajax请求,请求数据,代码如下:

      javascript 复制代码
      mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
              
          })
      }
    2. ajax请求的数据我们应该绑定给vue的data属性,之后才能进行数据绑定到视图;并且浏览器打开后台地址,数据返回格式如下图所示:


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

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

    其中,data中生命emps变量,代码如下:

    javascript 复制代码
    data: {
        emps:[]
    },
    1. 在<tr>标签上通过v-for指令遍历数据,展示数据,其中需要注意的是图片的值,需要使用vue的属性绑定,男女的展示需要使用条件判断,其代码如下:

      html 复制代码
      <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>

完整代码如下:

html 复制代码
<!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>
相关推荐
时光の尘6 分钟前
C语言菜鸟入门·关键字·float以及double的用法
运维·服务器·c语言·开发语言·stm32·单片机·c
以后不吃煲仔饭19 分钟前
Java基础夯实——2.7 线程上下文切换
java·开发语言
进阶的架构师20 分钟前
2024年Java面试题及答案整理(1000+面试题附答案解析)
java·开发语言
前端拾光者24 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
程序猿阿伟26 分钟前
《C++ 实现区块链:区块时间戳的存储与验证机制解析》
开发语言·c++·区块链
Json_1817901448042 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
傻啦嘿哟44 分钟前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光1 小时前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用1 小时前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网