|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<!-- 以上两行是JSP页面相关的指令：
|
|
|
第一行用于设置该JSP页面的内容类型为text/html（即HTML格式页面），同时指定字符编码为UTF-8，并且表明页面使用Java语言来处理相关逻辑。
|
|
|
第二行引入了JSTL（JavaServer Pages Standard Tag Library）核心标签库，定义其前缀为“c”，后续就可以通过这个前缀使用JSTL提供的各类标签，例如用于循环遍历、条件判断等操作的标签，方便在JSP页面中进行动态数据处理 -->
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>修改学生信息</title>
|
|
|
<!-- 设置当前HTML页面的标题为“修改学生信息”，此标题会显示在浏览器的标题栏中，让用户直观知晓页面的主要功能 -->
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入layui框架的样式表文件，通过相对路径（从当前页面所在目录下的css文件夹中查找）来应用layui框架所提供的样式，可用于页面布局、组件美化等，使页面呈现出特定的外观风格 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入自定义的样式表文件style.css，同样采用相对路径引用，用于添加符合特定需求的个性化页面样式，对页面显示效果做进一步定制 -->
|
|
|
<script src="./layui.js"></script>
|
|
|
<!-- 引入layui框架的JavaScript脚本文件，从当前页面所在目录获取该文件，layui脚本为页面提供众多交互功能以及各种组件支持，比如实现菜单交互、页面元素动态展示等 -->
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
|
|
<!-- 从CDN（内容分发网络）引入jQuery库的最小化版本，jQuery是常用的JavaScript库，能简化页面中对DOM元素的操作、事件处理以及实现各种动画效果等，方便开发人员编写JavaScript代码来实现页面交互逻辑 -->
|
|
|
</head>
|
|
|
<body class="layui-layout-body" style="background-color: #F2F2F2">
|
|
|
<!-- 为页面主体（body）设置类名“layui-layout-body”，同时将背景颜色设定为浅灰色（#F2F2F2），这里的类名大概率与layui框架的布局样式相关联，按照其框架规范来构建页面整体外观 -->
|
|
|
<jsp:include page="/filterLogin.jsp"></jsp:include>
|
|
|
<!-- 通过JSP的include指令包含名为filterLogin.jsp的页面内容，通常这个页面用于处理用户登录相关的验证逻辑或者展示登录相关的界面元素，比如登录表单等，以此保证只有登录后的用户可访问后续页面内容 -->
|
|
|
<jsp:include page="/WEB-INF/admin/aHeader.jsp"></jsp:include>
|
|
|
<!-- 包含位于WEB-INF/admin目录下的aHeader.jsp页面，一般用于构建页面的头部区域，可能包含网站logo、导航栏等常见的头部元素，起到统一页面头部布局的作用 -->
|
|
|
<jsp:include page="/WEB-INF/admin/adminNav.jsp"></jsp:include>
|
|
|
<!-- 再次使用JSP的include指令，包含WEB-INF/admin目录下的adminNav.jsp页面，通常用来展示管理员端特有的导航菜单内容，便于用户在不同功能模块间进行切换操作 -->
|
|
|
<div class="layui-layout layui-layout-admin">
|
|
|
<!-- 创建一个div元素，并赋予其两个类名“layui-layout”和“layui-layout-admin”，这一般是layui框架中用于定义页面整体布局结构的特定类名，遵循layui框架的布局规范来划分页面不同区域 -->
|
|
|
<div class="layui-body">
|
|
|
<!-- 在上述布局div内部再创建一个div元素，类名为“layui-body”，在layui框架里，该区域通常用于承载页面的主要内容，例如展示各类业务数据、操作按钮等 -->
|
|
|
<!-- 内容主体区域 -->
|
|
|
<div style="padding: 15px;">
|
|
|
<!-- 新建一个div元素，并通过内联样式设置其四周内边距为15px，主要用于对内部元素进行排版，让页面内容看起来更规整，避免显得过于紧凑或松散 -->
|
|
|
<span class="layui-breadcrumb">
|
|
|
<a href="">管理员</a>
|
|
|
<a href="">学生管理</a>
|
|
|
<a><cite>修改学生信息</cite></a>
|
|
|
</span>
|
|
|
<!-- 创建一个layui框架提供的面包屑导航组件，通过一系列超链接（a标签）展示当前页面在整个系统中的层级路径，这里展示了从“管理员”进入“学生管理”，再到“修改学生信息”页面，但超链接的href属性为空，可能后续需完善具体跳转地址以实现页面导航功能 -->
|
|
|
<form class="layui-form" action="${pageContext.request.contextPath}/updateStudentInfoServlet" style="padding-top: 50px" method="post">
|
|
|
<!-- 创建一个layui框架的表单（form），设置其提交的目标地址为名为updateStudentInfoServlet的Servlet（通过EL表达式动态获取上下文路径拼接而成），通过内联样式设置顶部内边距为50px，提交方式为POST，用于收集用户输入的修改后的学生信息并提交给后端进行信息更新操作 -->
|
|
|
<div class="layui-form-item">
|
|
|
<!-- 创建一个layui框架下表单项目（form-item）的div容器，layui框架通常会依据这个结构来对内部的表单元素进行布局和样式处理 -->
|
|
|
<label class="layui-form-label">学号</label>
|
|
|
<!-- 创建一个表单标签（label）元素，用于标识后面的输入框对应的含义，这里显示为“学号” -->
|
|
|
<div class="layui-input-block">
|
|
|
<!-- 创建一个用于放置输入框的div容器，在layui框架的表单布局里，控制输入框的显示样式 -->
|
|
|
<input type="text" readonly="readonly" name="student-id" value="${student.s_id}" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建一个文本输入框（input）元素，类型为文本（type: text），设置为只读（readonly="readonly"），名称为“student-id”，其值通过EL表达式从名为“student”的对象中获取（可能是从后台查询出当前要修改信息的学生的学号进行回显），关闭自动完成功能（autocomplete="off"），并应用layui框架的输入框样式类（layui-input），这里用于展示学号但不允许用户修改 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<label class="layui-form-label">学院</label>
|
|
|
<div class="layui-input-block">
|
|
|
<select name="selectCollege">
|
|
|
<!-- 创建一个下拉选择框（select）元素，名称为“selectCollege”，用于让用户选择学生所属的学院 -->
|
|
|
<option value="${student.s_college}" selected>${student.s_college}</option>
|
|
|
<!-- 创建一个默认选中的选项（option），其值和显示文本都通过EL表达式获取当前学生所属学院信息进行回显，设置为默认选中（selected），表示当前学生已有的学院信息 -->
|
|
|
<c:forEach items="${collegeLists}" var="collegeList">
|
|
|
<option value="${collegeList.college}">${collegeList.college}</option>
|
|
|
<!-- 使用JSTL的forEach标签进行循环遍历操作，循环的对象是名为“collegeLists”的数据集合（通常是从后端获取的所有学院信息列表），每次循环将当前元素赋值给变量“collegeList”，并创建一个选项元素，其值和显示文本都设置为当前学院信息，用于展示可选择的其他学院选项 -->
|
|
|
</c:forEach>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<label class="layui-form-label">系别</label>
|
|
|
<div class="layui-input-block">
|
|
|
<select name="selectDepartment" lay-search>
|
|
|
<!-- 创建一个下拉选择框，名称为“selectDepartment”，并设置了lay-search属性（在layui框架中，可能用于开启搜索功能，方便在选项较多时快速查找），用于让用户选择学生所属的系别 -->
|
|
|
<option value="${student.s_department}" selected>${student.s_department}</option>
|
|
|
<!-- 创建一个默认选中的选项，通过EL表达式获取当前学生所属系别信息进行回显并设置为默认选中，展示当前学生已有的系别 -->
|
|
|
<c:forEach items="${departmentLists}" var="departmentList">
|
|
|
<option>${departmentList.department}</option>
|
|
|
<!-- 同样使用forEach标签循环遍历名为“departmentLists”的系别信息集合，每次循环创建一个选项元素，显示文本为当前系别信息，用于展示可选择的其他系别选项 -->
|
|
|
</c:forEach>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<label class="layui-form-label">班级</label>
|
|
|
<div class="layui-input-block">
|
|
|
<select name="selectClass" lay-search>
|
|
|
<!-- 创建一个下拉选择框，名称为“selectClass”，设置lay-search属性，用于让用户选择学生所在的班级 -->
|
|
|
<option value="${student.s_class}" selected>${student.s_class}</option>
|
|
|
<!-- 创建一个默认选中的选项，通过EL表达式获取当前学生所在班级信息进行回显并设置为默认选中，展示当前学生已有的班级 -->
|
|
|
<c:forEach items="${classLists}" var="classList">
|
|
|
<option>${classList.cclass}</option>
|
|
|
<!-- 使用forEach标签循环遍历名为“classLists”的班级信息集合，每次循环创建一个选项元素，显示文本为当前班级信息，用于展示可选择的其他班级选项 -->
|
|
|
</c:forEach>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<label class="layui-form-label">姓名</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input type="text" name="student-name" id="student-name" value="${student.s_name}" placeholder="" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建一个文本输入框，类型为文本，名称为“student-name”，设置了id为“student-name”方便后续通过JavaScript操作该元素，其值通过EL表达式获取当前学生姓名信息进行回显，关闭自动完成功能，用于让用户修改学生的姓名信息 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<div class="layui-inline">
|
|
|
<label class="layui-form-label">性别</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input type="radio" name="student-sex" id="idsex" value="男" title="男">
|
|
|
<input type="radio" name="student-sex" id="idsex2" value="女" title="女">
|
|
|
<!-- 创建两个单选按钮（input，类型为radio），它们的名称都为“student-sex”，表示属于同一组单选选项（同一组单选按钮的名称要相同），分别设置不同的id、值和标题属性，用于让用户选择学生的性别 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-inline">
|
|
|
<label class="layui-form-label">年龄</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input type="text" name="student-age" id="student-age" value="${student.s_age}" placeholder="" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建一个文本输入框，用于输入学生的年龄信息，名称为“student-age”，通过EL表达式回显当前学生年龄，关闭自动完成功能 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-inline">
|
|
|
<label class="layui-form-label">电话</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input type="text" name="student-phone" id="student-phone" value="${student.s_phone}" placeholder="" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建一个文本输入框，用于输入学生的电话号码信息，名称为“student-phone”，回显当前学生电话号码，关闭自动完成功能 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-inline">
|
|
|
<label class="layui-form-label">邮箱</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input type="text" name="student-email" id="student-email" value="${student.s_email}" placeholder="" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建一个文本输入框，用于输入学生的邮箱信息，名称为“student-email”，回显当前学生邮箱地址，关闭自动完成功能 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item layui-form-text">
|
|
|
<label class="layui-form-label">城市</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input type="text" name="student-address" id="student-address" value="${student.s_address}" placeholder="请输入你所在的省市" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建一个文本输入框，用于输入学生所在城市信息，名称为“student-address”，回显当前学生城市信息，设置了提示性的占位符（placeholder），关闭自动完成功能 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
<div class="layui-input-block">
|
|
|
<button class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
|
|
|
<!-- 创建一个提交按钮（button），应用layui框架的按钮样式类（layui-btn），设置其为可提交表单（lay-submit），并通过lay-filter属性设置一个名为“formDemo”的过滤器，点击该按钮会触发表单提交操作，将用户修改后的学生信息发送到指定的Servlet -->
|
|
|
<button class="layui-btn layui-btn-primary" id="inforeset">重置</button>
|
|
|
<!-- 创建一个按钮，应用layui框架的主要样式类（layui-btn layui-btn-primary，表示基础样式按钮），设置id为“inforeset”，用于后续绑定JavaScript事件，实现重置表单的功能 -->
|
|
|
<span style="padding-left: 20px;">${update_msg}</span>
|
|
|
<!-- 通过EL表达式显示名为“update_msg”的变量的值，可能用于在页面上显示一些与学生信息更新操作相关的提示信息，比如更新成功或失败的消息等 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
<jsp:include page="/footer.jsp"></jsp:include>
|
|
|
<!-- 包含名为footer.jsp的页面，一般用于展示页面底部的一些通用信息，比如版权声明、网站相关链接、联系方式等内容 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
$("#nav li:nth-child(2) dl dd:nth-child(2)").addClass("layui-this");
|
|
|
// 使用jQuery选择器选中页面中id为“nav”的元素下的第2个子元素li下的dl元素下的第2个dd元素，并为其添加类名“layui-this”，在layui框架中，添加这个类名通常意味着将对应的导航菜单项标记为当前选中状态，使其呈现特定的样式（如改变颜色、加粗等），以此表明当前所在页面功能模块对应的菜单选项
|
|
|
$("#nav li:nth-child(2)").addClass("layui-nav-itemed");
|
|
|
// 同样用jQuery选择器选中页面中id为“nav”的元素下的第2个子元素li，并为其添加类名“layui-nav-itemed”，在layui框架里，这个类名可能用于控制导航菜单的展开或折叠状态，让对应的菜单层级结构展示相应效果，方便用户查看相关子菜单
|
|
|
$("#hidden-update").removeAttr("hidden");
|
|
|
// 通过jQuery选择器选中id为“hidden-update”的元素（可能是一个隐藏的元素，具体要看页面其他部分的定义），并移除其“hidden”属性，使其变为可见状态（如果原本是隐藏的话），不过这里不清楚“hidden-update”元素具体用途，可能与页面特定功能相关
|
|
|
</script>
|
|
|
<script>
|
|
|
//JavaScript代码区域
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
// 使用layui框架的element模块，调用其init方法进行初始化操作。在layui框架中，element模块提供了很多页面元素交互相关的功能，例如实现页面布局动态切换、菜单展开收起等交互效果，通过调用init方法可激活这些功能，确保页面上基于element模块构建的各种UI组件能正常工作
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
//Demo
|
|
|
layui.use('form', function(){
|
|
|
// 使用layui框架的form模块，后续可以在这个回调函数内部编写与表单相关的交互逻辑代码，不过目前这里没有具体内容，可能是预留的用于进一步开发表单验证、提交等相关功能的地方
|
|
|
});
|
|
|
</script>
|
|
|
<script>
|
|
|
var sex = "${student.s_sex}";
|
|
|
if (sex == '男') {
|
|
|
$("#idsex").attr("checked","checked");
|
|
|
$("#idsex2").removeAttr("checked");
|
|
|
// 通过EL表达式获取名为“student”的对象中的学生性别信息（s_sex），赋值给变量sex，然后进行条件判断，如果性别是“男”，则使用jQuery的attr方法为id为“idsex”的单选按钮（即代表男性的单选按钮）设置“checked”属性为“checked”，表示选中该按钮，同时移除另一个代表女性的单选按钮（id为“idsex2”）的“checked”属性，确保只有代表“男”性的单选按钮处于选中状态，实现根据已有学生信息回显性别选项的功能 -->
|
|
|
} else if (sex == '女') {
|
|
|
$("#idsex2").attr("checked","checked");
|
|
|
$("#idsex").removeAttr("checked");
|
|
|
// 如果性别是“女”，则使用jQuery的attr方法为id为“idsex2”的单选按钮（即代表女性的单选按钮）设置“checked”属性为“checked”，表示选中该按钮，同时移除代表男性的单选按钮（id为“idsex”）的“checked”属性，使代表“女”性的单选按钮处于选中状态，同样是为了依据已有学生信息准确回显性别选项 -->
|
|
|
} else {
|
|
|
$("#idsex").removeAttr("checked");
|
|
|
$("#idsex2").removeAttr("checked");
|
|
|
// 如果学生性别既不是“男”也不是“女”（可能是数据异常等情况），则移除两个单选按钮（“idsex”和“idsex2”）的“checked”属性，也就是让两个单选按钮都不处于选中状态，保证表单的初始状态在这种特殊情况下的合理性
|
|
|
}
|
|
|
</script>
|
|
|
<script type="text/javascript">
|
|
|
$(function () {
|
|
|
$('#inforeset').bind('click', function () {
|
|
|
$("#idsex").removeAttr("checked");
|
|
|
$("#idsex2").removeAttr("checked");
|
|
|
$("#student-name").val("");
|
|
|
$("#student-age").val("");
|
|
|
$("#student-phone").val("");
|
|
|
$("#student-email").val("");
|
|
|
$("#student-address").val("");
|
|
|
alert("已重置！");
|
|
|
// 这是一个jQuery的文档就绪函数，当页面的DOM结构加载完成后会执行内部的代码。
|
|
|
// 为id为“inforeset”的元素（也就是前面提到的“重置”按钮）绑定点击事件处理函数。
|
|
|
// 在点击事件处理函数内部，首先移除代表性别单选按钮（“idsex”和“idsex2”）的“checked”属性，使其都不被选中；然后将各个输入框（“student-name”“student-age”“student-phone”“student-email”“student-address”）的值设置为空字符串，达到清空用户输入内容的效果；最后通过JavaScript的alert函数弹出一个提示框，显示“已重置！”的提示信息，告知用户表单已被重置。
|
|
|
});
|
|
|
|
|
|
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |
