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

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

news 2025/11/5 11:35:56

目录

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

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/9/17 19:16:20

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/10/23 13:28:30

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/10/22 15:29:45

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2025/10/19 9:49:56

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2025/9/3 5:42:53

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

编程新知 2025/10/29 17:36:05

Matlab实现任意伪彩色图像可视化显示

Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像 在科研研究中&#xff0c;如何展示好看的实验结果图像非常重要&#xff01;&#xff01;&#xff01; 1、灰度原始图像 灰度图像每个像素点只有一个数值&#xff0c;代表该点的​​亮度&#xff08;或…...

编程新知 2025/11/2 3:43:51

AxureRP-Pro-Beta-Setup_114413.exe （6.0.0.2887）

Name&#xff1a;3ddown Serial&#xff1a;FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名&#xff1a;Axure 序列号&#xff1a;8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...

编程新知 2025/10/28 7:14:48