西城企业网站建设,深圳设计网站多少钱,微信账号注册官网,国内永久免费crm系统软件高清完整版Vue3 Axios 实现一个精美天气组件#xff08;含实时与未来预报#xff09;
一、前言
在很多管理系统、信息看板、门户首页中#xff0c;天气模块是一个常见的小组件。 它不仅能展示当前的气温、天气状况#xff0c;还能提供未来几天的天气趋势#xff0c;让用户对环境有…Vue3 Axios 实现一个精美天气组件含实时与未来预报
一、前言
在很多管理系统、信息看板、门户首页中天气模块是一个常见的小组件。 它不仅能展示当前的气温、天气状况还能提供未来几天的天气趋势让用户对环境有更好的感知。
今天我们就用 Vue3 Axios实现一个能够自动定位并展示实时天气和未来预报的天气组件。 并且我们会配上相应的天气图标让界面更美观。 二、效果预览
组件会自动获取当前城市的天气
实时天气温度 天气图标今日最高/最低温度未来 5 天天气预报自动根据天气文字匹配相应的图片 三、实现思路 数据来源 我们使用 心知天气 APIhttps://seniverse.com/来获取天气数据locationip 参数可以根据用户的 IP 自动定位城市。 技术栈 Vue3组合式 APIAxios请求 API 数据SCSS美化界面图片资源天气图标 功能逻辑 用 axios.get 分别请求 实时天气 和 未来天气。将获取的数据存入 Vue3 的 ref 响应式变量。根据天气文字选择对应的图标如“晴”、“小雨”、“暴雪”等。用 v-for 循环渲染未来天气列表。 四、代码实现
templatediv classweather!-- 地址信息 --div classaddressimg src/assets/index/weather/address.png alt /span{{ weatherData.location.name }}/span !-- 城市名称 --/div!-- 当前气候信息 --div classclimate!-- 天气图标 --img classclimate-icon :srcgetWeatherIcon(weatherData.now.text) alt /!-- 温度 --div classwendu{{ weatherData.now.temperature }}span℃/span/div!-- 今日最高/最低气温 空气质量 --div classtodaydiv classlabelspan今天/spanspan{{ text }}/span !-- 天气描述如晴、阴、雨等 --/divdiv classvaluespan classvalue-text{{ future.daily[0].high }}/{{ future.daily[0].low }}℃/spandiv classqualityspan classquality-icon/spanspan classquality-text优/span !-- 空气质量这里写死为优 --/div/div/div/div!-- 未来几天天气 --div classfuturetemplate v-for(item, index) in future.daily :keyindexdiv classfuture-item!-- 天气图标白天 --img :srcgetWeatherIcon(item.text_day) alt /div classfuture-boxdiv classbox-label{{ parseTime(item.date, {m}月{d}日) }}/divdiv classbox-value{{ item.high }}/{{ item.low }}℃/div/div/div!-- 分隔线最后一天不画 --div classfuture-line v-ifindex ! future.daily.length - 1/div/template/div/div
/templatescript setup nameWeather
import axios from axios;// 当前天气数据实时
const weatherData ref({location: {},now: {},
});// 未来天气数据默认值避免渲染时报错
const future ref({location: {},daily: [{high: 30,low: 10,},],
});// 根据天气描述返回对应的图标路径
const getWeatherIcon (text) {let img 晴; // 默认是晴天switch (text) {case 晴: img 晴; break;case 暴雨: img 暴雨; break;case 雷阵雨: img 雷阵雨; break;case 雷阵雨伴有冰雹: img 雷阵雨伴有冰雹; break;case 大暴雨: img 特大暴雨; break;case 特大暴雨: img 特大暴雨; break;case 雾: img 雾; break;case 小雨:case 中雨:case 大雨: img 下雨; break;case 阵雪: img 阵雪; break;case 小雪:case 中雪:case 大雪: img 雪; break;case 暴雪: img 暴雪; break;case 风:case 大风: img 风; break;case 飓风:case 热带风暴:case 龙卷风: img 风; break;case 雨夹雪: img 雨夹雪; break;default: break;}// 返回图片路径Vite 的 new URL 写法return new URL(../../assets/index/weather/${img}.png, import.meta.url).href;
};// 获取天气数据调用心知天气 API
const getList () {// 当前天气axios.get(https://api.seniverse.com/v3/weather/now.json?keySjyiLD_odjCGOsHoFlocationiplanguagezh-Hansunitc).then((res) {weatherData.value res.data.results[0];});// 未来 5 天的天气axios.get(https://api.seniverse.com/v3/weather/daily.json?keySjyiLD_odjCGOsHoFlocationiplanguagezh-Hansunitcstart0days5).then((res) {future.value res.data.results[0];});
};// 组件加载时调用一次
getList();
/scriptstyle langscss scoped
.weather {width: 100%;height: 100%;padding: 5px 15px;background: url(/assets/index/weather/bg.png) no-repeat;background-size: 100% 100%;/* 地址部分样式 */.address {display: flex;align-items: center;img {width: 14px;height: 17px;margin-right: 5px;}span {font-family: PingFang SC;font-size: 12px;color: #cce6f8;}}/* 当前气候部分样式 */.climate {display: flex;align-items: center;margin: 8px 0;.climate-icon {width: 60px;margin-right: 5px;}.wendu {font-size: 50px;font-weight: 600;color: #ffffff;margin-right: 20px;line-height: 1;span {font-size: 20px;}}.today {.label {width: 75px;font-size: 16px;color: #ffffff;display: flex;justify-content: space-between;}.value {display: flex;align-items: center;.value-text {font-size: 18px;color: #ffffff;margin-right: 10px;}.quality {padding: 0 10px;height: 20px;background: #67baee;border-radius: 10px;.quality-icon {width: 9px;height: 9px;border-radius: 50%;background: #51cfa4;border: 1px solid #ffffff;margin-right: 4px;display: inline-block;}.quality-text {font-size: 14px;color: #ffffff;}}}}}/* 未来天气部分 */.future {display: flex;justify-content: space-between;align-items: center;.future-item {display: flex;align-items: center;img {width: 36px;height: 36px;margin-right: 3px;}.future-box {.box-label {font-size: 12px;color: #cce6f8;}.box-value {font-size: 12px;color: #ffffff;}}}/* 中间的竖线分隔 */.future-line {width: 1px;height: 25px;background: #2794ea;margin: 0 auto;}}
}/* 针对屏幕宽度小于 1650px 时的样式优化 */
media screen and (max-width: 1650px) {.weather .climate {.wendu {margin-right: 15px;}.today .value .quality {padding: 0 6px;}}
}
/style
