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

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

news 2026/4/1 10:32:05

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

火影迷的AI绘画神器：忍者绘卷Z-Image Turbo零基础入门实战

火影迷的AI绘画神器&#xff1a;忍者绘卷Z-Image Turbo零基础入门实战 1. 前言&#xff1a;当火影忍者遇上AI绘画 作为一名火影迷&#xff0c;你是否曾经幻想过自己也能创造出独特的忍者世界角色&#xff1f;现在&#xff0c;借助"忍者绘卷Z-Image Turbo"这款专为火…...

编程新知 2026/4/1 7:53:51

显卡驱动彻底清理指南：用DDU解决90%的显示问题

显卡驱动彻底清理指南&#xff1a;用DDU解决90%的显示问题 【免费下载链接】display-drivers-uninstaller Display Driver Uninstaller (DDU) a driver removal utility / cleaner utility 项目地址: https://gitcode.com/gh_mirrors/di/display-drivers-uninstaller 当…...

编程新知 2026/4/1 7:39:28

OpenClaw创始人加入OpenAI：这不是跳槽新闻，是整个AI行业换挡的信号

OpenClaw创始人加入OpenAI&#xff1a;这不是跳槽新闻&#xff0c;是整个AI行业换挡的信号摘要OpenClaw创始人Peter Steinberger正式加入OpenAI&#xff0c;项目移交开源基金会。Sam Altman亲自官宣&#xff0c;称他是"天才"。这件事的真正意义不在人事变动&#xff…...

编程新知 2026/4/1 6:54:07

Graphormer在计算毒理学中的应用：预测hERG通道抑制活性的完整建模流程

Graphormer在计算毒理学中的应用&#xff1a;预测hERG通道抑制活性的完整建模流程 1. 项目概述 Graphormer是一种基于纯Transformer架构的图神经网络&#xff0c;专门为分子图&#xff08;原子-键结构&#xff09;的全局结构建模与属性预测而设计。该模型在OGB、PCQM4M等分子…...

编程新知 2026/4/1 6:01:20

Zephyr与MCUBoot的深度整合：从构建到安全启动的完整指南

1. 为什么需要安全启动&#xff1f; 在嵌入式开发中&#xff0c;设备固件的安全性往往是最容易被忽视的一环。想象一下&#xff0c;如果你的智能门锁固件被恶意篡改&#xff0c;或者医疗设备的程序被非法替换&#xff0c;后果会有多严重&#xff1f;这就是为什么我们需要MCUBoo…...

编程新知 2026/4/1 5:26:59

Pi0一键部署教程：nohup后台运行+log实时监控+进程安全终止

Pi0一键部署教程&#xff1a;nohup后台运行log实时监控进程安全终止 本文介绍如何快速部署和运行Pi0机器人控制模型&#xff0c;重点讲解后台运行、日志监控和进程管理的实用技巧&#xff0c;让AI应用稳定运行在服务器环境中。 1. 项目简介&#xff1a;什么是Pi0&#xff1f; …...

编程新知 2026/4/1 5:12:54

DS4Windows手柄适配工具全解析：从安装到高级配置的完美指南

DS4Windows手柄适配工具全解析&#xff1a;从安装到高级配置的完美指南 【免费下载链接】DS4Windows Like those other ds4tools, but sexier 项目地址: https://gitcode.com/gh_mirrors/ds/DS4Windows 在PC游戏领域&#xff0c;手柄支持一直是玩家体验的关键环节。许多…...

编程新知 2026/4/1 3:37:13

为什么92%的团队在MCP项目中期被迫重构？Python 4大模板的抽象泄漏、协议耦合与测试盲区深度拆解

第一章&#xff1a;MCP服务器开发模板的行业现状与重构困局当前&#xff0c;MCP&#xff08;Model Control Protocol&#xff09;服务器作为AI智能体协同调度与协议网关的核心组件&#xff0c;在金融风控、工业边缘控制、多模态Agent编排等场景中加速落地。然而&#xff0c;主流…...

编程新知 2026/4/1 2:28:17

comsol matlab联合仿真 也可加入solidworks三软件联合 参数化建模 全自动...

comsol matlab联合仿真 也可加入solidworks三软件联合 参数化建模 全自动建模迭代分析 实现多目标优化 帕累托前沿 代码模型与仿真参数化建模这事儿&#xff0c;玩过CAD和仿真的都懂——改个螺丝孔直径就得重新画图导出&#xff0c;累死个人。不过要是把SolidWorks、COMSOL和M…...

编程新知 2026/4/1 2:22:05

网络安全有哪些岗位，如何成为一位优秀的网络安全工程师？

网络安全是什么&#xff1f; 首先说一下什么是网络安全&#xff1f; 网络安全工程师工作内容具体有哪些&#xff1f; 网络安全是确保网络系统的硬件、软件及其系统中的数据受到保护&#xff0c;不因偶然的或者恶意的原因而受到破坏、更改、泄露&#xff0c;系统连续可靠正常地…...

编程新知 2026/4/1 2:11:59