一. 登录逻辑

由于是用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")){// 选中了, 获取其IDid[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 {@Overridepublic 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*/@Overridepublic 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");}
}

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

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

仿网易云网页版音乐播放器，实现歌词随歌曲进行滚动高亮
引言前几天在使用网易云网页版听歌时,看着那个页面的歌词随歌曲进行高亮,突然也想自己手动地去实现一下,于是呢,就仿照了网易云音乐的网页自己也写了个页面.效果图如下: 当然了,此处不做css的样式介绍, ...
网页版音乐播放器下载音乐教程
一 .咳咳 , 每天一个白嫖小技巧,它来了它来了!!! 打开W_yi音乐,输入想要get的音乐: 按下F12会出现以下也页面,依次点击图中编标记的两处地方: 出现以上页面以后就点击播放了,等播放一遍 ...
音乐播放器项目：使用网易云音乐api开发网页版音乐播放器开发难题（一）
将子组件中获取到后台的url参数传递给父组件解决方法: axios({//获取urlurl:'http://localhost:3000/song/url',method:'get',params: ...
Android 小项目之--Mini音乐播放器【简单版】（附源码）
上篇文章讲服务的例子中,有个演示服务的后台播放音乐,今天就来讲一讲多媒体之一的音乐播放. 说到多媒体不得不向上追溯,空间多媒体是如何实现的,如何可以让我们轻松的播放音乐.视频?本章讲述点大致如下: 1 ...
Java和vue实现音乐播放器_躁！DJ 风格 Java 桌面音乐播放器
本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 版桌面 DJ 音乐播放器. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列 ...
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库本源码技术栈 ...
用js创建audio对象实现网页迷你音乐播放器
主要是靠咋没的audio对象,我就不多说废话了,也不会说,直接上代码: HTML <!DOCTYPE html> <html><head><meta http ...
Java图形用户界面设计音乐播放器
Java图形用户界面设计音乐播放器设计思路音乐播放器的基础是可以播放音乐,所以要有一个实现播放音乐功能的类audioplay,图形界面就是通过动作调用audioplay里面的函数.关于实现播放器图 ...
java音乐播放器所需jar包,这个用Java写的开源音乐播放器，我粉了
原标题:这个用Java写的开源音乐播放器,我粉了开源最前线(ID:OpenSourceTop) 随着版权意识的增强,如今想听几首歌,都得下载好几个音乐软件.这也就算了,大部分音乐还都是付费的,安装这 ...
html实现网页左下角音乐播放器
html实现网页左下角音乐播放器效果图如下: 实现代码如下: <!DOCTYPE html> <html lang="en"> <head>& ...

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