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

学习使用axios，绑定动态数据

news 2026/5/22 9:00:36

目录

axios特性

案例一：通过axios获取笑话

案例二：调用城市天气api接口数据实现天气查询案例

axios特性

支持 Promise API
拦截请求和响应（可以在请求前及响应前做某些操作，例如，在请求前想要在这个请求头中加一些信息，如授权信息等)。
转换请求数据和响应数据(例如，在请求时一些敏感信息需要加密，在返回数据时需要解密)
取消请求(在解决高并发时，取消一些不必要的冗余重复请求)
自动转换JSON数据(HTTP 请求时，传输的数据都是字符串，如果服务器端返回的数据不是字符串类型，就需要使用JSON.parse()对它进行转换。然后向后台发起数据请求，会自动地进行转换，不需要进行手动操作)。
客户端支持防御XSS攻击(XSS是客户端经常出现的一种攻击方式，它发生在目标用户的浏览器层面上，当渲染DOM树的过程中发生了不在预期范围内的JavaScript代码执行时，就可以被判定为发生了XSS攻击)。

案例一：通过axios获取笑话

效果图：

 

代码：

<!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>Document</title>
</head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
</style><body><div id="app"><input type="button" @click="getJoke" value="点击获取笑话数据"><div style="width: 400px;height: 400px; border: 1px solid; overflow: auto;">{{joke}}</div></div>
</body>
<!-- 通过CDN链接axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>//vue2写法// var app =new Vue({//     el:'#app',//     data:{//     },//     methods:{//     }// }).mount('#app');const {createApp} = VuecreateApp({data() {return {joke: "通过axios获取笑话"}},methods: {getJoke: function () {//axios获取后端接口数据方法一// console.log(this.joke);var that = thisaxios.get("https://autumnfish.cn/api/joke").then(function (res) {console.log(res.data);// console.log(that.joke);that.joke = res.data}),function (err) {console.log(err);}//axios获取后端接口数据方法二// axios({//     method: "get",//     url: "https://autumnfish.cn/api/joke"// }).then(res => {//     console.log(res);// }), (err) => console.log(err)}},}).mount('#app')
</script></html>

 案例二：调用城市天气api接口数据实现天气查询案例

调用天气API接口，官网地址：免费天气API接口|天气预报接口|全球天气API接口|气象预警|空气质量

//html<a class="weeks">{{week}}</a><a class="weather">{{weather}}</a><a class="tem">{{tem2}}{{tem1}}</a>//jsgetWeather() {this.$axios.get("https://www.tianqiapi.com/api/?version=v1&cityid=101280601").then(res => {// let datas = res.data.data[0];//下标为0即表示当天天气数据console.log(res.data);        }).catch(err => {console.log(err);});},

 总结：由于这周太忙，对于前端的学习投入的时间对于上周来说大幅度减少，今天只有晚上留出来了一点时间学习了一下axios发送请求，由于时间有限且自己没有后台代码，因此只使用了网络上的接口测试了一下效果，了解了一下理论，并未实际去运用，因为我主修java，后期我会自己用java代码做后台，用axios发请求来实现前端获取数据，今天的学习就到这里！

相关文章：

学习使用axios，绑定动态数据

目录 axios特性 案例一&#xff1a;通过axios获取笑话 案例二&#xff1a;调用城市天气api接口数据实现天气查询案例 axios特性 支持 Promise API 拦截请求和响应&#xff08;可以在请求前及响应前做某些操作&#xff0c;例如&#xff0c;在请求前想要在这个请求头中加一些…...

编程日记 2023/7/31 9:05:05

c语言内存函数的深度解析

本章对 memcpy&#xff0c;memmove&#xff0c;memcmp 三个函数进行详解和模拟实现&#xff1b; 本章重点&#xff1a;3个常见内存函数的使用方法及注意事项并学会模拟实现&#xff1b; 如果您觉得文章不错&#xff0c;期待你的一键三连哦&#xff0c;你的鼓励是我创作的动力…...

编程日记 2023/7/31 9:04:04

低代码平台介绍（国内常见的）

