VUE第六天学习
内容：轮播图、热歌榜、推荐页和热歌榜、歌曲播放功能
一、轮播图
接口地址：
localhost:3000/banner?type=1
插件：
vue-awesome-swiper
1.安装
npm install vue-awesome-swiper --save
2.使用
在/src/main.js【全局】
// 引入swiper插件
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 引入swiper插件的样式【重要】
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
在推荐页面中添加如下代码
//引入组件
import { swiper, swiperSlide } from 'vue-awesome-swiper'
//注册组件
components:{
swiper,
swiperSlide
}
//页面结构
![]()
swiper配置选项
autoplay:自动播放
speed:播放速度（毫秒）
loop:布尔值 如果是动态数据，需要给swiper标签添加一个v-if就可以使用
// 分页器
pagination:{
el:'.swiper-pagination',//分页器容器
clickable:true,//分页器可点击
},
// 左右两边的导航按钮
navigation:{
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev'
}
二、axios发起多个网络请求
第一步：把每一个网络请求以函数方式定义，直接返回【不要做任何处理】
getBanner(){
// 请求轮播图接口
return axios.get('/music/banner?type=1')
},
getPersonalized(){
return axios.get('/music/personalized')
}
第二步：在页面挂载完成的钩子函数中利用axios的all方法发起多个网络请求
//一次性发起多个网络请求
axios.all([this.getBanner(),this.getPersonalized()])
.then(axios.spread((banners,result)=>{
this.banners = banners.data.banners;
this.arr = result.data.result;
}))
三、其他像素单位
vw 计算的时整个视图窗口的宽度，包括滚动条，而100%不包括滚动条。
vh 计算的时整个视图窗口的高度，包括滚动条，而100%不包括滚动条。
四、接口地址优化
如果项目中页面组件较多，并且都有相同前缀的请求地址，为了能够提高项目的可维护性，可以预先把项目中需要请求的接口地址都定义好，然后导出。
示例代码：
接口配置文件(/src/common/js/api.js)
var banner = '/music/banner?type=1';//轮播图
var personalized = '/music/personalized?limit=9';//推荐歌单
var hot = '/music/top/list?idx=1';//热歌榜
export default{
banner,personalized,hot
}
然后在/src/main.js中，将接口地址配置数据挂到原型链上，这样所有的页面组件都可以使用了。
//引入接口地址配置文件
import apis from './common/js/api'
Vue.prototype.api = apis
使用：
this.http({
url:this.api.hot//此处url地址就是从接口地址配置中获取的变量
}).then(result=>{
this.songs = result.data.playlist.tracks;
this.time = result.data.playlist.updateTime
})
这样做的好处是：如果后续接口地址规则有变化，只需要在接口地址配置文件中进行修改即可，项目页面组件中不用进行任何修改。
作业：
1.热歌榜和推荐页歌单，可以共用一个组件，热歌榜样式要处理好（精灵图）
2.歌曲播放页面，要展示出歌曲名称、图片等信息，能够点击按钮实现歌曲的播放和暂停（样式）
3.搜索页面
发表评论 (审核通过后显示评论)：