|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<!-- 这是JSP页面的指令，用于设置页面的相关属性。
|
|
|
- “contentType”属性指定页面内容类型为“text/html”，表明页面以HTML格式呈现内容。
|
|
|
- “charset=UTF-8”设定字符编码为UTF-8，确保页面能正确处理和显示各种字符（如中文等），避免乱码。
|
|
|
- “language=java”说明该页面使用Java语言来实现内部逻辑，比如与服务器端交互、处理业务数据等操作。 -->
|
|
|
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<!-- 引入JSTL（JavaServer Pages Standard Tag Library）核心标签库，通过设置前缀“c”，后续可使用以“c”开头的JSTL标签来实现如循环遍历、条件判断、数据输出等功能，增强页面的动态数据处理和展示能力，使页面更灵活地呈现内容。 -->
|
|
|
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>修改密码</title>
|
|
|
<!-- 设置HTML页面的标题，在浏览器的标题栏中会显示此标题，方便用户知晓页面的主要功能，这里明确表示是用于“修改密码”相关操作的页面。 -->
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入Layui框架的样式文件，通过相对路径“./css/layui.css”找到对应的CSS文件，该文件定义了Layui框架相关组件（如表单、按钮、表格等元素）的样式规则，使页面元素按Layui框架风格显示，保证页面整体风格统一、美观。 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入自定义的样式文件“style.css”，开发人员可在此文件中对页面样式进行个性化定制，比如覆盖Layui框架部分默认样式，或添加特定的布局、颜色搭配等样式设置，以契合项目的特定设计需求。 -->
|
|
|
<script src="./layui.js"></script>
|
|
|
<!-- 引入Layui框架的JavaScript核心文件，借助这个文件，页面可使用Layui框架提供的各种JavaScript功能，像弹出层展示、表单验证、页面元素交互等，为页面添加丰富的交互性和动态效果，提升用户操作体验。 -->
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
|
|
<!-- 从CDN（内容分发网络）引入jQuery库的精简版本，jQuery是常用的JavaScript库，能简化HTML文档遍历、事件处理、动画效果创建以及AJAX交互等操作，方便开发人员在页面中操作DOM元素，实现各种交互功能，进一步增强页面动态交互性。 -->
|
|
|
</head>
|
|
|
<body class="layui-layout-body" style="background-color: #F2F2F2">
|
|
|
<!-- 为页面主体设置样式类为“layui-layout-body”，并通过内联样式指定背景颜色为“#F2F2F2”，按照Layui框架的样式规范定义主体部分外观风格，营造特定视觉背景，通常符合项目统一的页面设计要求，便于后续布局内容。 -->
|
|
|
<jsp:include page="/filterLogin.jsp"></jsp:include>
|
|
|
<!-- 通过JSP的“include”指令包含名为“filterLogin.jsp”的页面，该页面一般用于处理用户登录验证逻辑，判断用户是否已登录，未登录时会引导用户跳转到登录页面，以此控制页面访问权限，保障系统安全和数据合法性。 -->
|
|
|
<jsp:include page="/WEB-INF/teacher/tHeader.jsp"></jsp:include>
|
|
|
<!-- 包含“WEB-INF/teacher/tHeader.jsp”页面，通常此页面用于定义教师端页面的头部区域，包含如页面标题、导航栏、用户信息展示等元素，构建出页面头部的布局结构，使页面头部呈现出规范的样式和功能。 -->
|
|
|
<jsp:include page="/WEB-INF/teacher/teacherNav.jsp"></jsp:include>
|
|
|
<!-- 包含“WEB-INF/teacher/teacherNav.jsp”页面，大概率用于展示教师端的导航菜单，方便教师在不同功能模块（如课程管理、学生管理、个人信息管理等）间切换操作，实现页面功能的导航跳转，提高操作便利性。 -->
|
|
|
<div class="layui-layout layui-layout-admin">
|
|
|
<!-- 创建采用Layui框架的布局容器，使用“layui-layout”和“layui-layout-admin”样式类，按Layui框架提供的布局模式规划页面布局，常用于后台管理系统，有着清晰规范的分区结构，便于组织不同功能内容。 -->
|
|
|
<div class="layui-body">
|
|
|
<!-- 在Layui布局容器内定义页面主体内容区域，该区域依Layui框架布局规则自适应显示，用于承载具体业务相关内容，像下面的修改密码表单等信息。 -->
|
|
|
<!-- 内容主体区域 -->
|
|
|
<div style="padding: 15px;">
|
|
|
<!-- 创建带有内边距（上下左右均为15px）的div容器，通过设置内边距让内部内容在页面中有空白间隔，使布局更美观易读，便于对内部元素排版布局，避免内容显得拥挤。 -->
|
|
|
<span class="layui-breadcrumb">
|
|
|
<!-- 使用Layui框架的面包屑组件，向用户展示页面的导航路径，清晰呈现当前页面在系统中的位置层级关系，方便用户了解所处功能位置及如何进行相关操作，提升导航便利性。 -->
|
|
|
<a href="">教师端</a>
|
|
|
<!-- 面包屑中的第一个链接，通常指向教师端首页或入口页面，不过此处没设具体链接地址（可能后续完善），点击理论上可返回教师端主要界面。 -->
|
|
|
<a href="">个人信息管理</a>
|
|
|
<!-- 面包屑中的第二个链接，指向个人信息管理相关页面，可能是个人信息管理的总览或列表页面等，同样暂无具体链接地址，点击可进入对应界面。 -->
|
|
|
<a><cite>修改密码</cite></a>
|
|
|
<!-- 面包屑中的最后一个元素，显示当前页面具体功能为“修改密码”，仅作标识展示，告知用户所在功能位置，一般不可点击。 -->
|
|
|
</span>
|
|
|
<form class="layui-form" action="${pageContext.request.contextPath}/teacherPasswordUpdateServlet" style="padding-top: 50px" method="post">
|
|
|
<!-- 创建使用Layui框架样式的表单，设置表单提交地址通过EL表达式动态指向“teacherPasswordUpdateServlet”这个Servlet，意味着表单提交时数据会发往此处处理；设置顶部内边距为50px使表单有垂直间距；提交方法为“post”，常用于提交较大量或需保密的数据（如密码等）。 -->
|
|
|
<div class="layui-form-item">
|
|
|
<!-- 在表单内创建Layui框架的表单项目容器，用于对单个输入项分组和布局，方便统一管理和设置样式，使每个输入项在页面中规范显示。 -->
|
|
|
<label class="layui-form-label">工号</label>
|
|
|
<!-- 创建表单标签，用于显示输入项对应的提示文本，此处提示用户输入“工号”信息。 -->
|
|
|
<div class="layui-input-block">
|
|
|
<!-- 创建放置输入框的块级容器，按Layui框架布局规则，输入框会在此合理显示，确保页面布局整齐。 -->
|
|
|
<input type="text" name="title" value="${teacher.t_id}" required readonly="readonly" lay-verify="required" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建文本输入框，设置名称为“title”，通过EL表达式将“teacher.t_id”（可能是从服务器端传递过来的教师工号数据）作为初始值显示，设置为必填且只读，应用Layui框架输入框样式类“layui-input”，用户能看到但不能修改工号信息。 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<label class="layui-form-label">当前密码</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input type="text" name="student-password" id="student-password" value="${teacher.t_password}" readonly="readonly" placeholder="" autocomplete="off" class="layui-input">
|
|
|
<!-- 类似上述工号输入框，创建用于输入当前密码的文本输入框，名称为“student-password”，设置ID方便后续操作，初始值通过EL表达式显示教师当前密码（通常从服务器获取），设置为只读，用户无法在此修改当前密码内容。 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<label class="layui-form-label">新密码</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input type="password" name="teacher-newpassword" id="teacher-newpassword" value="" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建用于输入新密码的密码类型输入框，名称为“teacher-newpassword”，设置ID便于操作，设置为必填项并应用Layui框架的验证规则（通过“lay-verify=required”），用户需在此输入新密码内容，输入时内容会以加密形式显示（因为是密码类型输入框）。 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="layui-form-item layui-form-text">
|
|
|
<label class="layui-form-label">确认密码</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input type="password" name="teacher-ennewpassword" id="teacher-ennewpassword" value="" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建用于再次输入密码进行确认的密码类型输入框，名称为“teacher-ennewpassword”，设置ID方便操作，同样应用验证规则要求必填，用户需再次输入新密码进行确认，确保两次输入一致，避免密码输入错误。 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
<div class="layui-input-block">
|
|
|
<button class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
|
|
|
<!-- 创建使用Layui框架样式的按钮，文本显示为“修改”，通过“lay-submit”属性声明该按钮用于提交表单，“lay-filter=formDemo”可用于设置表单提交的验证规则或事件监听等相关的过滤器名称（需在后续JavaScript代码中定义具体逻辑），点击按钮触发表单提交操作，将用户输入的密码相关信息发往指定Servlet处理。 -->
|
|
|
<span style="padding-left: 20px;">${update_msg}</span>
|
|
|
<!-- 通过EL表达式显示名为“update_msg”的变量内容，该变量可能是在服务器端（如对应的Servlet）设置的提示信息，用于向用户反馈操作结果（如修改密码成功或失败的提示等），并设置左边20px内边距与按钮隔开显示。 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
<jsp:include page="/footer.jsp"></jsp:include>
|
|
|
<!-- 包含名为“footer.jsp”的页面，通常用于定义页面底部区域，可包含版权信息、联系方式、页面底部导航等内容，完善页面整体布局结构，使其更完整规范，呈现出完整的页面视觉效果。 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
$("#nav li:nth-child(5) dl dd:nth-child(2)").addClass("layui-this");
|
|
|
// 使用jQuery选择器选择页面中id为“nav”的元素下的第五个li元素内的dl元素中的第二个dd元素，并为其添加“layui-this”样式类，大概率用于在导航菜单中标记当前选中的菜单项（依据页面导航结构和样式设置逻辑），使其呈现选中的视觉效果（如变色、加粗等），表明当前所在功能页面对应的导航位置。
|
|
|
$("#nav li:nth-child(5)").addClass("layui-nav-itemed");
|
|
|
// 同样用jQuery选择器选择id为“nav”的元素下的第五个li元素，并为其添加“layui-nav-itemed”样式类，通常用于展开或折叠对应的导航菜单项目，使其显示出展开状态的视觉效果（按Layui导航组件样式规则），方便展示相关子菜单或突出当前所在主菜单部分。
|
|
|
</script>
|
|
|
<script>
|
|
|
//JavaScript代码区域
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
// 使用Layui框架的模块加载机制，加载“element”模块，获取实例赋值给“element”变量，然后调用“init”方法初始化，“element”模块用于页面元素操作、动态渲染及交互效果实现等，初始化准备DOM操作环境、绑定事件等，确保模块正常工作，实现相关功能。
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
//Demo
|
|
|
layui.use('form', function(){
|
|
|
// 使用Layui框架的模块加载机制，加载“form”模块，后续可在回调函数内编写使用该模块相关功能的代码，比如进行表单验证、提交前数据处理等操作，不过这里暂时没添加具体业务逻辑代码（可能后续完善）。
|
|
|
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |
