网络应用：vue+axios实现天气预报

最新推荐文章于 2023-03-15 19:34:03 发布
最新推荐文章于 2023-03-15 19:34:03 发布
阅读量1.7k 收藏 18
点赞数 5
分类专栏： vue实例练习 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48457459/article/details/119460432
版权

vue实践案例+代码

  1. 用vue实现记事本（新增，删除，统计， 清空，隐藏底部统计栏）
  2. 网络应用：vue+axios实现天气预报

本文目录

功能

输入查询

  1. 设置文本框，当按下回车键时，触发事件
  2. 调用天气预报接口，将返回的天气数据赋值给定义的天气数组
  3. 天气预报接口：http://wthrcdn.etouch.cn/weather_mini

html部分

<input type="text" class="city" placeholder="请输入查询的天气" v-model="city"  @keyup.enter="setCity">

js部分

setCity:function(){
	// console.log("天气预报");
	// console.log(this.city);
	//定义that来保存this
	var that=this;
	// 调用接口
	axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
	.then(function(response){
		// console.log(response);
		// 找到需要的数据，注意路径
		that.weather=response.data.data.forecast;
		// slice()该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
		that.weather_1=response.data.data.forecast.slice(0,2);
		that.isIf_2=false;
		that.isIf_1=true;
	})
	.catch(function(error){
		console.log(error);
	})
}

点击查询

  1. 设置列表，为每一个列表项绑定点击事件，当点击时触发changeCity()
  2. 改变city的值，然后调用接口的那个方法，进行查询

html部分

<ul class="cityed">
    <li class="name" @click="changeCity('太原')">太原</li>
    <li class="name" @click="changeCity('大同')">大同</li>
    <li class="name" @click="changeCity('平遥')">平遥</li>
</ul>

js部分

changeCity:function(city){
	this.city=city;
	// 用this可以点出methonds中其他方法
	this.setCity();
}

点击查看5天的天气预报

每次只显示一个列表

  1. 用v-for设置两个列表，列表项的值用插值表达式表示
  2. 用v-if来控制每个列表的显示与否，当点击“5天天气时”，触发show()方法，“isIf_2”变为true，显示5天天气情况（第二个列表），同时，isIf_1变为false，隐藏第一个列表

html部分

<!--第一个列表-->
<div>
	<ul class="weather_1" v-if="isIf_1">
		<li class="weather_1_text text_1"><b>{{city}}</b></li>
		<li class="weather_1_text text_2" v-for="dayW_1 in weather_1">
			<p class="text_2_content">{{dayW_1.date}}</p>
			<h3 class="text_2_content text_color">{{dayW_1.type}}</h3>
			<p class="text_2_content">{{dayW_1.low}}~{{dayW_1.high}}</p>
		</li>
		<li class="weather_1_text text_last" @click="show"><br>5天<br>天气</li>
	</ul>
</div>
<!--第二个列表-->
<ul  class="weather" v-if="isIf_2">
	<li v-for="dayW in weather" class="content">
		<h2 class="textWeather text_color">{{dayW.type}}</h2>
		<p class="textWeather text_color"><b>{{dayW.low}} ~ {{dayW.high}}</b></p>
		<p class="textWeather">{{dayW.fengxiang}}({{dayW.fengli}})</p>
		<p class="textWeather">{{dayW.date}}</p>
	</li>
</ul>

js部分

show:function(){
	// 引用data中数据必须要用this
	this.isIf_2=true;
	this.isIf_1=false;
}

整体代码

css部分

*{
    margin: 0;
    padding: 0;
}
input{ 
    outline:none;  
    color: #666;
}
ul li{
    list-style-type:none;
} 
#center{
    max-width: 1200px;
    margin: 0 auto;
}
header{
    width: 100%;
    height: 70px;
    position: relative;
}
.logo{
    width: 16.7%;
    height: 50px;
    position: absolute;
    left: 1%;
    top: 14%;
}
.city{
    width: 250px;
    height: 30px;
    font-size: 16px;
    position: absolute;
    top: 19%;
    right: 1%;
}
.cityed{
    display: flex;
    position: absolute;
    bottom: 1%;
    right: 1%;
}
.name{
    margin-right: 10px;
    color: #666;
}
/* 选择的链接:active*/
.name:hover{
    color: rgba(0, 162, 255, 0.883);
}
section{
    width: 100%;
    height: 500px;
}
.weather_1{
    display: flex;
    margin-top: 100px;
    justify-content: center;
}
.weather_1_text{
    width: 220px;
    height: 100px;
    text-align: center;
}
.weather_1_text.text_1{
    line-height: 120px;
}
.weather_1_text.text_2{
    padding-top: 20px;
}
.weather_1_text .text_2_content{
    margin-bottom: 5px;
}
.weather_1_text.text_last{
    color: rgba(0, 162, 255, 0.883);
    padding-top: 20px;
}
.weather_1_text.text_last:hover{
    background-color: rgba(0, 162, 255, 0.883);
    color: white;
}
.weather{
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
}
ul>li+li{
    border-left: 1px solid rgba(163, 162, 162, 0.918);

}
.content{
    width: 238px;
    height: 200px;
    text-align: center;
}
.textWeather{
    margin-top: 25px;
}
.text_color{
    color: rgba(255, 140, 0, 0.671);
}

