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

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

news 文章来源：https://blog.csdn.net/wangyining070205/article/details/142705122 2025/5/7 23:15:04

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

编程技巧：优化

第一种&#xff1a;构造回文串---构造法 题目描述 [NOIP2016 普及组] 回文日期 - 洛谷 那么这道题我们总结一些题目要求&#xff1a; 1.输入两个字符串&#xff0c;为起始和终止日期 2.年份不会出现前导0 3.如果是回文日期&#xff0c;答案1 4.如果月份是2&#xff0c;要…...

编程日记 2024/10/5 4:49:52

pycharm中使用anaconda创建多环境，无法将“pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

问题描述 用的IDE是&#xff1a; 使用anaconda创建了一个Python 3.9的环境 结果使用pip命令的时候&#xff0c;报错 无法将“pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 解决方案 为了不再增加系统变量&#xff0c;我们直接将变量添加在当前项目中你的Ter…...

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

【Linux】进程周边之优先级

目录 一、优先级 1.为什么要有进程优先级&#xff1f; 2.什么是进程优先级&#xff1f; 3.优先级的初始设定 3.1 PRI 和 NI 3.2如何修改优先级&#xff1f;&#xff08;sudo/root&#xff09; 3.2.1 概念&#xff1a; 3.2.2 如何查看进程的优先级&#xff1f; 3.3.3 或…...

编程日记 2024/10/5 4:43:46

Linux高级编程_29_信号

文章目录 进程间通讯 - 信号信号完整的信号周期信号的编号信号的产生发送信号1 kill 函数(他杀)作用&#xff1a;语法&#xff1a;示例&#xff1a; 2 raise函数(自杀)作用&#xff1a;示例&#xff1a; 3 abort函数(自杀)作用&#xff1a;语法&#xff1a;示例&#xff1a; 4 …...

编程日记 2024/10/5 4:42:43

uniapp修改uni-ui组件样式(对微信小程序/H5有效，vue3）

寻找要修改的样式 使用开发者工具找到具体要修改的class类名 修改 <style lang"scss">//.nav为上一级的class.nav::v-deep .uni-navbar--border {border-bottom-style: none !important;} </style>完整代码 <template><view><uni-na…...

编程日记 2024/10/5 4:41:42

Python 封装 socket 为 [TCP/UDP/MULTICAST] 服务端

在新线程中创建 TCP/UDP/MULTICAST 协议的服务端套接字&#xff0c;接收客户端的连接请求或数据&#xff0c;并调用 on_recv 回调函数处理数据。 #!/usr/bin/env python # -*- coding: utf-8 -*- import socket import threading import multiprocessingclass ServerSocket:de…...

编程日记 2024/10/5 4:37:37

c++ STL库 unordered_map

#include <iostream #include <string #include <unordered_map int main() { // 创建一个 unordered_map std::unordered_map<std::string, int> wordCount; // 插入元素 wordCount["apple"] 1; wordCount["banana"] 2;// 使用 insert…...

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

【接口测试】任务1：登录接口

需要技能竞赛软件测试资料的同学们可s聊我&#xff0c;详细了解 任务实现要求 根据系统管理员—登录—接口API文档&#xff0c;编写接口测试用例&#xff0c;分别使用PostMan及JMeter进行接口测试&#xff0c;需要检查系统接口是否能正常工作&#xff0c;返回值是否正确&#…...

编程日记 2024/10/5 4:34:33

二、Spring Boot集成Spring Security之实现原理

Spring Boot集成Spring Security之实现原理 一、Spring Security实现原理概要介绍二、使用WebSecurityConfiguration向Spring容器中注册FilterChainProxy类型的对象springSecurityFilterChain1、未配置securityFilterChain过滤器链时使用默认配置用于生成默认securityFilterCha…...

编程日记 2024/10/5 4:31:30

基于深度学习的点云处理模型PointNet++学习记录

前面我们已经学习了Open3D&#xff0c;并掌握了其相关应用&#xff0c;但我们也发现对于一些点云分割任务&#xff0c;我们采用聚类等方法的效果似乎并不理想&#xff0c;这时&#xff0c;我们可以想到在深度学习领域是否有相关的算法呢&#xff0c;今天&#xff0c;我们便来学…...

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