效果
实现
百度音乐API歌手说明
例:method=baidu.ting.artist.getInfo&tinguid=877578
参数: tinguid = 877578 //歌手ting id
歌手页面artists.vue
静态与页面布局
<template lang="html">
<div class="artists">
<ul class="list">
<li :key="index" class="artist" v-for="(item,index) in artistsData">
<div class="pic">
<img :alt="item.name" :src="item.avatar_s500">
</div>
<div class="info">
<div>{{ item.name }}</div>
</div>
</li>
</ul>
</div>
</template>
</script>
<style scoped>
.artists{
padding: 0 17px;
background: #fff;
}
.list li {
padding-left: 0;
min-height: 70px;
display: flex;
align-items: center;
border-bottom: 1px solid #F2F2F2;
}
.pic{
width: 54px;
height: 54px;
margin-right: 15px;
}
.info {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
font-size: 16px;
}
.pic img{
border-radius: 27px;
overflow: hidden;
}
</style>
获取歌手需要传递歌手的id,先声明一个id数组
data(){
return{
artistsArr:["2517","7994","1091","45561","2507","245815","1077","1204","1117","82366"],
artistsData:[]
}
},
然后请求数据
mounted(){
for(var i =0;i<this.artistsArr.length;i++){
const artistsURL = this.HOST+"/v1/restserver/ting?method=baidu.ting.artist.getInfo&tinguid="+ this.artistsArr[i];
this.$axios.get(artistsURL)
.then(res => {
console.log(res.data)
this.artistsData.push({
avatar_s500:res.data.avatar_s500,
name:res.data.name,
ting_uid:res.data.ting_uid
})
})
.catch(error => {
console.log(error);
})
}
}
}
然后可以查看请求后返回的数据,以其中一位歌手为例
这样就可以根据返回的数据的格式来自动的填充要显示的歌手的头像以及名字。
完整artist.vue代码
<template lang="html">
<div class="artists">
<ul class="list">
<li :key="index" class="artist" v-for="(item,index) in artistsData">
<div class="pic">
<img :alt="item.name" :src="item.avatar_s500">
</div>
<div class="info">
<div>{{ item.name }}</div>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name:"artists",
data(){
return{
artistsArr:["2517","7994","1091","45561","2507","245815","1077","1204","1117","82366"],
artistsData:[]
}
},
mounted(){
for(var i =0;i<this.artistsArr.length;i++){
const artistsURL = this.HOST+"/v1/restserver/ting?method=baidu.ting.artist.getInfo&tinguid="+ this.artistsArr[i];
this.$axios.get(artistsURL)
.then(res => {
console.log(res.data)
this.artistsData.push({
avatar_s500:res.data.avatar_s500,
name:res.data.name,
ting_uid:res.data.ting_uid
})
})
.catch(error => {
console.log(error);
})
}
}
}
</script>
<style scoped>
.artists{
padding: 0 17px;
background: #fff;
}
.list li {
padding-left: 0;
min-height: 70px;
display: flex;
align-items: center;
border-bottom: 1px solid #F2F2F2;
}
.pic{
width: 54px;
height: 54px;
margin-right: 15px;
}
.info {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
font-size: 16px;
}
.pic img{
border-radius: 27px;
overflow: hidden;
}
</style>
实现点击歌手后跳转到详情页面
效果
实现
获取歌手歌曲列表API说明
例:method=baidu.ting.artist.getSongList&tinguid=877578&limits=6&use_cluster=1&order=2
参数: tinguid = 877578//歌手ting id
limits = 6//返回条目数量
歌手列表跳转路由配置
<div class="artists">
<ul class="list">
<router-link tag="li" :to="{name:'ArtistsDetails',params:{avatar:item.avatar_s500,name:item.name,ting_uid:item.ting_uid}}" :key="index" class="artist" v-for="(item,index) in artistsData">
<div class="pic">
<img :alt="item.name" :src="item.avatar_s500">
</div>
<div class="info">
<div>{{ item.name }}</div>
</div>
</router-link>
</ul>
</div>
改为router-link 使可跳转,并传递参数照片、名字、id
歌手列表页面artistsDetails.vue
在pages下新建目录artistsDetail,在其下新建artistsDetail.vue
<template lang="html">
<div class="">
<Title :name="this.$route.params.name" :avatar="this.$route.params.avatar"/>
<List :ting_uid="this.$route.params.ting_uid"/>
</div>
</template>
<script>
import Title from "../../components/details/title"
import List from "../../components/details/list"
export default {
name:"details",
data(){
return{
}
},
components:{
Title,
List
}
}
</script>
<style lang="css">
</style>
在这个页面引入两个组件list.vue和title.vue
其中title.vue显示头像以及歌手名字,list.vue显示歌曲列表。
新建title.vue
在components下新建detail目录,然后在下面新建title.vue
<template lang="html">
<div class="art-title">
<div class="artist-header">
<div class="header-bg" :style="{background:'url(http://qukufile2.qianqian.com/data2/pic/ce52b58848ff456cd4d48765f2f3dd1e/267770218/267770218.jpg@s_0,w_240)'}"></div>
<div class="header-mask"></div>
<div class="artist-header-content">
<div class="pic">
<img :src="avatar" />
</div>
<h2>{{ name }}</h2>
</div>
</div>
</div>
</template>
<script>
export default {
name:"arttitle",
data(){
return{
arttitle:{}
}
},
props:{
name:{
type:String,
defualt:""
},
avatar:{
type:String,
default:""
}
}
}
</script>
<style scoped>
.artist-header {
width: 100%;
height: 160px;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.header-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-filter: blur(6px);
filter: blur(6px);
-webkit-transform: scale(2);
transform: scale(2);
background-repeat: no-repeat;
overflow: hidden;
}
.header-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.85);
overflow: hidden;
}
.artist-header-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 25px 0;
}
.pic {
width: 80px;
height: 80px;
-webkit-border-radius: 40px;
border-radius: 40px;
overflow: hidden;
margin: 0 auto;
}
.artist-header-content h2 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
font-size: 1.8rem;
line-height: 20px;
margin-top: 12px;
color: #333;
font-weight: 400;
}
</style>
注:
img标签用来显示头像标签,src属性为传递过来的avatar
在artists.vue中
:to="{name:'ArtistsDetails',params:{avatar:item.avatar_s500,name:item.name,ting_uid:item.ting_uid}}"
传递到artists.vue中引入的Title组件
<Title :name="this.$route.params.name" :avatar="this.$route.params.avatar"/>
所以最终头像的来源就是请求歌手列表后返回来的item.avatar_s500,打开这个url可以看到
新建list.vue
同样在details下新建list.vue来显示歌曲列表
<template lang="html">
<div class="art-list">
<ul class="list">
<li class="song" v-for="(item,index) in listArr" :key="index">
<div class="left">
{{ item.title }}
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name:"artlist",
data(){
return{
listArr:[]
}
},
props:{
ting_uid:{
type:String,
default:"0"
}
},
mounted(){
const ArtList = this.HOST + "/v1/restserver/ting?method=baidu.ting.artist.getSongList&tinguid="+ this.ting_uid +"&limits=10&use_cluster=1&order=2"
this.$axios.get(ArtList)
.then(res => {
this.listArr = res.data.songlist
})
.catch(error => {
console.log(error);
})
}
}
</script>
<style scoped>
.art-list{
padding: 0 17px;
}
.song{
height: 50px;
line-height: 50px;
border-bottom: 1px solid #999;
}
.left{
font-size: 18;
}
</style>
注:
API获取歌手歌曲列表说明
例:method=baidu.ting.artist.getSongList&tinguid=877578&limits=6&use_cluster=1&order=2
参数: tinguid = 877578//歌手ting id
limits = 6//返回条目数量
在list.vue中接受通过 <List :ting_uid="this.$route.params.ting_uid"/>
传递过来的id,然后访问API获取数据,遍历显示。
配置歌手歌曲路由
打开router下的index.js
import ArtistsDetails from "@/pages/artistsDetails/artistsDetails"
{
path:"artistsdetails",
name:"ArtistsDetails",
component:ArtistsDetails
},
实现歌手的歌曲点击播放效果
打开list.vue
<router-link tag="li" :to="{name:'MusicPlay',params:{songid:item.song_id}}" class="song" v-for="(item,index) in listArr" :key="index">
<div class="left">
{{ item.title }}
</div>
</router-link>
此部分代码对应分阶段代码中阶段九