首页 > 其他分享> 文章详细

网络应用--天气预报

2021-09-06 11:58:14 阅读：200 来源： 互联网

标签：city 网络应用 -- text color 天气预报 font margin width

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

源码地址：https://gitee.com/sqc03/weather

效果展示：

搜索查询：

点击查询：

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

网络应用--天气预报