文章目录 前言1、阿里云宜搭2、腾讯云微搭3、百度爱速搭4、华为云Astro轻应用 Astro Zero&#xff08;AppCube&#xff09;5、字节飞书多维表格6、云程低代码平台7、ClickPaaS8、网易轻舟9、用友YonBuilder10、金蝶苍穹云平台11、泛微平台12、蓝凌低代码平台13、简道云14、轻流…...

编程日记 2023/7/31 9:03:03

matlab RRR机械臂 简略代码

RRR机器人&#xff01;启动&#xff01; gazebo在arm mac上似乎难以运行&#xff0c;退而选择Matlab&#xff0c;完成老师第一个作业&#xff0c;现学现卖&#xff0c;权当记录作业过程&#xff0c;有不足之处&#xff0c;多多指教。 作业&#xff01;启动&#xff01; RRR机…...

编程日记 2023/7/31 9:02:01

集成测试,单元测试隔离 maven-surefire-plugin

详见 集成测试,单元测试隔离 maven-surefire-plugin maven的goal生命周期 Maven生存周期 - 含 integration-test Maven本身支持的命令&#xff08;Goals&#xff09;是有顺序的&#xff0c;越后面执行的命令&#xff0c;会将其前面的命令和其本身按顺序执行一遍&#xff0c;…...

编程日记 2023/7/31 9:00:58

渗透测试基础知识（1）

渗透基础知识一 一、Web架构1、了解Web2、Web技术架构3、Web客户端技术4、Web服务端组成5、动态网站工作过程6、后端存储 二、HTTP协议1、HTTP协议解析2、HTTP协议3、http1.1与http2.0的区别4、HTTP协议 三、HTTP请求1、发起HTTP请求2、HTTP响应与请求-HTTP请求3、HTTP响应与请…...

编程日记 2023/7/31 8:59:55

Android NDK开发

工程目录图 NDK中文官网 请点击下面工程名称&#xff0c;跳转到代码的仓库页面&#xff0c;将工程 下载下来 Demo Code 里有详细的注释 代码&#xff1a;TestNDK 参考文献 Android NDK 从入门到精通&#xff08;汇总篇&#xff09;Android JNI(一)——NDK与JNI基础Android之…...

编程日记 2023/7/31 8:58:52

使用python爬取淘宝商品信息

要使用Python爬取淘宝商品信息&#xff0c;您可以按照以下步骤&#xff1a; 安装必要的库 您需要安装Python的requests库和BeautifulSoup库。 要使用Python爬取淘宝商品信息&#xff0c;您可以按照以下步骤&#xff1a;安装必要的库 您需要安装Python的requests库和Beautifu…...

编程日记 2023/7/31 8:57:49

QEMU源码全解析18 —— QOM介绍（7）

接前一篇文章&#xff1a;QEMU源码全解析17 —— QOM介绍&#xff08;6&#xff09; 本文内容参考&#xff1a; 《趣谈Linux操作系统》 —— 刘超&#xff0c;极客时间 《QEMU/KVM》源码解析与应用 —— 李强&#xff0c;机械工业出版社 特此致谢&#xff01; 上一回完成了对…...

编程日记 2023/7/31 8:56:45

【华为OD机试】 选修课

题目描述 现有两门选修课&#xff0c;每门选修课都有一部分学生选修&#xff0c;每个学生都有选修课的成绩&#xff0c;需要你找出同时选修了两门选修课的学生&#xff0c;先按照班级进行划分&#xff0c;班级编号小的先输出&#xff0c;每个班级按照两门选修课成绩和的降序排序…...

编程日记 2023/7/31 8:55:43

225. 用队列实现栈

请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0c;并支持普通栈的全部四种操作&#xff08;push、top、pop 和 empty&#xff09;。 实现 MyStack 类&#xff1a; void push(int x) 将元素 x 压入栈顶。 int pop() 移除并返回栈顶元素。 int to…...

编程日记 2023/7/31 8:54:42

IDEA将本地项目上传到码云

一、创建本地仓库并关联 用IDEA打开项目&#xff0c;在菜单栏点击vcs->create git repository创建本地仓库&#xff0c; 选择当前项目所在的文件夹当作仓库目录。 二、将项目提交本地仓库 项目名右键就会出现“GIT”这个选项->Add->Commit Directory, 先将项目add…...

