欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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";
        }
    }

})
相关标签: 1024程序员节