投稿
  1. 云编程开发首页
  2. 开发

如何利用axios和vue实现简易天气查询

小天博客 • • 开发 • 阅读 45

这篇文章主要讲解了“如何利用axios和vue实现简易天气查询”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何利用axios和vue实现简易天气查询”吧！ 我们先来看一下效果图,原理很简单就是接口的调用以及数据的呈现,界面的布局而已通过如上我们可以看到输入正确的城市名称后会查询出未来四天以及昨天和今天总共六天的天气,输入不正确的名称时会进行提示,并且清空输入栏。1、因为是vue项目所以我们需要引入vue,官网:vue官网,我们使用cdn方式进行引入:



2、使用axios进行数据请求的发送,axios官网axios,同样我们将使用cdn方式引入:




3、界面样式以及提示部分我们需要elementUI部分来完成,官网:elementUI我们使用的是vue2.x版本:




1.HTML:首先我们进行界面的布局,顶部为搜索栏,下面为结果展示部分:






查询

您查找的城市为:{{nowcity}},现在温度为:{{wendu}}。,感冒情况:{{ganmao}}














您查找的城市为:{{nowcity}},现在温度为:{{wendu}}。,感冒情况:{{ganmao}}2.CSS:众所周知css为样式层,为了界面的美化,我们进行如下样式设计:


*{
margin:0;
padding:0;
box-sizing:border-box;}ul>li{
list-style:none;}#app{
width:900px;
height:700px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
box-shadow:1px1px15px#dfdfdf;}.head{
width:100%;
height:20%;
line-height:70px;
text-align:center;}.headpspan{
font-weight:400;
font-size:18px;}.bottom{
width:100%;
height:80%;
overflow:auto;}.seeday{
width:300px;
height:200px;
box-shadow:1px1px15px#dfdfdf;
display:inline-block;
margin-left:70px;
margin-top:20px;
margin-bottom:20px;}.seedayspan{
display:inline-block;
width:100%;
height:50px;
border-bottom:1pxsolid#000;
text-align:center;
font-size:20px;
font-weight:600;
line-height:50px;}.seedayul{
margin-left:10px;}.seedayul>li{
width:100%;
height:30px;}


3.js:界面布局完成那么我们就应该进行js逻辑部分的操作了:1、首先搭建vue,需要进行挂载点以及我们需要的数据存储:


varvue=newVue({
//挂载点
el:'#app',
data(){
return{
//收入框
city:'',
//存储近几天以及今天的天气
list:[],
//昨天的天气
yesterday:[],
//是否显示
show:false,
//当前搜索的城市
nowcity:'',
//现在的温度
wendu:'',
//感冒情况
ganmao:''
}
},
})


2、点击查询按钮时候进行的操作:


btn(){
//判断输入框是否为空
if(this.city==''){
this.$message({
message:'请输入城市名',
type:'error'
});
}else{
//axios进行请求的擦擦送
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city).then(res=>{
//返回状态正常
if(res.status==200){
console.log(res.data)
//如果查询城市状态异常
if(res.data.desc=="invilad-citykey"){
this.$message({
message:'请输入正确的城市名',
type:'error'
});
//输入框置空
this.city=''
}else{
this.$message({
message:`共查找到${(res.data.data.forecast).length+1}条数据`,
type:'success'
});
//成功时候显示查询到的数值
this.show=true
this.nowcity=res.data.data.city
this.wendu=res.data.data.wendu
this.ganmao=res.data.data.ganmao
this.yesterday=res.data.data.yesterday
this.list=res.data.data.forecast
}
}
//请求发送异常
}).catch(err=>{
this.$message({
message:'服务异常,请稍后重试',
type:'error'
});
})
}
}


index.html


html>






天气查询







查询

您查找的城市为:{{nowcity}},现在温度为:{{wendu}}。,感冒情况:{{ganmao}}







