[vue]实现一个天气预报页面

news/2025/3/16 17:25:12/文章来源:https://www.cnblogs.com/XY-Heruo/p/18775278

前言

使用vue3 + element plus + axios。效果:

步骤

  1. 创建项目并安装依赖
npm create vue@latestcd vue3-demo1
npm install
npm run devnpm install --save axios vue-axios
npm install element-plus --save
  1. main.js全局引入
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import VueAxios from 'vue-axios'
import axios from 'axios'
import App from './App.vue'const app = createApp(App)
app.use(ElementPlus)
app.use(VueAxios, axios)
app.mount('#app')
  1. vite.config.js中配置跨域代理
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),],server: {proxy: {'/myApi': {target: 'https://apis.juhe.cn/',changeOrigin: true,rewrite: (path) => path.replace(/^\/myApi/, '')}}},resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},
})
  1. 编辑App.Vue。注意替换axios请求中的key。
<script setup>
import WeatherDemo from './components/WeatherDemo.vue'
</script><template><div><WeatherDemo/></div></template>
  1. 编辑WeatherDemo.vue
<template><el-container class="container"><el-header><el-input placeholder="Please input" class="input" v-model="city"><template #prepend>城市名:</template></el-input></el-header><el-main class="main"><div class="today">今日:<span>{{ this.todayData.weather ?? this.plc }} {{ this.todayData.temperature ?? this.plc }}</span><span style="margin-left: 20px;">{{ this.todayData.direct ?? this.plc }}</span><span style="margin-left: 100px;">{{ this.todayData.date }}</span></div><div class="real"><span class="temp">{{ this.realtime.temperature ?? this.plc }}°</span><span class="realInfo">{{ this.realtime.info ?? this.plc }}</span><span class="realInfo" style="margin-left: 20px;">{{ this.realtime.direct ?? this.plc }}</span><span class="realInfo" style="margin-left: 20px;">{{ this.realtime.power ?? this.plc }}</span><span></span></div><div class="real"><span class="realInfo">空气质量: {{ this.realtime.aqi ?? this.plc }}</span><span class="realInfo" style="margin-left: 30px;">湿度: {{ this.realtime.humidity ?? this.plc }}</span></div><div class="future"><div class="header">5日天气预报</div><el-table :data="futureData" style="margin-top: 30px;"><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="temperature" label="温度"></el-table-column><el-table-column prop="weather" label="天气"></el-table-column><el-table-column prop="direct" label="风向"></el-table-column></el-table></div></el-main></el-container>
</template><script>
export default {mounted() {this.axios.defaults.baseURL = '/myApi'this.requestData()},data() {return {city: "合肥",weatherData: {},todayData: {},plc: "暂无数据",realtime: {},futureData: []}},watch: {city() {this.requestData()}},methods: {requestData() {let city = encodeURI(this.city)let api = `/simpleWeather/query?key=xxx&city=${city}`this.axios.get(api).then((resp) => {console.log(resp.data)this.weatherData = resp.datathis.todayData = this.weatherData.result.future[0]this.realtime = this.weatherData.result.realtimethis.futureData = this.weatherData.result.future})}}
}
</script><style scoped>
.container {background: linear-gradient(rgb(13, 104, 188), rgb(54, 131, 195));
}.input {width: 300px;margin-top: 20px;
}.today {font-size: 20px;color: white;
}.temp {font-size: 79px;color: white;
}.realInfo {color: white;
}.future {margin-top: 40px;
}.header {color: white;font-size: 27px;
}
</style>

参考

  • 《循序渐进Vue.JS前端开发实战》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/899869.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【启程】CSP2024 游记

前言 upd:——希君生羽翼,化北溟鱼,度春风。 初赛前一天晚上开坑,回忆一下去年J组的经历。 回忆幸运的第一轮 初赛是什么?做了一套22年的卷子,连蒙带猜差不多70pts?考场直接瞎写,一半左右都是蒙的,判断去全选对,完善程序全蒙,最后9个判断7个A,30pts的完型蒙到了15p…

