|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<!-- 这是JSP（Java Server Pages）页面的指令标签，具体作用如下：
|
|
|
- contentType="text/html;charset=UTF-8"：指定该页面响应内容的类型为HTML格式，同时将字符编码设置为UTF-8，确保页面能正确处理和显示各种字符，像中文等特殊字符不会出现乱码现象。
|
|
|
- language="java"：表明在这个JSP页面中使用的脚本语言是Java，后续可以在页面里嵌入Java代码片段来实现诸如与服务器端交互、业务逻辑处理等功能。不过从当前整个页面来看，主要还是以HTML、CSS和JavaScript实现前端相关功能为主 -->
|
|
|
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<!-- 设置HTML页面的字符编码为UTF-8，与上面JSP指令中的字符编码设置相呼应，保证页面内容能正确解析和显示 -->
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
<!-- 指示浏览器以IE的最高版本或者Chrome 1的模式来渲染页面，用于解决不同浏览器之间的兼容性问题，尽量保证页面在不同浏览器下呈现的效果相对一致 -->
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
<!-- 设置视口相关属性，让页面宽度等于设备宽度，初始缩放比例为1，最大缩放比例也为1，意味着页面在移动端等设备上初始显示时按设备宽度自适应，并且用户不能进行缩放操作 -->
|
|
|
<title>忘记密码</title>
|
|
|
<!-- 设置HTML页面的标题，这个标题会显示在浏览器的标签栏上，让用户清楚当前页面的主要功能是用于“忘记密码”相关操作 -->
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入外部样式表文件layui.css，通常这是Layui前端框架的核心样式文件，用于应用该框架预定义的各种UI组件、布局等样式 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入自定义的style.css样式文件，可能用于覆盖Layui框架的部分默认样式或者添加页面特定的样式规则 -->
|
|
|
<link rel="stylesheet" href="./css/login.css">
|
|
|
<!-- 引入专门针对登录相关功能（此处是忘记密码功能，可能和登录共用部分样式逻辑）的login.css样式文件，进一步定制页面的外观样式 -->
|
|
|
<script src="layui.js"></script>
|
|
|
<!-- 引入Layui框架的JavaScript核心文件，通过这个文件可以使用Layui框架提供的各种JavaScript组件和功能，比如表单验证、弹出层等功能 -->
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="frame-main">
|
|
|
<!-- 这可能是整个页面主体内容的一个外层框架容器，用于整体布局，通过类名"frame-main"可以在CSS样式表中对其设置宽度、高度、边距等布局相关的样式属性 -->
|
|
|
<div class="login-main">
|
|
|
<!-- 可能是专门用于放置登录相关内容（此处是忘记密码相关元素）的容器，通过类名"login-main"可以进一步定制其内部元素的排列、样式等 -->
|
|
|
<header class="layui-elip">找回密码</header>
|
|
|
<!-- 使用了layui-elip类的<header>元素，可能是应用了Layui框架中特定的样式类来实现文本的某种排版效果（比如省略显示等，不过具体要看对应样式定义），用于显示页面的主要标题“找回密码” -->
|
|
|
<form class="layui-form">
|
|
|
<!-- 创建一个表单元素，并且应用了layui-form类，表明这个表单会应用Layui框架提供的表单相关的样式和验证等功能 -->
|
|
|
<div class="layui-input-inline">
|
|
|
<!-- 创建一个行内块级的<div>元素，用于在表单内布局输入框等元素，使得它们可以在同一行显示（具体布局还取决于样式设置） -->
|
|
|
<label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
|
|
|
<!-- 创建一个<label>标签，应用了多个类名，其中layui-icon类表明它是Layui框架中的图标元素，layui-icon-username类指定了具体的图标样式（这里推测是代表用户名相关的图标），用于在输入框前面显示一个特定的图标作为提示 -->
|
|
|
<input type="text" name="account" required lay-verify="required" placeholder="请输入注册时的ID" autocomplete="off"
|
|
|
class="layui-input">
|
|
|
<!-- 创建一个文本输入框，设置了以下属性：
|
|
|
- type="text"：表明是文本类型的输入框，用于用户输入文本信息。
|
|
|
- name="account"：为输入框设置一个名称，方便后续在表单提交等操作中识别和获取该输入框的值。
|
|
|
- required：HTML5的属性，表明这个输入框是必填项，浏览器会进行相应的验证提示。
|
|
|
- lay-verify="required"：Layui框架的验证属性，再次强调这个输入框是必填的，当用户提交表单时，如果该输入框为空会触发验证提示。
|
|
|
- placeholder="请输入注册时的ID"：在输入框为空时显示的提示文本，提示用户应该输入的内容。
|
|
|
- autocomplete="off"：关闭浏览器的自动填充功能，避免浏览器自动填充一些不合适的信息到该输入框。
|
|
|
- class="layui-input"：应用Layui框架中针对输入框的样式类，使输入框呈现出相应的外观样式。 -->
|
|
|
</div>
|
|
|
<div class="layui-input-inline">
|
|
|
<label class="layadmin-user-login-icon layui-icon layui-icon-email"></label>
|
|
|
<input type="password" name="password" required lay-verify="required" placeholder="用于找回的邮箱" autocomplete="off"
|
|
|
class="layui-input">
|
|
|
<!-- 与上面的输入框类似，不过这里是一个密码类型的输入框（type="password"），用于用户输入找回密码所需要的邮箱地址，同样设置了必填、验证、提示文本等相关属性 -->
|
|
|
</div>
|
|
|
<div class="layui-input-inline login-btn">
|
|
|
<!-- 又是一个行内块级的<div>元素，用于放置提交按钮，并且应用了login-btn类，可能用于对按钮设置特定的样式，比如大小、颜色等 -->
|
|
|
<button lay-submit lay-filter="login" class="layui-btn">找回</button>
|
|
|
<!-- 创建一个按钮元素，应用了layui-btn类使其呈现Layui框架中按钮的默认样式，lay-submit属性表示这个按钮可以触发表单提交操作，lay-filter="login"属性用于为按钮绑定一个特定的事件过滤器，方便后续在JavaScript代码中对按钮的点击事件进行监听和处理 -->
|
|
|
</div>
|
|
|
<hr/>
|
|
|
<!-- 创建一个水平分割线元素，用于在页面上划分不同的区域，起到视觉上的分隔作用 -->
|
|
|
<p><a href="login.jsp" class="fl">登录    </a><a href="https://yoyling.com" class="fl">如果你未绑定邮箱请联系我</a><a href="register.jsp" class="fr">注册</a></p>
|
|
|
<!-- 创建一个段落元素，里面包含了三个链接元素：
|
|
|
- 第一个链接（href="login.jsp"）指向登录页面（login.jsp），并应用了fl类（可能用于设置左浮动等样式布局相关操作），显示文本“登录”，方便用户在忘记密码页面可以直接跳转到登录页面。
|
|
|
- 第二个链接（href="https://yoyling.com"）指向一个外部网站（yoyling.com），同样应用了fl类，显示文本“如果你未绑定邮箱请联系我”，用于提示用户在未绑定邮箱的情况下如何寻求帮助。
|
|
|
- 第三个链接（href="register.jsp"）指向注册页面（register.jsp），应用了fr类（可能用于设置右浮动等样式布局相关操作），显示文本“注册”，方便用户进行注册相关操作。 -->
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
<footer style="position:absolute;bottom:0;width:100%;height:30px; text-align: center;">© 2018-2019.YOYLING.COM</footer>
|
|
|
<!-- 创建一个<footer>元素，通过内联样式设置其绝对定位在页面底部（bottom:0），宽度占满整个页面（width:100%），高度为30px，并且文本居中对齐（text-align: center），用于显示版权相关的声明信息“© 2018-2019.YOYLING.COM” -->
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
layui.use(['form','layer','jquery'], function () {
|
|
|
// 使用Layui框架的模块加载机制，加载名为'form'（用于表单操作和验证等功能）、'layer'（用于弹出层提示等功能）、'jquery'（虽然这里写的是加载，但实际上可能是Layui内部已经集成了jQuery或者对其进行了适配，用于进行DOM操作、AJAX请求等常见的JavaScript操作）的模块，加载完成后执行回调函数。
|
|
|
|
|
|
// 操作对象
|
|
|
var form = layui.form;
|
|
|
// 获取Layui框架中表单模块的实例对象，后续可以通过这个对象调用表单相关的方法，比如进行表单验证、监听表单提交事件等操作。
|
|
|
var $ = layui.jquery;
|
|
|
// 获取Layui框架中经过适配后的jQuery对象（或者就是原生的jQuery对象，如果Layui是基于它来集成的），方便后续进行各种DOM操作和AJAX请求等操作。
|
|
|
|
|
|
form.on('submit(login)',function (data) {
|
|
|
// 使用表单模块的on方法来监听表单提交事件，这里监听的是lay-filter="login"的按钮点击提交表单时触发的事件。当事件触发时，会传入一个包含表单数据等信息的参数data，执行回调函数内的代码。
|
|
|
|
|
|
// console.log(data.field);
|
|
|
// 这行代码如果取消注释，可以在控制台打印出表单中各个输入框等元素提交的数据，用于调试查看用户输入的内容是否正确获取到了，此处是获取到以对象形式存储的表单数据（字段名为键，用户输入的值为对应的值）。
|
|
|
|
|
|
$.ajax({
|
|
|
url:'login.php',
|
|
|
// 设置AJAX请求的目标URL地址，这里是向名为login.php的服务器端脚本文件发送请求，通常这个文件会用于处理登录相关的业务逻辑（此处是忘记密码的验证逻辑，可能存在复用情况），比如验证用户输入的账号和邮箱是否匹配等操作。
|
|
|
data:data.field,
|
|
|
// 将获取到的表单数据（前面提到的data.field）作为请求的数据发送给服务器端，服务器端可以根据这些数据进行相应的处理。
|
|
|
dataType:'text',
|
|
|
// 设置期望从服务器端返回的数据类型为文本类型，意味着服务器端返回的内容会被当作普通文本进行处理。
|
|
|
type:'post',
|
|
|
// 设置AJAX请求的方式为POST方式，相比于GET方式，POST方式更适合用于提交表单数据等需要传递较多数据或者敏感数据的情况，数据会放在请求体中发送给服务器端。
|
|
|
success:function (data) {
|
|
|
// 这是AJAX请求成功后的回调函数，当服务器端正确响应并返回数据后，会执行这个函数，参数data就是服务器端返回的数据内容。
|
|
|
|
|
|
if (data == '1'){
|
|
|
location.href = "../index.php";
|
|
|
// 如果服务器端返回的数据内容是'1'，则认为验证通过，通过修改浏览器的地址栏，将页面重定向到上级目录下的index.php页面，这里推测index.php可能是系统的主页面或者登录成功后的欢迎页面等。
|
|
|
}else{
|
|
|
layer.msg('登录名或密码错误');
|
|
|
// 如果服务器端返回的数据不是'1'，则认为验证失败，使用Layui框架的layer模块弹出一个提示消息框，显示“登录名或密码错误”的提示信息，告知用户验证未通过的原因。
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
return false;
|
|
|
// 返回false阻止表单的默认提交行为，因为这里已经通过AJAX方式手动向服务器端发送了请求，不需要浏览器再进行默认的表单提交操作了，避免页面刷新等不必要的情况发生。
|
|
|
})
|
|
|
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
