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

vue3学习:axios输入城市名称查询该城市天气

news 2025/7/13 12:49:15

说来惭愧，接触前端也有很长一段时间了，最近才学习axios与后端的交互。今天学习了一个查询城市天气的案例，只需输入城市名称，点击“查询”按钮便可以进行查询。运行效果如下：
在这里插入图片描述
案例只实现了基本的查询功能，没有用css进行美化，需要效果更好看一些，自己添加一些css样式就行。
说明如下：

一、头部引入

因为用到了vue3和axios，需要在头部引入vue3库文件和axios库文件，我这里是网页版，采用的是CDN方式。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

二、注册成为天气用户

因为要用到天气信息，所以需要注册成为气象数据接口服务平台用户。这里使用的是“天气API”，该网站网址为http://www.tianqiapi.com/，网站界面如下。
在这里插入图片描述
1.注册：在页面底端，也就是页脚部分可以“马上注册”，如图所示。
在这里插入图片描述
注册过程非常简单。注册成功以后，登录就可以使用了。
2.选择首页上的v62，如图所示。
在这里插入图片描述
我们代码中出现的baseURL，除了示例中的网址，baseURL: ‘http://v1.yiketianqi.com’，也可以使用请求示例中的网址。其中，id和appsecret就是注册后网站给提供的。
在这里插入图片描述

