网站推广托管,东莞网页设计,网站建设话语,alexa全球网站排名说来惭愧#xff0c;接触前端也有很长一段时间了#xff0c;最近才学习axios与后端的交互。今天学习了一个查询城市天气的案例#xff0c;只需输入城市名称#xff0c;点击“查询”按钮便可以进行查询。运行效果如下#xff1a; 案例只实现了基本的查询功能#xff0c;没…说来惭愧接触前端也有很长一段时间了最近才学习axios与后端的交互。今天学习了一个查询城市天气的案例只需输入城市名称点击“查询”按钮便可以进行查询。运行效果如下 案例只实现了基本的查询功能没有用css进行美化需要效果更好看一些自己添加一些css样式就行。 说明如下
一、头部引入
因为用到了vue3和axios需要在头部引入vue3库文件和axios库文件我这里是网页版采用的是CDN方式。
script srchttps://unpkg.com/vue3/dist/vue.global.js/script
script srchttps://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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title输入城市名称查询天气 /titlescript srchttps://unpkg.com/vue3/dist/vue.global.js/scriptscript srchttps://unpkg.com/axios/dist/axios.min.js/script
/head
bodydiv idcontainerdivinput typetext placeholder请输入城市名 v-modelcityName /input typebutton value查询 clickhandleWeather(cityName) //divdiv classweatherdiv v-ifweatherInfo.city ! pspan{{weatherInfo.date}}/spannbsp;nbsp;span{{weatherInfo.week}}/span/ppspan{{weatherInfo.city}}天气预报/spannbsp;nbsp;span更新时间nbsp;{{weatherInfo.update_time}}/span/pbr /pspan天气{{weatherInfo.wea}}/span/ppspanspan空气质量{{weatherInfo.air_level}},/span{{weatherInfo.air_tips}}/span/pdiv v-ifweatherInfo.air_level优适宜出行/divdiv v-else不适合出行/divpspan现在温度{{weatherInfo.tem}}度/spannbsp;nbsp;span{{weatherInfo.tem2}}度{{weatherInfo.tem1}}度/span/ppspan{{weatherInfo.win}}/spannbsp;nbsp;span{{weatherInfo.win_speed}}/span/ppspan降雨量{{weatherInfo.rain_pcpn}}/span/p/div/div/divscriptconst 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 nameconst res await instance.get(/api,{params: {unescape: 1,version: v61,appid: 123456789, //改成自己的appsecret: 123456789,city: name}})infoData.weatherInfo.city res.data.cityinfoData.weatherInfo.date res.data.dateinfoData.weatherInfo.update_time res.data.update_timeinfoData.weatherInfo.week res.data.weekinfoData.weatherInfo.wea res.data.weainfoData.weatherInfo.tem res.data.teminfoData.weatherInfo.tem1 res.data.tem1infoData.weatherInfo.tem2 res.data.tem2infoData.weatherInfo.win res.data.wininfoData.weatherInfo.win_speed res.data.win_speedinfoData.weatherInfo.air_level res.data.air_levelinfoData.weatherInfo.air_tips res.data.air_tipsinfoData.weatherInfo.rain_pcpn res.data.rain_pcpn}return {cityName,infoData,...Vue.toRefs(infoData),handleWeather}}})appObj.mount(#container) /script
/body
/html
