Vue实现仿音乐播放器13-实现音乐榜单跳转显以及播放效果

￡神魔★判官ぃ 2023-10-18 12:38 52阅读 0赞

## 效果 ##

![Image 1][]![20181213215750416.gif][]

## 实现 ##

### 百度音乐获取列表API说明 ###

例：method=baidu.ting.billboard.billList&type=1&size=10&offset=0

参数： type = 1-新歌榜,2-热歌榜,11-摇滚榜,12-爵士,16-流行,21-欧美金曲榜,22-经典老歌榜,23-情歌对唱榜,24-影视金曲榜,25-网络歌曲榜

size = 10 //返回条目数量

offset = 0 //获取偏移

#### 完善榜单页面listcate.vue ####

<template lang="html">
      <div>
        <ListCate_List v-for="item in musicTypeJSON" :musicType="item" />
      </div>
    </template>
    
    <script>
    
    import MusicType from "../assets/data/musictype.json"
    import ListCate_List from "../components/ListCate_List"
    
    export default {
      data(){
       return{
         musicTypeJSON:[]
       }
      },
      components:{
        ListCate_List
      },
      created(){
        this.musicTypeJSON = MusicType.currentType
      }
    }
    </script>
    
    <style lang="css">
    </style>

### 读取json文件 ###

在assets下的data下新建musictype.json

{
      "currentType":[1,2,11,21,22,23,24,25]
    }

用来存取获取列表的音乐类型

json文件位置：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### listcate.vue ###

注：

是通过import MusicType from "../assets/data/musictype.json" 引入的

然后通过 this.musicTypeJSON = MusicType.currentType 赋值给musicTypeJSON，然后通过

<ListCate\_List v-for="item in musicTypeJSON" :musicType="item" />

循环遍历取值。

然后再ListCast\_List.vue中直接通过：

props:{
        musicType:{
          type:[String,Number],
          default:1
        }
      },
      mounted(){
        const ListCateUrl = this.HOST+"/v1/restserver/ting?method=baidu.ting.billboard.billList&type= "+this.musicType+"&size=3&offset=0"
        this.$axios.get(ListCateUrl)
          .then(res => {
          console.log(res.data)
            this.listCateData = res.data
          })
          .catch(error => {
            console.log(error);
          })
      }
    }

获取并使用。

注：

json数据是通过import MusicType from "../assets/data/musictype.json" 引入的

然后通过 this.musicTypeJSON = MusicType.currentType 赋值给musicTypeJSON，然后通过

<ListCate\_List v-for="item in musicTypeJSON" :musicType="item" />

循环遍历取值。

然后再ListCast\_List.vue中直接通过：

props:{
        musicType:{
          type:[String,Number],
          default:1
        }
      },
      mounted(){
        const ListCateUrl = this.HOST+"/v1/restserver/ting?method=baidu.ting.billboard.billList&type= "+this.musicType+"&size=3&offset=0"
        this.$axios.get(ListCateUrl)
          .then(res => {
          console.log(res.data)
            this.listCateData = res.data
          })
          .catch(error = >{
            console.log(error);<BR>      })
      }
    }

获取并使用。

在components下新建ListCate\_List.vue

用来实现榜单列表

<template lang= "html">
      <div class= "listcate">
        <div  tag="div" class= "cate-item">
          <div class= "item-content">
            <div class="cate-post">
              <img :src="listCateData.billboard.pic_s192" :alt="listCateData.billboard.name">
            </div>
            <ul class= "cate-hot">
              <li v-for="(item,index) in listCateData.song_list">
                <span class="col-rank" :title="item.rank">{
       { item.rank }}</span>
                <span class="col-title">{
       { item.title }} - {
       { item.author }}</span>
              </li>
            </ul>
          </div >
       </div>
      </div>
    </template>
    
    <script>
    export default {
      name:"listcatelist",
      data(){
        return{
          listCateData:{
            song_list:[],
            billboard:{}
          }
        }
      },
      props:{
        musicType:{
          type:[String,Number],
          default:1
        }
      },
      mounted(){
        const ListCateUrl = this.HOST+"/v1/restserver/ting?method=baidu.ting.billboard.billList&type= "+this.musicType+"&size=3&offset=0"
        this.$axios.get(ListCateUrl)
          .then(res => {
          console.log(res.data)
            this.listCateData = res.data
          })
          .catch(error => {
            console.log(error);
          })
      }
    }
    </script>
    
    <style lang="css">
    
    .listcate{
      padding: 0 17px 20px;
      font-size: 16px;
      background: #fff;
    }
    
    .cate-item {
        border-bottom: 1px solid #eee;
        padding: 20px 0;
    }
    
    .item-content {
        display: flex;
    }
    
    .cate-post {
        position: relative;
        color: #fff;
        font-size: 18px;
        height: 96px;
        width: 96px;
    }
    
    .cate-post img {
        width: 100%;
        height: 100%;
    }
    
    .cate-item .cate-hot {
        flex: 1;
        margin-left: 14px;
        padding: 6px 0;
    }
    
    .cate-item .cate-hot li {
        padding: 6px 0;
        height: 17px;
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #666;
        font: 15px 700;
    }
    
    .cate-item .cate-hot li .col-rank {
        color: #fa6644;
        font-family: Arial;
        font-weight: 700;
        font-style: italic;
    }
    .cate-item .cate-hot li .col-title {
        line-height: 17px;
        color: #343434;
        text-indent: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        width: 140px;
    }
    
    </style>

注：

可以输出以下看API返回的数据：

1.照片数据为：listCateData.billboard.pic\_s192

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

我们可以打开这个url

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

2.作者、序号、标题属性

<span class="col-rank" :title="item.rank">{
       { item.rank }}</span>
    <span class="col-title">{
       { item.title }} - {
       { item.author }}</span>

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4][]

![Image 1][]

至此已经实现，点击榜单会显示榜单列表，下面实现点击每个榜单进入榜单详情页面。

### 实现榜单详情 ###

#### 配置路由跳转 ####

在ListCate\_List.vue配置路由跳转

<router-link tag="div" :to="{name:'LicateDetails',params:{musictype:musicType}}" class="item-content">
            <div class="cate-post">
              <img :src="listCateData.billboard.pic_s192" :alt="listCateData.billboard.name">
            </div>
            <ul class="cate-hot">
              <li v-for="(item,index) in listCateData.song_list">
                <span class="col-rank" :title="item.rank">{
       { item.rank }}</span>
                <span class="col-title">{
       { item.title }} - {
       { item.author }}</span>
              </li>
            </ul>
     </router-link>

路由跳转到ListDetails,传递参数音乐类型musicType

#### 新建licateDetail.vue ####

在pages下新建licateDetails目录，然后在下面新建licateDetails.vue

接受路由参数并请求歌曲列表数据

#### 详情路由配置 ####

打开router下的index.js

import LicateDetails from "@/pages/licateDetails/licateDetails"
    
      {
              path:"artistsdetails",
              name:"ArtistsDetails",
              component:ArtistsDetails
            },
            {
              path:"licatedetails",
              name:"LicateDetails",
              component:LicateDetails
            }

配置点击歌曲播放，前面以及讲过，不再赘述。

至此音乐榜单数据显示、跳转、详情功能已经完成。

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

分阶段代码下载位置：

[https://download.csdn.net/download/badao\_liumang\_qizhi/10846557][https_download.csdn.net_download_badao_liumang_qizhi_10846557]

[Image 1]: 
[20181213215750416.gif]: https://img-blog.csdnimg.cn/20181213215750416.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181213215849684.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/20181213220034486.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 2]: https://img-blog.csdnimg.cn/20181213220043419.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/20181213220117747.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 4]: https://img-blog.csdnimg.cn/20181213220123380.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