调用百度api接口，需要跨域，所以先安装vue-jsonp
cnpm i vue-jsonp --save
接口地址参考http://67zixue.com/home/article/detail/id/22.html
1.在main.js里面引入import VueJsonp from 'vue-jsonp'
2.使用Vue.use(VueJsonp)
百度api地址：http://tingapi.ting.baidu.com/v1/restserver/ting
获取方式：GET
参数：format=json或xml&calback=&from=webapp_music&method=以下不同的参数获得不同的数据
PS：format根据开发需要可选择json或xmml，其他参数对应填入，calback是等于空的。
一、获取列表
例：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 //获取偏移
上面的参数method前面都是公共的部分，我们在data里面定义下参数,dataOb为参数公共部分，commonParams为查询列表的参数
export default{
components: {
myCollect
},
data(){
return{
ifSearch: false,
autoplay:true,//是否自动播放
tableData: [],
myChoose: '我的首页',
myType: [
{
name: '我的首页',
icon: 'iconfont icon-shouyefill'
},
{
name: '我的收藏',
icon: 'iconfont icon-xiangqufill'
},
{
name: '我的喜欢',
icon: 'iconfont icon-zanfill'
}
],
auObj: null,
loading: false,
musicUrl: '',//获取到的音乐链接
musicType: '1',//音乐类型
api: 'http://tingapi.ting.baidu.com/v1/restserver/ting',
jsonpData: [],
searchData: [],
currentPage: 1,//当前是那一页
totalMusic: 0,// 列表总数，下面做翻页
dataObj: {// 公共参数
format: 'json',
calback: '',
from: 'webapp_music'
},
commonParams: {// 列表参数
method: 'baidu.ting.billboard.billList',
type: '',
size: 20,
offset: 0
},
searchParams: { //查询参数
method: 'baidu.ting.search.catalogSug',
query: ''
},
playParams: { //播放参数
method: 'baidu.ting.song.play',
songid: ''
}
}
},
前端html页面编写如下，初始化type类型，定义一个字段musicType为1也就是新歌榜，具体上面代码有写,html页面都是基于elementui编写
<el-radio-group v-model="musicType" size="small" @change="typeChange">
<el-radio-button label="1">新歌榜</el-radio-button>
<el-radio-button label="2">热歌榜</el-radio-button>
<el-radio-button label="11">摇滚榜</el-radio-button>
<el-radio-button label="12">爵士</el-radio-button>
<el-radio-button label="16">流行</el-radio-button>
<el-radio-button label="21">欧美金曲榜</el-radio-button>
<el-radio-button label="22">经典老歌榜</el-radio-button>
<el-radio-button label="23">情歌对唱榜</el-radio-button>
<el-radio-button label="24">影视金曲榜</el-radio-button>
<el-radio-button label="25">网络歌曲榜</el-radio-button>
</el-radio-group>
方法的调用
// 获取音乐列表
getMusicList() {
this.loading = true;
this.commonParams.type = this.musicType;
// 合并对象
const dataMusic = Object.assign({}, this.commonParams, this.dataObj)
this.$jsonp(this.api, dataMusic).then(json => {
this.jsonpData = json.song_list;
this.loading = false;
this.totalMusic = parseInt(json.billboard.billboard_songnum);
})
}
mounted(){
this.getMusicList();
}
下面是返回数据的格式
然后就是渲染数据了
<ul v-if="!ifSearch" class="geBan">
<li v-for="(item,index) in jsonpData" :key="index">
<div class="port-1 effect-1">
<div class="image-box">
<img :src="item.pic_premium" alt="pic_premium">
</div>
<div class="text-desc">
<h3>{{item.title}}</h3>
<p>歌手：{{item.author}}
<span style="padding-left:5px">语言：{{item.language}}</span> </p>
<p>热度：{{item.hot}}</p>
<a href="javascript:void(0)" @click="playMusic(item.song_id)" class="btn">播放</a>
<a href="javascript:void(0)" @click="addMusic(item)" class="btn">添加</a>
<a href="javascript:void(0)" @click="playMusic(item.song_id)" class="btn">下载</a>
</div>
</div>
</li>
</ul>
下面是翻页
<el-pagination
background
layout="prev, pager, next"
:current-page.sync="currentPage"//当前是哪页
@current-change="handleCurrentChange"//页数改变时触发
:page-size="commonParams.size"//一页几条数据
:total="totalMusic">//总页数
</el-pagination>
// 页数改变
handleCurrentChange(val) {
window.scrollTo(0,0);// 请求成功滚动条滚到顶部
this.commonParams.offset = (parseInt(val)-1)*(this.commonParams.size);
this.getMusicList();//切换页数后重新获取方法
},
// 音乐类型改变
typeChange(val) {
this.ifSearch = false;
this.commonParams.offset = 0;
this.currentPage = 1;//把当前页设置为第一页
this.getMusicList();
},
接下来介绍查询的接口，代码差不多
二、搜索
例：method=baidu.ting.search.catalogSug&query=海阔天空
参数：query = '' //搜索关键字
//searchParams.query为绑定的数据
<div class="search">
<el-input placeholder="请输入内容" v-model="searchParams.query" class="search-input">
<el-button slot="append" icon="el-icon-search" @click="searchMusic"></el-button>
</el-input>
</div>
方法如下
searchMusic() {
this.ifSearch = true;
this.loading = true;
const dataMusic = Object.assign({}, this.searchParams, this.dataObj)
this.$jsonp(this.api, dataMusic).then(json => {
this.searchData = json.song;//保存查出来的数据
this.loading = false;
})
},
结果数据如下：
下面是播放音乐，这里先使用原生的audio组件，在后面的收藏页里面在自定义进度条等样式
三、播放
例：method=baidu.ting.song.play&songid=877578
例：method=baidu.ting.song.playAAC&songid=877578
参数：songid = 877578 //歌曲id
//controls为原生的控制样式，autuplay为是否自动播放
<div class="audioUrl">
<audio :src="musicUrl" controls="controls" autoplay="autoplay"></audio>
</div>
方法如下
//播放音乐
playMusic(songId){
this.playParams.songid = songId;
const dataMusic = Object.assign({}, this.playParams, this.dataObj)
this.$jsonp(this.api, dataMusic).then(json => {
this.musicUrl = json.bitrate.file_link;
})
},
结果数据如下：
下节将介绍将音乐信息收藏到数据库并在页面上展示
