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

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

news 2026/5/21 11:59:34

说来惭愧，接触前端也有很长一段时间了，最近才学习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

别再手动敲命令了！用Kuboard-Spray v1.2.4图形化搞定K8s集群（附CentOS 7.9避坑实录）

图形化利器Kuboard-Spray v1.2.4&#xff1a;三分钟搭建生产级K8s集群的避坑指南 当你在凌晨三点盯着满屏的kubeadm init报错信息时&#xff0c;是否想过Kubernetes集群部署还能更简单&#xff1f;去年我们团队在客户现场部署一套生产环境时&#xff0c;传统命令行方式让我们在…...

编程新知 2026/5/21 10:54:37

XXMI启动器：二次元游戏模组管理的一站式解决方案，5分钟搞定复杂配置

XXMI启动器&#xff1a;二次元游戏模组管理的一站式解决方案&#xff0c;5分钟搞定复杂配置 【免费下载链接】XXMI-Launcher Modding platform for GI, HSR, WW and ZZZ 项目地址: https://gitcode.com/gh_mirrors/xx/XXMI-Launcher XXMI启动器是一款革命性的开源游戏模…...

编程新知 2026/5/21 9:47:24

跨越生态鸿沟：Windows如何优雅解码苹果的HEIC格式

跨越生态鸿沟&#xff1a;Windows如何优雅解码苹果的HEIC格式 【免费下载链接】windows-heic-thumbnails Enable Windows Explorer to display thumbnails for HEIC/HEIF files 项目地址: https://gitcode.com/gh_mirrors/wi/windows-heic-thumbnails 你知道吗&#xff…...

编程新知 2026/5/21 9:41:09

终极指南：3步在电脑上免费畅玩PS4游戏的神器——shadPS4模拟器

终极指南&#xff1a;3步在电脑上免费畅玩PS4游戏的神器——shadPS4模拟器 【免费下载链接】shadPS4 PS4 emulator for Windows,Linux,MacOS 项目地址: https://gitcode.com/gh_mirrors/shad/shadPS4 还在为无法在电脑上体验PS4独占游戏而烦恼吗&#xff1f;shadPS4模拟…...

编程新知 2026/5/21 9:35:05

GD32 RISC-V BSP框架设计：从硬件抽象到跨平台移植实战

1. 项目概述&#xff1a;为什么我们需要一个专属的BSP框架&#xff1f;如果你正在使用GD32的RISC-V内核MCU&#xff0c;比如GD32VF103系列&#xff0c;并且是从STM32或者其他ARM Cortex-M平台转过来的&#xff0c;那你大概率踩过这样的坑&#xff1a;官方提供的固件库&#xff…...

编程新知 2026/5/21 7:17:35

初识C语言（一）

C语言的介绍 计算机语言 C语言是通用的计算机编程语言&#xff0c;广泛应用于底层开发&#xff08;操作系统及以下&#xff09;。 计算机语言可以分为三大类&#xff1a; 机器语言&#xff08;二进制&#xff0c;可直接被机器识别&#xff09;汇编语言&#xff08;用助记符来…...

编程新知 2026/5/21 6:26:04

用FPGA的DDS IP核做个信号发生器：从Vivado配置到ILA抓波形实战

基于FPGA的DDS信号发生器实战&#xff1a;从IP核配置到硬件调试全解析 在数字信号处理领域&#xff0c;直接数字频率合成(DDS)技术因其频率分辨率高、切换速度快和相位连续可调等优势&#xff0c;已成为现代电子系统中不可或缺的核心技术。本文将带领读者完成一个完整的FPGA-ba…...

编程新知 2026/5/21 5:23:25

Aspia文本聊天功能：内置即时通讯的远程协助工具

Aspia文本聊天功能&#xff1a;内置即时通讯的远程协助工具 【免费下载链接】aspia Remote desktop and file transfer tool. 项目地址: https://gitcode.com/gh_mirrors/as/aspia Aspia是一款功能强大的远程桌面和文件传输工具&#xff0c;其内置的文本聊天功能为远程协…...

编程新知 2026/5/21 4:18:35

vim入门配置教程

Vim 最简配置教程&#xff08;新手直接抄&#xff09; 1. 找到配置文件 Linux/Mac/WSL vim ~/.vimrcWindows 文件路径&#xff1a;C:\Users\用户名\_vimrc 2. 直接粘贴通用好用配置 " 基础设置 set number " 显示行号 set relativenumber " 相对行号 …...

编程新知 2026/5/21 4:11:28

不止是省9.9刀：解锁特斯拉Model 3的‘行驶中保持WiFi’功能，打造家庭移动娱乐中心

不止是省9.9刀&#xff1a;解锁特斯拉Model 3的‘行驶中保持WiFi’功能&#xff0c;打造家庭移动娱乐中心 特斯拉Model 3的车载4G网络虽然方便&#xff0c;但在信号不佳的区域或需要大流量娱乐的场景下&#xff0c;往往显得力不从心。更让许多家庭用户纠结的是&#xff0c;高级…...

编程新知 2026/5/21 3:35:57