本次的系列博解和代码,主要是来自于Vue 2.0 高级实战-开发移动端音乐WebApp课程,由个人总结并编写,其代码及知识点部分,均有所更改和删减,关于更多 Vue 2.0 的知识和实际应用,还请大家购买课程进行学习实践,该系列博文的发布已得到黄轶老师的授权许可
我们在推荐页会展示轮播图,以及热门歌单列表,这两部分的数据都是来自 QQ 音乐的真实数据,我们先来获取对应的接口
轮播图及热门歌单为同一接口返回的数据,具体的数据结构点击右侧链接可自行查看QQ音乐 API,需要注意的是,接口并非一成不变,若是在项目过程中发现一些接口失效,可自行点击Network
更新最新接口即可
自从 Vue 更新到 2.0 版本之后,官方就不再更新vue-resource
,而是推荐我们使用axios来完成Ajax
请求,我们在本地进行请求,本着不同源需跨域原则,我们还要通过代理来转发我们的请求
// config/index.js
module.exports = {
dev: {
...
proxyTable: {
'/api': {
target: 'https://c.y.qq.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
},
}
// api/recommend.js
import axios from 'axios';
// 轮播图及热门歌单
export function getHomeData() {
return axios.get('/api/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg')
.then((res) => {
return Promise.resolve(res.data)
})
}
// recommend.vue
<script type="text/ecmascript-6">
import { getHomeData } from 'api/recommend'
import { ERR_OK } from 'api/config'
export default {
created() {
this._getHomeData()
},
methods: {
_getHomeData() {
getHomeData().then((res) => {
if (res.code === ERR_OK) {
console.log(res.data.slider)
console.log(res.data.songList)
}
})
}
}
}
</script>
Swiper
组件我们采用的是饿了么前端团队推出的Mint UI
移动端组件库,除了Swiper
组件外,我们在后续项目中还会引入Mint UI
的其他组件,所以我们在这里就引入全部组件
// 安装
npm i mint-ui --S
// main.js
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
// recommend.vue
<div v-if="slider.length" class="slider-wrapper">
<mt-swipe :auto="4000">
<mt-swipe-item v-for="(item, index) in slider" :key="index">
<a :href="item.linkUrl">
<img :src="item.picUrl" class="slider-img">
</a>
</mt-swipe-item>
</mt-swipe>
</div>
<div class="recommend-list">
<h1 class="list-title">热门歌单推荐</h1>
<ul>
<li v-for="(item, index) in discList" :key="index" class="item">
<div class="icon">
<img width="60" height="60" :src="item.picUrl">
</div>
<div class="text">
<h2 class="desc" v-html="item.songListDesc"></h2>
<p class="name" v-html="item.songListAuthor"></p>
</div>
</li>
</ul>
</div>
此处的轮播图样式我们通过全局 CSS 文件进行定义,需要做好 CSS 模块化管理,注意单页应用的样式污染问题
该章节的内容到这里就全部结束了,源码我已经发到了 GitHub Vue_Music_03 上了,有需要的同学可自行下载