三、完整代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>输入城市名称，查询天气 </title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body><div id="container"><div><input type="text" placeholder="请输入城市名" v-model="cityName" /><input type="button" value="查询" @click="handleWeather(cityName)" /></div><div class="weather"><div v-if="weatherInfo.city != ''"><p><span>{{weatherInfo.date}}</span>&nbsp;&nbsp;<span>{{weatherInfo.week}}</span></p><p><span>{{weatherInfo.city}}天气预报</span>&nbsp;&nbsp;<span>更新时间&nbsp;{{weatherInfo.update_time}}</span></p><br /><p><span>天气：{{weatherInfo.wea}}</span></p><p><span><span>空气质量：{{weatherInfo.air_level}},</span>{{weatherInfo.air_tips}}</span></p><div v-if="weatherInfo.air_level=='优'">适宜出行</div><div v-else>不适合出行</div><p><span>现在温度：{{weatherInfo.tem}}度</span>&nbsp;&nbsp;<span>{{weatherInfo.tem2}}度～{{weatherInfo.tem1}}度</span></p><p><span>{{weatherInfo.win}}</span>&nbsp;&nbsp;<span>{{weatherInfo.win_speed}}</span></p><p><span>降雨量：{{weatherInfo.rain_pcpn}}</span></p></div></div></div><script>const appObj = Vue.createApp({setup(props, context) {const cityName = Vue.ref('')const infoData = Vue.reactive({weatherInfo: {city: '',date: '',week: '',update_time: '',wea: '',tem: '',tem1: '',tem2: '',win: '',win_speed: '',air_level: '',air_tips:'',rain_pcpn:'',}})//create创建axios实例const instance = axios.create({baseURL: 'http://v1.yiketianqi.com'   })//添加请求拦截器instance.interceptors.request.use((config) => {return config;}, (error) => {console.log("请求出错")           //请求出错时的处理return Promise.reject(error);})//添加响应拦截器instance.interceptors.response.use((response) => {if (response.status === 200 && response.data) {//响应成功时的处理console.log("响应成功")}return response}, (error) => {console.log("响应失败")              //响应失败时的处理return Promise.reject(error.response.data)})//async/await写法const handleWeather = async (name) => {cityName.value = nameconst res = await instance.get("/api",{params: {unescape: 1,version: 'v61',appid: '123456789', //改成自己的appsecret: '123456789',city: name}})infoData.weatherInfo.city = res.data.cityinfoData.weatherInfo.date = res.data.dateinfoData.weatherInfo.update_time = res.data.update_timeinfoData.weatherInfo.week = res.data.weekinfoData.weatherInfo.wea = res.data.weainfoData.weatherInfo.tem = res.data.teminfoData.weatherInfo.tem1 = res.data.tem1infoData.weatherInfo.tem2 = res.data.tem2infoData.weatherInfo.win = res.data.wininfoData.weatherInfo.win_speed = res.data.win_speedinfoData.weatherInfo.air_level = res.data.air_levelinfoData.weatherInfo.air_tips = res.data.air_tipsinfoData.weatherInfo.rain_pcpn = res.data.rain_pcpn}return {cityName,infoData,...Vue.toRefs(infoData),handleWeather}}})appObj.mount('#container')  </script>
</body>
</html>

相关文章：

vue3学习:axios输入城市名称查询该城市天气

说来惭愧&#xff0c;接触前端也有很长一段时间了&#xff0c;最近才学习axios与后端的交互。今天学习了一个查询城市天气的案例&#xff0c;只需输入城市名称&#xff0c;点击“查询”按钮便可以进行查询。运行效果如下&#xff1a; 案例只实现了基本的查询功能&#xff0c;没…...

编程日记 2024/10/5 5:28:43

影刀RPA实战：Excel拆分与合并工作表

1.影刀操作excel的优势 Excel&#xff0c;大家都不陌生&#xff0c;它是微软公司推出的一款电子表格软件&#xff0c;它是 Microsoft Office 套件的一部分。Excel 以其强大的数据处理、分析和可视化功能而闻名&#xff0c;广泛应用于商业、教育、科研等领域。可以说&#xff0…...

编程日记 2024/10/5 5:25:40

STM32三种启动模式：【详细讲解】

STM32在上电后&#xff0c;从那里启动是由BOOT0和BOOT1引脚的电平决定的&#xff0c;如下表&#xff1a; BOOT模式选引脚启动模式BOOT0BOOT1X0主Flash启动01系统存储器启动11内置SRAM启动 BOOT 引脚的值在重置后 SYSCLK 的第四个上升沿时被锁定。在重置后,由用户决定是如何设…...

编程日记 2024/10/5 5:22:36

Ray_Tracing_The_Next_Week

1动态模糊 动态模糊在摄影中就是快门的速度慢&#xff0c;捕捉光的时间长&#xff0c;物体运动时进行捕捉成像&#xff0c;拍出来的结果是这个运动过程每一帧的平均值 我们的思路是&#xff1a; 每一条光线都拥有自己存在的一个时间点。随着时间变化随机生成光线,一般来说我…...

编程日记 2024/10/5 5:17:32

DBT hook 实战教程

本文将介绍dbt中在模型和seed级别使用post-hook的几个具体示例。dbt中的Post-hooks是一个强大而简单的特性&#xff0c;它在构建模型之后(如果是pre-hook&#xff0c;甚至在此之前)执行SQL语句。这些语句实际上(几乎)可以是任何东西&#xff0c;从将表复制到另一个数据库/模式&…...

编程日记 2024/10/5 5:16:31

SpringBoot整合JPA详解

SpringBoot版本是2.0以上(2.6.13) JDK是1.8 一、依赖 <dependencies><!-- jdbc --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jdbc</artifactId></dependency><!--…...

编程日记 2024/10/5 5:15:30

【微服务】springboot 实现动态修改接口返回值

目录 一、前言 二、动态修改接口返回结果实现方案总结 2.1 使用反射动态修改返回结果参数 2.1.1 认识反射 2.1.2 反射的作用 2.1.3 反射相关的类 2.1.4 反射实现接口参数动态修改实现思路 2.2 使用ControllerAdvice 注解动态修改返回结果参数​​​​​​​ 2.2.1 注解…...

编程日记 2024/10/5 5:14:29

【前端开发入门】html快速入门

目录 引言一、html基础模板内容二、html文档流三、html 标签1.块级元素2.行内元素3.功能性元素4.标签嵌套 四、html编码习惯五、总结 引言 本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容&#xff0c;并不代表这部分内容不…...

编程日记 2024/10/5 5:12:27

python配置环境变量

方法一&#xff1a;首先卸载重新安装&#xff0c;在安装时勾选增加环境变量 方法二&#xff1a;我的电脑-属性-高级系统配置 手动添加环境变量&#xff0c;路径为python的安装路径 检查&#xff1a;查看环境变量是否安装成功 安装第三方lib winr&#xff0c;输入cmd pip ins…...

编程日记 2024/10/5 5:11:26

从0到1：培训机构排课小程序开发笔记一

业务调研 随着人们生活水平的提高&#xff0c;健康意识和学习需求日益增强&#xff0c;私教、健身和培训机构的市场需求迅速增长。高效的排课系统不仅可以提升机构的管理效率&#xff0c;还能提高学员的满意度。解决传统的排课方式存在的时间冲突、信息不对称、人工操作繁琐等…...

编程日记 2024/10/5 5:08:24

方法重载(Overload)

前言 在前面的学习中&#xff0c;我们学到了重写(Override),这里我们主要进行重载(Overload)的介绍&#xff0c;同时对重写和重载的区别进行分析。 1. 重载(Overload) #方法重载 在同一个类中定义多个同名但参数不同的方法。我们称方法与方法之间构成方法重载 在Java中&…...

编程日记 2024/10/5 5:06:22

[论文笔记]SGPT: GPT Sentence Embeddings for Semantic Search

引言 解码器Transformer的规模不断壮大&#xff0c;轻松达到千亿级参数。同时由于该规模&#xff0c;基于提示或微调在各种NLP任务上达到SOTA结果。但目前为止解码器Transformer还无法应用在语义搜索或语句嵌入上。 为了简单&#xff0c;下文中以翻译的口吻记录&#xff0c;比…...

编程日记 2024/10/5 5:05:20

基于微信小程序的旅游拼团系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…...

编程日记 2024/10/5 5:03:18

富格林：警悟可信经验安全投资

富格林指出&#xff0c;黄金具有不错的投资价值&#xff0c;一直以来备受投资者的喜爱&#xff0c;近年来大家也纷纷加入现货黄金市场为己增值财富。但是要为投资安全护航的前提&#xff0c;是需要投资者使用合适可信的方法以及掌握相对应的投资技巧。下面富格林将总结以下可信…...

编程日记 2024/10/5 5:02:17

【Linux】使Ubuntu自适应窗口大小并与主机共享文件

LInux虚拟机版本ubuntu-20.04.6&#xff0c;VM版本VMware Workstation 17 Pro VMware Tools™ 是一组服务和模块&#xff0c;是VMware公司在其虚拟化平台中提供的一套工具集&#xff0c;旨在提高虚拟机的性能和稳定性。它们支持 VMware 产品中的多种功能特性&#xff0c;有助于…...

编程日记 2024/10/5 5:01:17

C++ 语言特性18 - static_assert 介绍

一&#xff1a;概述 在 C 中&#xff0c;static_assert 是一种用于在编译时进行断言的机制&#xff0c;确保某些编译时条件成立。如果条件不成立&#xff0c;则编译器会生成错误&#xff0c;阻止代码的编译。static_assert 在 C11 中引入&#xff0c;目的是帮助程序员在编译时捕…...

编程日记 2024/10/5 4:59:14

centos 7.9系统redis6.2.6哨兵模式部署

由于系统需要处理大量的数据并发请求，所以借助于Redis的高性能，可以有效提升整个系统的处理效率。这里采用redis6.2版本源码编译部署哨兵模式，提高整个系统的可用性，避免单点故障。 1. Redis基本环境安装 centos7安装redis 6.2.6 采用源码编译方式安装。 服务器主机名：…...

编程日记 2024/10/5 4:57:12

编程基础：详解 C++ 中的 `std::sort` 函数

编程基础&#xff1a;详解 C 中的 std::sort 函数 在C编程中&#xff0c;排序是非常常见的操作&#xff0c;而std::sort是C标准库中用于排序的一个高效函数。它提供了灵活的排序功能&#xff0c;可以使用默认排序规则或自定义的比较函数。本文将深入探讨std::sort的用法、参数要…...

编程日记 2024/10/5 4:56:11

51单片机的宠物自动投喂系统【proteus仿真+程序+报告+原理图+演示视频】

1、主要功能 该系统由AT89C51/STC89C52单片机LCD1602显示模块温湿度传感器DS1302时钟模块蓝牙步进电机按键、蜂鸣器等模块构成。适用于猫猫/狗狗宠物自动喂食器等相似项目。 可实现基本功能: 1、LCD1602实时显示北京时间和温湿度 2、温湿度传感器DHT11采集环境温湿度 3、时…...

编程日记 2024/10/5 4:53:56

MongoDB快速实战与基本原理

目录 链接：https://note.youdao.com/ynoteshare/index.html?id=5e038498891617c552667b853742fdc1&type=note&_time=1727935558812 Mongo数据库的特点： mongo数据库和关系型数据库的区别： ​编辑 关系型数据库和文档型数据库的主要概念对比： 下载和启动（具体…...

编程日记 2024/10/5 4:50:53

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2025/7/12 9:22:06

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2025/7/12 8:36:24

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/7/11 19:32:11

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/7/12 10:10:25

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/7/12 10:32:28

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/7/9 18:40:03

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2025/7/12 17:36:34

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2025/7/11 21:59:55

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

编程新知 2025/7/8 0:25:26

mac：大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...

编程新知 2025/7/12 10:21:45