使用Vue对接网易云音乐

偶然在网上发现了网易云的接口，自己试了下发现确实能用，就自己做了vue项目打包成apk装到自己手机上了，可惜我不会后端，没法把自己喜欢听的歌曲ID放入数据库，所以每次打开想听什么都是要自己搜索。

可能有人会杠了，为什么不直接用网易云音乐，好吧其实用网易云音乐更方便，自己装的软件简直就是多此一举。但我写的这个项目其实主要是针对网易云上的付费歌曲的，在自己的程序里搜索到歌曲，点击下载，然后在网易云里搜索本地，就可以吧歌曲加入到收藏了，相当方便。笑出了声...

话不多说，可是撸代码了：

我使用了elementui框架，先写一个搜索框加入输入框监听事件

<el-input v-model="input" placeholder="music" @input="getData"></el-input>

再加入一个list，这个是用来显示搜索列表的，分别是index+1：序号，values.name：歌曲名，values.singer：歌手名。最后再加一个click触发的播放按钮：

<el-row class="listMucis"><el-col :span="24" v-for="(values,index) in listMusic" :key="values.mid"><span>{{index+1}}.{{values.name}}</span><span>{{values.singer}}</span><i class="el-icon-video-play" @click="arr(values.id)" :data-id="values.id"></i></el-col></el-row>

框架这种东西，想用就用，看个人喜好了。

下面写第一个数据交互，也就是输入框的监听：

getData(e) {this.$axios.get("https://api.imjad.cn/cloudmusic/", {params: {type: "search",s: this.input}}).then(result => {if (result) {this.listMusic = []var ifor(i=0;i<8;i++){this.listMusic.push(result.data.result.songs[i])}}});},

直接使用axios发送请求，type是请求类型，s是监听的输入框内容。listMusic在data里面以空数组形式放好。因为这里我只想拿8条数据，所以用了for循环来吧数据push出去，想全拿的可以不用这么麻烦。

这里其实就已经拿到了音乐的各种信息，现在只需要拿着已有的音乐ID去请求接口就可以了。

通过上面i标签的click事件，来实现点击播放。

arr(id){this.$axios.get("https://api.imjad.cn/cloudmusic/", {params: {type: "song",id: id,br: 128000}}).then(result => {this.musicId = result.data.data[0].url})}

这里的musicId是提前写好的audio播放器，只需要把拿到的url放入就可以播放了。

<audio :src="musicId" controls="controls" autoplay="autoplay" loop="loop"></audio> 这是data()里的参数名称，当然也有些是用不上的 isFalse: "",show: true,input: "",fadeIns: "",listMusic: [],musicId: '',hide: false

有做博客的可以把这个接口放入自己的博客里，加入些背景音乐还是可以的吧。至于我自己，说来惭愧，不会写接口，现在连自己的博客都搭建不起来，也该准备跳槽了，上海找个合适的工作是真的难。

 

总结

以上是生活随笔为你收集整理的使用Vue对接网易云音乐的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。