前端：基于Vue框架以及Axios实现天气预报系统

刺骨的言语ヽ痛彻心扉 2023-07-12 11:56 70阅读 0赞

#### Vue框架 ####

> Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。  
> Vue 只关注视图层， 采用自底向上增量开发的设计。  
> Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

安装vue框架：

#### Axios ####

> Axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。  
> **特点：**  
> 1、从浏览器中创建 XMLHttpRequest  
> 2、从 node.js 发出 http 请求  
> 3、支持 Promise API  
> 4、拦截请求和响应  
> 5、转换请求和响应数据  
> 6、取消请求  
> 7、自动转换JSON数据  
> 8、客户端支持防止 CSRF/XSRF

安装Axios：（在这里我使用的是本地的axios，当然也可以使用线上的）

axios也经常与Vue框架一块使用，本例就是同时使用两者。

天气预报的代码实现（代码中有相应的解释）：

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{ 
                padding: 0;
                margin: 0;
            }
            #app{ 
                width: 400px;
                margin: 50px auto;
                
            }
            .search { 
                width: 400px;
                margin: 0 auto;
            }
            .search input{ 
                height: 32px;
                width: 300px;
            }
            .search button{ 
                width: 50px;
                height: 35px;
            }
            .citys a{ 
                text-decoration:none
            }
            .info>ul>li{ 
                list-style: none;
            }
        </style>
        
    </head>
    <body>
        <div id="app">
            <div class="search">
                <input type="text" v-model="inputCity" placeholder="请输入要查询的城市">
                <button type="submit" @click="changeCity">搜索</button>
            </div>
    
            <div class="info">
                <div>当前城市：{ { city}}</div>
                <div>当前温度：{ { wendu}} ℃</div>
                <hr>
    			<h3 style="margin-top:20px;margin-bottom:20px;">未来五天的天气变化</h3>
    			<hr>
                <ul v-for="one in wutian">
                    <li>日期：{ { one.date}} </li>
                    <li>天气:{ { one.type}}</li>
                    <li>温度:{ { one.low}}~{ { one.high}}</li>
                    <hr />
                </ul>
    			<div><b>温馨提醒</b>：{ { ganmao}}</div>
            </div>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        
        <script src="axios.min.js"></script>
        <script>
            //创建一个vue对象,映射到一个标签上，所有映射到的标签都能够使用vue来操作
            let vue = new Vue({   
                //可以在id为app的标签中使用的数据
                el:"#app",  
                data:{ 
                    wendu:"0",
                    data:"0",
                    wutian:[],
                    ganmao:"感冒提醒：",
                    city:"北京",
                    inputCity:"",
                },
                methods:{ 
                    changeCity:()=>{ 
                        vue.city = vue.inputCity;
                        axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" +vue.city).then(
                        (response)=>{ 
                            console.log(response.data.data);
                            //将数据加到vue的data中去
    						vue.city = response.data.data.city;
                            vue.wendu = response.data.data.wendu;
                            vue.ganmao = response.data.data.ganmao;
                            vue.wutian = response.data.data.forecast;
                        }
    					).catch(
    						(error)=>{ 
    							//错误处理
    							alert("访问异常");
    						}
    					);
                    }
                },
                mounted(){ 
                    //从网络上获取天气信息,来源于国家气象局
                    //then表示正常的获取地址之后，catch表示网络请求异常
    				
    				//界面一开始默认显示北京的天气状况
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city=北京").then(
                        (response)=>{ 
                            console.log(response.data.data.ganmao);
                            //将数据加到vue的data中去
    						vue.city = response.data.data.city;
                            vue.wendu = response.data.data.wendu;
                            vue.ganmao = response.data.data.ganmao;
                            vue.wutian = response.data.data.forecast;
    						console.log(vue.ganmao);
                        }
                    ).catch(
                        (error)=>{ 
                            //错误处理
                            alert("访问异常");
                        }
                    );
                }
            });
    
        </script>
    </body>
    </html>

界面显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTIyMTEz_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTIyMTEz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200308170247833.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTIyMTEz,size_16,color_FFFFFF,t_70