Vuejs与Axios项目开发，简单的网页版的播放器实现

拼搏现实的明天。 2022-12-08 05:57 117阅读 0赞

#### 前提说明 ####

在这里使用到vue和axios，vue进行数据绑定等，axios进行从连接获取数据。在这里axios获取的链接及api如下：

*  https://autumnfish.cn/search?keywords= 根据关键字进行搜索
 *  https://autumnfish.cn/song/url?id= 搜索之后根据返回的id来获得这个歌的url
 *  https://autumnfish.cn/comment/hot?type=0&id= 同样的根据id获取，这次获取歌曲的相关数据，如专辑封面、热评等

#### 相关包的导入 ####

导入Vuejs和axios包，使用官网提供的cdn获取远程访问地址，或者直接下载对应的文件再本地进行导入，都是可以的。

#### 搜索功能实现 ####

使用一个input标签，定义一个文本搜索栏以及一个搜索按钮，给文本输入框绑定一个回车按压事件，而给按钮绑定一个单击事件。

在这里，绑定同一个事件，这是当输入完成后按回车或者单击按钮，触发同一搜索事件。在Vue实例但当中实现Get方法。在这里因为是回调函数所以说this的值每一次会被改变，所以需要使用一个新的变量来进行保存this的值。

Get: function() { 
    	var that = this
    	axios.get('https://autumnfish.cn/search?keywords=' + this.query).then(function(response) { 
    		console.log(response)
    		that.musicArr = response.data.result.songs;
    	}, function(err) { 
    		console.log(err)
    	})
    },

看一下response的输出，如下图所示，取到songs这个数组进行保存，这样搜索就做好了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center]

#### 把歌曲数据渲染到页面 ####

在刚才已经获取到了数据，把数据保存在musicArr这个数组当中，现在直接把数组当中的name属性渲染出来即可,使用v-for指令，如下代码所示。

#### 歌曲播放功能的实现 ####

在上面渲染歌曲的名称到页面当中，我们给这个div小块绑定了一个单击事件，用来当单击之后就播放这个歌。我们先制作业面，再添加一个audio标签。

这个播放栏添加之后，就把前面的那个单击事件绑定的方法进行实现：因为这里进行axios获取需要一个歌曲的id，这个id在搜索的时候的songs数组当中存在，就把这个id作为一个参数传递过来，参数有了，接收这个参数进行链接的拼接即可访问对应的地址了，地址访问过去会有一个response的值，把response打印出来找到那里的属性才是我们需要的值即可。

PlayMusic: function(musicID) { 
    	console.log(musicID)
    	var that = this
    	axios.get('https://autumnfish.cn/song/url?id=' + musicID).then(function(response) { 
    		//console.log(response.data.data[0].url)
    		that.musicUrl = response.data.data[0].url
    		}, function(err) { 
    			console.log(err)
    	})

在浏览器当中的F12检查当中查看数据，很显然我们可以拿到这个url了，并且获取到这个url，在前面的audio标签当中使用v-on把这个值绑定上去就实现了单击歌名进行播放的效果了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 1]

#### 歌曲的封面 ####

简单来说就是获取歌曲的专辑封面的图片然后放置于页面当中。逻辑在单击歌曲名称之后进行歌曲播放的同时把封面进行渲染出来，在Playmusic方法最后再添加一个axios的请求：

axios.get('https://autumnfish.cn/song/detail?ids=' + musicID).then(function(response) { 
    	//console.log(response)
    	that.imgUrl = response.data.songs[0].al.picUrl
    })

在浏览器当中查看打印出来的response的值，并且找到封面图片的地址。把picUrl的值进行保存，之后进行渲染到页面当中即可。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 2]

#### 热评的渲染 ####

相同的逻辑，还是在Playmusic方法当中再添加一个axios请求，获取评论相关的信息，方便后续的渲染，

axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + musicID).then(function(response) { 
    	console.log(response)
    	that.Comments = response.data.hotComments;
    	//console.log(response.data.hotComments[0].user.nickname)
    	//console.log(Comments)
    }, function(err) { 
    		console.log(err)
    		})
    }

在浏览器当中查看，并且找到对应的内容  
![相同的][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 3]

#### 总结 ####

到这里一个简单的网页的播放器就实现了，这个是跟着黑马程序员的vue教程做的。[教程地址 - 黑马][-] ，代码是自己一行一行写的，也就没有很完整的去写那个css等相关样式，基本上就是实现功能模块，这个VueJs对自己的提升还是很大的，也是前端热门的一个小框架。

#### 代码 ####

最后附上源码，需要注意的是在这里我的vuejs是使用的本地文件，以及相关有使用本地图片的（背景图，专辑封面图，）专辑封面在最开始时没有的，就是用了一个本地图片进行代替了。

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>网抑云</title>
    		<script src="../vue.js"></script>
    		<style type="text/css">
    			.left { 
    				height: 480px;
    				width: 18%;
    				background-color: #1EACDA;
    				margin-top: 30px;
    				margin-left: 80px;
    				font-size: 16px;
    				color: black;
    				overflow: scroll;
    				filter: alpha(Opacity=80);
    				-moz-opacity: 0.5;
    				opacity: 0.5;
    			}
    
    			.middle { 
    				width: 35%;
    				height: 480px;
    				float: left;
    				margin-left: 530px;
    				margin-top: -400px;
    				filter: alpha(Opacity=80);
    				-moz-opacity: 0.5;
    				opacity: 0.5;
    			}
    
    			.right { 
    				width: 25%;
    				height: 480px;
    				float: right;
    				background-color: #1EACDA;
    				margin-top: -562px;
    				margin-right: 40px;
    				font-size: 16px;
    				color: black;
    				overflow: scroll;
    				filter: alpha(Opacity=80);
    				-moz-opacity: 0.5;
    				opacity: 0.5;
    			}
    
    			.search { 
    				float: right;
    				margin-right: 200px;
    				margin-top: 20px;
    			}
    
    			.audio_con { 
    				float: left;
    				width: 100%;
    				margin-top: -70px;
    			}
    
    			.myaudio { 
    				width: 90%;
    			}
    
    			.bg { 
    				width: 100%;
    				height: 100%;
    				max-width: 100%;
    				max-height: 100%;
    				top: 0;
    				right: 0;
    				bottom: 0;
    				left: 0;
    				margin: auto;
    				overflow: auto;
    				position: fixed;
    				z-index: -1;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			<img class="bg" src="../img/1.jpg" />
    			<div>
    				<span style="font-size: 25px;">网抑云音乐</span>
    				<div class="search">
    					<input type="text" v-model="query" @keydown.enter="Get" />
    					<button @click="Get">搜索</button>
    				</div>
    			</div>
    			<div class="left">
    				<div style="text-align: center;" v-show="musicArr" v-for="item in musicArr" @click="PlayMusic(item.id)">{ { item.name}}</div>
    
    			</div>
    			<div class="middle">
    				<img :src="imgUrl" style="width: 300px; height: 300px;" />
    			</div>
    
    			<div class="right">
    				<div v-for="item in Comments">
    					<br />
    					{ { item.content}}
    				</div>
    			</div>
    			<div class="audio_con">
    				<audio style="clear:both;display:block;margin:auto" ref="audio" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
    			</div>
    		</div>
    		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    		<script>
    			var app = new Vue({ 
    				el: "#app",
    				methods: { 
    					Get: function() { 
    						var that = this
    						axios.get('https://autumnfish.cn/search?keywords=' + this.query).then(function(response) { 
    							//console.log(response)
    							that.musicArr = response.data.result.songs;
    						}, function(err) { 
    							console.log(err)
    						})
    					},
    					PlayMusic: function(musicID) { 
    						console.log(musicID)
    						var that = this
    						axios.get('https://autumnfish.cn/song/url?id=' + musicID).then(function(response) { 
    							//console.log(response)
    							//console.log(response.data.data[0].url)
    							that.musicUrl = response.data.data[0].url
    						}, function(err) { 
    							console.log(err)
    						})
    
    						axios.get('https://autumnfish.cn/song/detail?ids=' + musicID).then(function(response) { 
    							console.log(response)
    							that.imgUrl = response.data.songs[0].al.picUrl
    						})
    
    						axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + musicID).then(function(response) { 
    							console.log(response)
    							that.Comments = response.data.hotComments;
    							//console.log(response.data.hotComments[0].user.nickname)
    							//console.log(Comments)
    						}, function(err) { 
    							console.log(err)
    						})
    					}
    				},
    				data: { 
    					query: "薛之谦",
    					musicArr: [],
    					musicUrl: '',
    					imgUrl: '../img/1.png',
    					Comments: []
    				}
    			})
    		</script>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/bc341c457fff462e9ecd97d03b87ac46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/139f33d4eb654642a6bb4b9c6827dd9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/c9006b8389d444508c228020e3ba0a7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/0643608bfa1049ff9134ca18359f3cfc.png
[-]: https://www.bilibili.com/video/BV12J411m7MG