axios 查询天气的案例

Posted 初铮

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了axios 查询天气的案例相关的知识，希望对你有一定的参考价值。

天气查询接口：

功能：

  • 点击“北京”、“上海”、“上海”、“深圳”按钮可查询对应城市的5天天气
  • 输入城市名，回车或点击“搜索”按钮 也可查询城市的5天天气

vue语法：

  • v-for、v-model、v-on、created()

 结果图：

 

 

html代码：

<body>
    <div id="app" class="wrap">
        <!-- 显示logo -->
        <div class="logo fiex">
            <img src="./img/weather.jpg" alt="logo" class="imgLogo"> 
        </div>
        <!-- 搜索 -->
        <div class="search_form">
            <input type="text" v-model="city" @keyup.enter="searchWeather"
             class="input_txt" placeholder="请输入查询的天气"/>
             <input type="button" class="input_sub" @click="searchWeather" value="搜索" >
        </div>
        <!-- 城市按钮 -->
        <div class="hotkey">
            <a @click="changeCity(\'北京\')">北京</a>&nbsp;&nbsp;
            <a @click="changeCity(\'上海\')">上海</a>&nbsp;&nbsp;
            <a @click="changeCity(\'广州\')">广州</a>&nbsp;&nbsp;
            <a @click="changeCity(\'深圳\')">深圳</a>
        </div>
        <!-- 显示天气 -->
        <div>
            <ul class="weather_list">
                <li v-for="item in weatherList">
                    <div class="info_type"><span class="iconfont">{{item.type}}</span></div>
                    <div class="info_temp">
                        <b>{{item.low}}</b>
                        ~
                        <b>{{item.high}}</b>
                    </div>
                    <div class="info_date"><span>{{item.date}}</span></div>
                </li>
                <!-- 测试 -->
                <!-- <li v-for="item in [0,1,2,3,4]">
                    <div class="info_type"><span class="iconfont">多云</span></div>
                    <div class="info_temp">
                        <b>低温18`C</b>
                        ~
                        <b>高温25·C</b>
                    </div>
                    <div class="info_date"><span>31日星期三</span></div>
                </li> -->
            </ul>
        </div>
    </div>
</body>
html代码

js代码：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data() {
                return {
                    city:"揭阳",
                    weatherList:[]
                }
            },
            methods: {
                searchWeather:function(){
                      var _this=this;
                      console.log("天气查询");
                      console.log(_this.city);
                      axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+_this.city)
                      .then(function(response){
                        console.log(response.data);
                        _this.weatherList=response.data.data.forecast;
                      },function(err){
                        console.log(err);
                      })
                },
                changeCity:function(city){
                    this.city=city;
                    this.searchWeather();
                }
                
            },
            created:function(){
                    this.searchWeather();
                }
        })
    </script>
js代码

css代码：

<style>
        .imgLogo{
            height: 80px;
            width: 200px;
            margin:0 auto;
        }
        .logo{
            width: 200px;
            margin: 0 auto;
            margin-top: 100px;
            align-items: center;
            flex-direction: column-reverse;
            margin-bottom: 5px;
        }
        .search_form{                   
            width: 600px;
            margin: 0 auto;
        }
        .input_txt{
            padding-left: 8px;          
            height: 25px;
            width: 500px;
            border: 1.5px solid rgb(81, 167, 248);
            outline: none;
            /* margin-top: 0px; */
        }
        .input_sub{
            color: white;
            font-weight: bolder;
            height:30px;
            width: 60px;
            background-color: rgb(81, 167, 248);
            border: none;
            display: inline-block;
            margin-left: -5px;
            display: block;
            float: left;
        }
        .hotkey{
            width: 600px;
            margin: 0 auto;
        }
        .weather_list{
            width:820px;
            margin: 0 auto;
            margin-top: 20px;
        }
        .weather_list li{
            float: left;
            list-style-type: none;
            border-right: 1px solid gray;
            border-left: 1px solid gray;
            opacity: 0.6;
        }
        .info_type{
            font-size: 33px;
            font-weight: normal;
            text-align: center;
            color: orange;
        }
        .info_temp{
            padding: 10px;
            font-size: 13px;
            color: orange;
            font-weight: lighter;
        }
        .info_date{
            text-align: center;
            font-size: 15px;
        }
    </style>
css代码

以上是关于axios 查询天气的案例的主要内容，如果未能解决你的问题，请参考以下文章

使数组渲染等待 axios 调用

Vue实战第三天 - 天气查询网页

vuejs小例子之天气查询

VSCode自定义代码片段14——Vue的axios网络请求封装

VSCode自定义代码片段14——Vue的axios网络请求封装

VSCode自定义代码片段14——Vue的axios网络请求封装