vue3学习：查询城市天气预报案例（vite组合式实现）
前面的学习中，实现过网页版的查询城市天气预报，今天新建了一个vite项目来实现，并且使用element-plus组件，把网页效果适当美化了一下，运行效果如图所示。
步骤如下：
一、新建项目
步骤如下：
1.以管理员方式运行VSCode，终端/新建终端，在终端中运行命令npm create vite@latest
2.输入项目名称weather ，选项设置选择Vue、Javascript。
3.依此执行下面命令
cd weather
npm install
npm run dev
（4）打开网址 http://localhost:5173/，看到如下图所示的网页，说明新建项目成功。
二、安装项目中用到的组件
在该项目中，用到了axios和element-plus，需要进行安装（需保持网络畅通），依次在终端中执行如下命令。
1.安装axios
npm install axios --save
2.安装element-plus
npm install element-plus --save
3.查看是否安装成功。打开package.json文件，如果dependencies出现如下选项，说明安装成功。
三、在App.vue中输入以下代码
1.template部分
程序初运行时，只显示一个输入框和查询按钮，这一部分使用element-plus制作，element-plus的具体使用可去官网查询。
<template>
<div id="container">
<div id="search">
<el-input v-model="cityName" placeholder="请输入城市名" class="inputText" />
<el-button type="primary" @click="handleWeather(cityName)">查询</el-button>
</div>
<div class="weather">
<div v-if="weatherInfo.city != ''">
<h3><span>{{ weatherInfo.city }}</span>天气预报</h3>
<p><span>日期：</span><span>{{ weatherInfo.date }} {{ weatherInfo.week }}</span> </p>
<p><span>更新时间：</span><span>{{ weatherInfo.update_time }}</span></p>
<p><span>天气：</span><span>{{ weatherInfo.wea }}</span></p>
<p><span>空气质量：</span><span>{{ weatherInfo.air_level }}，</span>
<span v-if="weatherInfo.air_level == '优'">适宜出行</span>
<span v-else>不适合出行。</span>
</p>
<p><span>现在温度：</span><span>{{ weatherInfo.tem }}℃</span></p>
<p><span>今日温度：</span><span>{{ weatherInfo.tem2 }}℃～{{ weatherInfo.tem1 }}℃</span></p>
<p><span>风向风力：</span><span>{{ weatherInfo.win }}，{{ weatherInfo.win_speed }}</span></p>
<p><span>降雨量：</span><span>{{ weatherInfo.rain_pcpn }}</span></p>
</div>
</div>
</div>
</template>
2.css部分
<style scoped>
.inputText {
width: 240px;
}
.weather p span:nth-child(1) {
width: 100px;
text-align: right;
display: inline-block;
}
</style>
3.script部分
<script>
import axios from 'axios'
import { ref } from 'vue'
import { reactive } from 'vue'
import { toRefs } from 'vue'
export default {
name: 'App',
setup() {
const cityName = ref('')
const infoData = 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://gfeljm.tianqiapi.com/api?unescape=1&version=v63&appid=？？？？？&appsecret=？？？？？'
})
//添加请求拦截器
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 = name
const res = await instance.get(
"/api",
{
params: {
unescape: 1,
version: 'v63',
appid: '？？？？？', //自己注册获得
appsecret: '？？？？？', //自己注册获得
city: name
}
}
)
console.log(res)
infoData.weatherInfo.city = res.data.city
infoData.weatherInfo.date = res.data.date
infoData.weatherInfo.update_time = res.data.update_time
infoData.weatherInfo.week = res.data.week
infoData.weatherInfo.wea = res.data.wea
infoData.weatherInfo.tem = res.data.tem
infoData.weatherInfo.tem1 = res.data.tem1
infoData.weatherInfo.tem2 = res.data.tem2
infoData.weatherInfo.win = res.data.win
infoData.weatherInfo.win_speed = res.data.win_speed
infoData.weatherInfo.air_level = res.data.air_level
infoData.weatherInfo.rain_pcpn = res.data.rain_pcpn
}
return {
cityName,
infoData,
...toRefs(infoData),
handleWeather
}
}
}
</script>
因为要用到天气信息，所以需要注册成为气象数据接口服务平台用户。这里使用的是“天气API”，该网站网址为http://www.tianqiapi.com/，如何注册可以参考《输入城市名称查询该城市天气》
原文地址：https://blog.csdn.net/wangyining070205/article/details/143664277
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！