请选择 进入手机版 | 继续访问电脑版
【技术交流】记录element-ui+Vue.js实现抓取酷狗音乐api免费听歌
21986
8
0
2020-5-16 14:04
查看: 21986|回复: 8

【技术交流】记录element-ui+Vue.js实现抓取酷狗音乐api免费听歌

[复制链接]
最近在给公司写一套系统,很忙,今天周末写篇文章
之前给老爸下歌的时候,发现有些歌需要付费或会员才能下载

这里通过抓取酷狗的api,实现音乐的免费听免费下载(只能试听的歌曲不能完整下载)

先来张图片(很简单的界面,没做美化)

注:本人没怎么学过VUE和element-ui   只会基本的操作!!

FHO$ET8K$ZH7TRD3F{B8WO5.png

这就是搜索歌曲的api了
TXC(1F1ANO${]TQW9P}L`IT.png


里面一些参数根据名字应该都能猜出来,page就是页数,keyword就是搜索的关键字,pagesize就是一页显示多少条数据,就不一一介绍了

这是歌曲的api,根据Hash值识别对应歌曲
_6TOZV[E@E5WO0XXI4WPW31.png


好了,api搞定,开始进入正事

先搭建个VUE的脚手架,然后引入element-UI
因为需要跨域,我这里使用的是jsonp插件

jsonp插件安装命令  cnpm install jsonp --save


安装成功后引入即可


js部分代码,仅供学习,要完整的私聊我吧(这篇文章主要是记录一下,写的不细,纯小白的话估计很难看懂)
  1. <script>
  2. // import axios from 'axios'
  3. export default {
  4.   data () {
  5.     return {
  6.        input: '',
  7.        musicArr:[],
  8.        audioUrl:'',
  9.        topIndex:'none'
  10.     }
  11.   },
  12.   methods:{
  13.     search(){
  14.      if(this.input == ""){
  15.         this.open('请输入搜索内容!');
  16.      }else{
  17.         this.musicArr = [];
  18.         this.$jsonp('https://songsearch.kugou.com/song_search_v2?keyword='+this.input+'&page=1&pagesize=30&platform=WebFilter').then(res => {
  19.                     for(let i in res.data.lists){
  20.                        //用json格式存储信息
  21.                         let arr = {'FileHash':'','FileName':'','SingerName':'','img':'','play_url':'','icon':'el-icon-video-play'};
  22.                         arr.FileHash = res.data.lists[i].FileHash;
  23.                         arr.FileName = res.data.lists[i].FileName;
  24.                         arr.SingerName = res.data.lists[i].SingerName;
  25.                         //根据Hash值获取歌曲图片和播放链接
  26.                         this.$jsonp('https://wwwapi.kugou.com/yy/index.php?r=play/getdata&hash='+arr.FileHash+'&mid=e4b3cf1d536edd000c08602515fe92aa').then(data=>{
  27.                           arr.play_url = data.data.play_url;
  28.                           arr.img = data.data.img;
  29.                         })
  30.                         //追加到歌曲列表
  31.                         this.musicArr.push(arr);

  32.                     }
  33.                 })
  34.                 console.log(this.musicArr);
  35.      }
  36.     },
  37.     open(msg) {
  38.           this.$message({
  39.             message: msg,
  40.             type: 'warning',
  41.             offset:'200'
  42.           });
  43.         },
  44.     play(url,index){
  45.       for(let i in this.musicArr){
  46.           if(index != i){
  47.              this.musicArr[i].icon = 'el-icon-video-play';
  48.           }
  49.       }
  50.       this.audioUrl = url;
  51.       this.musicArr[index].icon = 'el-icon-video-pause';
  52.     }
  53.   }
  54. }
  55. </script>
复制代码



如需转载,请标注来自好麦麦源码网
声明: 本站所有资源来源收集于用户上传和网络,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:1784605674@qq.com,需要定制软件/网站/各类程序开发,联系站长QQ:1784605674
发表于 2021-3-19 22:37:58 | 显示全部楼层

Test, just a test

Hello. And Bye.
发表于 2021-4-5 15:08:32 | 显示全部楼层

Test, just a test

Hello. And Bye.
发表于 2021-4-17 21:12:26 | 显示全部楼层

Test, just a test


Hello. And Bye.
发表于 2021-7-1 21:22:25 | 显示全部楼层

Test, just a test

Hello. And Bye.
发表于 2022-6-27 03:25:41 | 显示全部楼层

-

What necessary words... super, a magnificent idea
发表于 2022-6-30 06:53:19 | 显示全部楼层

-

How so?

发表于 2022-6-30 07:55:34 | 显示全部楼层

-

I apologise, but, in my opinion, you are not right. I am assured. I suggest it to discuss. Write to me in PM.

发表于 2022-6-30 10:01:30 | 显示全部楼层

-

I consider, that you commit an error. I suggest it to discuss. Write to me in PM.

活跃度排行榜
1
http://www.haomaim.cn/uc_server/avatar.php?uid=1&size=small
ruojiu
620
2
http://www.haomaim.cn/uc_server/avatar.php?uid=5938&size=small
it023
381
3
http://www.haomaim.cn/uc_server/avatar.php?uid=6125&size=small
柔情空似水
221
4
http://www.haomaim.cn/uc_server/avatar.php?uid=4014&size=small
XRumerTest
98
5
http://www.haomaim.cn/uc_server/avatar.php?uid=103&size=small
glhynet
76
6
http://www.haomaim.cn/uc_server/avatar.php?uid=6006&size=small
glovy
75
活跃度排行榜
1
http://www.haomaim.cn/uc_server/avatar.php?uid=1&size=small
ruojiu
620
2
http://www.haomaim.cn/uc_server/avatar.php?uid=5938&size=small
it023
381
3
http://www.haomaim.cn/uc_server/avatar.php?uid=6125&size=small
柔情空似水
221
4
http://www.haomaim.cn/uc_server/avatar.php?uid=4014&size=small
XRumerTest
98
5
http://www.haomaim.cn/uc_server/avatar.php?uid=103&size=small
glhynet
76
6
http://www.haomaim.cn/uc_server/avatar.php?uid=6006&size=small
glovy
75
广告

尊贵VIP购买