效果

实现

百度音乐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组件

所以最终头像的来源就是请求歌手列表后返回来的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>

此部分代码对应分阶段代码中阶段九

分阶段代码下载位置：

https://download.csdn.net/download/badao_liumang_qizhi/10846557

Vue实现仿音乐播放器12-实现歌手页面效果相关推荐

Vue实现仿音乐播放器14-实现搜索页面以及功能
效果实现百度音乐搜索API说明例:method=baidu.ting.search.catalogSug&query=海阔天空参数:query = " //搜索关键字搜索页 ...
Vue实战：音乐播放器（一）页面效果
先看一下效果图首页歌单详情页歌手列表歌手详情页排行页面榜单的详情页(排序样式) 搜索页面搜索结果播放器内核歌词自动滚动播放列表用户中心转载于:https://www.cnblo ...
Vue实现仿音乐播放器项目总述以及阶段目录
Github地址 https://github.com/badaoliumang/vuemusicplayer Vue实现仿音乐播放器各阶段代码 https://download.csdn.net/d ...
Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
前言前面在首页已经完成今日推荐以及访问百度API获取数据,现在继续来完善home主页. 效果新歌速递 swiper实现轮播图实现实现新歌速递在components下新建新歌速递组件News_ ...
Vue实现仿音乐播放器3-将项目托管到git以及github
Github新建项目 1.登录github,点击右上角新建仓库 2.输入仓库名以及描述等,点击Create resposity 3.新建仓库完成后,右边有个clone or download,复制SS ...
vue 判断同一数组内的值是否一直_前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
后端实体类接收数组_前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目...
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
Vue实现仿音乐播放器11-实现访问百度音乐API实现播放音乐功能
场景从今日推荐页面点击某首歌曲会将这首歌曲的songid通过路由传递到播放界面, 播放界面调用百度音乐接口实现数据的获取以及音乐的播放. 效果实现配置路由首先在pages目录下新建musicp ...

Vue实现仿音乐播放器12-实现歌手页面效果

效果

实现