首页 > 其他分享> > 网络应用--天气预报

网络应用--天气预报

2021-09-06 11:58:14 作者：互联网

学习地址：https://www.bilibili.com/video/BV12J411m7MG?p=27

效果展示：

搜索查询：

点击查询：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络应用-天气预报</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="wrap" id='app'>
        <div class="search_form">
            <div class="logo"><img src="img/sky.jpg" alt="skylogo"></div>
            <div class="form_group">
                <input type="text" @keyup.enter='searchWeather' v-model='city'
                class='input_txt' placeholder='请输入要查询的城市'>
                <button class='input_sub' @click='searchWeather'>搜索</button>
            </div>
            <div class="hotkey form_group">
                <a href="javascript:;" @click='changeCity("北京")'>北京</a>
                <a href="javascript:;" @click='changeCity("上海")'>上海</a>
                <a href="javascript:;" @click='changeCity("广州")'>广州</a>
                <a href="javascript:;" @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>

        </ul>
    </div>
    
    <!-- 官方提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 导入自己的js -->
    <script src='js/main.js'></script>
</body>
</html>

CSS代码：

* {
    margin: 0;
    padding: 0;
}
.wrap {
    width: 1000px;
    margin: 50px auto 0;
}
.logo {
    text-align: center;
    margin-bottom: 10px;
}
.form_group {
    width: 400px;
    height: 35px;
    margin-left: 50%;
    transform: translateX(-50%);
}
input {
    float: left;
    outline: none;
    width: 326px;
    height: 100%;
    border: 1px solid rgb(73, 178, 219);
    padding-left: 2px;
}
.input_sub {
    float: left;
    height: 37px;
    width: 70px;
    background-color: skyblue;
    border: 1px solid skyblue;
    color: #fff;
}
.input_sub:hover {
    background-color: rgb(96, 168, 235);
}
.hotkey {
    margin-top: 5px;
}
a {
    text-decoration: none;
    color: grey;
    font-size: 14px;
    
}
a:hover{
    color: skyblue;
    
}
li {
    list-style: none;
    float: left;
    width: 190px;
    border-right: 1px solid grey;
}
.weather_list {
    margin-top: 20px;
}
ul li:last-child{
    border-right: none;
}
.info_type {
    color: orange;
    font-size: 20;
    font-weight: 700;
    text-align: center;
}
.info_temp {
    color: orange;
    font-size: 16px;
    margin-top: 10px;
    text-align: center;
}
.info_date {
    text-align: center;
    color: grey;
    font-size: 16px;
    margin-top: 10px;
}

JS代码：

/* 天气接口：
    请求地址：http://wthrcdn.etouch.cn/weather_mini
    请求方法：get
    请求参数：city（查询的城市名）
    响应内容：天气信息 */

var app = new Vue({
    el:'#app',
    data:{
        city:'',
        weatherList:[]
    },
    methods:{
        searchWeather:function(){
            // console.log('天气查询');
            // console.log(this.city);
            // 调用接口
            var that =  this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
            .then(function(response){
                // console.log(response.data.data.forecast);
                that.weatherList = response.data.data.forecast;
            },function(err){
                console.log(err);
            })
        },
        changeCity:function(city){
            this.city = city;
            this.searchWeather();
        }
    }
})

案例中的图片来源于网络，侵删。

标签：city,网络应用,--,text,color,天气预报,font,margin,width
来源： https://blog.csdn.net/bjyxszs/article/details/120130142