当前位置： 首页 > news >正文

Javaweb之Axios的详细解析

news 2026/4/9 8:57:30

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>

相关文章：

Javaweb之Axios的详细解析

1.3.3 请求方法的别名 Axios还针对不同的请求&#xff0c;提供了别名方式的api,具体如下&#xff1a; 方法描述axios.get(url [, config])发送get请求axios.delete(url [, config])发送delete请求axios.post(url [, data[, config]])发送post请求axios.put(url [, data[, con…...

编程日记 2023/11/27 16:17:42

Jenkins Pipeline应用实践

Jenkins Pipeline是一种可编程的、可扩展的持续交付管道&#xff0c;允许您使用脚本来定义整个软件交付过程。 以下是使用Jenkins Pipeline创建和配置流水线的基本步骤。 Part 01. 创建一个Pipeline Job 在Jenkins中创建一个新的"Pipeline"类型的Job。 以下是在Je…...

编程日记 2023/11/27 16:15:39

给经销商开发信怎么写？做商务邮件的技巧？

如何写给经销商的开发信&#xff1f;代理商的外贸开发信模板&#xff1f; 一封令人信服的经销商开发信能够在商业世界中起到至关重要的作用。蜂邮EDM将为您介绍如何撰写一封引人注目且有说服力的经销商开发信&#xff0c;确保您的合作伙伴对您的业务充满信心。 经销商开发信&…...

编程日记 2023/11/27 16:14:38

测试架构师必备技能-Nginx安装部署实战

Nginx(“engine x”)是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的免费开源Web和 反向代理服务器&#xff0c;也是一个 IMAP/POP3/SMTP 代理服务器。在高并发访问的情况下&#xff0c;Nginx是Apache服务器不错的替代品。官网数据显示每秒TPS高达50W左右。本文为读者朋…...

编程日记 2023/11/27 16:13:37

linux 账号管理实例一，stdin，passwd复习

需求 账号名称全名次要用户组是否可登录主机密码 myuser1 1st usermygroup1yespasswordmyuser22st usermygroup1yespasswordmyuser33st user无nopassword 第一&#xff1a;用户&#xff0c;和用户组创建&#xff0c;并分配有效用户组&#xff08;初始用户组是passwd里…...

编程日记 2023/11/27 16:12:36

Spring-jdbcTemplate-配置数据库连接池，配置文件方式beans.xml

1、jdbc.properties jdbc.drivercom.mysql.cj.jdbc.Driver jdbc.urljdbc:mysql:///studb jdbc.userroot jdbc.pwd123456 2、beans.xml <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans&…...

编程日记 2023/11/27 16:11:35

ElasticSearch之cat component templates API

命令样例如下&#xff1a; curl -X GET "https://localhost:9200/_cat/component_templates?vtrue&pretty" --cacert $ES_HOME/config/certs/http_ca.crt -u "elastic:ohCxPHQBEs5*lo7F9"执行结果输出如下&#xff1a; name …...

编程日记 2023/11/27 16:10:34

FLASK博客系列7——我要插入数据库

我们来继续上次的内容&#xff0c;实现将数据插入数据库。 我们先更改下models.py&#xff0c;由于上次笔误&#xff0c;把外键关联写错了。在这里给大家说声抱歉。不过竟然没有小伙伴发现。 models.py from app import dbclass User(db.Model): # 表名将会是 user&#xff0…...

编程日记 2023/11/27 16:09:33

HarmonyOS应用开发者高级认证（题库）

判断题 每一个自定义组件都有自己的生命周期 正确Worker线程不支持UI操作 正确首选项preferences是以key-value形式存储数据&#xff0c;其中key是可以重复的。 错误HarmonyOS应用可以兼容OpenHarmony生态 正确使用端云一体化开发&#xff0c;无需自己搭建服务器 正确只要…...

编程日记 2023/11/27 16:08:32

软件建模与文档：架构师怎样绘制系统架构蓝图？

Java全能学习面试指南&#xff1a;https://javaxiaobear 首先&#xff0c;请你设想这样一个场景&#xff1a;如果公司安排你做架构师&#xff0c;要你在项目开发前期进行软件架构设计&#xff0c;你该如何开展你的工作&#xff1f;如何输出你的工作成果&#xff1f;如何确定你的…...

编程日记 2023/11/27 16:07:31

ChatGLM2-6B微调过程说明文档

参考文档&#xff1a; ChatGLM2-6B 微调(初体验) - 知乎 环境配置 下载anaconda&#xff0c;版本是Anaconda3-2023.03-0-Linux-x86_64.sh&#xff0c;其对应的python版本是3.10&#xff0c;试过3.7和3.11版本的在运行时都报错。 执行下面的命令安装anaconda sh Anaconda3-202…...

