Vue 网络应用 - 天知道（天气预报）

网络应用 - 天知道（天气预报）

使用 axios 发送 ajax 请求

<!-- axios 库 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用 Vue

<!-- 开发环境版本(vue)，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

---

axios 结合 vue

测试接口：获取随机密码

• 地址：https://v.api.aa1.cn/api/api-mima/mima.php?msg=10

• 方法：GET

• 参数：msg 密码长度

html 代码 </>

• + v-on:click 绑定点击事件

<div id="app">
    <input type="button" value="获取随机密码" v-on:click="getPass">
    <p>
        {{ password }}
    </p>
</div>

javascript 代码 </>

• + getPass: function (){} 发送 ajax 请求方法

const app = new Vue({
    el: "#app",
    data: {
        password: "12345678"
    },
    methods: {
        getPass: function ()
        {
            let self = this;
            axios.get("https://v.api.aa1.cn/api/api-mima/mima.phmsg=10")
                .then(res =>
                {
                    console.log(res.data);
                    self.password = res.data;
                }, err =>
                {
                    console.warn(err);
                })
        }
    }
})

然后会在页面显示一个 10 位的密码 HsGqc33dAd

---

天知道案例

分析结构

• 搜索界面

• 展示界面

天气预报接口：获取未来3天天气

• 地址：https://api.seniverse.com/v3/weather/daily.json

• 方法：GET / POST

• 参数：location 城市名、key 密钥 -> 详情查看：https://free-api.com/doc/559

---

1. 创建容器 app

<!-- 容器 -->
<div class="wrap" id="app">
    <!-- 搜索界面 -->
    <!-- 展示界面 -->
</div>

---

2. 搜索界面

html 代码 </>

• + v-model="city" 获取用户输入
• + v-on:keyup.enter="searchWeather" enter键 抬起调用 搜索方法
• + @click="searchWeather" 点击搜索
• + @click="changeCity('北京')" 改变 city 的值

<div class="search_form">
    <div class="logo"><img src="img/logo.png" alt="logo" /></div>
    <!-- 用户搜索 -->
    <div class="form_group">
        <!-- 搜索 -->
        <input v-model="city" v-on:keyup.enter="searchWeather" type="text" class="input_txt" placeholder="请输入查询的天气" />
        <button class="input_sub" @click="searchWeather">
        搜 索
        </button>
    </div>
    <!-- 热门城市，搜索 -->
    <div class="hotkey">
        <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>

javascript 代码 </>

• + city 城市
• + weatherList 得到的天气数组
  • 注意：这里是直接修改数组的值，直接修改里面的元素 Vue 检测不到数据发送变化
  • 或者使用能改变数组的方法，Vue 也能检测到数据发送变化
• + title 天气标题
• + searchWeather:function(){} 搜索功能
• + changeCity: function (city){} 改变 city

new Vue({
    el:"#app",
    data:{    
        city:"",
        weatherList:"",
        title: "q"
    },
    methods:{
        searchWeather:function(){
            // 保存 this 也可不保存，因为 then 方法使用的是箭头函数
            let self = this;

            if (this.city.trim() == "") return;

            // 调用接口，发送请求
            axios.get(`https://api.seniverse.com/v3/weather/daily.json?key=?&location=${this.city.trim()}`)
            .then(res =>
            {
                // 请求成功                                 
                self.weatherList = [...res.data.results[0].daily];
                self.title = self.city;
            })
            .catch(err =>
            {
                // 请求失败 生成日期
                const d = new Date();
                let year = d.getFullYear();
                let month = d.getMonth() + 1;
                let day = d.getDate();

                self.title = "请输出正确的城市 | 代码 | 暂不支持此城市";
                let time = `${year} 年 ${month} 月 ${day}`;

                self.weatherList = [{
                    text_day: "请求失败",
                    low: "暂无",
                    high: "暂无",
                    date: time
                }];
            })
        },
        // 改变 city
        changeCity: function (city)
        {
            this.city = city;          
            this.searchWeather();
        }
    }
})

请求返回的数据，响应体、这里是数组里的一条数据

---

3. 展示界面

• + v-for="item in weatherList" 遍历得到的天气数据数组
• + v-bind:title="title" 绑定 title 属性
• + {{ item.text_day }} 展示天气状态、白天
• + {{ item.low }} 最低气温
• + {{ item.high }} 最高气温
• + {{ item.date }} 日期

<ul class="weather_list">
    <!-- 展示列表 -->
    <li v-for="item in weatherList">
        <div v-bind:title="title" class="info_type">
            <!-- 天气状态 -->
            <span class="iconfont">{{ item.text_day }}</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>

引入 js 代码

<!-- 自己的js -->
<script src="./js/main.js"></script>

---

请求成功效果图

---

请求失败效果图

---

CSS 代码

<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/index.css" />

静态资源