[Webpack] 打包优化 二

optimization optimization这个配置项内部的很多优化策略都是在生产环境默认开启的,启用这些规则从一定程序上来讲可以显著减少 bundle 体积,优化代码生成,帮助长期缓存等。 optimization.minimize optimization.minimize指定 webpack 默认使用 terser-webpack-plugin 来压缩…

坐标转换软件 | CGCS2000 经纬度坐标 与 高斯克吕格3度投影平面坐标的互相转换

软件下载地址: 链接: https://pan.baidu.com/s/1ySwut1CpFLTSkGTVy792Fw?pwd=dyzj 提取码: dyzj 关于软件软件介绍:Fast坐标转换软件 是一款专为地理信息系统(GIS)和测绘领域设计的实用工具,旨在实现CGCS2000经纬度(地理坐标)与高斯-克吕格3度投影平面坐标之间的快速、精确转…

可持久化线段树(主席树)学习笔记

可持久化线段树(主席树)学习笔记主席树求解的问题一般是区间历史求值的问题,即对一些点进行操作后,求其中一个版本的答案 最朴素的方法就是每一次操作都将原线段树复制一遍,但是这样很费空间,而且产生了大量无用的点 但是可以发现,每次修改时所走的路径其实只经过了根到对…

FBI树

FBI树 题目描述 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称为B串,全“1”串称为I串,既含“0”又含“1”的串则称为F串。 FBI树是一种二叉树,它的结点类型也包括F结点,B结点和I结点三种。由一个长度为2N的“01”串S可以构造出一棵FBI树T,递归的构造方法如…

学嵌入式C语言,看这一篇就够了(4)

C语言的输入输出 C语言标准在发布的同时,ANSI组织同时也一起发布了和C语言相关的函数库,也就是标准C库,标准C库集成了很多的API函数接口,比如常用的输入和输出函数就是标准C库提供的 用户如果打算使用标准C库的函数,就必须要包含函数库对应的头文件,比如输入输出函数对应…

数字三角形最大路径和

1 #include <iostream>2 #include <vector>3 #include <algorithm>4 using namespace std;5 6 // 自顶向下的方式7 pair<int, vector<int>> maximumTotal(vector<vector<int>>& triangle) {8 int n = triangle.size();9 …

查询实战

统计员工性别并返回数据: select if(gender=1,man,women) 性别,count(*) from tb_emp group by gender;统计员工职位并返回数据: selectcase job when 1 then 班主任when 2 then 讲师when 3 then 学工主管when 4 then 教研主管else 未分配 end 职位,count(*) from tb_emp group…

grpc使用postman测试-问题集合

问题1:postman中proto文件import问题 Unresolved "import" directives We could not find some of the files imported by the .proto file. Specify import paths to those unresolved files using the options below.解决方法: 项目结构如下 - code |- pbentity…

Qt利用QScrollArea和QLabel实现滚轮完整显示OpenCV图片大小

解决三个常见问题,满足大部分UI界面需求。1、加载图像尺寸过大(大于窗口尺寸),在窗口自适应缩放显示大小,不改变宽高比例。2、加载图像尺寸小于窗口尺寸,使图像对齐居中显示在窗口。3、加载图像尺寸过大(大于窗口尺寸),不对图像进行缩放显示,而是在窗口产生滚轮来显示…

MYSQL-DQL操作

基本查询:查询特定列: select name,entrydate from tb_emp; 查询所有: select * from tb_emp; 查询并起别名: select name as bbb,entrydate as aaa from tb_emp;(as可省略) 去除重复记录: select distinct job from tb_emp; 条件查询:点击查看代码 select * from tb_emp where…

第二章练习题

2.1 点击查看代码 TempStr = input("请输入带有符号的温度值:") if isinstance(TempStr, str) and TempStr[-1] in [F, f]:C = int((float(TempStr[0:-1]) - 32) / 1.8)print(f"转换后的温度是{C}C") elif isinstance(TempStr, str) and TempStr[-1] in […