Java项目--网页版音乐播放器(JQuery前端逻辑)
本篇主要衔接上文的后端逻辑, 完成前端的JS代码
采用JQuery方式完成, 具体的前端样式在此不讨论
目录
一. 登录逻辑
二. 上传音乐
三. 显示与查询音乐
四. 播放音乐
五. 删除音乐
六. 收藏音乐
七. 拦截器配置
一. 登录逻辑
由于是用JQuery完成的, 所以别忘了导入相关包: jQuery cdn加速
<script>
//核心业务逻辑
$(function(){
$('#submit').click(function(){
var username = $('#user').val();
var password = $('#password').val();
if (username.trim() == "" || password.trim() == ""){
alert("用户名或密码为空!");
return;
}
$.ajax({
url:"/user/login",
data:{"username":username, "password":password},
type:"POST",
dataType:"json",
success:function(data){
console.log(data);
if (data.status == 1){
alert("登录成功!");
window.location.href="list.html";
}else {
alert("用户名或密码错误!");
$('#user').val("");
$('#password').val("");
}
}
});
});
});
</script>
二. 上传音乐
上传音乐直接采用post表单提交
<form method="POST" enctype="multipart/form-data" action="/music/upload">
文件上传：<input type="file" name="filename"/>
歌手名: <label>
<input type="text" name="singer" placeholder="请输入歌手名"/>
</label>
<input type="submit" value="上传"/>
</form>
三. 显示与查询音乐
load函数可以传参也可以不传参
传参就表示返回用户指定搜索的音乐, 不传参就返回所有音乐
这里采用的是表格形式展现, 所以查询到的音乐直接采用字符串拼接来显示
function load(musicName){
$.ajax({
url:"/music/findmusic",
data:{"musicName":musicName},
type:"GET",
dataType:"json",
success:function(body){
console.log(body);
var data = body.data;
var s = '';
for (var i = 0; i < data.length; i++){
var musicUrl = data[i].url + ".mp3";
s += '<tr>';
s += '<th><input id="'+data[i].id+'" type="checkbox"></th>';
s += '<td>'+data[i].title+'</td>';
s += '<td>'+data[i].singer+'</td>';
s += '<td><button class="btn btn-primary" onclick="playerSong(\''+musicUrl+'\')">播放音乐</button></td>';
s += '<td><button class="btn btn-primary" onclick="deleteInfo('+data[i].id+')">删除</button>'+
'<button class="btn btn-primary" onclick="loveInfo('+data[i].id+')">喜欢</button></td>';
s += '</tr>';
}
$("#info").html(s);
}
});
}四. 播放音乐
这里使用大神写的控件: sewise-player
function playerSong(musicUrl){
var name = musicUrl.substring(musicUrl.lastIndexOf("=")+1);
// 其实只要传一个musicUrl就可以播放了
// 音乐地址, 音乐名字, 音乐播放开始时间, 是否自动播放
SewisePlayer.toPlay(musicUrl, name, 0, false);
}将其中的player文件夹放到自己的static目录中
添加一段script:
<div style="width: 180px; height: 140px; position: absolute; bottom: 10px; right: 10px;">
<script type="text/javascript" src="../player/sewise.player.min.js"></script>
<script type="text/javascript">
SewisePlayer.setup({
server: "vod",
type: "mp3",
skin: "vodWhite",
videourl: "http://jackzhang1204.github.io/materials/where_did_time_go.mp3",
autostart: "false",
});
</script>
</div>这样就可以播放了.
五. 删除音乐
删除音乐没啥好说的, 直接用ajax向后端发送请求就行
function deleteInfo(id){
$.ajax({
url:"/music/delete",
type:"POST",
data:{"id":id},
dataType:"json",
success: function(val){
console.log(val);
if (val.data == true){
// 删除成功
alert("删除成功!");
window.location.href = "list.html";
}else {
alert("删除失败!");
}
}
});
}删除多个音乐的逻辑:
等到加载完所有音乐, 进行删除
删除多个音乐就需要看音乐前面的框框有没有被选中,
选中了获取其id放入数组, 最后将这个数组通过ajax返回给后端即可
$(function(){
$("#submit1").click(function(){
var name = $("#exampleInputName2").val();
load(name);
});
// 当load函数执行完成, 执行一个done函数
$.when(load).done(function(){
$("#delete").click(function(){
var id = new Array();
var i = 0;
// 遍历按钮是否被选中
$("input:checkbox").each(function(){
if ($(this).is(":checked")){
// 选中了, 获取其ID
id[i] = $(this).attr("id");
i++;
}
});
$.ajax({
url: "music/deletes",
data: {"id": id},
dataType: "json",
type: "POST",
success: function(obj){
if (obj.data == true){
alert("删除成功!");
window.location.href = "list.html";
}else {
alert("删除失败!");
}
}
});
});
});
});六. 收藏音乐
收藏音乐与前面类似, 只需要改一遍URL就行, 其他都一样
<script>
// 核心代码实现
$(function(){
load();
});
function load(musicName){
$.ajax({
url:"/lovemusic/findlovemusic",
data:{"musicName":musicName},
type:"GET",
dataType:"json",
success:function(body){
console.log(body);
var data = body.data;
var s = '';
for (var i = 0; i < data.length; i++){
var musicUrl = data[i].url + ".mp3";
s += '<tr>';
s += '<td>'+data[i].title+'</td>';
s += '<td>'+data[i].singer+'</td>';
s += '<td><button class="btn btn-primary" onclick="playerSong(\''+musicUrl+'\')">播放音乐</button></td>';
s += '<td><button class="btn btn-primary" onclick="deleteInfo('+data[i].id+')">移除</button>';
s += '</tr>';
}
$("#info").html(s);
}
});
}
function playerSong(musicUrl){
var name = musicUrl.substring(musicUrl.lastIndexOf("=")+1);
// 其实只要传一个musicUrl就可以播放了
// 音乐地址, 音乐名字, 音乐播放开始时间, 点击后是否自动播放
SewisePlayer.toPlay(musicUrl, name, 0, true);
}
function deleteInfo(id){
$.ajax({
url:"/lovemusic/deletelovemusic",
type:"POST",
data:{"id":id},
dataType:"json",
success: function(val){
console.log(val);
if (val.data == true){
// 删除成功
alert("删除成功!");
window.location.href = "loveMusic.html";
}else {
alert("删除失败!");
}
}
});
}
$(function(){
$("#submit1").click(function(){
var name = $("#exampleInputName2").val();
load(name);
});
})
</script>
七. 拦截器配置
写到这, 你会发现, 即使没有登录, 我们也能进入list.html页面
所以在这里配置拦截器, 在Java后端进行编写:
/**
* 配置拦截器, 使其访问主页需要登录
*/
public class LoginInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
// 检查是否登录
HttpSession session = request.getSession(false);
if (session == null || session.getAttribute(Constant.USERINFO_SESSION_KEY) == null){
return false;
}
return true;
}
}然后用一个类实现一下相关接口, 调用我们写好的拦截器:
@Configuration
public class AppConfig implements WebMvcConfigurer {
/**
* 添加拦截器
* @param registry
*/
@Override
public void addInterceptors(InterceptorRegistry registry) {
LoginInterceptor loginInterceptor = new LoginInterceptor();
registry.addInterceptor(loginInterceptor)
.addPathPatterns("/**")
//排除所有的JS
.excludePathPatterns("/js/**.js")
//排除images下所有的元素
.excludePathPatterns("/images/**")
.excludePathPatterns("/css/**.css")
.excludePathPatterns("/fronts/**")
.excludePathPatterns("/player/**")
.excludePathPatterns("/login.html")
.excludePathPatterns("/register.html")
//排除登录和注册接口
.excludePathPatterns("/user/login")
.excludePathPatterns("/user/register");
}
}
谢谢你能看到这*★,°*:.☆(￣▽￣)/$:*.°★* 。