html部分

<div id="center">
    <div id="test">
        <header>
            <img src="https://beyondclouds.oss-cn-beijing.aliyuncs.com/blog/images/b94bd53e-a3ac-4c5d-9e7b-79c773baf73f.png" alt="" title="欢迎访问王胖子的网站" class="logo">
            <div>
                <input type="text" autofocus class="city" placeholder="请输入查询的天气" v-model="city"  @keyup.enter="setCity">
                <ul class="cityed">
                    <li class="name" @click="changeCity('太原')">太原</li>
                    <li class="name" @click="changeCity('大同')">大同</li>
                    <li class="name" @click="changeCity('平遥')">平遥</li>
                </ul>
            </div>
        </header>
        <section>
            <div>
                <ul class="weather_1" v-if="isIf_1">
                    <li class="weather_1_text text_1"><b>{{city}}</b></li>
                    <li class="weather_1_text text_2" v-for="dayW_1 in weather_1">
                        <p class="text_2_content">{{dayW_1.date}}</p>
                        <h3 class="text_2_content text_color">{{dayW_1.type}}</h3>
                        <p class="text_2_content">{{dayW_1.low}}~{{dayW_1.high}}</p>
                    </li>
                    <li class="weather_1_text text_last" @click="show"><br>5天<br>天气</li>
                </ul>
            </div>
            <div>
                <ul  class="weather" v-if="isIf_2">
                    <li v-for="dayW in weather" class="content">
                        <h2 class="textWeather text_color">{{dayW.type}}</h2>
                        <p class="textWeather text_color"><b>{{dayW.low}} ~ {{dayW.high}}</b></p>
                        <p class="textWeather">{{dayW.fengxiang}}({{dayW.fengli}})</p>
                        <p class="textWeather">{{dayW.date}}</p>
                    </li>
                </ul>
            </div>
        </section>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>

js部分

var test = new Vue({
    el:"#test",
    data:{
        city:"",
        weather:[],
        weather_1:[],
        isIf_1:false,
        isIf_2:false,
    },
    methods:{
        setCity:function(){
            // console.log("天气预报");
            // console.log(this.city);
            //定义that来保存this
            var that=this;
            // 调用接口
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
            .then(function(response){
                // console.log(response);
                // 找到需要的数据，注意路径
                // console.log(response.data.data.forecast);
                that.weather=response.data.data.forecast;
                console.log(that.weather)
                // slice()该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
                that.weather_1=response.data.data.forecast.slice(0,2);
                that.isIf_2=false;
                that.isIf_1=true;
            })
            .catch(function(error){
                console.log(error);
            })
        },
        changeCity:function(city){
            this.city=city;
            // 用this可以点出methonds中其他方法
            this.setCity();
        },
        show:function(){
            // 引用data中数据必须要用this
            this.isIf_2=true;
            this.isIf_1=false;
        }
    }
})

页面效果展示

1. 首页
在这里插入图片描述
2. 输入城市按下回车查询
在这里插入图片描述
3. 点击5天天气查看详细信息（每次只显示一个列表）
在这里插入图片描述

在这里插入图片描述
4. 点击上方已有城市进行查询
在这里插入图片描述

结束

好啦，这个vue实例案例到这里就结束咯，希望和大家一起学习进步

