效果
实现
百度音乐获取列表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文件位置:
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>
注:
是通过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
我们可以打开这个url
2.作者、序号、标题属性
<span class="col-rank" :title="item.rank">{{ item.rank }}</span>
<span class="col-title">{{ item.title }} - {{ item.author }}</span>
至此已经实现,点击榜单会显示榜单列表,下面实现点击每个榜单进入榜单详情页面。
实现榜单详情
配置路由跳转
在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
接受路由参数并请求歌曲列表数据
const licateUrl = this.HOST+"/v1/restserver/ting?method=baidu.ting.billboard.billList&type= "+this.$route.params.musictype+"&size=10&offset= 0"
licateDetails.vue
<template lang="html">
<div class="listdetails">
<div class="banner-img">
<img :src="listCateData.billboard.pic_s444" alt="">
</div>
<ul class="list">
<router-link :key="index" tag="li" :to="{name:'MusicPlay',params:{songid:item.song_id}}" v-for="(item,index) in listCateData.song_list">
<p class="title">{{ item.title }}</p>
<p class="author">{{ item.author }}</p>
</router-link>
</ul>
</div>
</template>
<script>
export default {
name:"licatedetails",
data(){
return{
listCateData:{
song_list:[],
billboard:{}
}
}
},
mounted(){
const licateUrl = this.HOST+"/v1/restserver/ting?method=baidu.ting.billboard.billList&type= "+this.$route.params.musictype+"&size=10&offset=0"
this.$axios.get(licateUrl)
.then(res => {
this.listCateData = res.data
})
.catch(error => {
console.log(error);
})
}
}
</script>
<style scoped>
.banner-img img{
width: 100%;
}
.list{
padding: 10px 17px;
background: #fff;
}
.list li{
margin: 10px 5px;
padding-bottom: 10px;
border-bottom: 1px solid #999;
}
.title{
font-size: 18px
}
.author{
font-size: 14px;
color: #999
}
</style>
详情路由配置
打开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