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

Javaweb之Axios的详细解析

news 2026/2/9 15:14:47

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

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2026/2/6 23:18:59

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2026/2/7 17:41:40

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2026/2/8 21:57:46

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2026/2/1 6:24:16

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2026/1/28 11:47:09

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus？ 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么？ 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

编程新知 2025/12/29 22:20:36

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

编程新知 2026/2/7 1:08:45

DeepSeek越强，Kimi越慌？

被DeepSeek吊打的Kimi&#xff0c;还有多少人在用&#xff1f; 去年&#xff0c;月之暗面创始人杨植麟别提有多风光了。90后清华学霸&#xff0c;国产大模型六小虎之一&#xff0c;手握十几亿美金的融资。旗下的AI助手Kimi烧钱如流水&#xff0c;单月光是投流就花费2个亿。 疯…...

编程新知 2026/1/28 12:15:05