文章目录
前言前端页面实现前置知识：jQuery1 jQuery下载2 jQuery 语法3 jQuery 选择器3.1 jQuery 元素选择器3.2 jQuery 属性选择器 4 jQuery 语法实例$(this).hide()$("#test").hide()$("p").hide()$(".test").hide() 5 jQuery的获取5.1 获取属性 - attr() 5.2 获取输入字段的值6 jQuery 遍历函数each()函数遍历checkbox 7 jQuery 的A JAX7.1 ajax() 方法7.2 样例test.html页面：对应的controller 我们来启动项目来测试一下。 准备工作：设置好拦截规则。登录页面逻辑实现 - 开始书写项目的前端逻辑歌曲列表页分析实现 - 查询音乐逻辑 播放音乐逻辑实现 - 列表页删除音乐功能 - 列表页查询 + 删除选中音乐 - 列表页查询功能删除选中音乐 收藏列表页实现收藏音乐 - 列表页 - 穿插内容“续杯” - 喜欢列表页的查询操作 最后，我们的后端代码还需要做出一点，小小的改变。前言
如果存在完全没有学过前端知识的朋友，可以参考这三篇文章。
1、前端三剑客之 HTML - JavaEE初阶 - 细节狂魔
2、前端三剑客之 CSS - JavaEE初阶 - 细节狂魔
3、前端三剑客之 JavaScript - javaEE初阶 - 细节狂魔
放心，都是一些非常基础的API，只是带着你扫一下盲。
后端代码：/DarkAndGrey/article/details/126506767?spm=1001..3001.5502
前端页面实现
直接在百度上搜索 “免费网页模板”, 能找到很多免费模板网站. 可以直接基于现成的漂亮的页面进行修改.
tips: 做减法比做加法更容易
将网页模板解压缩, 拷贝到项目的 static目录中
先来看看我下载的模板的登录页面
下面，我们就要针对我们的项目，对这写 前端页面 编写核心的代码逻辑。
PS:
我发现前端的模板，大部分都是要钱的，很难找到免费。
有大佬，找大佬要资源，或者要网址。
当然自己找了更好！
但是！不要慌！核心代码逻辑，都是一样的。
大胆去改造！
前置知识：jQuery
jQuery 是一个 JavaScript 库，jQuery 极大地简化了 JavaScript 编程。
参考链接：/jquery/index.asp
1 jQuery下载
下载链接：/
2 jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
3 jQuery 选择器
3.1 jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$(“p”) 选取 < p > 元素。
$(“p.intro”) 选取所有 class=“intro” 的 < p > 元素。
$(“p#demo”) 选取所有 id=“demo” 的 < p > 元素
3.2 jQuery 属性选择器
$(“[href]”) 选取所有带有 href 属性的元素。
$(“[href=‘#’]”) 选取所有带有 href 值等于 “#” 的元素。
$(“[href!=‘#’]”) 选取所有带有 href 值不等于 “#” 的元素。
常见的选择器参考：/jquery/jquery_ref_selectors.asp
我们项目中用到的：
$(“input:checkbox”)：代表选取input标签， type=“checkbox” 的元素
4 jQuery 语法实例
下面我们来带着大家一起感受一下，jQuery的语法。
下面演示的例子，它们的执行条件都是基于 jQuery。
$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><!-- 首先我们要引入 jQuery 的库 --><script src="js/jquery-3.1.1.min.js"></script><!-- JavaScript 的代码 --><script type="text/javascript"><!-- $就是jquery的简写，document是html的所有元素。 -->// ready 是一个方法。function则是ready里面的参数，就是说等这个页面全部加载完之后就去执行写入的js 。$(document).ready(function(){// $("button") ： 选取 button（按钮）元素// 当 button 元素被点击的时候，会调用 click 回调函数。$("button").click(function(){// ${this} ：当前元素// $(this).hide() ：把当前元素隐藏起来$(this).hide();});});</script></head><body><!-- 按钮元素，按钮名称：Click me --><button type="button">Click me</button></body></html>
下面我们来访问一下这个页面，看看效果=是什么样子的。
另外，这里有一行代码可以简写
$(“#test”).hide()
演示 jQuery hide() 函数，隐藏 id=“test” 的元素。
$(“p”).hide()
演示 jQuery hide() 函数，隐藏所有 < p > 元素。
$(“.test”).hide()
演示 jQuery hide() 函数，隐藏所有 class=“test” 的元素。
5 jQuery的获取
参考链接：/jquery/jquery_dom_get.asp
5.1 获取属性 - attr()
jQuery attr() 方法用于获取属性值
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><script src="js/jquery-3.1.1.min.js"></script><script type="text/javascript">$(function(){$("button").click(function(){// 当前 按钮时，会触发这个函数。// 打印 id 为 internet 的元素 的 href 值。alert($("#internet").attr("href"));});});</script></head><body><p><a href="/" id="internet"></a></p><button>显示 href 值</button></body></html>
5.2 获取输入字段的值
jQuery val() 方法获得输入字段的值：
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><script src="js/jquery-3.1.1.min.js"></script><script type="text/javascript">$(function(){$("button").click(function(){// 获取 id为 test 元素的值var username = $("#test").val();// 输出 获取到的值alert("username:"+username);});});</script></head><body><p>姓名：<input type="text" id="test" value="米老鼠"></p><button>显示值</button></body></html>
6 jQuery 遍历函数
参考链接：/jquery/jquery_ref_traversing.asp
each()函数
each()函数：对 jQuery 对象进行迭代，为每个匹配元素执行函数。
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><script src="js/jquery-3.1.1.min.js"></script><script type="text/javascript">$(function(){$("button").click(function(){//遍历每个li标签，每个匹配的li标签，输出他的内容$("li").each(function(){alert($(this).text())});});});</script></head><body><button>输出每个列表项的值</button><ul><li>Coffee</li><li>Milk</li><li>Soda</li></ul></body></html>
遍历checkbox
$(“:checkbox”)：获取所有 type=“checkbox” 的 元素
$(“:checked”)：获取所有被选中的 input 元素
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><script src="js/jquery-3.1.1.min.js"></script><script>$(document).ready(function(){$("#submitcheckbox").click(function () {var i = 0;// 创建数组var id = new Array();//代表选取input标签， type="checkbox" 的元素$("input:checkbox").each(function() {//如果被选中,this代表发生事件的dom元素，<input>if($(this).is(':checked')){//获取id的值，存储到id数组当中id[i] = $(this).attr("id");i++;}});// 打印在开发者工具的控制台上。console.log(id);});});</script></head><body><input id= "1" type="checkbox"> 苹果 <br><input id= "2" type="checkbox"> 香蕉 <br><input id= "3" type="checkbox"> 梨 <br><input id="submitcheckbox" type="button" value="点击测试" ></body></html>
上述的代码的意思：当我们点击测试的时候，
就会触发下面框选的函数
获取 所有 < input > 标签的内容，然后，进行遍历。
检查 是否被选中了？
如果被选中，就会将其存储 id 数组中，并且进行 控制台 输出其下标。
7 jQuery 的A JAX
Ajax简介：参考链接：/jquery/jquery_ajax_intro.asp
jQuery中 Ajax 操作函数简介：/jquery/jquery_ref_ajax.asp
jQuery Ajax 的 ajax() 方法简介：/jquery/ajax_ajax.asp
7.1 ajax() 方法
定义：
ajax() 方法通过 HTTP 请求加载远程数据
语法：
jQuery.ajax([settings])
settings：可选。用于配置 Ajax 请求的键值对集合。
重要的参数
url，类型：String，默认值: 当前页地址。发送请求的地址。
data：发送到服务器的数据。将自动转换为请求字符串格式
type：默认值: “GET”。请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
dataType：预期服务器返回的数据类型
success：请求成功后的回调函数。参数为：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
7.2 样例
test.html页面：
我们先看页面中的元素都有哪些
当我们输入 用户名 和 密码，我们需要获取到 其文本框中的内容。
并且，将其值发送服务器上。
是不是，这个理？
至于传递的方式，就是 将其封装一个HTTP请求发送给服务器。
这里就需要用到 ajax 来构造 HTTP 请求了。
另外，我发送HTTP请求的条件：点击了 登录按钮，触发构造HTTP请求，并且发送它。
那么，我们是不是要 “监控” 这个按钮。
好，带着这个思想来看下面的代码。
对应的controller
我们来启动项目来测试一下。
需要注意的是：我的代码是实现 AOP 思想的！
统一进行用户验证的。
我们需要添加多个 拦截规则。
下面，我们来启动项目，测试一下。
有了这些了解之后，我们就可以开始实现我们项目的前端逻辑了。
准备工作：设置好拦截规则。
登录页面逻辑实现 - 开始书写项目的前端逻辑
这是我登录页面的前端代码。
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><title>音乐播放器登录页面</title><!-- 1. 导入CSS的全局样式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="js/jquery-3.1.1.min.js"></script><script src="js/md5.min.js"></script><!-- 3. 导入bootstrap的js文件 --><!--<script src="js/bootstrap.min.js"></script>--><script type="text/javascript"></script><style>#body{background-image: url("images/2.jpg");background-size:100% 100%;background-attachment: fixed;}</style><script><!-- 核心业务逻辑 --></script></head><body id="body"><div class="container" style="width: 400px;margin-top: 110px;background-color: rgba(255,255,255,0.8)"><h3 style="text-align: center;">管理员登录</h3><!-- <form action="login" method="post">--><div class="form-group" ><label for="user">用户名：</label><input type="text" name="username" class="form-control" id="user" placeholder="请输入用户名"/></div><div class="form-group"><label for="password">密码：</label><input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/></div><hr/><div class="form-group" style="text-align: center;"><!--class="form-group"--><input style="width: 200px;height: 40px" id="submit" class="btn btn btn-primary" type="button" value="登录" ></div><!-- </form>--><!-- 出错显示的信息框 --><div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" ><span>×</span></button><strong id="message">您尚未进行登录，请您登录!</strong></div></div></body></html>
我们先来看前端页面的元素都有哪些。
和我们前面的分析示例，核心部分是一样的。
我们只需要对刚才的核心代码，进行微调就行了。
就是前面样例中的前端代码，其 script 标签部分。
来看下面：
<script>$(document).ready(function(){$("#submit").click(function(){// 读取 id属性 为 user 的输入框中的信息var username = $("#user").val();//读取 id属性 为 password 的输入框中的信息var password = $("#password").val();// 弹出一个对话框，打印获取到的信息alert("username:"+username +" password: "+password);// 在浏览器上的控制台 打印获取的数据。console.log("用户名：",username)console.log("密码",password)// 使用 ajax 构造 HTTP 请求$.ajax({// 访问 URLurl:"/hhhh/test",// 传递的数据data:{"username":username,"password":password},// HTTP请求的类型type:"POST",// 预期服务器返回的数据类型dataType:"json",// 收到响应后，执行 function 函数，进行对应的操作。success:function(data) {// 在浏览器的开发者工具中的控制台打印 服务器返回的响应数据console.log("服务器返回的数据：",data);// 读取数据里面的 属性值if(data.status == 0) {alert("登录成功！");//跳转到指定的页面了//window.location.href="list.html";}else{alert("登录失败，密码或者用户名错误！");$("#user").val("");$("#password").val("");}}});});});</script>
眼尖的朋友，可能发现下面还有一个关于 引入md5 的script 标签，其实这是不需要的。
我们项目中使用的是 BCrypt 的加密方式，md5用不上！
如果你们找到的模板里，可能有着不同的加密方式，不用去管它。
可以删除，没有影响！
下面，我们来按照代码的核心逻辑，去编写我们登录页面的代码逻辑。
我们来启动项目，看一下效果。
这里我们再把登录成功之后的跳转页面，搞一下。
虽然歌曲列表页的核心没有逻辑，但是先用着。
我们测试一下。
歌曲列表页
分析
首先，我们来看一下 博客列表页。都有哪些功能。
我们再来前端页面元素都有哪一些。
我们 列表页 的 任务：
向服务器发起请求，查询所有的音乐信息，动态的生成表格。
大概就是这样的效果。
这就会涉及到我们 前面实现的 查询音乐模块的设计。
我们 list.html 就是要构造这样的一个 HTTP 请求。
实现 - 查询音乐逻辑
下面我们就实现它。
我们选择实现前端的上传逻辑。
我写了一个非常简易的 上传页面。
我们来看一下效果。
哦，对了！服务器上（文件夹）也有数据了！
接下来我们要实现的就是动态生成 音乐列表。
将访问页面得到的歌曲信息展示出来。
先来看一个样例代码。
换句话来说：我们下面这些前端代码的内容，进行动态生成！
下面，我们就来具体实现它们。
我们来验收一下成果。
但是！测试之前，如果有朋友的后端代码是根据我的代码，来敲的。
把下面这个单词改一下、放心不会影响其他代码。
【date -> data】
英语不过关啊！date 是时间，data 才是数据的意思。
改完之后，再来进行测试。
现在，我们才算是把页面做出了一点样子。
剩下的，就是一些功能按钮了。
下面我们就来一一实现它们。
播放音乐逻辑实现 - 列表页
码云地址：/jackzhang1204/sewise-player
GitHub地址：/jackzhang1204/sewise-player
GitHub 是国外，可能会很卡。
推荐码云的，两个的代码都是一样的，都是一个人写的。
这一个大牛，自己写的播放器的一个控件。虽然时间过去很久，但对于我们的项目来说足够了。
而且，你往下翻，会有这个控件的描述。
将其下载下来。
然后解压，进行下面的操作。
接下来就是如何使用它。
继续往下翻，找到这个框选的 setup 方式嵌入播放器
将其拷贝下来，如果你嫌麻烦！直接翻到最后
不过还是使用 前面一张图框选的下来，让你们拷贝代码部分。
将其拷贝 list.html 文件中，具体位置如下图所示。
如果你想了解 这些代码的具体意思。
来看下面。【顺便把拷贝下来的代码做出一些修改】
我们来项目重启一下，看个效果。
palySong 函数的测试【重启项目，再来测】
反正，我是听到了。你可以用网易去搜索这首歌。
删除音乐功能 - 列表页
所谓的删除音乐弓，j就是在我们点击删除按钮之后。
调用 deleteInfo 函数，根据音乐 id 来删除音乐。
下面，我们需要在 deleteInfo 函数 中构造一个删除单个音乐的请求。
请求格式，如下所示
我们来重启项目，来测试一下。
查询 + 删除选中音乐 - 列表页
我在实现这两个功能之前，我们需要在上传两首歌。
查询功能
下面我们来分析一下：
查询功能的实现非常简单！！
只需要获取到 文本框中的内容，将 歌名的查询关键词 交给前面 实现的 load 函数就行了。
我们来重启项目，测试一下。
删除选中音乐
我们先来分析一下：
下面，我们来实现一下。
虽然，代码还没有完全写完（还没有构造请求），但是我们可以先来重启项目测试一下 。
现在，我们获取到了 要删除的歌曲id，下面，就可以开始进行构造 HTTP 请求，完成 批量删除。
我们来重启项目，测试一下。
此时，“选中删除” 功能就按完成了。
收藏列表页实现
其实 收藏列表 就是 歌曲列表页的一份拷贝。
就是换了个名字，舍弃了一些不必要的元素而已。
所以，一些代码逻辑是可以 原样照搬的，当然，还是要做出一些修改的！
还没有完， deletInfo 函数，也拷贝过来，修改一下。
我们还差1个查询功能。
但是！我们喜欢列表中是没有数据的。
所以，我们需要暂时搁置一下这个查询功能，先来完成列表页的收藏（喜欢）功能
收藏音乐 - 列表页 - 穿插内容
我们来回顾一下， 关于收藏音乐的请求响应设计。
下面，就在 loveInfo 函数中，构造这一个请求出来。
这样 喜欢功能 就完成了，我们来测试一下。【重启项目】
但是！在测试之前，我们需要改一下后端代码。
这个喜欢列表页，居然不支持重载的写法。
我们要将这个重载方法，拆成2个方法。
此时，我们重启项目，再来测试就没问题了。
对了，再补充一张移除功能的展示图。
但是这里还存在缺陷！！！！
那就时音乐功能无法使用了。
原因很简单！因为我忘记把 播放器代码 拷贝过来了。
此时我们再来重启项目，直奔喜欢列表。
效果非常棒！
“续杯” - 喜欢列表页的查询操作
在操作之前，我来给上传几个数据。
此时我们再来实现 收藏列表页 的 查询功能。
还是一样的，去拷贝list.html 的代码。
这样查询功能，就完成了。
我们重启项目来测试一下。
至此，前端功能全部实现完成！
最后，我们的后端代码还需要做出一点，小小的改变。
下一篇文章，就是怎么讲项目部署到 云服务器上。
如果觉得《SSM项目 - Online Music Player（音乐播放器）- 前端页面设计 - 细节狂魔》对你有帮助，请点赞、收藏，并留下你的观点哦！
