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

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

news 文章来源：https://blog.csdn.net/weixin_51930617/article/details/132012816 2025/5/26 11:16:52

目录

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

mac卸载与安装指定版本node

一、查看当前node.js版本 node -v 二、卸载当前node.js # 这里是卸载npm的 sudo npm uninstall npm -g# 这里是用来删除node创建的各种文件夹 sudo rm -rf /usr/local/lib/node sudo rm -rf /usr/local/lib/node_modules sudo rm -rf /var/db/receipts/org.nodejs.* sudo rm…...

编程日记 2023/7/31 8:44:25

机器学习深度学习——Dropout

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——权重衰减 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你们有所帮助 Drop…...

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

Intel和AMD 与 x86，ARM，MIPS有什么区别？

先说amd和intel amd和Intel这俩公司的渊源很深&#xff0c;早期时Intel先是自己搞了个x86架构&#xff0c;然后amd拿到了x86的授权也可以自己做x86了。接着intel向64位过渡的时候自己搞了个ia64&#xff08;x64架构&#xff09;但是因为和x86架构不兼容市场反应极差&#xff0…...

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

QT编写的串口助手

QT编写的串口助手 提前的知识 创建UI界面工程 找帮助文档 添加串口的宏...

编程日记 2023/7/31 8:41:23

C语言字符串的处理

用惯了Java C#这些语言&#xff0c;C语言中处理字符串还是有些不习惯的&#xff0c;所以这里写一下学习笔记。 C中字符串就是字符数组&#xff0c;是指向字符的指针&#xff0c;并且以空字符 \0 结尾&#xff0c;字符串作为函数的参数传递时一般使用指针类型&#xff0c;使用数…...

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

Docker 阿里云容器镜像服务

阿里云-容器镜像服务ACR 将本地/服务器docker image&#xff08;镜像&#xff09;推送到 阿里云容器镜像服务仓库 1. 在容器镜像服务ACR中创建个人实例 2. 进入个人实例 > 命名空间 创建命名空间 3. 进入个人实例 > 镜像仓库 创建镜像仓库 4. 进入镜像仓库 > 基本信…...

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

10kV 电力电缆交流耐压试验方案

...

编程日记 2023/7/31 8:38:20

【雕爷学编程】MicroPython动手做（20）——掌控板之三轴加速度6

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…...

编程日记 2023/7/31 8:37:18

链路 聚合

静态链路聚合&#xff1a;多数内网使用 。非物理直连建议与BFD联动 动态链路聚合LACP&#xff1a;是公有协议、内网、二层专线接口都能使用&#xff0c;现网多数使用此方式链路 聚合 PAGP&#xff1a;思科私有协议&#xff0c;只支持思科设备使&#xff0c;现网多数不用...

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

DPN（Dual Path Network）网络结构详解

论文&#xff1a;Dual Path Networks 论文链接&#xff1a;https://arxiv.org/abs/1707.01629 代码&#xff1a;https://github.com/cypw/DPNs MXNet框架下可训练模型的DPN代码&#xff1a;https://github.com/miraclewkf/DPN 我们知道ResNet&#xff0c;ResNeXt&#xff0c;D…...

编程日记 2023/7/31 8:35:14