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

news2024/10/5 11:10:48

说来惭愧，接触前端也有很长一段时间了，最近才学习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 = name
                    const res = await instance.get(
                        "/api",
                        {
                            params: {
                                unescape: 1,
                                version: 'v61',
                                appid: '123456789', //改成自己的
                                appsecret: '123456789',
                                city: name
                            }
                        }
                    )
               
                    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.air_tips = res.data.air_tips
                    infoData.weatherInfo.rain_pcpn = res.data.rain_pcpn
                }
                return {
                    cityName,
                    infoData,
                    ...Vue.toRefs(infoData),
                    handleWeather
                }
            }
        })
        appObj.mount('#container')  
    </script>
</body>
</html>