编程日记 2023/7/31 8:53:40

Ubuntu更改虚拟机网段（改成桥接模式无法连接网络）

因为工作需要&#xff0c;一开始在安装vmware和虚拟机时&#xff0c;是用的Nat网络。 现在需要修改虚拟机网段&#xff0c;把ip设置成和Windows端同一网段&#xff0c;我们就要去使用桥接模式。 环境&#xff1a; Windows10、Ubuntu20.04虚拟机编辑里打开虚拟网络编辑器&#…...

编程日记 2023/7/31 8:52:39

谷粒商城第七天-商品服务之分类管理下的删除、新增以及修改商品分类

目录 一、总述 1.1 前端思路 1.2 后端思路 二、前端部分 2.1 删除功能 2.2 新增功能 2.3 修改功能 三、后端部分 3.1 删除接口 3.2 新增接口 3.3 修改接口 四、总结 一、总述 1.1 前端思路 删除和新增以及修改的前端无非就是点击按钮&#xff0c;就向后端发送请求…...

编程日记 2023/7/31 8:51:36

Redis学习路线（1）—— Redis的安装

一、NoSQL SQL VS NoSQL 1、名称 SQL 主要是指关系数据库。NoSQL 主要是指非关系数据库。 2、存储结构 SQL 是结构化的数据库&#xff0c;以表格的形式存储数据。NoSQL 是非结构化的数据库&#xff0c;以Key-Value&#xff08;Redis&#xff09;&#xff0c;JSON格式文档&…...

编程日记 2023/7/31 8:50:34

《MySQL 实战 45 讲》课程学习笔记（五）

数据库锁&#xff1a;全局锁、表锁和行锁 根据加锁的范围&#xff0c;MySQL 里面的锁大致可以分成全局锁、表级锁和行锁三类。 全局锁 全局锁就是对整个数据库实例加锁。 MySQL 提供了一个加全局读锁的方法&#xff0c;命令是 Flush tables with read lock (FTWRL)。当你需要…...

编程日记 2023/7/31 8:49:32

使用GADL对高程数据进行填洼

对于DEM数据中存在的洼地&#xff08;sink&#xff09;问题&#xff0c;可以使用GADL&#xff08;Geospatial Data Abstraction Library&#xff09;中的功能进行填洼操作。GADL是一个开源的GIS库&#xff0c;提供了许多对地理空间数据进行处理和分析的功能。 下面是使用GADL对…...

编程日记 2023/7/31 8:48:31

Spring Boot集成Swagger3.0,Knife4j导出文档

文章目录 Spring Boot集成Swagger3.0,Knife4j导出文档效果展示如何使用简要说明添加依赖添加配置类测试接口token配置位置 官网 说明情况 demo Spring Boot集成Swagger3.0,Knife4j导出文档 效果展示 如何使用 简要说明 Knife4j的前身是swagger-bootstrap-ui,前身swagger-boo…...

编程日记 2023/7/31 8:47:29

在.NET Framework中的连接字符串ConnectionStrings属性

在.NET Framework中&#xff0c;ConfigurationManager.ConnectionStrings属性是用来访问在Visual Studio IDE应用程序配置文件中配置的数据库连接字符串的。每个连接字符串在Visual Studio IDE配置文件中都以<add>元素的形式出现&#xff0c;该元素是<connectionStrin…...

编程日记 2023/7/31 8:46:28

kafka消费报错卡死：内存溢出OutOfMemoryError: Java heap space

文章目录 现象排查解决 现象 我们信控平台使用Java语言开发&#xff0c;Spring Cloud微服务架构&#xff0c;采用容器化部署&#xff0c;所有服务都部署在docker里面&#xff0c;使用docker-compose进行管理&#xff0c;使用portainer进行监控平台部署客户现场后&#xff0c;一…...

编程日记 2023/7/31 8:45:27

从芯片到产品：嵌入式AI与安全设计实战解析

1. 项目概述&#xff1a;一次面向未来的技术对话最近&#xff0c;我作为启扬智能的一员&#xff0c;有幸参与了「2025恩智浦技术巡回研讨会」的线下活动。这不仅仅是一次简单的产品展示或技术宣讲&#xff0c;更像是一场与产业链上下游伙伴、众多开发者同行进行的深度技术对话。…...

