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

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

news 2025/9/13 18:29:49

目录

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

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/9/12 19:35:13

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/9/11 15:17:20

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/9/8 2:34:58

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2025/9/12 22:07:42

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/8/8 11:04:42

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2025/8/25 19:36:37

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/8/30 5:01:00

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/9/2 8:07:37

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2025/9/9 10:08:20

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

编程新知 2025/9/2 16:50:55