Web前端vueDemo—实现天气预报功能（四）

系列文章目录

文章目录

系列文章目录
前言
一、axios环境配置
二、天气预报案例.html
三、main.js
四、结果展示

前言

该案例是axios和vue的结合，首先需要保证axios的环境配置正确。

一、axios环境配置

该配置有多种方法，本文选择直接导入axios.main.js。
github下载axios链接
在这里插入图片描述
下载后在dist中有需要的axios.min.js文件。

将文件直接复制到项目中即可。

个人已经上传到csdn，可以免费下载，axiosCsdn免费下载。

二、天气预报案例.html

天气预报案例的主界面，对查询到的天气数据进行了展示，并通过设定关键词，为changeCity方法传入参数。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Computible" content="ie=edge">
    <title>天气预报案例</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="city" @keyup.enter="searchWeather">
        <!-- 热门城市 -->
        <div class="hotkey">
            <a href="javasrcipt:;" @click="changeCity('北京')">北京</a>
            <a href="javasrcipt:;" @click="changeCity('上海')">上海</a>
            <a href="javasrcipt:;" @click="changeCity('广州')">广州</a>
            <a href="javasrcipt:;" @click="changeCity('深圳')">深圳</a>
        </div>
        <!-- 数据展示 -->
        <ul>
            <!-- {{weatherList}} -->
            <li v-for="item in weatherList">
                <p>{{item.type}}</p>
                <p>{{item.low}}</p>
                <p>{{item.hight}}</p>
                <p>{{item.date}}</p>
            </li>
        </ul>
    </div>
    
     <!-- 官网提供的axios 在线地址 -->
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>
    <script src="./js/main.js"></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

三、main.js

searchWeather： 向该网址：http://wthrcdn.etouch.cn/weather_mini，传递city参数，可以得到5天的天气信息。使用saveThis是因为在axios中的this对象会被重置，在then回调方法中的值为未定义状态。
changeCity： this.city通过双向绑定可以获取到文本框中输入的值，并赋值给city，再进行searchWeather调用。

// http://wthrcdn.etouch.cn/weather_mini
var app = new Vue({
    el:"#app",
    data:{
        city:"",
        weatherList:[]
    },
    methods: {
        searchWeather:function(){
            var saveThis = this;
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function(response){
                // console.log(response.data.data.forecast);
                saveThis.weatherList = response.data.data.forecast
            }).catch(function(err){
                
            })
        },
        changeCity:function(city){
            this.city=city;
            this.searchWeather();
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

四、结果展示

保证网络畅通的情况下进行查询天气。
在这里插入图片描述

相关阅读:
Java Map中如何获取元素个数呢？
MATLAB中print函数使用
【Python深度学习】Python全栈体系（二十七）
k8s 通过helm发布应用
2.1程序的顺序执行与并发执行的特征
会话跟踪技术(Cookie和Session)
语音识别数据的采集方法：基本流程&数据类型
C++11 多线程高性能库ConcurrentQueue（多生产者、多消费者）
VM虚拟机安装ikuai软路由系统
联合matlab和Arcgis进行netcdf格式的雪覆盖数据的重新投影栅格

原文地址：https://blog.csdn.net/weixin_45118229/article/details/125907696