编程日记 2023/11/27 16:06:30

Django之中间件

引入 1、Django自带7个中间件&#xff0c;每个中间件都有各自的功能 2、django能够自定义中间件 3、使用场景&#xff1a; 1. 全局身份校验 2. 全局用户权限校验 3. 全局访问频率的校验 ...... 【1】什么是中间件 Django中间件是一个轻量级、可重用的组件&#xff0c;用于处理…...

编程日记 2023/11/27 16:05:29

sql中的left join, right join 和inner join，union 与union all的用法

left join&#xff0c; right join 和inner join&#xff1a;这些都是SQL中用来连接两个或多个表的操作。 union&#xff0c;union all&#xff1a;用于合并两个或多个 SELECT 语句的结果。 但是有时候&#xff0c;对于Select出来的结果集不是很清楚。 假设我们有两张表。pers…...

编程日记 2023/11/27 16:04:28

Linux：strace 简介

文章目录 1. 前言2. 什么是 strace ?3. 使用 strace3.1 追踪指定进程3.1.1 通过程序名追踪进程3.1.2 通过 进程 ID (PID) 追踪程序3.1.3 追踪 子进程 或 线程 3.2 系统调用情况统计3.3 追踪过滤3.3.1 追踪指定的系统调用集合3.3.2 追踪对指定文件句柄集合操作的系统调用3.3.3 …...

编程日记 2023/11/27 16:03:27

【深度学习】神经网络训练过程中不收敛或者训练失败的原因

在面对模型不收敛的时候&#xff0c;首先要保证训练的次数够多。在训练过程中&#xff0c;loss并不是一直在下降&#xff0c;准确率一直在提升的&#xff0c;会有一些震荡存在。只要总体趋势是在收敛就行。若训练次数够多&#xff08;一般上千次&#xff0c;上万次&#xff0c;…...

编程日记 2023/11/27 16:02:26

el-table修改表格每行的高度包含表头

需求&#xff1a; 需要修改el-table表格每行的高度为54px&#xff0c;并且包含表头。 .el-table {tr {height: 54px;td {padding: 0;}th {padding: 0;}} }如果样式没有生效&#xff0c;可能.el-table需要加上样式穿透...

编程日记 2023/11/27 16:01:25

常用数据存储格式介绍：Excel、CSV、JSON、XML

在现代数字时代&#xff0c;数据经过提炼后可以推动创新、简化运营并支持决策流程。然而&#xff0c;在提取数据之后&#xff0c;并将其加载到数据库或数据仓库之前&#xff0c;需要将数据转化为可用的数据存储格式。本文将介绍开发者常用的4种数据存储格式&#xff0c;包括 Ex…...

编程日记 2023/11/27 16:00:24

kafka 集群 KRaft 模式搭建

Apache Kafka是一个开源分布式事件流平台&#xff0c;被数千家公司用于高性能数据管道、流分析、数据集成和关键任务应用程序 Kafka 官网&#xff1a;https://kafka.apache.org/ Kafka 在2.8版本之后&#xff0c;移除了对Zookeeper的依赖&#xff0c;将依赖于ZooKeeper的控制器…...

编程日记 2023/11/27 15:59:20

如何进行有效的移动应用测试？

1、识别关键功能: 对于移动应用测试&#xff0c;首先要了解应用的需求和功能规格&#xff0c;确定哪些功能是最关键的。 关键功能通常是用户最常用的功能&#xff0c;对应用的成功和用户体验至关重要。 2、设定测试目标和用例: 针对每个关键功能&#xff0c;设置具体的测试目…...

编程日记 2023/11/27 15:58:19

飞翔的鸟小游戏

