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

vue3学习：查询城市天气预报案例（vite组合式实现）

article 2024/11/13 14:09:51

前面的学习中，实现过网页版的查询城市天气预报，今天新建了一个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 }}&#8451;</span></p>
                <p><span>今日温度：</span><span>{{ weatherInfo.tem2 }}&#8451;～{{ weatherInfo.tem1 }}&#8451;</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>