标签：function vue springboot song 32 vm res var name
找到music-1.0.0.jar所在的文件夹，在地址栏直接输入cmd，回车。
在cmd中输入： "java -jar music-1.0.0.jar"，回车，启动项目。
在浏览器地址栏输入："http://localhost:9999/music/search?s=张杰"，测试是否启动成功。
在HBuilder中编写音乐播放器显示效果。
音乐搜索：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="container">
<input type="text" placeholder="歌曲名、歌手名" v-model="keyword" /><button type="button" @click="doSearch">搜索</button>
<table class="table table-bordered table-condensed">
<tr>
<th>序号</th>
<th>歌曲ID</th>
<th>歌曲名</th>
<th>歌手</th>
<th>专辑</th>
<th>时长</th>
<th>操作</th>
</tr>
<tr v-for="song,index in songs">
<td>{{index+1}}</td>
<td>{{song.id}}</td>
<td>{{song.name}}</td>
<td>
<span v-for="artist in song.artists"> {{artist.name}}</span>
</td>
<td>{{song.album.name}}</td>
<td>
{{ Math.floor ( Math.round(song.duration/1000)/60 ) <10 ?
'0'+Math.floor ( Math.round(song.duration/1000)/60 ) :
Math.floor ( Math.round(song.duration/1000)/60 ) }}
:
{{ Math.round(song.duration/1000)%60 <10 ?
'0'+ Math.round(song.duration/1000)%60 :
Math.round(song.duration/1000)%60 }}
</td>
<td>
<span class="glyphicon glyphicon-play-circle" style="color: deepskyblue;"></span>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
keyword:"",
songs:[]
},methods:{
doSearch:function(){
console.log(vm.keyword);
$.get("http://localhost:9999/music/search",{s:vm.keyword,limit:15,offset:0},function(res){
console.log(res);
if(res.code==200){
//获取此关键词搜索的总记录数
var count = res.result.songCount;
//获取音乐集合
var arr = res.result.songs;
vm.songs = arr;
}
},"json");
}
}
});
</script>
</body>
</html>
测试：
给有mv的歌曲名后添加MV按钮：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="container">
<input type="text" placeholder="歌曲名、歌手名" v-model="keyword" /><button type="button" @click="doSearch">搜索</button>
<table class="table table-bordered table-condensed">
<tr>
<th>序号</th>
<th>歌曲ID</th>
<th>歌曲名</th>
<th>歌手</th>
<th>专辑</th>
<th>时长</th>
<th>操作</th>
</tr>
<tr v-for="song,index in songs">
<td>{{index+1}}</td>
<td>{{song.id}}</td>
<td>
{{song.name}}
<button type="button" v-if="song.mvid != 0" class="btn btn-primary btn-xs">MV</button>
</td>
<td>
<span v-for="artist in song.artists"> {{artist.name}}</span>
</td>
<td>{{song.album.name}}</td>
<td>
{{ Math.floor ( Math.round(song.duration/1000)/60 ) <10 ?
'0'+Math.floor ( Math.round(song.duration/1000)/60 ) :
Math.floor ( Math.round(song.duration/1000)/60 ) }}
:
{{ Math.round(song.duration/1000)%60 <10 ?
'0'+ Math.round(song.duration/1000)%60 :
Math.round(song.duration/1000)%60 }}
</td>
<td>
<span class="glyphicon glyphicon-play-circle" style="color: deepskyblue;"></span>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
keyword:"",
songs:[]
},methods:{
doSearch:function(){
console.log(vm.keyword);
$.get("http://localhost:9999/music/search",{s:vm.keyword,limit:15,offset:0},function(res){
console.log(res);
if(res.code==200){
//获取此关键词搜索的总记录数
var count = res.result.songCount;
//获取音乐集合
var arr = res.result.songs;
vm.songs = arr;
}
},"json");
}
}
});
</script>
</body>
</html>
音乐播放：
在HTML中建立音频播放器。
给播放按钮绑定点击事件触发的函数doPlay。
在doPlay中执行播放。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="container">
<input type="text" placeholder="歌曲名、歌手名" v-model="keyword" /><button type="button" @click="doSearch">搜索</button>
<table class="table table-bordered table-condensed">
<tr>
<th>序号</th>
<th>歌曲ID</th>
<th>歌曲名</th>
<th>歌手</th>
<th>专辑</th>
<th>时长</th>
<th>操作</th>
</tr>
<tr v-for="song,index in songs">
<td>{{index+1}}</td>
<td>{{song.id}}</td>
<td>
{{song.name}}
</td>
<td>
<span v-for="artist in song.artists"> {{artist.name}}</span>
</td>
<td>{{song.album.name}}</td>
<td width="8%">
{{ Math.floor ( Math.round(song.duration/1000)/60 ) <10 ?
'0'+Math.floor ( Math.round(song.duration/1000)/60 ) :
Math.floor ( Math.round(song.duration/1000)/60 ) }}
:
{{ Math.round(song.duration/1000)%60 <10 ?
'0'+ Math.round(song.duration/1000)%60 :
Math.round(song.duration/1000)%60 }}
</td>
<td width="18%">
<button type="button" class="btn btn-success btn-xs" @click="doPlay" :data-mid="song.id">播放</button>
<button type="button" v-if="song.mvid != 0" class="btn btn-primary btn-xs">播放MV</button>
</td>
</tr>
</table>
</div>
<audio controls style="width: 100%;" src="" id="player"></audio>
<script type="text/javascript" src="js/music.js"></script>
<script type="text/javascript">
var player = document.getElementById("player");
var vm = new Vue({
el:"#container",
data:{
keyword:"",
songs:[],
currentid:0
},
// computed:{
// musicurl:function(){
// //网易云音乐播放地址：http://music.163.com/song/media/outer/url?id=songId
// return "http://music.163.com/song/media/outer/url?id="+this.currentid;
// }
// },
methods:{
doSearch:function(){
console.log(vm.keyword);
$.get("http://localhost:9999/music/search",{s:vm.keyword,limit:15,offset:0},function(res){
console.log(res);
if(res.code==200){
//获取此关键词搜索的总记录数
var count = res.result.songCount;
//获取音乐集合
var arr = res.result.songs;
vm.songs = arr;
}
},"json");
},
doPlay:function(event){
vm.currentid = event.srcElement.dataset.mid;
player.src = "http://music.163.com/song/media/outer/url?id="+vm.currentid;
player.play();
}
}
});
</script>
</body>
</html>
播放暂停切换：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="container">
<input type="text" placeholder="歌曲名、歌手名" v-model="keyword" /><button type="button" @click="doSearch">搜索</button>
<table class="table table-bordered table-condensed">
<tr>
<th>序号</th>
<th>歌曲ID</th>
<th>歌曲名</th>
<th>歌手</th>
<th>专辑</th>
<th>时长</th>
<th>操作</th>
</tr>
<tr v-for="song,index in songs">
<td>{{index+1}}</td>
<td>{{song.id}}</td>
<td>
{{song.name}}
</td>
<td>
<span v-for="artist in song.artists"> {{artist.name}}</span>
</td>
<td>{{song.album.name}}</td>
<td width="8%">
{{ Math.floor ( Math.round(song.duration/1000)/60 ) <10 ?
'0'+Math.floor ( Math.round(song.duration/1000)/60 ) :
Math.floor ( Math.round(song.duration/1000)/60 ) }}
:
{{ Math.round(song.duration/1000)%60 <10 ?
'0'+ Math.round(song.duration/1000)%60 :
Math.round(song.duration/1000)%60 }}
</td>
<td width="18%">
<button type="button" v-if="song.id == currentid && status==1" class="btn btn-warning btn-xs" @click="doPause" :data-mid="song.id">暂停</button>
<button type="button" v-else-if="song.id == currentid && status==0" class="btn btn-danger btn-xs" @click="doContinue" :data-mid="song.id">继续播放</button>
<button type="button" v-else class="btn btn-success btn-xs" @click="doPlay" :data-mid="song.id">播放</button>
<button type="button" v-if="song.mvid != 0" class="btn btn-primary btn-xs">播放MV</button>
</td>
</tr>
</table>
</div>
<audio controls style="width: 100%;" src="" id="player"></audio>
<script type="text/javascript" src="js/music.js"></script>
<script type="text/javascript">
var player = document.getElementById("player");
var vm = new Vue({
el:"#container",
data:{
keyword:"",
songs:[],
currentid:0,
status:0
},
// computed:{
// musicurl:function(){
// //网易云音乐播放地址：http://music.163.com/song/media/outer/url?id=songId
// return "http://music.163.com/song/media/outer/url?id="+this.currentid;
// }
// },
methods:{
doSearch:function(){
console.log(vm.keyword);
$.get("http://localhost:9999/music/search",{s:vm.keyword,limit:15,offset:0},function(res){
console.log(res);
if(res.code==200){
//获取此关键词搜索的总记录数
var count = res.result.songCount;
//获取音乐集合
var arr = res.result.songs;
vm.songs = arr;
}
},"json");
},
doPlay:function(event){
vm.currentid = event.srcElement.dataset.mid;
player.src = "http://music.163.com/song/media/outer/url?id="+vm.currentid;
player.play();
vm.status = 1;
},
doPause:function(){
player.pause();
vm.status = 0;
},
doContinue:function(){
player.play();
vm.status = 1;
}
}
});
</script>
</body>
</html>
标签：function,vue,springboot,song,32,vm,res,var,name 来源： https://www.cnblogs.com/lysboke/p/16462929.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。