Vue结合网络数据开发应用
<!-- 官网提供的 axios 在线地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
axios:功能强大的网络请求库
- axios必须先导入才可以使用
- 使用get或post方法即可发送对应的请求
- then方法中的回调函数会在请求成功或失败时触发
- 通过回调函数的形参可以获取响应内容,或错误信息
文档传送门:https://github.com/axios/axios
语法格式
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>//在线qing
axios.get(地址?key=value&key2=values1).then(function(response){}3,function(err){}4)
axios.post(地址,{key:value,key2:value2}2).then(function(response){}3,function(err){}4)
1、查询字符串
2、参数对象
3、回调函数:响应成功
4、回调函数:响应失败
【调用API,要参考该API的开发文档写get的查询字符串、post的参数对象。】
axios+vue
- axios回调函数中的this已经改变,无法访问到data中数据
- 把this保存起来,回调函数中直接使用保存的this即可
- 和本地应用的最大区别就是改变了数据来源
案例——天气查询
天气接口
- 请求地址:
http://wthrcdn.etouch.cn/weather_mini
- 请求方法:get
- 请求参数: city (查询的城市名)
- 响应内容:天气信息
1、回车查询
执行步骤
-
- ①按下回车(v-on .enter)
- ②查询数据(axios接口 v-model )
- ③渲染数据(v-for数组 that)
- 应用的逻辑代码建议和页面分离,使用单独的js文件编写
- axios回调函数中this指向改变了,需要额外的保存一份
- 服务器返回的数据比较复杂时,获取的时候需要注意层级结构
2、点击查询
执行步骤
-
- ①点击城市(v-on 自定义参数)
- ②查询数据(this.方法())
- ③渲染数据
- 自定义参数可以让代码的复用性更高
- methods中定义的方法内部,可以通过this关键字点出其他的方法
案例——音乐播放器
6个功能
- 不同的接口需要的数据是不同的,文档的阅读需要仔细
- 页面结构复杂之后,通过审查元素的方式去快速定位相关元素
- 响应式的数据都需要定义在data中定义
1、歌曲搜索
- 按下回车(v-on .enter)
- 查询数据(axios接口 v-model )
- 渲染数据(v-for 数组 that)
注意:
- 服务器返回的数据比较复杂时,获取的时候需要注意层级结构
- 通过审查元素快速定位到需要操纵的元素
按下回车键.enter ---> 执行v-on/@ 的绑定事件---> 事件里面写axios的接口写网络请求,获得响应后将获得的数据找到需要的数据---> 通过v-model绑定到页面上显示 --->渲染数据v-for 先在data里面设置 数组 变量用来存放获取的数据---> 在回调函数中this固定了不会改变,在回调函数里var that = this,用that来渲染。
2、歌曲播放
- 点击播放(v-on自定义参数)
- 歌曲地址获取(接口歌曲id)
- 歌曲地址设置(v-bind)
注意:
- 歌曲id依赖歌曲搜索的结果,对于不用的数据也需要关注
3、歌曲封面
- 点击播放(增加逻辑)
- 歌曲封面获取(接口歌曲id)
- 歌曲封面设置(v-bind)
注意:
- 在vue中通过v-bind操纵属性
- 本地无法获取的数据,基本都会有对应的接口
4、歌曲评论
- 点击播放(增加逻辑)
- 歌曲评论获取(接口歌曲id)
- 歌曲评论渲染(v-for)
注意:
- 在vue中通过v-for生成列表
5、播放动画
- 监听音乐播放(v-on play)
- 监听音乐暂停(v-on pause)
- 操纵类名(v-bind 对象)
注意:
- audio标签的play事件会在音频播放的时候触发
- audio标签的pause事件会在音频暂停的时候触发
- 通过对象的方式设置类名,类名生效与否取决于后面值的真假
6、mv播放
- mv图标显示(v-if)
- mv地址获取(接口mvid)
- 遮罩层(v-show v-on)
- mv地址设置(v-bind)
一些接口
天气查询接口:http://wthrcdn.etouch.cn/weather_mini?city=查询城市