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

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

阅读量：3961 次

发布时间：2019-05-24

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

前提说明

在这里使用到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获取，这次获取歌曲的相关数据，如专辑封面、热评等

搜索功能实现

使用一个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这个数组进行保存，这样搜索就做好了。

把歌曲数据渲染到页面

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


   	
    
     {
   {
   item.name}}

歌曲播放功能的实现

在上面渲染歌曲的名称到页面当中，我们给这个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把这个值绑定上去就实现了单击歌名进行播放的效果了。

歌曲的封面

简单来说就是获取歌曲的专辑封面的图片然后放置于页面当中。逻辑在单击歌曲名称之后进行歌曲播放的同时把封面进行渲染出来，在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的值进行保存，之后进行渲染到页面当中即可。在这里插入图片描述

热评的渲染

相同的逻辑，还是在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)		})}

在浏览器当中查看，并且找到对应的内容

总结

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

代码

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

			
   		网抑云								
   			
    			
    				
     网抑云音乐				
     					
      					
      				
     
			
    
			
    				
     
      {
   {
   item.name}}
     
			
    
			
    				
     			
    
			
    				
     					
      
					{
   {
   item.content}}

转载地址：http://yzqzi.baihongyu.com/

你可能感兴趣的文章