编程新知 2026/5/22 7:24:35

LEFT JOIN 中 ON 与 WHERE 过滤的差异

在 MySQL 数据库开发中&#xff0c;LEFT JOIN&#xff08;左外连接&#xff09;是一个最常被误用的语法。许多开发者往往习惯性地将所有过滤条件一股脑地往 ON 后面塞&#xff0c;或者为了排版好看将条件全部扔到 WREHRE 里面。 这种模糊的逻辑在普通内连接&#xff08;INNER J…...

编程新知 2026/5/22 6:47:56

谷歌AI掌门竟是死敌大股东！“DeepMind黑手党”四年卷走140亿美元

谷歌AI掌门竟是死敌大股东&#xff0c;“DeepMind黑手党”四年卷走140亿美元&#xff01;就在刚刚&#xff0c;全球科技圈爆出惊人消息——谷歌AI最高掌门人、DeepMind创始人、诺贝尔奖得主Demis Hassabis&#xff0c;被挖出是其最大死敌、超级独角兽Anthropic的早期隐秘金主&a…...

编程新知 2026/5/22 6:35:29

为什么你的盐印相总像P图？：Midjourney v6.2最新盐印相渲染漏洞（已验证387组测试图）及绕过方案

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;为什么你的盐印相总像P图&#xff1f; 盐印相&#xff08;Salted Paper Print&#xff09;作为19世纪早期摄影工艺的代表&#xff0c;其本质是依靠氯化钠与硝酸银反应生成感光氯化银&#xff0c;在阳光…...

编程新知 2026/5/22 6:01:34

别再只算差异了！用Cytoscape给Hub Gene分析加个‘可视化Buff’（附脑网络实战图）

别再只算差异了&#xff01;用Cytoscape给Hub Gene分析加个‘可视化Buff’&#xff08;附脑网络实战图&#xff09; 在生物信息学分析中&#xff0c;差异基因筛选往往是研究的第一步&#xff0c;但如何从海量差异基因中找出真正具有生物学意义的"关键调控者"&#xf…...

编程新知 2026/5/22 5:36:26

专栏导读：为什么需要从 MM 理解 HMM

一个真实的困境 假设你是一个 GPU 计算框架的开发者。用户写了这样一段代码&#xff1a; float *data malloc(1GB); // ... 填充数据 ... gpu_kernel<<<grid, block>>>(data); // 希望 GPU 直接访问 data在传统编程模型下&#xff0c;这不可能工作——GPU …...

编程新知 2026/5/22 5:10:43

智慧树自动刷课插件终极指南：三步实现高效网课自动化学习

智慧树自动刷课插件终极指南&#xff1a;三步实现高效网课自动化学习 【免费下载链接】zhihuishu 智慧树刷课插件&#xff0c;自动播放下一集、1.5倍速度、无声 项目地址: https://gitcode.com/gh_mirrors/zh/zhihuishu 还在为智慧树平台冗长的网课视频而烦恼吗&#xf…...

编程新知 2026/5/22 4:08:46

性价比高的国产PLM软件公司

在制造业领域&#xff0c;不少企业都面临着研发效率低下、协同困难等问题。比如某电子制造企业&#xff0c;研发部门与生产部门之间信息沟通不畅&#xff0c;图纸版本管理混乱&#xff0c;导致产品研发周期延长&#xff0c;生产成本增加&#xff0c;新品上市时间比预期晚了近30…...

编程新知 2026/5/22 3:45:14

基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)

畅阅读系统小程 目录 基于java的畅阅读系统小程序设计与实现 一、前言 二、系统功能设计 三、系统实现 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师&a…...

编程新知 2026/5/22 1:48:41

深度解析DDoS攻击：运作机制与防御体系构建

深度解析 DDoS 攻击&#xff1a;运作机制与防御体系构建适用读者&#xff1a;安全工程师、运维架构师、等保/合规建设人员目标&#xff1a;理解 DDoS 各类攻击原理&#xff0c;并建立分层的纵深防御体系&#xff08;云端清洗 本地抗损 应用层缓释&#xff09;一、DDoS 基本概…...

编程新知 2026/5/22 1:26:06