Java项目--网页版音乐播放器(JQuery前端逻辑)

本篇主要衔接上文的后端逻辑, 完成前端的JS代码

采用JQuery方式完成, 具体的前端样式在此不讨论

目录

一. 登录逻辑

二. 上传音乐

三. 显示与查询音乐

四. 播放音乐

五. 删除音乐

六. 收藏音乐

七. 拦截器配置

---

一. 登录逻辑

由于是用JQuery完成的, 所以别忘了导入相关包: jQuery cdn加速

  

二. 上传音乐

上传音乐直接采用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 += '';
                        s += 'id+'" type="checkbox">';
                        s += ''+data[i].title+'';
                        s += ''+data[i].singer+'';
                        s += ''\')">播放音乐';
                        s += 'id+')">删除'+
                                 'id+')">喜欢';
                        s += '';
                    }
                    $("#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就行, 其他都一样

   

七. 拦截器配置

写到这, 你会发现, 即使没有登录, 我们也能进入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");
 
    }
}

    

谢谢你能看到这*★,°*:.☆(￣▽￣)/$:*.°★* 。