vue实现天气预报功能
岳嘉容
获取的请求参数：
{"data":{"yesterday":{"date":"11日星期三","high":"高温 14℃","fx":"东北风","low":"低温 4℃","fl":"<![CDATA[1级]]>","type":"霾"},"city":"北京","forecast":[{"date":"12日星期四","high":"高温 20℃","fengli":"<![CDATA[2级]]>","low":"低温 3℃","fengxiang":"北风","type":"晴"},{"date":"13日星期五","high":"高温 15℃","fengli":"<![CDATA[1级]]>","low":"低温 3℃","fengxiang":"东风","type":"晴"},{"date":"14日星期六","high":"高温 14℃","fengli":"<![CDATA[1级]]>","low":"低温 5℃","fengxiang":"东风","type":"多云"},{"date":"15日星期天","high":"高温 15℃","fengli":"<![CDATA[1级]]>","low":"低温 6℃","fengxiang":"北风","type":"多云"},{"date":"16日星期一","high":"高温 12℃","fengli":"<![CDATA[1级]]>","low":"低温 6℃","fengxiang":"东北风","type":"多云"}],"ganmao":"感冒易发期，外出请适当调整衣物，注意补充水分。","wendu":"20"},"status":1000,"desc":"OK"}
请求的界面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue_axios显示天气预报</title>
<!-- 点击按钮随机获取笑话 -->
</head>
<body>
<div id="app">
<input type="text" v-model="city" name="" @keyup.enter="serchWeather()" class="input_txt" placeholder="请输入查询的天气" id="" value="" />
<button type="button" class="input_sub">搜索</button>
<div id="" 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>
<ul class="weather_list">
<li v-for="item in weatherList">
{{item.data}}
{{item.high}}
{{item.fengli}}
{{item.low}}
{{item.fengxiang}}
{{item.type}}
</li>
</ul>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="main.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
js 代码部分
// 请求地址:http://wthrcdn.etouch.cn/weather_mini
// 请求方法:get,
// 请求参数:city(城市名)
// 响应内容:天气信息,
// 1.点击回车
// 2.查询数据
// 3.渲染数据
var app = new Vue({
el: '#app',
data: {
city: '',
weatherList: [],
},
methods: {
serchWeather: 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) {
//1.改城市
//2.查天气
this.city=city;
this.serchWeather();
}
}
})
核心为：地图请求的地址
请求地址:http://wthrcdn.etouch.cn/weather_mini
请求的时候记得加上参数例如
get请求
http://wthrcdn.etouch.cn/weather_mini？city=北京
类似资料：