基于vue+百度音乐api +express + mongodb

调用百度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();
        }

下面是返回数据的格式

19.png

然后就是渲染数据了

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

结果数据如下：

20.png

下面是播放音乐，这里先使用原生的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;
                })
            },

结果数据如下：

21.png

下节将介绍将音乐信息收藏到数据库并在页面上展示