vue网络应用:天气查询
程序员文章站
2022-07-04 12:19:17
...
通过vue网络应用建立的天气查询网页
功能:
1.点击查询城市天气
2.按键输入查询天气
3.默认城市天气查询
4.查询失败返回
5.界面隐藏
技术应用:
1.html5,css3布局:采用流失布局为主,flex布局为辅。
2.vue本地应用于网络应用。
3.axios接口。
4.网络应用接口。
5.git工具部署静态网页。
技术逻辑:
1.回车查询:输入内容按下回车,通过双向绑定和enter绑定按键事件,调用接口,将输入的内容传递到服务器,接受到服务器返回的内容之后,渲染成列表界面。
2.点击查询:绑定点击事件,将输入值传递给服务器。
3.默认城市查询:将默认城市赋值到城市变量中上传至服务器,接收返回数据。
测试接口:
请求地址:http://wthrcdn.etouch.cn/weather_mini
示例:http://wthrcdn.etouch.cn/weather_mini?city=深圳
请求方法:get
请求参数:city
网页效果如下:
js代码:
/* 获取 json 格式的天气
请求地址:http://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数:city */
var app = new Vue({
el: "#app",
data: {
city: '请输入要查询的城市名称.',
cityWeather: []
},
methods: {
weather: function () {
var thad = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="
+ this.city)
.then(function (response) {
// console.log(response.data.data.forecast);
thad.cityWeather = response.data.data.forecast;
})
.catch(function (err) {
alert('查询不到输入的名称。');
})
},
cityList: function (city) {
this.city = city;
this.weather();
},
clear: function () {
this.city = '';
},
mouseAdd: function ($event) {
// console.log('鼠标经过');
$event.currentTarget.className = "nav_bd mouse";
},
mouse: function ($event) {
// console.log('鼠标移出');
$event.currentTarget.className = "nav_bd";
}
}
})
上一篇: JavaScript Vue 天气查询