調(diào)用百度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
參數(shù)：format=json或xml&calback=&from=webapp_music&method=以下不同的參數(shù)獲得不同的數(shù)據(jù)
PS：format根據(jù)開發(fā)需要可選擇json或xmml，其他參數(shù)對(duì)應(yīng)填入，calback是等于空的。
一、獲取列表
例：method=baidu.ting.billboard.billList&type=1&size=10&offset=0
參數(shù)： type = 1-新歌榜,2-熱歌榜,11-搖滾榜,12-爵士,16-流行,21-歐美金曲榜,22-經(jīng)典老歌榜,23-情歌對(duì)唱榜,24-影視金曲榜,25-網(wǎng)絡(luò)歌曲榜
size = 10 //返回條目數(shù)量
offset = 0 //獲取偏移
上面的參數(shù)method前面都是公共的部分，我們?cè)赿ata里面定義下參數(shù),dataOb為參數(shù)公共部分，commonParams為查詢列表的參數(shù)
export default{
components: {
myCollect
},
data(){
return{
ifSearch: false,
autoplay:true,//是否自動(dòng)播放
tableData: [],
myChoose: '我的首頁(yè)',
myType: [
{
name: '我的首頁(yè)',
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,//當(dāng)前是那一頁(yè)
totalMusic: 0,// 列表總數(shù)，下面做翻頁(yè)
dataObj: {// 公共參數(shù)
format: 'json',
calback: '',
from: 'webapp_music'
},
commonParams: {// 列表參數(shù)
method: 'baidu.ting.billboard.billList',
type: '',
size: 20,
offset: 0
},
searchParams: { //查詢參數(shù)
method: 'baidu.ting.search.catalogSug',
query: ''
},
playParams: { //播放參數(shù)
method: 'baidu.ting.song.play',
songid: ''
}
}
},
前端html頁(yè)面編寫如下，初始化type類型，定義一個(gè)字段musicType為1也就是新歌榜，具體上面代碼有寫,html頁(yè)面都是基于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">經(jīng)典老歌榜</el-radio-button>
<el-radio-button label="23">情歌對(duì)唱榜</el-radio-button>
<el-radio-button label="24">影視金曲榜</el-radio-button>
<el-radio-button label="25">網(wǎng)絡(luò)歌曲榜</el-radio-button>
</el-radio-group>
方法的調(diào)用
// 獲取音樂列表
getMusicList() {
this.loading = true;
this.commonParams.type = this.musicType;
// 合并對(duì)象
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();
}
下面是返回?cái)?shù)據(jù)的格式
然后就是渲染數(shù)據(jù)了
<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>
下面是翻頁(yè)
<el-pagination
background
layout="prev, pager, next"
:current-page.sync="currentPage"http://當(dāng)前是哪頁(yè)
@current-change="handleCurrentChange"http://頁(yè)數(shù)改變時(shí)觸發(fā)
:page-size="commonParams.size"http://一頁(yè)幾條數(shù)據(jù)
:total="totalMusic">//總頁(yè)數(shù)
</el-pagination>
// 頁(yè)數(shù)改變
handleCurrentChange(val) {
window.scrollTo(0,0);// 請(qǐng)求成功滾動(dòng)條滾到頂部
this.commonParams.offset = (parseInt(val)-1)*(this.commonParams.size);
this.getMusicList();//切換頁(yè)數(shù)后重新獲取方法
},
// 音樂類型改變
typeChange(val) {
this.ifSearch = false;
this.commonParams.offset = 0;
this.currentPage = 1;//把當(dāng)前頁(yè)設(shè)置為第一頁(yè)
this.getMusicList();
},
接下來介紹查詢的接口，代碼差不多
二、搜索
例：method=baidu.ting.search.catalogSug&query=海闊天空
參數(shù)：query = '' //搜索關(guān)鍵字
//searchParams.query為綁定的數(shù)據(jù)
<div class="search">
<el-input placeholder="請(qǐng)輸入內(nèi)容" 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;//保存查出來的數(shù)據(jù)
this.loading = false;
})
},
結(jié)果數(shù)據(jù)如下：
下面是播放音樂，這里先使用原生的audio組件，在后面的收藏頁(yè)里面在自定義進(jìn)度條等樣式
三、播放
例：method=baidu.ting.song.play&songid=877578
例：method=baidu.ting.song.playAAC&songid=877578
參數(shù)：songid = 877578 //歌曲id
//controls為原生的控制樣式，autuplay為是否自動(dòng)播放
<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;
})
},
結(jié)果數(shù)據(jù)如下：
下節(jié)將介紹將音樂信息收藏到數(shù)據(jù)庫(kù)并在頁(yè)面上展示
