黑马四小时入门学习记录-3|网络应用

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、歌曲搜索

1. 按下回车(v-on .enter)
2. 查询数据(axios接口 v-model )
3. 渲染数据(v-for 数组 that)

注意：

• 服务器返回的数据比较复杂时，获取的时候需要注意层级结构
• 通过审查元素快速定位到需要操纵的元素

按下回车键.enter ---> 执行v-on/@ 的绑定事件---> 事件里面写axios的接口写网络请求，获得响应后将获得的数据找到需要的数据---> 通过v-model绑定到页面上显示 --->渲染数据v-for 先在data里面设置 数组 变量用来存放获取的数据---> 在回调函数中this固定了不会改变，在回调函数里var that = this，用that来渲染。

2、歌曲播放

1. 点击播放(v-on自定义参数)
2. 歌曲地址获取(接口歌曲id)
3. 歌曲地址设置(v-bind)

注意：

• 歌曲id依赖歌曲搜索的结果，对于不用的数据也需要关注

3、歌曲封面

1. 点击播放(增加逻辑)
2. 歌曲封面获取(接口歌曲id)
3. 歌曲封面设置(v-bind)

注意：

• 在vue中通过v-bind操纵属性
• 本地无法获取的数据，基本都会有对应的接口

4、歌曲评论

1. 点击播放(增加逻辑)
2. 歌曲评论获取(接口歌曲id)
3. 歌曲评论渲染(v-for)

注意：

• 在vue中通过v-for生成列表

5、播放动画

1. 监听音乐播放(v-on play)
2. 监听音乐暂停(v-on pause)
3. 操纵类名(v-bind 对象)

注意：

• audio标签的play事件会在音频播放的时候触发
• audio标签的pause事件会在音频暂停的时候触发
• 通过对象的方式设置类名，类名生效与否取决于后面值的真假

6、mv播放

1. mv图标显示(v-if)
2. mv地址获取(接口mvid)
3. 遮罩层(v-show v-on)
4. mv地址设置(v-bind)

---

一些接口

天气查询接口：http://wthrcdn.etouch.cn/weather_mini?city=查询城市