{{yesterday.date}}

    

  • 风力:{{yesterday.fl}}
    • 

  • 风向:{{yesterday.fx}}
    • 

  • 高温:{{yesterday.high}}
    • 

  • 低温:{{yesterday.low}}
    • 

  • 天气:{{yesterday.type}}
    • 






{{item.date}}

    

  • 风力:{{item.fengli}}
    • 

  • 风向:{{item.fengxiang}}
    • 

  • 高温:{{item.high}}
    • 

  • 低温:{{item.low}}
    • 

  • 天气:{{item.type}}
    • 





















您查找的城市为:{{nowcity}},现在温度为:{{wendu}}。,感冒情况:{{ganmao}}index.css


*{
margin:0;
padding:0;
box-sizing:border-box;
}

ul>li{
list-style:none;
}

#app{
width:900px;
height:700px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
box-shadow:1px1px15px#dfdfdf;
}

.head{
width:100%;
height:20%;
line-height:70px;
text-align:center;
}

.headpspan{
font-weight:400;
font-size:18px;
}

.bottom{
width:100%;
height:80%;
overflow:auto;
}

.seeday{
width:300px;
height:200px;
box-shadow:1px1px15px#dfdfdf;
display:inline-block;
margin-left:70px;
margin-top:20px;
margin-bottom:20px;
}

.seedayspan{
display:inline-block;
width:100%;
height:50px;
border-bottom:1pxsolid#000;
text-align:center;
font-size:20px;
font-weight:600;
line-height:50px;
}

.seedayul{
margin-left:10px;
}

.seedayul>li{
width:100%;
height:30px;
}


index.js


varvue=newVue({
//挂载点
el:'#app',
data(){
return{
//收入框
city:'',
//存储近几天以及今天的天气
list:[],
//昨天的天气
yesterday:[],
//是否显示
show:false,
//当前搜索的城市
nowcity:'',
//现在的温度
wendu:'',
//感冒情况
ganmao:''
}
},
methods:{
btn(){
if(this.city==''){
this.$message({
message:'请输入城市名',
type:'error'
});
}else{
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city).then(res=>{
if(res.status==200){
console.log(res.data)
if(res.data.desc=="invilad-citykey"){
this.$message({
message:'请输入正确的城市名',
type:'error'
});
this.city=''
}else{
this.$message({
message:`共查找到${(res.data.data.forecast).length+1}条数据`,
type:'success'
});
this.show=true
this.nowcity=res.data.data.city
this.wendu=res.data.data.wendu
this.ganmao=res.data.data.ganmao
this.yesterday=res.data.data.yesterday
this.list=res.data.data.forecast
}
}
}).catch(err=>{免费云主机域名
this.$message({
message:'服务异常,请稍后重试',
type:'error'
});
})
}
}
}
});



感谢各位的阅读，以上就是“如何利用axios和vue实现简易天气查询”的内容了，经过本文的学习后，相信大家对如何利用axios和vue实现简易天气查询这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！


相关推荐: C语言怎么解决轮转数组问题


本篇内容主要讲解“C语言怎么解决轮转数组问题”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“C语言怎么解决轮转数组问题”吧!给你一个数组，将数组中的元素向右轮转 k个位置，其中k是非负数。示例 1:输入:nums =…




                                                        
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
                        


                        

                        

                            
 赞 (0)


                                                            

                                     打赏                                    
                                                                                                            
                                                        微信扫一扫
                                                            微信扫一扫                                                    
                                                                                                                                            
                                

                                                    


                        

                            

                                                                    

                                                                                
                                            小天博客小天博客                                        
                                    

                                                                

                                    

                                                                                     0                                         0                                                                            

                                    
                                    

                                        
                                    

                                

                            

                        

                    

                        

                    

                
                

                     上一篇
                    05/12 16:06
                

            

                            

                
                

                    下一篇 
                    05/12 16:06
                

            

            

                    




                                            

                            
相关推荐