|
|
@ -4,20 +4,29 @@
|
|
|
|
Date: 2020/2/10
|
|
|
|
Date: 2020/2/10
|
|
|
|
Time: 10:32
|
|
|
|
Time: 10:32
|
|
|
|
To change this template use File | Settings | File Templates.
|
|
|
|
To change this template use File | Settings | File Templates.
|
|
|
|
|
|
|
|
这部分是JSP页面头部的注释,主要说明了该文件创建时相关信息,例如创建者、创建日期、时间以及提示如何修改模板等内容,方便后续对代码来源及修改情况进行追溯。
|
|
|
|
--%>
|
|
|
|
--%>
|
|
|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
|
<html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<head>
|
|
|
|
|
|
|
|
<!-- 引入自定义的用于用户登录页面的CSS样式文件,路径通过JSP表达式语言(${pageContext.request.contextPath})获取当前页面上下文请求路径后拼接而成,目的是为登录页面设置特定的样式风格,使其符合设计要求。 -->
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/usersLogin.css">
|
|
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/usersLogin.css">
|
|
|
|
|
|
|
|
<!-- 引入页面图标文件,指定图标大小为32x32像素,用于在浏览器的标签页等位置显示特定的图标,增强页面的辨识度和品牌性(如果是对应特定项目的话)。 -->
|
|
|
|
<link rel="icon" href="${pageContext.request.contextPath}/images/favicon.ico" sizes="32x32" />
|
|
|
|
<link rel="icon" href="${pageContext.request.contextPath}/images/favicon.ico" sizes="32x32" />
|
|
|
|
|
|
|
|
<!-- 引入自定义的通用样式文件(根据media属性中指定的“screen”可知主要用于屏幕显示相关的样式设置),同样通过页面请求路径拼接来获取样式文件位置,用于页面整体通用样式的规范和美化。 -->
|
|
|
|
<link rel="stylesheet" media="screen" href="${pageContext.request.contextPath}/css/style.css">
|
|
|
|
<link rel="stylesheet" media="screen" href="${pageContext.request.contextPath}/css/style.css">
|
|
|
|
|
|
|
|
<!-- 引入用于重置页面默认样式的CSS文件,类型声明为“text/css”,路径也是基于请求路径拼接,它能清除浏览器自带的一些默认样式,让页面在不同浏览器下展示效果更趋一致。 -->
|
|
|
|
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/reset.css"/>
|
|
|
|
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/reset.css"/>
|
|
|
|
|
|
|
|
<!-- 引入jQuery库的JavaScript文件,jQuery是一个广泛使用的JavaScript库,能极大地简化DOM操作、事件处理等常见的前端开发任务,方便后续编写交互逻辑。 -->
|
|
|
|
<script src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
|
|
|
|
<script src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
|
|
|
|
|
|
|
|
<!-- 引入layer组件的JavaScript文件,layer组件常用于在页面中弹出提示框、模态框等交互效果,这里引入是为了后续展示如登录验证提示等相关信息。 -->
|
|
|
|
<script src="${pageContext.request.contextPath}/layer/layer.js" type="text/javascript"></script>
|
|
|
|
<script src="${pageContext.request.contextPath}/layer/layer.js" type="text/javascript"></script>
|
|
|
|
|
|
|
|
<!-- 引入自定义的与登录相关的JavaScript文件(可能包含一些登录业务特有的逻辑处理代码等),通过请求路径拼接来定位文件,辅助实现登录页面的各种功能。 -->
|
|
|
|
<script src="${pageContext.request.contextPath}/js/login.js"></script>
|
|
|
|
<script src="${pageContext.request.contextPath}/js/login.js"></script>
|
|
|
|
<title>登录页面--LOGIN</title>
|
|
|
|
<title>登录页面--LOGIN</title>
|
|
|
|
<%--<script type="text/javascript">
|
|
|
|
<%-- 以下这段JavaScript代码被注释掉了,原本的功能是在页面加载完成(通过$(function () {...}) 这种jQuery的就绪函数来确保DOM加载完毕)后,监听用户名输入框(id为“username”)的内容变化事件(change事件)。当用户名输入框的值改变时,会获取输入框的值(通过$(this).val()获取),然后发起一个GET类型的Ajax异步请求到服务器端的“checkUserName”接口(路径通过表达式语言拼接而成),传递用户名参数({"u_name":u_name}),并根据服务器返回的消息(msg)进行判断,如果消息不是“账号可用”,就弹出提示“账号不存在”的信息框。不过当前处于注释状态,未生效。 --%>
|
|
|
|
|
|
|
|
<%--<script type="text/javascript">
|
|
|
|
$(function () {
|
|
|
|
$(function () {
|
|
|
|
//ajax校验用户名是否存在
|
|
|
|
//ajax校验用户名是否存在
|
|
|
|
$("#username").change(function () {
|
|
|
|
$("#username").change(function () {
|
|
|
@ -26,62 +35,86 @@
|
|
|
|
//ajax异步请求
|
|
|
|
//ajax异步请求
|
|
|
|
$.get("${pageContext.request.contextPath}/checkUserName",{"u_name":u_name},function (msg) {
|
|
|
|
$.get("${pageContext.request.contextPath}/checkUserName",{"u_name":u_name},function (msg) {
|
|
|
|
//$(".error").html(msg);
|
|
|
|
//$(".error").html(msg);
|
|
|
|
if (msg != "账号可用") {
|
|
|
|
if (msg!= "账号可用") {
|
|
|
|
layer.msg('账号不存在');
|
|
|
|
layer.msg('账号不存在');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
</script>--%>
|
|
|
|
</script>--%>
|
|
|
|
|
|
|
|
</head>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<body>
|
|
|
|
|
|
|
|
<!-- 创建一个HTML表单,通过action属性指定表单提交的目标URL(这里使用表达式语言拼接出指向登录处理的后端接口路径),设置表单名称为“myform”,提交方法为“post”,用于将用户输入的登录信息发送到服务器端进行验证处理。 -->
|
|
|
|
<form action="${pageContext.request.contextPath}/login" name="myform" method="post">
|
|
|
|
<form action="${pageContext.request.contextPath}/login" name="myform" method="post">
|
|
|
|
<div id="particles-js">
|
|
|
|
<!-- 创建一个具有特定效果(可能与粒子特效相关,需结合引入的js文件进一步确定,一般用于页面背景装饰等)的容器,id为“particles-js”,作为登录相关元素的父容器,营造出独特的页面视觉效果。 -->
|
|
|
|
|
|
|
|
<div id="particles-js">
|
|
|
|
|
|
|
|
<!-- 创建一个登录框相关的容器,应用了“login”类(推测在对应的CSS文件中有对这个类定义的样式规则),用于包裹登录框内的各个部分,如标题、输入框、按钮等,来实现登录框整体的布局和样式呈现。 -->
|
|
|
|
<div class="login">
|
|
|
|
<div class="login">
|
|
|
|
|
|
|
|
<!-- 登录框顶部区域的容器,用于显示如“后台登录”这样的标题文本,给用户明确提示当前登录的是后台系统。 -->
|
|
|
|
<div class="login-top">
|
|
|
|
<div class="login-top">
|
|
|
|
后台登录
|
|
|
|
后台登录
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 创建登录框中间区域的容器,并应用“clearfix”类用于清除浮动(在CSS中通过这个类设置相关样式,确保内部的浮动元素布局正常,避免出现排版混乱问题),用于放置用户名相关的输入框等元素,使其在水平方向上合理排列。 -->
|
|
|
|
<div class="login-center clearfix">
|
|
|
|
<div class="login-center clearfix">
|
|
|
|
|
|
|
|
<!-- 创建一个用于放置用户名图标的容器,里面嵌入一个图片元素,通过指定的路径(使用表达式语言拼接获取)加载用户名对应的图标图片,用于在视觉上标识这是用户名输入的区域。 -->
|
|
|
|
<div class="login-center-img"><img src="${pageContext.request.contextPath}/images/name.png"/></div>
|
|
|
|
<div class="login-center-img"><img src="${pageContext.request.contextPath}/images/name.png"/></div>
|
|
|
|
|
|
|
|
<!-- 创建一个用于放置用户名输入框的容器,包含实际的输入框元素和相关提示文本元素,用于用户输入用户名以及显示相应提示信息。 -->
|
|
|
|
<div class="login-center-input">
|
|
|
|
<div class="login-center-input">
|
|
|
|
|
|
|
|
<!-- 创建一个文本输入框,设置id为“username”方便后续通过JavaScript代码获取其值和操作,设置name属性为“username”用于在表单提交时作为参数名传递给服务器,添加占位提示文字“请输入您的用户名”,并且通过onfocus和onblur事件来控制当输入框获取焦点(用户点击输入框准备输入时)和失去焦点(用户鼠标离开输入框后)时占位文字的显示和隐藏,提升用户体验。 -->
|
|
|
|
<input type="text" id="username" name="username" placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
|
|
|
|
<input type="text" id="username" name="username" placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
|
|
|
|
|
|
|
|
<!-- 创建一个用于显示用户名提示文本的容器,初始显示“用户名”字样,可能通过后续的JavaScript交互逻辑(比如输入框获取焦点时隐藏等)来改变其显示状态,进一步辅助用户了解该输入框的用途。 -->
|
|
|
|
<div class="login-center-input-text">用户名</div>
|
|
|
|
<div class="login-center-input-text">用户名</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 再次创建登录框中间区域的容器(结构与上面用户名部分类似),用于放置密码相关的输入框等元素,将密码相关的输入和提示信息组织在一起,方便用户操作和查看。 -->
|
|
|
|
<div class="login-center clearfix">
|
|
|
|
<div class="login-center clearfix">
|
|
|
|
|
|
|
|
<!-- 创建一个用于放置密码图标的容器,嵌入对应的密码图标图片,从指定路径(通过表达式语言获取)加载,用于直观地提示用户此处是输入密码的地方。 -->
|
|
|
|
<div class="login-center-img"><img src="${pageContext.request.contextPath}/images/password.png"/></div>
|
|
|
|
<div class="login-center-img"><img src="${pageContext.request.contextPath}/images/password.png"/></div>
|
|
|
|
|
|
|
|
<!-- 创建一个用于放置密码输入框的容器,同样包含实际输入框和提示文本元素,用于密码的输入及相关提示展示。 -->
|
|
|
|
<div class="login-center-input">
|
|
|
|
<div class="login-center-input">
|
|
|
|
|
|
|
|
<!-- 创建一个密码输入框,设置id为“password”方便操作,name为“password”用于表单提交传参,添加占位提示文字“请输入您的密码”,通过onfocus和onblur事件控制占位文字的显示和隐藏,与用户名输入框的交互方式类似,符合常规的用户输入习惯。 -->
|
|
|
|
<input type="password" id="password" name="password" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>
|
|
|
|
<input type="password" id="password" name="password" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>
|
|
|
|
|
|
|
|
<!-- 创建一个用于显示密码提示文本的容器,初始显示“密码”字样,后续可根据交互逻辑改变显示状态,辅助用户识别该输入框功能。 -->
|
|
|
|
<div class="login-center-input-text">密码</div>
|
|
|
|
<div class="login-center-input-text">密码</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 创建一个登录按钮相关的容器,应用“login-button”类(在CSS中有对应的样式定义,用于设置按钮的外观样式,如颜色、大小、边框等),设置点击事件,点击时调用“check()”函数,通过这个函数来进行登录前的输入信息验证等操作,决定是否能提交表单。 -->
|
|
|
|
<div class="login-button" onclick="check()">
|
|
|
|
<div class="login-button" onclick="check()">
|
|
|
|
登录
|
|
|
|
登录
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 创建一个用于显示提示信息的文本元素,设置文本居中对齐、颜色为红色,通过表达式语言获取并显示“msg”变量的值(推测是后端传递过来的错误提示等信息,比如登录失败原因等),并且添加一些空格用于排版,让提示信息在页面上展示更清晰美观,方便用户查看。 -->
|
|
|
|
<span style="text-align: center;color: red;"><br>       ${msg}</span>
|
|
|
|
<span style="text-align: center;color: red;"><br>       ${msg}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 创建一个用于显示特定动画效果的元素(比如旋转平面动画效果,需结合相关CSS和JavaScript代码来看具体效果,可能是作为页面的一个加载动画或者装饰性动画元素),目前为空的div,其具体显示内容和动画效果由对应的样式和脚本控制。 -->
|
|
|
|
<div class="sk-rotating-plane"></div>
|
|
|
|
<div class="sk-rotating-plane"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</form>
|
|
|
|
|
|
|
|
<!-- 引入用于实现粒子效果的JavaScript库文件,路径通过表达式语言获取当前页面上下文请求路径拼接而成,它负责在页面中展示出粒子相关的特效,为登录页面营造出独特的视觉氛围,增强页面的观赏性和交互感。 -->
|
|
|
|
<script src="${pageContext.request.contextPath}/js/particles.min.js"></script>
|
|
|
|
<script src="${pageContext.request.contextPath}/js/particles.min.js"></script>
|
|
|
|
|
|
|
|
<!-- 引入用于初始化页面相关功能(可能与粒子效果以及登录页面整体功能结合相关,比如初始化粒子效果的参数、绑定页面元素的一些交互事件等)的JavaScript文件,同样通过请求路径拼接来定位文件,保障页面各项功能正常运行。 -->
|
|
|
|
<script src="${pageContext.request.contextPath}/js/app.js"></script>
|
|
|
|
<script src="${pageContext.request.contextPath}/js/app.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
<script type="text/javascript">
|
|
|
|
function check() {
|
|
|
|
function check() {
|
|
|
|
|
|
|
|
// 获取用户名输入框(id为“username”)中的值,并使用trim()方法去除前后空格,确保获取到的用户名数据干净、规范,便于后续验证和使用。
|
|
|
|
var username = $("#username").val().trim();
|
|
|
|
var username = $("#username").val().trim();
|
|
|
|
|
|
|
|
// 获取密码输入框(id为“password”)中的值,同样使用trim()方法去除前后空格,得到准确的密码输入内容,准备进行密码相关的格式等验证。
|
|
|
|
var password = $("#password").val().trim();
|
|
|
|
var password = $("#password").val().trim();
|
|
|
|
|
|
|
|
// 判断用户名是否为空(null、空字符串或者长度为0都视为空),如果是这种情况,就使用layer组件弹出提示信息“请输入用户帐号”,并且终止后续表单提交操作(通过返回false来阻止表单提交),提醒用户必须输入用户名才能进行登录。
|
|
|
|
if (username == null || username == "" || username.length == 0) {
|
|
|
|
if (username == null || username == "" || username.length == 0) {
|
|
|
|
layer.msg('请输入用户帐号');
|
|
|
|
layer.msg('请输入用户帐号');
|
|
|
|
return false;
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 判断密码是否为空,如果为空,同样使用layer组件弹出提示“请输入登录密码”,并终止表单提交,要求用户输入密码才能继续登录流程。
|
|
|
|
if (password == null || password == "" || password.length == 0) {
|
|
|
|
if (password == null || password == "" || password.length == 0) {
|
|
|
|
layer.msg('请输入登录密码');
|
|
|
|
layer.msg('请输入登录密码');
|
|
|
|
return false;
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 判断密码长度是否小于4或者大于20,如果满足这个条件,说明密码格式不符合要求(这里限定密码长度在4 - 20位字符之间),则使用layer组件弹出提示信息“密码格式有误(4 - 20位字符)”,同时终止表单提交,引导用户输入符合格式规范的密码。
|
|
|
|
if (password.length < 4 || password.length > 20) {
|
|
|
|
if (password.length < 4 || password.length > 20) {
|
|
|
|
layer.msg('密码格式有误(4-20位字符)');
|
|
|
|
layer.msg('密码格式有误(4 - 20位字符)');
|
|
|
|
return false;
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 如果前面的所有验证都通过(用户名和密码都不为空且密码长度符合要求),就提交表单(通过表单对象的submit()方法),将用户在表单中输入的用户名和密码等数据发送到后端的登录处理接口(由表单的action属性指定的路径),进行后续的登录验证操作。
|
|
|
|
document.myform.submit();
|
|
|
|
document.myform.submit();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|