本文共 1512 字，大约阅读时间需要 5 分钟。

1、引言

这是Vue学习的综合应用篇，教你开发一个音乐播放器，能听歌，能看热门留言，能看mv，开发主要是以下环节：

• ① 歌曲搜索
• ② 歌曲播放
• ③ 歌曲封面
• ④ 歌曲评论
• ⑤ 播放动画
• ⑥ mv播放

2、音乐播放器完整版效果图如下：

3、接口引用

3.1:歌曲搜索接口

请求地址:https://autumnfish.cn/search    请求方法:get    请求参数:keywords(查询关键字)    响应内容:歌曲搜索结果

3.2:歌曲url获取接口

请求地址:https://autumnfish.cn/song/url    请求方法:get    请求参数:id(歌曲id)    响应内容:歌曲url地址

3.3.歌曲详情获取

请求地址:https://autumnfish.cn/song/detail    请求方法:get    请求参数:ids(歌曲id)    响应内容:歌曲详情(包括封面信息)

3.4.热门评论获取

请求地址:https://autumnfish.cn/comment/hot?type=0    请求方法:get    请求参数:id(歌曲id,地址中的type固定为0)    响应内容:歌曲的热门评论

3.5.mv地址获取

请求地址:https://autumnfish.cn/mv/url    请求方法:get    请求参数:id(mvid,为0表示没有mv)    响应内容:mv的地址

4、示例代码

ps:将源码保存至html文件即可使用

  
     
     
       
     
     
   
    
    
      
     
        
              
              
            
     
      
     
        
              
      
          
       
            
        
 
           { { item.name}}    
          
       
          
               
      
        
              
      
          
                 
                 
                 
               
      
        
              
      
          
       
热门留言
          
       
            
        
 
         
 
           
         
 
         
          { { item.user.nickname}}
         
 
         
           { { item.content}} 
         
 
        
          
       
          
               
      
      
     
      
     
        
            
     
      
     
        
              
      
      
     
    
    
  
   
  
       
       

5、结束语

至此，悦听实例就开发完毕了，你是不是对Vue更加了解了呢。

链接：https://pan.baidu.com/s/1-E71-fjW0cTXNbSAv9hcpw

最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~

学如逆水行舟，不进则退

转载地址：https://chocolate.blog.csdn.net/article/details/103974082 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！