王胖子嘤
关注
专栏目录
【Vue】天气预报功能--axios的使用实例
weixin_44707049的博客
05-26 1570
axios的教程 使用起来挺简单的，看文档再加上实例就能明白了。 文档链接点击这里 axios的安装 进入到项目文件夹下，运行终端，输入npm install axios --save，点击回车。 axios的使用 在哪里使用，在哪里引入。 比如我需要在App.vue页面使用axios，那么就在App.vue页面引入： 需求 做一个天气预报的页面，显示未来十五天的天气。默认显示地区为广州，支持搜索功能。 静态页面 将页面的标题抽取出来做成组件CardTitle 将页面中的表格抽取出来做成组件Weat
关于vue3中添加天气信息的方法
最新发布
孙怼怼的博客
08-30 1168
介于网上天气组件请求次数有着限制，很不好用，所以我们自己来封装一个简单的天气组件来解决这一问题
Vue+axios基础项目实战——天知道（天气预报查询应用）
fy03164598的博客
03-01 2597
一、分析项目的业务逻辑 回车查询 按下回车 查询数据 渲染数据 点击查询 点击搜索或点击城市标签 查询数据 渲染数据 二、基础静态页面实现 1. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, ini..
axios+vue.js实现一个简单的天气预报界面
destinymmm的博客
07-07 2471
这是一个最简单Vue.js实现天气预报的单页面界面，前端只用到了Vue.js和axios两个框架，效果如下图，声明这仅为个人的学习记录。 Html为骨架，Css为样式，Jscript控制行为 1.在html页面中引入axios和vue.js的框架，这里用到的开发环境版本。 <!--官网提供的axios在线地址--> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
利用vue+axios实现简单天气查询
weixin_44239550的博客
12-19 1002
一、代码： <!DOCTYPE html> <html> <head> <title>天气查询案例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.stat
vue（5）（网络应用，axios，天气预报实例）
mimo_mimo的博客
03-15 334
网络应用，axios
基于vue2+vue-router2+vuex+axios的天气预报小项目.zip
10-21
这是一个基于Vue.js技术栈的天气预报小项目，主要利用了Vue2、vue-router2、vuex和axios这四个核心组件来构建。让我们深入探讨一下这些技术及其在项目中的作用。 **Vue2**: Vue.js 2.0是这个框架的最新稳定版本，它...
vue框架+axios：天气查询
11-08
例如，我们可以使用axios的`get`方法，指定一个提供天气预报服务的API接口URL，如OpenWeatherMap或Weather Underground。API通常会返回JSON格式的天气数据，包括地理位置、当前天气状况、温度、湿度等信息。 使用...
axios+vue.js制作的天气预报界面.zip
07-07
总的来说，这个项目提供了一个基础的实践示例，让初学者了解如何结合Vue.js的组件化和Axios的网络请求能力，实现一个交互式的天气预报应用。通过学习和模仿这个项目，开发者可以逐步掌握前端开发的基本技能。
Vue+Webpack实现的实时天气预报网页及源代码
资源摘要信息:"本项目是一个基于Vue.js和Webpack构建的天气预报网站，结合了Element-UI框架来提升用户界面的美观性和易用性。它利用axios库来实现数据的实时请求，从服务器端获取当天、未来24小时以及未来7天的天气...
Vue学习笔记6-axios + vue / 案例：查询天气
weixin_50119334的博客
10-29 320
axios 结合 vue 开发网络应用 例： <div id="app"> <input type="button" value="获取" @click="getJoke"> <p>{{ joke }}</p> </div> <!-- vue开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/
vue-mini-weather:基于Vue开发的迷你实时天气预报组件
05-14
基于Vue开发的迷你实时天气预报组件 项目展示 基于Vue框架开发的一款迷你天气预报展示的小组件，目前只支持中国大陆的天气预报，原因在更新公告中有，有问题请提 :package: 安装 2021.04.24 因为刚上传到npm仓库没多久，可能其他镜像库还没有镜像过去，所以要下载只能切换npm源为官方源。 npm i vue-mini-weather --save // 1. 全局引入 //main.js 项目入口文件 import Vue from 'vue' import weather from 'vue-mini-weather' Vue.use(weather) //app.vue 项目文件 <template> <v></v> </template> // 2. 局部引入 //a
vue+axios天气预报(API）
yfy538的博客
03-11 1397
功能：1.点击“回车”或“搜索”查询天气            2.点击搜索框下的城市，直接搜索 天气接口：http://wthrcdn.etouch.cn/weather_mini?city=北京 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g.
Vue+Axios小案例【天气预报查询】
迟到滴滴
12-23 1147
目录一、效果演示二、完整代码三、相关说明 一、效果演示 二、完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>查询天气预报</title> <s
Vue+axios 获取天气数据
weixin_60387745的博客
06-12 798
Vue+axios 获取天气数据
vue axios实战，请求天气预报接口
免费天气预报接口 - 天气api
12-13 1910
基础教程，一步步实现 vue 使用axios 请求天气预报接口
VueJs+chrome-extension+element-ui天气预报的小插件
觉醒法师的专栏
07-17 7091
这里通过chrome-extension + VueJs + element-ui来实现个天气预报的小插件。风天气预报API，提供全球城市未来15天天气预报，包括日出日落、月升月落、最高最低温度、天气白天和夜间状况、风力、风速、风向、相对湿度、大气压强、降水量、降水概率、露点温度、紫外线强度、能见度等。全球城市未来15天天气预报，包括日出日落、月升月落、最高最低温度、天气白天和夜间状况、风力、风速、风向、相对湿度、大气压强、降水量、降水概率、露点温度、紫外线强度、能见度等。...
vue天气预报
zhoulina815的博客
03-02 1326
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!--引入 axios网络地址 axios相当于 js里的ajax--> <script .
vue 天气插件
℡メ㏑╭ァ小凯
05-23 1338
效果图 vue 代码 <div id="he-plugin-standard"></div> created() { //和风天气插件调用 window.WIDGET = { "CONFIG": { "layout": "2", "width": 230, "height": 270, "background": "1", "dataColor": "F.
云笔记管理系统开发：Vue+axios+Servlet+Lombok+JDBC+MySQL
资源摘要信息:"本案例介绍了一个云笔记管理系统使用Vue.js前端框架、axios网络请求库、Servlet作为后端处理技术，结合Lombok简化实体类代码、JDBC进行数据库操作，以及MySQL数据库存储管理的技术实现。" 一、Vue.js...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值