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

说来惭愧,接触前端也有很长一段时间了,最近才学习axios与后端的交互。今天学习了一个查询城市天气的案例,只需输入城市名称,点击"查询"按钮便可以进行查询。运行效果如下:

案例只实现了基本的查询功能,没有用css进行美化,需要效果更好看一些,自己添加一些css样式就行。

说明如下:

一、头部引入

因为用到了vue3和axios,需要在头部引入vue3库文件和axios库文件,我这里是网页版,采用的是CDN方式。

html 复制代码
<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就是注册后网站给提供的。

三、完整代码如下:

html 复制代码
<!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>
相关推荐
丰锋ff16 分钟前
考研英一学习笔记
笔记·学习·考研
小墨宝17 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
hnlucky32 分钟前
redis 数据类型新手练习系列——Hash类型
数据库·redis·学习·哈希算法
HED32 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿37 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子37 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
Invinciblenuonuo40 分钟前
FreeRTOS学习笔记【10】-----任务上下文切换
笔记·学习
好奇龙猫42 分钟前
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(11): てあります。
学习
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui