vue实现一个简单的天气查询_vue3-mini-weather-优快云博客

本文链接：https://blog.youkuaiyun.com/divaid/article/details/106782547
效果：
在这里插入图片描述
代码：
<html>
<head>
    <meta charset="utf-8">
    <title>天气通</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        div > span {
            float: left
        }

        p {
            text-align: center;
        }

        #test {
            width: 70%;
            margin: 0 auto
        }

        h2 {
            text-align: center;
            margin-top: 20px;
        }

        .cities {
            width: 20%;
            margin: 0 auto;
            font-size: 13px;
        }

        .weather_parent {
            display: block;
            margin-top: 50px
        }

        .weather_item {
            width: 19%;
            display: inline-block
        }
    </style>
</head>
<body>


<div id="test">
    <h2>天气通</h2>

    <div style="width: 20%;margin:0 auto">
        <input placeholder="请输入城市名称" v-model="city" @keyup.enter="getData()"/>
        <span style="float:right" @click="getData()">搜索</span>
    </div>

    <div class="cities">
        <span style="margin:6px" v-for="item in cities" @click="getData(item)">{{item}}</span>
    </div>

    <div class="weather_parent">
        <div class="weather_item" v-for="item in datas">
            <div style="width: 80px;margin:0 auto">
            <img :src="item.icon" style="height:25px;width:35px;margin-right: 10px"/><span style="line-height: 25px;float:right">{{item.type}}</span>
            </div>
            <p>
            {{item.low}}  {{item.high}}
            </p>
            <p>
            {{item.date}}
            </p>
        </div>
    </div>
</div>
<script>
    let xmlhttp;
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp = new XMLHttpRequest();
    }
    else {
        // IE6, IE5 浏览器执行代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    const app = new Vue({
        el: "#test",
        data: {
            response: "",
            city: "",
            cities: ["北京", "杭州", "上海"],
            datas: [],
            //http://www.weather.com.cn/m/i/icon_weather/42x30/d00.gif
            icons:["晴","多云","阴","阵雨","雷阵雨","雷阵雨伴有冰雹","雨夹雪","小雨","中雨","大雨","暴雨","大暴雨","特大暴雨",
                "阵雪","小雪","中雪","大雪","暴雪","雾","冻雨","沙尘暴","小雨转中雨","中雨转大雨","大雨转暴雨","暴雨转大暴雨","大暴雨转特大暴雨",
                "小雪转中雪","中雪转大雪","大雪转暴雪","浮尘","扬沙","强沙尘暴","霾"
            ]

        },
        methods: {
            getData: function (city) {
                if (city === undefined) {
                    city = this.city
                }
                if (app.cities.indexOf(city) >= 0) {
                    app.cities.splice(app.cities.indexOf(city), 1)
                }
                app.cities.unshift(city);

                if (app.cities.length > 5) {//最多存5条
                    app.cities.splice(5)
                }
                
                
                localStorage.setItem("cities", JSON.stringify(app.cities));

                const that = this;
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                        //document.getElementById("test").innerHTML=xmlhttp.responseText;
                        app.response = xmlhttp.responseText;
                        console.log(xmlhttp.responseText);
                        that.datas = JSON.parse(xmlhttp.responseText).data.forecast;
                        for (index =0;index < app.datas.length;++index) {
                            let position = app.icons.indexOf(app.datas[index].type)<=9?"0"+app.icons.indexOf(app.datas[index].type):""+app.icons.indexOf(app.datas[index].type)
                            app.datas[index].icon = "http://www.weather.com.cn/m/i/icon_weather/42x30/d"+ position +".gif"
                        }
                    }
                };
                xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city=" + city, true);
                xmlhttp.send();
            }
        }
    });

    /**
     * 获取缓存的历史查询
     * */
    document.addEventListener("DOMContentLoaded", function(){
        // localStorage.clear();
        let cities = JSON.parse(localStorage.getItem("cities"));
        if (cities != null) {
            app.cities = cities
        }
    });
</script>
</body>
</html>