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

  • 代码实现:

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

    2. 提供初始代码如下:
      <!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>

    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. 在<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>

  • 17
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JavaWeb通常使用的是Java语言,而axios是一个基于JavaScript的HTTP客户端库,用于在浏览器和Node.js中发送HTTP请求。因此,JavaWeb并不能直接使用axios,但可以通过在前端使用axiosJavaWeb后端发送HTTP请求的方式来实现与JavaWeb的通信。 以下是一些使用axiosJavaWeb进行通信的实验过程: 1. 首先,在前端项目中安装axios库,可以通过npm命令进行安装: ``` npm install axios ``` 2. 在前端项目中引入axios库,并使用axios发送HTTP请求: ``` import axios from 'axios'; axios.post('/path/to/java/web', { data: 'hello world' }) .then(response => { console.log(response); }) .catch(error => { console.log(error); }); ``` 上述代码中,我们使用axios发送了一个POST请求,将数据“hello world”发送到JavaWeb后端的“/path/to/java/web”接口,然后在控制台中打印出响应结果或错误信息。 3. 在JavaWeb后端中接收axios发送的HTTP请求: ``` @PostMapping("/path/to/java/web") public ResponseData handleRequest(@RequestBody RequestData requestData) { String data = requestData.getData(); // do something with data return new ResponseData("success"); } ``` 上述代码中,我们使用Spring Boot框架中的@PostMapping注解实现了一个处理“/path/to/java/web”接口的方法,该方法接收一个包含请求数据的RequestData对象,并将数据保存在变量data中。然后,我们可以对data进行处理,并返回一个表示操作成功的ResponseData对象。 综上所述,通过使用axiosJavaWeb的HTTP通信,我们可以在前端与后端之间进行数据交互,并实现一些有趣的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

向着五星的方向

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值