第一步是创建项目 项目名自拟 第二步创建个包名 来规范class 再创建一个包 来存储照片 如下 package game; import java.awt.*; import javax.swing.*; import javax.imageio.ImageIO;public class Bird {Image image;int x,y;int width,height;int size;double g;double t;…...

编程日记 2023/11/27 15:57:18

《东方星动》“一路有你”公益行走进云南宾川县上沧完小

春风送暖&#xff0c;爱意流淌。4月3日&#xff0c;云南省大理白族自治州宾川县上沧完小校园内&#xff0c;一场以“爱心筑梦情暖校园”为主题的捐赠仪式温暖举行。这是《东方星动》“一路有你”公益行团队继湖南平江之后&#xff0c;再次跨越千里&#xff0c;将艺术的种子播撒…...

编程新知 2026/4/9 8:19:53

中科院FlowPIE：AI实现科学创意自动孵化突破研究范式创新

这项由中国科学院深圳先进技术研究院联合大连理工大学等多家科研院所开展的研究&#xff0c;发表于2026年3月31日的arXiv预印本平台&#xff08;论文编号&#xff1a;arXiv:2603.29557v1&#xff09;&#xff0c;为科学创意生成领域带来了革命性突破。有兴趣深入了解的读者可以…...

编程新知 2026/4/9 8:05:46

BetterGI：重新定义《原神》游戏体验的开源智能辅助系统

BetterGI&#xff1a;重新定义《原神》游戏体验的开源智能辅助系统 【免费下载链接】better-genshin-impact &#x1f4e6;BetterGI 更好的原神 - 自动拾取 | 自动剧情 | 全自动钓鱼(AI) | 全自动七圣召唤 | 自动伐木 | 自动刷本 | 自动采集/挖矿/锄地 | 一条龙 | 全连音游 - …...

编程新知 2026/4/9 8:03:45

[ISP] CIE-XYZ色彩空间的现代应用与优化

1. CIE-XYZ色彩空间的诞生与核心原理 1931年国际照明委员会&#xff08;CIE&#xff09;做了一件改变色彩科学史的事——他们用汞灯发出的三个特定波长光线&#xff08;700nm红、546.1nm绿、435.8nm蓝&#xff09;作为基准&#xff0c;通过大量人眼视觉实验绘制出了著名的CIE-…...

编程新知 2026/4/9 8:03:44

新手友好！Qwen3-ASR-0.6B语音识别使用指南：解决90%常见问题

新手友好&#xff01;Qwen3-ASR-0.6B语音识别使用指南&#xff1a;解决90%常见问题 语音识别技术正在改变我们处理音频内容的方式&#xff0c;但复杂的部署流程和晦涩的技术术语往往让初学者望而却步。Qwen3-ASR-0.6B作为一款轻量级多语言语音识别模型&#xff0c;以其开箱即用…...

编程新知 2026/4/9 7:48:03

避坑指南：RK3588 HDMI输出分辨率不生效？除了改驱动，你还需要检查这几点

RK3588 HDMI输出分辨率调试实战&#xff1a;从代码修改到系统级排查 最近在调试RK3588平台的HDMI输出时&#xff0c;发现一个有趣的现象&#xff1a;明明按照官方文档和社区教程修改了内核驱动代码&#xff0c;添加了3840x216030Hz的分辨率支持&#xff0c;但系统设置里就是找不…...

编程新知 2026/4/9 7:25:24

OpenDataLab MinerU与通用大模型PK：文档任务谁更胜一筹？

OpenDataLab MinerU与通用大模型PK&#xff1a;文档任务谁更胜一筹&#xff1f; 1. 项目背景与核心价值 在日常工作和学习中&#xff0c;我们经常需要处理各种文档&#xff1a;扫描的PDF文件、学术论文、数据表格、演示文稿等等。传统的方式需要人工阅读、提取信息、分析内容…...

编程新知 2026/4/9 6:33:13

从原理到实战：一文读懂主流交叉验证技术及其Python/R实现

1. 交叉验证的本质与价值 第一次听说"交叉验证"这个词时&#xff0c;我正被一个电商用户流失预测项目折磨得焦头烂额。当时在测试集上的准确率像过山车一样忽高忽低&#xff0c;直到 mentor 扔给我一句&#xff1a;"你该试试 K 折交叉验证"。这个简单的改变…...

编程新知 2026/4/9 6:23:09

STM32+DHT11温湿度监测实战：从硬件接线到串口调试全流程（附避坑指南）

STM32DHT11温湿度监测实战&#xff1a;从硬件接线到串口调试全流程&#xff08;附避坑指南&#xff09; 在物联网和智能硬件快速发展的今天&#xff0c;环境监测已成为许多项目的基础需求。无论是智能家居中的温湿度调控&#xff0c;还是农业大棚中的环境监控&#xff0c;亦或是…...

编程新知 2026/4/9 5:38:08

OpenClaw+百川2-13B-4bits：智能客服模拟器搭建教程

OpenClaw百川2-13B-4bits&#xff1a;智能客服模拟器搭建教程 1. 为什么需要本地化客服模拟器 去年参与一个电商项目时&#xff0c;我遇到了一个典型痛点&#xff1a;每次修改客服话术都需要重新训练线上模型&#xff0c;既消耗API费用又影响真实客户体验。当时就萌生了搭建本…...

编程新知 2026/4/9 4:39:04