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

╰+哭是因爲堅強的太久メ 2023-10-18 12:38 42阅读 0赞

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 实现 ###

### 百度音乐API歌手说明 ###

例：method=baidu.ting.artist.getInfo&tinguid=877578

参数： tinguid = 877578 //歌手ting id

### 歌手页面artists.vue ###

#### 静态与页面布局 ####

</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);
            })
        }
      }
    }

然后可以查看请求后返回的数据，以其中一位歌手为例

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

这样就可以根据返回的数据的格式来自动的填充要显示的歌手的头像以及名字。

### 完整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>

## 实现点击歌手后跳转到详情页面 ##

### 效果 ###

![Image 1][]![20181213214844522.gif][]

### 实现 ###

#### 获取歌手歌曲列表API说明 ####

例：method=baidu.ting.artist.getSongList&tinguid=877578&limits=6&use\_cluster=1&order=2

参数： tinguid = 877578//歌手ting id

limits = 6//返回条目数量

#### 歌手列表跳转路由配置 ####

改为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

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

其中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可以看到

![Image 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

#### 新建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][https_download.csdn.net_download_badao_liumang_qizhi_10846557]

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181213214550249.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181213214828265.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[20181213214844522.gif]: https://img-blog.csdnimg.cn/20181213214844522.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181213214923119.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20181213215009172.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_download.csdn.net_download_badao_liumang_qizhi_10846557]: https://download.csdn.net/download/badao_liumang_qizhi/10846557