|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<!-- 以上两行是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脚本文件，从当前页面所在目录下获取该文件，该脚本为页面提供了诸多交互功能以及各种组件支持 -->
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
|
|
<!-- 从CDN（内容分发网络）引入jQuery库的最小化版本，jQuery常用于简化JavaScript中的DOM操作、事件处理等功能 -->
|
|
|
</head>
|
|
|
<body class="layui-layout-body" style="background-color: #F2F2F2">
|
|
|
<!-- 设置页面主体的类名为"layui-layout-body"，并将背景颜色设置为浅灰色（#F2F2F2），可能是基于layui框架的布局要求来设定样式 -->
|
|
|
<jsp:include page="/filterLogin.jsp"></jsp:include>
|
|
|
<!-- 包含名为filterLogin.jsp的页面内容，通常用于处理登录相关的验证或展示登录相关的模块等功能 -->
|
|
|
<jsp:include page="/WEB-INF/student/sHeader.jsp"></jsp:include>
|
|
|
<!-- 包含位于WEB-INF/student目录下的sHeader.jsp页面，一般用于展示页面的头部内容，比如导航栏、logo等 -->
|
|
|
<jsp:include page="/WEB-INF/student/studentNav.jsp"></jsp:include>
|
|
|
<!-- 包含位于WEB-INF/student目录下的studentNav.jsp页面，大概率是用来展示学生端特定的导航菜单等内容 -->
|
|
|
<div class="layui-layout layui-layout-admin">
|
|
|
<!-- 创建一个类名为"layui-layout"和"layui-layout-admin"的div容器，可能是layui框架用于布局管理的特定结构 -->
|
|
|
<div class="layui-body">
|
|
|
<!-- 这个div通常用于承载页面的主要内容区域，在layui框架的布局体系里有特定含义 -->
|
|
|
<!-- 内容主体区域 -->
|
|
|
<div style="padding: 15px;">
|
|
|
<!-- 创建一个带有内边距为15px的div，用于放置具体的内容，起到一定的排版作用 -->
|
|
|
<span class="layui-breadcrumb">
|
|
|
<a href="">学生端</a>
|
|
|
<a href="">个人信息管理</a>
|
|
|
<a><cite>个人信息</cite></a>
|
|
|
</span>
|
|
|
<!-- 创建一个layui框架的面包屑导航组件，用于展示当前页面的层级路径，这里显示了从"学生端"到"个人信息管理"再到"个人信息"的导航链路，但链接（href）目前为空，可能后续需要完善具体的跳转地址 -->
|
|
|
<form class="layui-form" action="${pageContext.request.contextPath}/studentInfomationUpdateServlet" style="padding-top: 50px" method="post">
|
|
|
<!-- 创建一个layui框架的表单（form），设置其提交的目标地址为名为studentInfomationUpdateServlet的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}" required lay-verify="required" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建一个文本输入框（input）元素，类型为文本（type: text），设置为只读（readonly="readonly"），其名称为"student-id"，用于在表单提交时传递参数给后端，输入框的值通过EL表达式从名为"student"的对象中获取（可能是从后台查询出当前登录学生的学号信息进行回显），设置为必填项（required）且通过layui框架的验证机制（lay-verify="required"）来确保用户不能留空，关闭自动完成功能（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" readonly="readonly">
|
|
|
<!-- 创建一个下拉选择框（select）元素，名称为"selectCollege"，设置为只读，用于选择学院信息 -->
|
|
|
<option selected>${student.s_college}</option>
|
|
|
<!-- 创建一个下拉选项（option），设置为已选中（selected），其显示文本通过EL表达式从名为"student"的对象中获取当前学生所在学院信息进行回显，通常表示当前学生已有的学院信息，且不允许用户修改 -->
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<label class="layui-form-label">系别</label>
|
|
|
<div class="layui-input-block">
|
|
|
<select name="selectDepartment" readonly="readonly">
|
|
|
<option selected>${student.s_department}</option>
|
|
|
<!-- 与上面学院的下拉框类似，这里创建系别（department）的下拉选择框，同样是只读，且默认选中当前学生所在系别信息（通过EL表达式获取），不允许用户修改 -->
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<label class="layui-form-label">班级</label>
|
|
|
<div class="layui-input-block">
|
|
|
<select name="selectClass" readonly="readonly">
|
|
|
<option selected>${student.s_class}</option>
|
|
|
<!-- 创建班级（class）的下拉选择框，只读，默认选中当前学生所在班级信息（通过EL表达式获取），用户不可修改 -->
|
|
|
</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表达式获取当前学生姓名进行回显，关闭自动完成功能，应用layui框架输入框样式，这里用户可以修改姓名信息 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<div class="layui-inline">
|
|
|
<!-- 创建一个内联的div容器，在layui表单布局中，用于让内部的表单元素在同一行显示 -->
|
|
|
<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分别为"idsex"和"idsex2"方便后续操作，值分别为"男"和"女"，通过title属性设置显示的文本为对应的性别文字，用户可从中选择性别信息 -->
|
|
|
</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"，id为"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">
|
|
|
<!-- 创建文本输入框用于输入电话号码，通过EL表达式回显已有电话号码，用户可修改 -->
|
|
|
</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">
|
|
|
<!-- 创建文本输入框用于输入邮箱地址，回显已有邮箱信息，用户可修改 -->
|
|
|
</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">
|
|
|
<!-- 创建文本输入框用于输入所在城市信息，回显已有城市信息，通过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"，用于触发重置表单信息的操作 -->
|
|
|
<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(5) dl dd:nth-child(1)").addClass("layui-this");
|
|
|
// 使用jQuery选择器选中页面中id为"nav"的元素下的第5个子元素li下的dl元素下的第1个dd元素，并为其添加类名"layui-this"，在layui框架中，添加这个类名通常意味着将对应的导航菜单项标记为当前选中状态，使其呈现特定的样式（例如改变颜色、加粗等），以此表明当前所在的页面功能模块对应的菜单选项
|
|
|
$("#nav li:nth-child(5)").addClass("layui-nav-itemed");
|
|
|
// 同样使用jQuery选择器选中页面中id为"nav"的元素下的第5个子元素li，并为其添加类名"layui-nav-itemed"，在layui框架里，这个类名可能用于控制导航菜单的展开或折叠状态，使得对应的菜单层级结构展示相应的效果，方便用户查看相关子菜单 -->
|
|
|
</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"的对象中的学生性别信息，存储在变量sex中，然后进行条件判断，如果性别为"男"，则使用jQuery的attr方法将id为"idsex"的单选按钮设置为选中状态（checked），同时移除id为"idsex2"的单选按钮的选中状态，确保页面上性别信息的正确显示
|
|
|
} else if (sex == '女') {
|
|
|
$("#idsex2").attr("checked","checked");
|
|
|
$("#idsex").removeAttr("checked");
|
|
|
// 如果性别为"女"，则相反操作，选中id为"idsex2"的单选按钮，移除id为"idsex"的单选按钮的选中状态
|
|
|
}else{
|
|
|
$("#idsex").removeAttr("checked");
|
|
|
$("#idsex2").removeAttr("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的文档就绪函数（$(function () {...}），当页面DOM加载完成后执行内部代码。这里给id为"inforeset"的按钮绑定点击事件（bind('click', function () {...}）），当点击该按钮时，执行以下操作：
|
|
|
// 先移除两个性别单选按钮的选中状态，然后将各个可修改的输入框（姓名、年龄、电话、邮箱、地址）的值清空，最后弹出一个提示框显示"已重置！"，实现表单信息的重置功能
|
|
|
});
|
|
|
|
|
|
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |
