千峰商城-springboot项目搭建-32-vue案例练习
作者：互联网
找到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