目录
(3)在Vue实例方法中,通过 axios 调用接口获取数据
问题:response.data.data.forecast 来源?
一、前言
上一节我们介绍了axios+vue的基本使用,其中接口的调用步骤、数据的获取方式都和我们之前开发步骤类似,需要注意的是 axios响应成功的回调函数中,this改变了,我们需要提前保存,然后使用保存的那个值就可以了。详情可参考博文:Vue笔记整理,让你快速入门Vue.js:04_3.网络应用:axios+vue结合使用 那么如果逻辑再复杂一些呢?
咱们这一节就来学习一个网络应用:天知道
二、实例代码验证
1、实现思路
天知道 是一个查询天气的应用,应用的核心是查询天气,那么怎么查询呢?
1.1、回车查询
(1)按下回车
其中事件的绑定我们可以使用 v-on 指令,并且限制按键为回车,通过事件修饰符来进行约束。
(2)查询数据
接口的调用我们通过 axios,获取用户的输入我们可以通过 v-model 来实现。
(3)渲染数据
最终生成的结果,它是一个列表结构,那么我们要通过 v-for 指令,结合一个数组就可以啦。
数组的赋值,我们放在请求成功的回调函数中,this 已经不是之前那个了,这个时候我们就需要额外的保存一个 that。
天气的信息是通过调用接口获取到的,接口文档如下:
1.2、代码实现
(1)创建vue实例、导入js文件、监听回车键事件
创建vue实例,定义方法【main.js】
var app = new Vue({
el: "#app",//通过 el 把vue实例,挂载给元素
methods: {//方法定义
searchWeather: function () {
console.log('天气查询');
}
},
})
导入自己的 js 文件【模板.html】
<!-- 导入自己的js -->
<script src="./js/main.js"></script>
@keyup.enter="searchWeather" 监听回车键,指定触发的方法为 searchWeather【模板.html】
<input type="text" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气"/>
(2)进行双向数据绑定
声明变量,要查询的城市【main.js】
data: {
city: '',//声明变量,要查询的城市
},
input 输入框 v-model="city",拿到输入的内容【模板.html】
<input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气"/>
在方法里面,拿到输入框输入的内容【main.js】
methods: {//方法定义
searchWeather: function () {
console.log('天气查询');
console.log(this.city);//拿到输入框输入的内容
}
},
(3)在Vue实例方法中,通过 axios 调用接口获取数据
methods: {//方法定义
searchWeather: function () {
console.log('天气查询');
console.log(this.city);//拿到输入框输入的内容
// 调用接口
var that = this;// 保存this
//city的值,进行了双向数据绑定,输入框输入内容,回车按键监听,即可获取到
axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
.then(function (response) {
console.log(response);
console.log(response.data.data.forecast);
//给空数组赋值
//因为是回调函数,this已经改变了。所以用that保存一下,然后再如下调用
that.weatherList = response.data.data.forecast
})
.catch(function (err) { })
}
},
问题:response.data.data.forecast 来源?
(1)谷歌浏览器---》检测---》输入“北京”按回车
(2)console.log(response);
查看通过 response 查看服务器返回的内容 ,如下:
即 response.data.data.forecast 能获取到相应数据
三、具体代码
1、模板.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>天知道</title>
<!--
1、link 引入
text/css: 纯文本css代码
2、rel 做什么用
stylesheet:样式表
3、href 引入的是什么?
MyStyle.css
-->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/logo.png" alt="logo" /></div>
<div class="form_group">
<!-- city在Vue实例中声明定义,通过v-model进行双向数据绑定 -->
<!-- @keyup.enter="searchWeather" 监听回车键,指定触发的方法为 searchWeather -->
<input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气"/>
<button class="input_sub">搜 索</button>
</div>
<div class="hotkey">
<a href="javascript:;">北京</a>
<a href="javascript:;">上海</a>
<a href="javascript:;">广州</a>
<a href="javascript:;">深圳</a>
</div>
</div>
<!-- 天气信息 -->
<ul class="weather_list">
<!-- weatherList在Vue实例中声明定义,通过axios调用接口,获得实际数据 -->
<li v-for="item in weatherList">
<!-- 天气类型。如:多云、晴、雷雨等 -->
<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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 导入自己的js -->
<script src="./js/main.js"></script>
</body>
</html>
2、main.js
/*
请求地址:http://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数:city(城市名)
响应内容:天气信息
1. 点击回车
2. 查询数据
3. 渲染数据
*/
var app = new Vue({
el: "#app",//通过 el 把vue实例,挂载给元素
data: {
city: '',//声明变量,要查询的城市
weatherList: []//声明一个空数组
},
methods: {//方法定义
searchWeather: function () {
console.log('天气查询');
console.log(this.city);//拿到输入框输入的内容
// 调用接口
var that = this;// 保存this
//city的值,进行了双向数据绑定,输入框输入,回车按键监听,即可获取到
axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
.then(function (response) {
console.log(response);
console.log(response.data.data.forecast);
//给空数组赋值
//因为是回调函数,this已经改变了。所以用that保存一下,然后再如下调用
that.weatherList = response.data.data.forecast
})
.catch(function (err) { })
}
},
})