调用天气接口

最新推荐文章于 2023-02-02 23:12:27 发布

一纸斜阳一纸梦

最新推荐文章于 2023-02-02 23:12:27 发布

阅读量360

点赞数

分类专栏： vue 文章标签： vue axios

本文链接：https://blog.csdn.net/weixin_44540326/article/details/116975508

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：HBuilder X

作者：吴业华

撰写时间：2021年5月17号

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

请求地址：http://wthrcdn.etouch.cn/weather_mini

请求方法：get

请求参数：city（城市名）

响应内容：天气信息

1、点击回车

2、查询数据

3、渲染数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div class="wrap" id="app">
			<div class="search_form">
				<div class="logo"><img src="../vue单文件组件/text/public/favicon.ico" ></div>
				<div class="form_group">
					<input type="text" v-model="city" @keyup.enter="searchWeather" 
					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>
			<ul class="weather_list">
				<li v-for="item in weatherList" style="list-style: none;float: left;">
					<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>
		<script type="text/javascript">
			/*
				请求地址：http://wthrcdn.etouch.cn/weather_mini
				请求方法：get
				请求参数：city（城市名）
				响应内容：天气信息
				
				1、点击回车
				2、查询数据
				3、渲染数据
			*/
		   var app = new Vue({
			   el:"#app",
			   data:{
				 city:'武汉',  
				 weatherList:[]
			   },
			   methods:{
				   searchWeather:function(){
					   // console.log('天气查询');
					   // console.log(this.city);
					   // 调用接口
					   //保存this
					   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;
					   })
					   .catch(function(err){
						   
					   });
				   },
				   changeCity:function(city){
					   this.city = city;
					   this.searchWeather();
				   }
			   }
		   })
		</script>
	</body>
</html>