p4to3rklf
/
text1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cx

Browse Source
chenxi 8 months ago
parent 096063f8be
commit 97cc4c35c5
12 changed files with 1024 additions and 624 deletions
Show Stats Download Patch File Download Diff File

98
web/WEB-INF/student/sCDCList.jsp
Unescape View File

@ -1,62 +1,84 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 以上两行是JSP页面的指令。第一行设置页面内容类型为HTML，字符编码为UTF-8，且指定使用Java语言。
第二行引入了JSTL（JavaServer Pages Standard Tag Library）核心标签库，前缀为"c"，用于在JSP页面中方便地进行逻辑处理，比如循环、条件判断等 -->
<html>
<head>
<title>学院专业查询</title>
<!-- 设置页面的标题为"学院专业查询"，会显示在浏览器的标题栏 -->
<link rel="stylesheet" href="./css/layui.css">
<!-- 引入layui框架的样式文件，用于页面的样式布局和美化，这里是相对路径引用，从当前页面所在目录下的css文件夹中查找layui.css文件 -->
<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">
<jsp:include page="/filterLogin.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/sHeader.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/studentNav.jsp"></jsp:include>
<div class="layui-layout layui-layout-admin">
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<!-- 设置页面主体的类名为"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>
<table class="layui-table" lay-filter="test">
<thead>
<tr>
<th>ID</th>
<th>学院</th>
<th>专业</th>
<th>班级</th>
</tr>
</thead>
<c:forEach items="${cdcs}" var="cdc" varStatus="c">
<!-- 创建一个layui框架的面包屑导航组件，用于展示当前页面的层级路径，这里显示了从"学生端"到"学院专业信息"再到"学院专业查询"的导航链路，但链接（href）目前为空，可能后续需要完善具体的跳转地址 -->
<table class="layui-table" lay-filter="test">
<!-- 创建一个layui框架的表格组件，设置了一个名为"test"的过滤器，用于后续对表格进行一些交互功能的配置，比如行点击事件、筛选等 -->
<thead>
<tr>
<td>${c.count}</td>
<td>${cdc.college}</td>
<td>${cdc.department}</td>
<td>${cdc.cclass}</td>
<th>ID</th>
<th>学院</th>
<th>专业</th>
<th>班级</th>
<!-- 定义表格头部的列标题，分别为"ID"、"学院"、"专业"、"班级" -->
</tr>
</c:forEach>
</table>
<jsp:include page="/footer.jsp"></jsp:include>
</thead>
<c:forEach items="${cdcs}" var="cdc" varStatus="c">
<!-- 使用JSTL的forEach标签进行循环遍历，循环的对象是名为"cdcs"的数据集合（可能是从后台传递过来的包含学院专业班级等信息的列表），每次循环将当前元素赋值给变量"cdc"，并通过"varStatus"获取循环的状态信息（比如当前循环次数等），赋值给变量"c" -->
<tr>
<td>${c.count}</td>
<td>${cdc.college}</td>
<td>${cdc.department}</td>
<td>${cdc.cclass}</td>
<!-- 在表格的每一行中，分别展示循环当前元素（"cdc"）对应的序号（通过"c.count"获取当前是第几次循环）、学院名称（"${cdc.college}"）、专业名称（"${cdc.department}"）、班级名称（"${cdc.cclass}"） -->
</tr>
</c:forEach>
</table>
<jsp:include page="/footer.jsp"></jsp:include>
<!-- 包含名为footer.jsp的页面，一般用于展示页面底部的版权信息、相关链接等内容 -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#nav li:nth-child(4) dl dd:nth-child(1)").addClass("layui-this");
$("#nav li:nth-child(4)").addClass("layui-nav-itemed");
</script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
element.init();
});
</script>
<script type="text/javascript">
$("#nav li:nth-child(4) dl dd:nth-child(1)").addClass("layui-this");
// 使用jQuery选择器选中页面中id为"nav"的元素下的第4个子元素li下的dl元素下的第1个dd元素，并为其添加类名"layui-this"，可能是用于标记当前选中的导航菜单项，使其呈现特定的样式，表明处于选中状态（具体依赖layui框架的样式规则）
$("#nav li:nth-child(4)").addClass("l ayui-nav-itemed");
// 使用jQuery选择器选中页面中id为"nav"的元素下的第4个子元素li，并为其添加类名"layui-nav-itemed"，可能是用于展开或折叠对应的导航菜单（同样依赖layui框架的样式和交互逻辑）
</script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
element.init();
// 使用layui框架的element模块，调用其init方法进行初始化，通常是为了激活layui框架中基于element模块的各种UI组件的交互功能，比如菜单的展开收起、页面元素的显示隐藏等
});
</script>
</body>
</html>
</html>

106
web/WEB-INF/student/sFindFileList.jsp
Unescape View File

@ -1,63 +1,91 @@
<%@ 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脚本文件，从当前页面所在目录下获取该文件，该脚本为页面提供了诸多交互功能以及各种组件支持，方便实现如菜单交互、页面元素动态展示等功能 -->
<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">
<jsp:include page="/filterLogin.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/sHeader.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/studentNav.jsp"></jsp:include>
<div class="layui-layout layui-layout-admin">
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<!-- 为页面主体（body）设置了类名"layui-layout-body"，同时将背景颜色设置为浅灰色（颜色值为#F2F2F2），这里的类名可能与layui框架的布局样式相关联，按照其框架规范来设置页面的整体外观 -->
<jsp:include page="/filterLogin.jsp"></jsp:include>
<!-- 通过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>
<!-- 再次使用JSP的include指令，包含了WEB-INF/student目录下的studentNav.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>
<table class="layui-table" lay-filter="test">
<thead>
<tr>
<th>ID</th>
<th>文件名</th>
<th>文件路径</th>
<th>文件大小</th>
<th>操作</th>
</tr>
</thead>
<c:forEach items="${fileLists}" var="filelist" varStatus="f">
<!-- 创建一个layui框架提供的面包屑导航组件，通过一系列的超链接（a标签）展示当前页面在整个系统中的层级路径，这里展示了从"学生端"进入到"个人信息管理"，再到当前的"文件列表"页面，但目前超链接的href属性为空，可能后续需要完善具体的跳转地址，以实现页面导航功能 -->
<table class="layui-table" lay-filter="test">
<!-- 创建一个layui框架的表格组件，设置了一个名为"test"的过滤器，该过滤器可以在后续的JavaScript代码中用于配置表格相关的交互功能，例如实现表格行的点击事件、数据筛选、排序等操作 -->
<thead>
<tr>
<td>${f.count}</td>
<td>${filelist.fileName}</td>
<td>${filelist.filePath}</td>
<td>${filelist.fileSize}</td>
<td><a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/downloadServlet?filename=${filelist.fileName}">下载</a></td>
<th>ID</th>
<th>文件名</th>
<th>文件路径</th>
<th>文件大小</th>
<th>操作</th>
<!-- 定义表格头部的列标题，分别为"ID"（可能用于标识每条文件记录的序号等）、"文件名"、"文件路径"（用于显示文件存储的具体位置信息）、"文件大小"（展示文件所占存储空间大小）以及"操作"（一般用于放置针对文件的各种操作按钮，如下载、删除等） -->
</tr>
</c:forEach>
</table>
<jsp:include page="/footer.jsp"></jsp:include>
</thead>
<c:forEach items="${fileLists}" var="filelist" varStatus="f">
<!-- 使用JSTL的forEach标签来进行循环遍历操作，循环的对象是名为"fileLists"的数据集合（这个集合通常是从后台传递过来的，包含了一系列文件相关信息的列表，比如文件名、路径、大小等），每次循环将当前元素赋值给变量"filelist"，同时利用"varStatus"获取循环的状态信息（例如当前循环的次数等）并赋值给变量"f" -->
<tr>
<td>${f.count}</td>
<td>${filelist.fileName}</td>
<td>${filelist.filePath}</td>
<td>${filelist.fileSize}</td>
<td><a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/downloadServlet?filename=${filelist.fileName}">下载</a></td>
<!-- 在表格的每一行中，通过EL表达式（Expression Language，如${f.count}等）分别展示对应的数据：
${f.count}表示当前循环的次数，作为序号列的值；
${filelist.fileName}展示文件的名称；
${filelist.filePath}显示文件存储的路径；
${filelist.fileSize}呈现文件的大小；
最后一列是一个超链接（a标签），设置了layui框架的按钮类名（layui-btn和layui-btn-normal）使其呈现出特定的按钮样式，其href属性指向了一个名为downloadServlet的Servlet，并通过URL传递参数filename（值为当前行对应的文件名），用于实现文件下载的功能 -->
</tr>
</c:forEach>
</table>
<jsp:include page="/footer.jsp"></jsp:include>
<!-- 包含名为footer.jsp的页面，一般该页面用于展示页面底部的一些通用信息，比如版权声明、网站相关链接、联系方式等内容 -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#nav li:nth-child(5) dl dd:nth-child(3)").addClass("layui-this");
$("#nav li:nth-child(5)").addClass("layui-nav-itemed");
</script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
element.init();
});
</script>
<script type="text/javascript">
$("#nav li:nth-child(5) dl dd:nth-child(3)").addClass("layui-this");
// 使用jQuery选择器来选中页面中id为"nav"的元素下的第5个子元素li下的dl元素下的第3个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>
</body>
</html>

90
web/WEB-INF/student/sFindStudentList.jsp
Unescape View File

@ -1,41 +1,66 @@
<%@ 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">
<jsp:include page="/filterLogin.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/sHeader.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/studentNav.jsp"></jsp:include>
<!-- 为页面主体（body）设置了类名"layui-layout-body"，同时将背景颜色设定为浅灰色（颜色值为#F2F2F2），这里的类名大概率与layui框架的布局样式相关联，按照其框架规范来构建页面的整体外观 -->
<jsp:include page="/filterLogin.jsp"></jsp:include>
<!-- 通过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>
<!-- 再次使用JSP的include指令，包含了WEB-INF/student目录下的studentNav.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 style="padding-top: 20px;" action="${pageContext.request.contextPath}/findStudentByPageServlet" method="post">
<!-- 创建一个表单（form）元素，通过内联样式设置其顶部内边距为20px，设置表单的提交地址为名为findStudentByPageServlet的Servlet（通过EL表达式动态获取上下文路径拼接而成），提交方式为POST，这个表单用于收集用户输入的查询条件并提交给后端进行数据查询操作 -->
<div class="layui-form-item">
<!-- 创建一个layui框架的表单项目（form-item）的div容器，layui框架通常会根据这个结构来对内部的表单元素进行布局和样式处理 -->
<div class="layui-inline">
<!-- 创建一个内联的div容器，在layui表单布局中，用于让内部的表单元素在同一行显示，方便排列多个输入框和按钮等元素 -->
<label class="layui-form-label" style="width: auto;">学号</label>
<!-- 创建一个表单标签（label）元素，用于标识后面的输入框对应的含义，这里显示为"学号"，通过设置宽度为自动（width: auto）来根据内容自适应宽度 -->
<div class="layui-input-inline">
<!-- 创建一个内联的div容器用于放置输入框，在layui框架的表单布局里，控制输入框在一行内的显示样式 -->
<input type="tel" name="s_id" value="${condition.s_id[0]}" autocomplete="off" class="layui-input">
<!-- 创建一个输入框（input）元素，类型为电话号码（type: tel），设置其名称为"s_id"，用于在表单提交时传递参数给后端，输入框的值通过EL表达式从名为"condition"的对象中获取（可能是之前查询条件的回显），关闭自动完成功能（autocomplete="off"），并应用layui框架的输入框样式类（layui-input） -->
</div>
<label class="layui-form-label" style="width: auto;">姓名</label>
<!-- 类似上面的学号标签，这里创建一个用于标识姓名输入框含义的表单标签元素，显示为"姓名" -->
<div class="layui-input-inline">
<input type="text" name="s_name" value="${condition.s_name[0]}" autocomplete="off" class="layui-input">
<!-- 创建一个文本输入框（type: text），名称为"s_name"，同样通过EL表达式获取之前的输入值用于回显，关闭自动完成功能，并应用layui框架的输入框样式 -->
</div>
<div class="layui-input-inline">
<!-- 再次创建一个内联的div容器，用于放置按钮 -->
<button type="submit" class="layui-btn">查询</button>
<!-- 创建一个提交按钮（button），类型为提交（type: submit），按钮文本为"查询"，并应用layui框架的按钮样式类（layui-btn），点击该按钮会触发表单的提交操作，将输入的查询条件发送到指定的Servlet -->
</div>
</div>
</div>
@ -43,6 +68,7 @@
<table class="layui-table" lay-filter="test">
<!-- 创建一个layui框架的表格组件，设置了一个名为"test"的过滤器，该过滤器可以在后续的JavaScript代码中用于配置表格相关的交互功能，例如实现表格行的点击事件、数据筛选、排序等操作 -->
<thead>
<tr>
<th>ID</th>
@ -56,10 +82,12 @@
<th>城市</th>
<th>手机号</th>
<th>邮箱</th>
<!-- 定义表格头部的列标题，分别列出了要展示的学生信息相关的各个字段，如序号（ID）、学号、所在学院、系别、班级、姓名、性别、年龄、所在城市、手机号以及邮箱等 -->
</tr>
</thead>
<c:forEach items="${pb.list}" var="student" varStatus="s">
<!-- 使用JSTL的forEach标签来进行循环遍历操作，循环的对象是名为"pb.list"的数据集合（这个集合通常是从后端传递过来的分页查询后的学生信息列表），每次循环将当前元素赋值给变量"student"，同时利用"varStatus"获取循环的状态信息（例如当前循环的次数等）并赋值给变量"s" -->
<tr style="height: 70px;">
<td>${s.count}</td>
<td>${student.s_id}</td>
@ -72,58 +100,70 @@
<td>${student.s_address}</td>
<td>${student.s_phone}</td>
<td>${student.s_email}</td>
<!-- 在表格的每一行中，通过EL表达式（Expression Language，如${s.count}等）分别展示对应的数据：
${s.count}表示当前循环的次数，作为序号列的值；
后面依次展示学生的学号、学院、系别、班级、姓名、性别、年龄、城市、手机号以及邮箱等具体信息 -->
</tr>
</c:forEach>
</table>
<ul>
<!-- 创建一个无序列表（ul）元素，用于放置分页相关的链接和页码显示等内容 -->
<c:if test="${pb.currentPage == 1}">
<a href ="javascript:return false;">
<!-- 使用JSTL的条件判断标签（c:if）来判断当前页码（从名为"pb"的对象中获取当前页码属性）是否等于1，如果是，则执行下面的代码块 -->
<a href ="javascript:return false;">
<!-- 创建一个超链接（a标签），但通过设置href属性为"javascript:return false;"使其点击时不执行任何实际跳转操作，通常用于禁用当前不可用的上一页链接（当在第一页时，没有上一页了） -->
</c:if>
<c:if test="${pb.currentPage != 1}">
<a href="${pageContext.request.contextPath}/findStudentByPageServlet?currentPage=${pb.currentPage-1}&rows=5&s_id=${condition.s_id[0]}&s_name=${condition.s_name[0]}">
<c:if test="${pb.currentPage!= 1}">
<!-- 如果当前页码不等于1，则执行下面的代码块，用于创建一个有效的上一页链接 -->
<a href="${pageContext.request.contextPath}/findStudentByPageServlet?currentPage=${pb.currentPage-1}&rows=5&s_id=${condition.s_id[0]}&s_name=${condition.s_name[0]}">
<!-- 创建一个超链接，链接地址指向名为findStudentByPageServlet的Servlet，并通过URL传递多个参数，包括当前页码减1（用于获取上一页的数据）、每页显示行数（这里固定为5行）以及之前输入的学号和姓名查询条件（用于保持查询条件不变进行分页查询） -->
</c:if>
<li class="page-li">上一页</li></a>
<!-- 创建一个列表项（li）元素，应用了名为"page-li"的类名（可能用于设置样式），显示文本为"上一页"，并包裹在上面的超链接中，点击这个列表项就会触发对应的上一页链接跳转 -->
</a>
<c:forEach begin="1" end="${pb.totalPage}" var="i">
<!-- 使用JSTL的forEach标签进行循环，从1开始到总页数（从名为"pb"的对象中获取总页码属性）结束，每次循环将当前页码赋值给变量"i"，用于生成每一页的链接 -->
<c:if test="${pb.currentPage == i}">
<!-- 判断当前页码是否等于循环中的页码"i"，如果相等，则执行下面代码块，用于突出显示当前页码（比如改变背景色等样式） -->
<a href="${pageContext.request.contextPath}/findStudentByPageServlet?currentPage=${i}&rows=5&s_id=${condition.s_id[0]}&s_name=${condition.s_name[0]}"><li class="page-li" style="background-color: #009688;border-radius: 2px;color: white;">${i}</li></a>
<!-- 创建一个超链接，链接到指定的Servlet并传递当前页码等参数，内部包裹一个列表项元素，应用"page-li"类名，并通过内联样式设置背景色为绿色（#009688）、圆角（border-radius: 2px）以及文字颜色为白色，显示的文本为当前页码值"i"，以此突出显示当前所在页码 -->
</c:if>
<c:if test="${pb.currentPage != i}">
<c:if test="${pb.currentPage!= i}">
<!-- 如果当前页码不等于循环中的页码"i"，则执行下面代码块，用于创建普通的页码链接 -->
<a href="${pageContext.request.contextPath}/findStudentByPageServlet?currentPage=${i}&rows=5&s_id=${condition.s_id[0]}&s_name=${condition.s_name[0]}"><li class="page-li">${i}</li></a>
<!-- 创建一个超链接指向指定Servlet并传递参数，内部包裹一个应用"page-li"类名的列表项元素，显示的文本为当前页码值"i"，用于点击跳转到对应页码的页面 -->
</c:if>
</c:forEach>
<c:if test="${pb.currentPage == pb.totalPage}">
<a href="javascript:return false;">
<!-- 判断当前页码是否等于总页码，如果相等，则执行下面代码块，用于禁用下一页链接（当在最后一页时，没有下一页了） -->
<a href="javascript:return false;">
<!-- 创建一个超链接，设置href属性为"javascript:return false;"使其点击时不执行任何实际跳转操作 -->
</c:if>
<c:if test="${pb.currentPage != pb.totalPage}">
<a href="${pageContext.request.contextPath}/findStudentByPageServlet?currentPage=${pb.currentPage+1}&rows=5&s_id=${condition.s_id[0]}&s_name=${condition.s_name[0]}">
<c:if test="${pb.currentPage!= pb.totalPage}">
<!-- 如果当前页码不等于总页码，则执行下面代码块，用于创建有效的下一页链接 -->
<a href="${pageContext.request.contextPath}/findStudentByPageServlet?currentPage=${pb.currentPage+1}&rows=5&s_id=${condition.s_id[0]}&s_name=${condition.s_name[0]}">
<!-- 创建一个超链接，链接地址指向名为findStudentByPageServlet的Servlet，并通过URL传递多个参数，包括当前页码加1（用于获取下一页的数据）、每页显示行数以及之前输入的学号和姓名查询条件，用于实现下一页的分页查询跳转 -->
</c:if>
<li class="page-li">下一页</li></a>
<!-- 创建一个列表项元素，应用"page-li"类名，显示文本为"下一页"，包裹在上面的超链接中，点击可触发下一页的跳转操作 -->
</ul>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;">
<legend>共${pb.totalCount}条记录，共${pb.totalPage}页</legend>
<!-- 创建一个layui框架的字段集（fieldset）元素，应用了相关的类名用于样式设置，设置顶部内边距为0px，内部通过<legend>标签显示页面相关的统计信息，即总共的记录条数（从名为"pb"的对象中获取总记录数属性）以及总页数（从"pb"对象获取总页码属性） -->
</fieldset>
<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(1)").addClass("layui-this");
$("#nav li:nth-child(2)").addClass("layui-nav-itemed");
</script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
element.init();
});
</script>
</body>
</html>
<script type="text/javascript">
$("#nav li:nth-child(2) dl dd:nth-child(1)").addClass("layui-this");
// 使用jQuery选择器来选中页面中id为"nav"的元素下的第2个子元素li下的dl元素下的第1个dd元素，并为其添加类名"layui-this"，在layui框架中，添加这个类名通常意味着将对应的导航菜单项标记为当前选中状态，使其呈现出特定的样式（例如改变颜色、加粗等），以此来表明当前所在的页面功能模块对应的菜单选项
$("#nav li:nth-child(2)").addClass("layui-nav-itemed");
// 同样使用jQuery选择器选中页面中id为"nav"的元素下的第2个子元素li，并为其添加类名"layui-nav-itemed"，在layui框架里，这个类名可能用于控制导航菜单的展开或折叠状态，使得对应的菜单层级结构展示相应的效果，方便用户查看相关子菜单 -->

56
web/WEB-INF/student/sFindTeacherList.jsp
Unescape View File

@ -1,27 +1,44 @@
<%@ 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">
<jsp:include page="/filterLogin.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/sHeader.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/studentNav.jsp"></jsp:include>
<!-- 为页面主体（body）设置类名“layui-layout-body”，同时将背景颜色设定为浅灰色（#F2F2F2），这里的类名大概率与layui框架的布局样式相关联，按照其框架规范来构建页面整体外观 -->
<jsp:include page="/filterLogin.jsp"></jsp:include>
<!-- 通过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>
<!-- 再次使用JSP的include指令，包含WEB-INF/student目录下的studentNav.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属性为空，可能后续需完善具体跳转地址以实现页面导航功能 -->
<table class="layui-table" lay-filter="test">
<!-- 创建一个layui框架的表格组件，设置名为“test”的过滤器，该过滤器可在后续JavaScript代码中用于配置表格相关交互功能，例如实现表格行点击事件、数据筛选、排序等操作 -->
<thead>
<tr>
<th>ID</th>
@ -30,10 +47,12 @@
<th>性别</th>
<th>文化程度</th>
<th>职称</th>
<!-- 定义表格头部的列标题，分别列出要展示的教师信息相关的各个字段，如序号（ID）、工号、姓名、性别、文化程度、职称等 -->
</tr>
</thead>
<c:forEach items="${teachers}" var="teacher" varStatus="t">
<!-- 使用JSTL的forEach标签进行循环遍历操作，循环的对象是名为“teachers”的数据集合（通常是从后端传递过来的教师信息列表），每次循环将当前元素赋值给变量“teacher”，同时利用“varStatus”获取循环状态信息（如当前循环次数等）并赋值给变量“t” -->
<tr style="height: 70px;">
<td>${t.count}</td>
<td>${teacher.t_id}</td>
@ -41,26 +60,33 @@
<td>${teacher.t_sex}</td>
<td>${teacher.t_education}</td>
<td>${teacher.t_title}</td>
<!-- 在表格的每一行中，通过EL表达式（Expression Language，如${t.count}等）分别展示对应的数据：
${t.count}表示当前循环次数，作为序号列的值；
后面依次展示教师的工号、姓名、性别、文化程度、职称等具体信息 -->
</tr>
</c:forEach>
</table>
<jsp:include page="/footer.jsp"></jsp:include>
<!-- 包含名为footer.jsp的页面，一般用于展示页面底部的一些通用信息，比如版权声明、网站相关链接、联系方式等内容 -->
</div>
</div>
</div>
<script type="text/javascript">
$("#nav li:nth-child(3) dl dd:nth-child(1)").addClass("layui-this");
$("#nav li:nth-child(3)").addClass("layui-nav-itemed");
</script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
element.init();
});
</script>
<script type="text/javascript">
$("#nav li:nth-child(3) dl dd:nth-child(1)").addClass("layui-this");
// 使用jQuery选择器选中页面中id为“nav”的元素下的第3个子元素li下的dl元素下的第1个dd元素，并为其添加类名“layui-this”，在layui框架中，添加此名通常意味着将对应的导航菜单项标记为当前选中状态，使其呈现特定样式（如改变颜色、加粗等），表明当前所在页面功能模块对应的菜单选项
$("#nav li:nth-child(3)").addClass("layui-nav-itemed");
// 同样用jQuery选择器选中页面中id为“nav”的元素下的第3个子元素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>
</body>
</html>
</html>

113
web/WEB-INF/student/sHeader.jsp
Unescape View File

@ -1,56 +1,83 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<!-- 这是JSP页面的指令，设置页面的内容类型为text/html（即HTML格式页面），指定字符编码为UTF-8，同时表明页面使用Java语言编写并且编码格式也是UTF-8，确保页面能正确处理和显示各种字符 -->
<html>
<head>
<link rel="stylesheet" href="./css/layui.css">
<!-- 引入layui框架的样式表文件，通过相对路径（从当前页面所在目录下的css文件夹中查找）应用layui框架提供的样式，用于页面布局、组件美化等，使页面呈现出layui框架定义的外观风格 -->
<link rel="stylesheet" href="./css/style.css">
<!-- 引入自定义的样式表文件style.css，同样采用相对路径引用，用于添加符合特定需求的个性化页面样式，对页面显示效果做进一步定制 -->
<link rel="icon" href="./images/favicon.ico" type="image/x-icon">
<!-- 设置页面的图标（favicon），即浏览器标签页上显示的小图标，通过相对路径指定图标文件的位置（位于当前页面所在目录下的images文件夹中），类型为image/x-icon -->
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
<!-- 同样是设置页面的快捷图标，功能和上面的<link rel="icon">类似，用于在浏览器中更好地标识该页面，不同浏览器对这两种设置的兼容性有所不同，所以常一起使用来确保图标能正确显示 -->
<script src="layui.js"></script>
<!-- 引入layui框架的JavaScript脚本文件，从当前页面所在目录获取该文件（这里假设layui.js和当前页面在同一级目录下），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">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo" style="font-size: 52px">SIMS</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a class = "layui-icon layui-icon-home" id="fresh" href="index.jsp"> 主页</a></li>
<li class="layui-nav-item "><a class = "layui-icon layui-icon-refresh-3" href="javascript:location.reload();"> 刷新</a></li>
<li class="layui-nav-item">
<a class="layui-icon layui-icon-link" href="javascript:;"> 其它</a>
<dl class="layui-nav-child">
<dd><a href="${pageContext.request.contextPath}/complaintListServlet">小吐槽</a></dd>
<dd><a href="${pageContext.request.contextPath}/notifyListToServlet">学校公告</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="${pageContext.request.contextPath}/showPhotoServlet" class="layui-nav-img">
${student.s_id} ${student.s_name}
</a>
<dl class="layui-nav-child">
<dd><a href="${pageContext.request.contextPath}/studentInfomationServlet">个人信息</a></dd>
<dd><a href="${pageContext.request.contextPath}/uploadImageServlet">修改头像</a></dd>
<dd><a href="${pageContext.request.contextPath}/logoutServlet">退出</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a class="layui-icon layui-icon-about" href="JavaScript:alertabout()"> 关于</a></li>
</ul>
<!-- 为页面主体（body）设置类名“layui-layout-body”，这个类名通常与layui框架的布局样式相关联，按照其框架规范来构建页面整体外观，可能会应用默认的背景、边距等样式 -->
<div class="layui-layout layui-layout-admin">
<!-- 创建一个div元素，并赋予其两个类名“layui-layout”和“layui-layout-admin”，这一般是layui框架中用于定义页面整体布局结构的特定类名，遵循layui框架的布局规范来划分页面不同区域，比如头部、主体、侧边栏等（具体根据框架的设定） -->
<div class="layui-header">
<!-- 创建一个用于表示页面头部的div元素，在layui框架布局里，这个区域通常用于放置如网站logo、导航栏等头部相关的元素 -->
<div class="layui-logo" style="font-size: 52px">SIMS</div>
<!-- 创建一个带有特定样式（设置字体大小为52px）的div元素，显示内容为“SIMS”，一般作为网站或系统的标识（logo），在layui框架里，这个元素通常会按照框架对.logo类的样式设定来展示，比如位置、颜色等 -->
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 创建一个无序列表（ul）元素，应用了“layui-nav”和“layui-layout-left”类名，在layui框架中，“layui-nav”用于构建导航栏，“layui-layout-left”表示该导航栏在页面布局中靠左显示，这个列表里会放置导航栏的各个菜单项 -->
<li class="layui-nav-item"><a class = "layui-icon layui-icon-home" id="fresh" href="index.jsp"> 主页</a></li>
<!-- 创建一个列表项（li）元素，应用“layui-nav-item”类名表示这是导航栏中的一个可点击项，内部包含一个超链接（a标签），超链接应用了layui框架的图标类（layui-icon layui-icon-home，表示一个主页图标），设置了id为“fresh”，链接地址指向“index.jsp”页面，显示文本为“ 主页”（前面有个空格可能是为了排版美观），点击该链接可跳转到主页 -->
<li class="layui-nav-item "><a class = "layui-icon layui-icon-refresh-3" href="javascript:location.reload();"> 刷新</a></li>
<!-- 类似上面的列表项，这里创建一个导航项用于刷新页面，超链接应用了刷新图标类（layui-icon layui-icon-refresh-3），通过设置href属性为“javascript:location.reload();”，点击时会执行JavaScript代码来重新加载当前页面 -->
<li class="layui-nav-item">
<a class="layui-icon layui-icon-link" href="javascript:;"> 其它</a>
<!-- 创建一个导航项，显示文本为“ 其它”，应用了链接图标类（layui-icon layui-icon-link），但href属性设置为“javascript:;”，暂时没有实际的跳转链接，可能后续会通过JavaScript动态添加功能，点击时目前不会有实际跳转操作 -->
<dl class="layui-nav-child">
<!-- 创建一个定义列表（dl）元素，应用“layui-nav-child”类名，在layui框架中，这个类名用于表示该列表是上面导航项的子菜单，用于展示下拉菜单等子级导航内容 -->
<dd><a href="${pageContext.request.contextPath}/complaintListServlet">小吐槽</a></dd>
<!-- 创建一个定义列表项（dd）元素，内部包含一个超链接，链接地址指向名为“complaintListServlet”的Servlet（通过EL表达式动态获取上下文路径拼接而成），显示文本为“小吐槽”，点击可跳转到对应的功能页面，可能用于查看一些吐槽信息等功能 -->
<dd><a href="${pageContext.request.contextPath}/notifyListToServlet">学校公告</a></dd>
<!-- 类似上面的dd元素，这里的超链接指向“notifyListToServlet”Servlet，显示文本为“学校公告”，用于跳转到查看学校公告的页面 -->
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<!-- 创建另一个无序列表元素，应用“layui-nav”和“layui-layout-right”类名，用于构建靠右显示的导航栏，放置一些和用户相关或者其他功能的导航项 -->
<li class="layui-nav-item">
<a href="javascript:;">
<img src="${pageContext.request.contextPath}/showPhotoServlet" class="layui-nav-img">
${student.s_id} ${student.s_name}
</a>
<!-- 创建一个导航项，超链接的href属性暂时设置为“javascript:;”无实际跳转功能（可能后续添加），内部包含一个图片元素（img），图片的src属性指向名为“showPhotoServlet”的Servlet（通过EL表达式动态获取上下文路径拼接，可能用于获取并显示用户头像），并应用“layui-nav-img”类名按照layui框架样式展示图片，后面跟着通过EL表达式显示的学生学号（${student.s_id}）和姓名（${student.s_name}），整体用于展示当前登录学生的信息 -->
<dl class="layui-nav-child">
<dd><a href="${pageContext.request.contextPath}/studentInfomationServlet">个人信息</a></dd>
<!-- 创建子菜单列表项，超链接指向“studentInfomationServlet”Servlet，显示文本为“个人信息”，点击可跳转到查看或修改个人信息的页面 -->
<dd><a href="${pageContext.request.contextPath}/uploadImageServlet">修改头像</a></dd>
<!-- 子菜单列表项，超链接指向“uploadImageServlet”Servlet，显示文本为“修改头像”，用于跳转到修改用户头像的功能页面 -->
<dd><a href="${pageContext.request.contextPath}/logoutServlet">退出</a></dd>
<!-- 子菜单列表项，超链接指向“logoutServlet”Servlet，显示文本为“退出”，点击可执行退出登录等相关操作 -->
</dl>
</li>
<li class="layui-nav-item"><a class="layui-icon layui-icon-about" href="JavaScript:alertabout()"> 关于</a></li>
<!-- 创建一个导航项，超链接应用“layui-icon layui-icon-about”图标类（表示关于图标），href属性设置为调用JavaScript函数“alertabout()”的代码，点击时会执行该函数弹出关于系统的相关信息 -->
</ul>
</div>
</div>
</div>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
element.init();
});
</script>
<script type="text/javascript">
function alertabout() {
alert("学生信息管理系统\n陈双全1812123206");
}
</script>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
element.init();
// 使用layui框架的element模块，调用其init方法进行初始化操作。在layui框架中，element模块提供很多页面元素交互相关功能，例如实现页面布局动态切换、菜单展开收起等交互效果，通过调用init方法可激活这些功能，确保页面上基于element模块构建的各种UI组件能正常工作
});
</script>
<script type="text/javascript">
function alertabout() {
alert("学生信息管理系统\n陈双全1812123206");
// 定义一个名为“alertabout”的JavaScript函数，当被调用时，会弹出一个包含特定文本信息（“学生信息管理系统”以及“陈双全1812123206”，中间换行显示）的提示框，用于展示关于系统的一些基本信息，比如系统名称、开发者相关信息等
}
</script>
</body>
</html>
</html>

214
web/WEB-INF/student/sIndex.jsp
Unescape View File

@ -1,17 +1,22 @@
<%@ 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>${html_title}</title>
<!-- 设置当前HTML页面的标题，这里使用了EL表达式（${html_title}），意味着标题的值是动态从后台传递过来的某个变量所对应的值，而不是固定的文本 -->
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
element.init();
// 使用layui框架的element模块，调用其init方法进行初始化操作。在layui框架中，element模块提供了很多页面元素交互相关的功能，例如实现页面布局的动态切换、菜单的展开收起等交互效果，通过调用init方法可以激活这些功能，确保页面上基于element模块构建的各种UI组件能够正常工作
});
</script>
<style>
.layui-card .layui-card-body .layui-icon {
.layui-card.layui-card-body.layui-icon {
display: inline-block;
width: 100%;
height: 60px;
@ -21,98 +26,145 @@
font-size: 30px;
background-color: #F8F8F8;
color: #333;
transition: all .3s;
-webkit-transition: all .3s;
transition: all.3s;
-webkit-transition: all.3s;
/* 以下是针对类名为"layui-card.layui-card-body.layui-icon"的元素设置的样式规则：
将其设置为行内块元素（display: inline-block），使其能在水平方向排列且可以设置宽高；
宽度占满父元素的100%，高度设置为60px；
通过line-height属性让内部文本垂直居中；
文本水平居中（text-align: center）；
设置圆角半径为2px，使其边角更圆润；
字体大小为30px；
背景颜色为浅灰色（#F8F8F8），文本颜色为深灰色（#333）；
定义了CSS过渡效果（transition），当元素的样式属性发生变化时，会在0.3秒内平滑过渡，同时添加了-webkit-前缀是为了兼容webkit内核的浏览器（如Chrome、Safari等） */
}
.layui-card .layui-card-body {
.layui-card.layui-card-body {
text-align: center;
/* 针对类名为"layui-card.layui-card-body"的元素设置文本水平居中样式，影响其内部包含的子元素的文本对齐方式 */
}
#notify {
text-align: left;
/* 针对id为"notify"的元素设置文本左对齐样式，覆盖可能存在的其他文本对齐规则，使其内部文本靠左显示 */
}
</style>
</head>
<body class="layui-layout-body" style="background-color: #F2F2F2">
<jsp:include page="/filterLogin.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/sHeader.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/studentNav.jsp"></jsp:include>
<div class="layui-layout layui-layout-admin">
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<div class="layui-card">
<div class="layui-card-header" id="index-function">功能</div>
<div class="layui-card-body">
<ul class="layui-row layui-col-space10 layui-this">
<li class="layui-col-xs3">
<a href="${pageContext.request.contextPath}/studentSelectCourseListServlet">
<i class="layui-icon layui-icon-survey"></i>
<cite>选课与成绩</cite>
</a>
</li>
<li class="layui-col-xs3">
<a href="${pageContext.request.contextPath}/studentOptionalCourseServlet">
<i class="layui-icon layui-icon-survey"></i>
<cite>可选课程</cite>
</a>
</li>
<li class="layui-col-xs3">
<a href="${pageContext.request.contextPath}/findStudentByPageServlet">
<i class="layui-icon layui-icon-survey"></i>
<cite>本院学生信息</cite>
</a>
</li>
<li class="layui-col-xs3">
<a href="${pageContext.request.contextPath}/teacherListServlet">
<i class="layui-icon layui-icon-user"></i>
<cite>本院教师信息</cite>
</a>
</li>
<li class="layui-col-xs3">
<a href="${pageContext.request.contextPath}/cdcListServlet">
<i class="layui-icon layui-icon-set"></i>
<cite>学院专业查询</cite>
</a>
</li>
<li class="layui-col-xs3">
<a href="${pageContext.request.contextPath}/studentInfomationServlet">
<i class="layui-icon layui-icon-set"></i>
<cite>个人信息</cite>
</a>
</li>
<li class="layui-col-xs3">
<a href="${pageContext.request.contextPath}/studentPasswordIndexServlet">
<i class="layui-icon layui-icon-survey"></i>
<cite>修改密码</cite>
</a>
</li>
<li class="layui-col-xs3">
<a href="${pageContext.request.contextPath}/fileListServlet">
<i class="layui-icon layui-icon-survey"></i>
<cite>文件列表</cite>
</a>
</li>
</ul>
<!-- 为页面主体（body）设置了类名"layui-layout-body"，同时将背景颜色设定为浅灰色（颜色值为#F2F2F2），这里的类名大概率与layui框架的布局样式相关联，按照其框架规范来构建页面的整体外观 -->
<jsp:include page="/filterLogin.jsp"></jsp:include>
<!-- 通过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>
<!-- 再次使用JSP的include指令，包含了WEB-INF/student目录下的studentNav.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，这样做主要是为了对内部元素进行一定的排版，让页面内容看起来更加规整，避免显得过于紧凑或者松散 -->
<div class="layui-card">
<!-- 创建一个layui框架的卡片（card）组件，layui的卡片组件常用于对相关内容进行分组展示，使其在页面上有比较清晰的视觉划分 -->
<div class="layui-card-header" id="index-function">功能</div>
<!-- 创建一个用于显示卡片头部的div元素，设置了id为"index-function"，显示文本为"功能"，通常用于给卡片添加标题说明，在layui框架里会按照其样式规则展示，比如有特定的背景色、字体样式等 -->
<div class="layui-card-body">
<!-- 创建一个用于显示卡片主体内容的div元素，在layui框架中，这个区域就是放置具体内容的地方 -->
<ul class="layui-row layui-col-space10 layui-this">
<!-- 创建一个无序列表（ul）元素，应用了"layui-row"、"layui-col-space10"和"layui-this"类名：
"layui-row"表示该列表按照layui框架的布局规则以行的形式进行排列；
"layui-col-space10"用于设置列表项之间的水平间距为10px；
"layui-this"可能是用于标记当前元素处于某种特定状态（比如选中状态等，具体依赖layui框架的样式设定） -->
<li class="layui-col-xs3">
<!-- 创建一个列表项（li）元素，应用"layui-col-xs3"类名，表示该元素在小屏幕（xs，一般指手机等小尺寸设备）下占父元素宽度的1/4（基于layui的响应式布局规则） -->
<a href="${pageContext.request.contextPath}/studentSelectCourseListServlet">
<!-- 创建一个超链接（a标签），链接地址指向名为"studentSelectCourseListServlet"的Servlet（通过EL表达式动态获取上下文路径拼接而成），点击该链接会跳转到对应的功能页面，用于实现相关业务操作 -->
<i class="layui-icon layui-icon-survey"></i>
<!-- 创建一个图标元素（i标签），应用了layui框架的图标类（layui-icon layui-icon-survey，表示一个特定的图标样式），用于直观展示相关功能 -->
<cite>选课与成绩</cite>
<!-- 使用<cite>标签显示文本"选课与成绩"，用于对链接对应的功能进行文字说明 -->
</a>
</li>
<li class="layui-col-xs3">
<a href="${pageContext.request.contextPath}/studentOptionalCourseServlet">
<i class="layui-icon layui-icon-survey"></i>
<cite>可选课程</cite>
</a>
<!-- 与上面的列表项类似，这个li元素也是创建一个功能链接，链接到"studentOptionalCourseServlet" Servlet，显示图标和文字说明分别为对应的图标样式和"可选课程"，用于跳转到查看可选课程的页面 -->
</li>
<li class="layui-col-xs3">
<a href="${pageContext.request.contextPath}/findStudentByPageServlet">
<i class="layui-icon layui-icon-survey"></i>
<cite>本院学生信息</cite>
</a>
<!-- 同样的结构，链接指向"findStudentByPageServlet" Servlet，显示图标和文字说明用于跳转到查询本院学生信息的页面 -->
</li>
<li class="layui-col-xs3">
<a href="${pageContext.request.contextPath}/teacherListServlet">
<i class="layui-icon layui-icon-user"></i>
<cite>本院教师信息</cite>
</a>
<!-- 链接到"teacherListServlet" Servlet，图标样式换为表示用户的图标（layui-icon layui-icon-user），文字说明为"本院教师信息"，用于查看本院教师相关信息 -->
</li>
<li class="layui-col-xs3">
<a href="${pageContext.request.contextPath}/cdcListServlet">
<i class="layui-icon layui-icon-set"></i>
<cite>学院专业查询</cite>
</a>
<!-- 链接到"cdcListServlet" Servlet，图标样式为另一种（layui-icon layui-icon-set），文字说明是"学院专业查询"，用于进行学院专业相关信息的查询操作 -->
</li>
<li class="layui-col-xs3">
<a href="${pageContext.request.contextPath}/studentInfomationServlet">
<i class="layui-icon layui-icon-set"></i>
<cite>个人信息</cite>
</a>
<!-- 链接到"studentInfomationServlet" Servlet，图标样式和文字说明用于跳转到查看或修改个人信息的页面 -->
</li>
<li class="layui-col-xs3">
<a href="${pageContext.request.contextPath}/studentPasswordIndexServlet">
<i class="layui-icon layui-icon-survey"></i>
<cite>修改密码</cite>
</a>
<!-- 链接到"studentPasswordIndexServlet" Servlet，图标样式搭配文字说明，用于进入修改密码的功能页面 -->
</li>
<li class="layui-col-xs3">
<a href="${pageContext.request.contextPath}/fileListServlet">
<i class="layui-icon layui-icon-survey"></i>
<cite>文件列表</cite>
</a>
<!-- 链接到"fileListServlet" Servlet，图标样式与文字说明对应查看文件列表的功能，点击可跳转到相应页面 -->
</li>
</ul>
</div>
</div>
<div class="layui-card">
<!-- 再创建一个layui框架的卡片组件，用于展示另一部分内容 -->
<div class="layui-card-header">学校最新公告</div>
<!-- 创建卡片头部元素，显示文本为"学校最新公告"，用于给下面的公告内容添加标题说明 -->
<c:forEach items="${notifys}" var="notify">
<!-- 使用JSTL的forEach标签来进行循环遍历操作，循环的对象是名为"notifys"的数据集合（这个集合通常是从后端传递过来的学校公告信息列表），每次循环将当前元素赋值给变量"notify" -->
<div class="layui-card-body" id="notify">${notify.notifyInfo}<p>${notify.notifyDate}</div>
<!-- 在每个循环中，创建一个用于显示卡片主体内容的div元素，设置id为"notify"（虽然这里id重复使用了，可能不太规范，但根据代码逻辑应该是想统一设置样式等），通过EL表达式展示公告的具体信息（${notify.notifyInfo}），后面跟着一个段落标签（<p>），再通过EL表达式展示公告的发布日期（${notify.notifyDate}），但这里缺少闭合的</p>标签，可能是代码遗漏，正确应该是<</p>来闭合段落标签，用于在页面上展示每条公告的详细内容和发布时间 -->
</c:forEach>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">学校最新公告</div>
<c:forEach items="${notifys}" var="notify">
<div class="layui-card-body" id="notify">${notify.notifyInfo}<p>${notify.notifyDate}</div>
</c:forEach>
</div>
</div>
</div>
<jsp:include page="/footer.jsp"></jsp:include>
<!-- 包含名为footer.jsp的页面，一般该页面用于展示页面底部的一些通用信息，比如版权声明、网站相关链接、联系方式等内容 -->
</div>
<jsp:include page="/footer.jsp"></jsp:include>
</div>
<script type="text/javascript">
$("#nav li:nth-child(1)").addClass("layui-nav-itemed");
$("#nav li:nth-child(2)").addClass("layui-nav-itemed");
$("#nav li:nth-child(3)").addClass("layui-nav-itemed");
$("#nav li:nth-child(4)").addClass("layui-nav-itemed");
$("#nav li:nth-child(5)").addClass("layui-nav-itemed");
</script>
<script type="text/javascript">
$("#nav li:nth-child(1)").addClass("layui-nav-itemed");
// 使用jQuery选择器选中页面中id为"nav"的元素下的第1个子元素li，并为其添加类名"layui-nav-itemed"，在layui框架里，这个类名可能用于控制导航菜单的展开或折叠状态，使得对应的菜单层级结构展示相应的效果，方便用户查看相关子菜单，这里是对第1个菜单项进行此操作
$("#nav li:nth-child(2)").addClass("layui-nav-itemed");
// 对id为"nav"的元素下的第2个子元素li添加"layui-nav-itemed"类名，作用同上，用于处理对应的导航菜单状态
$("#nav li:nth-child(3)").addClass("layui-nav-itemed");
// 对第3个li元素添加类名，控制对应菜单状态
$("#nav li:nth-child(4)").addClass("layui-nav-itemed");
// 对第4个li元素添加类名，控制对应菜单状态
$("#nav li:nth-child(5)").addClass("layui-nav-itemed");
// 对第5个li元素添加类名，控制对应菜单状态，具体效果都依赖layui框架对于该类名的样式和交互逻辑定义
</script>
</body>
</html>
</html>

290
web/WEB-INF/student/sInformation.jsp
Unescape View File

@ -1,162 +1,204 @@
<%@ 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">
<jsp:include page="/filterLogin.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/sHeader.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/studentNav.jsp"></jsp:include>
<div class="layui-layout layui-layout-admin">
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<span class="layui-breadcrumb">
<a href="">学生端</a>
<a href="">个人信息管理</a>
<a><cite>个人信息</cite></a>
</span>
<form class="layui-form" action="${pageContext.request.contextPath}/studentInfomationUpdateServlet" style="padding-top: 50px" method="post">
<div class="layui-form-item">
<label class="layui-form-label">学号</label>
<div class="layui-input-block">
<input type="text" readonly="readonly" name="student-id" value="${student.s_id}" required lay-verify="required" autocomplete="off" class="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">
<option selected>${student.s_college}</option>
</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>
</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>
</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">
<!-- 设置页面主体的类名为"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>
<div class="layui-form-item">
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-form-item">
<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="女">
<select name="selectCollege" readonly="readonly">
<!-- 创建一个下拉选择框（select）元素，名称为"selectCollege"，设置为只读，用于选择学院信息 -->
<option selected>${student.s_college}</option>
<!-- 创建一个下拉选项（option），设置为已选中（selected），其显示文本通过EL表达式从名为"student"的对象中获取当前学生所在学院信息进行回显，通常表示当前学生已有的学院信息，且不允许用户修改 -->
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">年龄</label>
<div class="layui-form-item">
<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">
<select name="selectDepartment" readonly="readonly">
<option selected>${student.s_department}</option>
<!-- 与上面学院的下拉框类似，这里创建系别（department）的下拉选择框，同样是只读，且默认选中当前学生所在系别信息（通过EL表达式获取），不允许用户修改 -->
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">电话</label>
<div class="layui-form-item">
<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">
<select name="selectClass" readonly="readonly">
<option selected>${student.s_class}</option>
<!-- 创建班级（class）的下拉选择框，只读，默认选中当前学生所在班级信息（通过EL表达式获取），用户不可修改 -->
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-form-item">
<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">
<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>
<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">
<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>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
<button class="layui-btn layui-btn-primary" id="inforeset">重置</button>
<span style="padding-left: 20px;">${update_msg}</span>
<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>
</div>
</form>
<jsp:include page="/footer.jsp"></jsp:include>
</form>
<jsp:include page="/footer.jsp"></jsp:include>
<!-- 包含名为footer.jsp的页面，一般用于展示页面底部的一些通用信息，比如版权声明、网站相关链接、联系方式等内容 -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#nav li:nth-child(5) dl dd:nth-child(1)").addClass("layui-this");
$("#nav li:nth-child(5)").addClass("layui-nav-itemed");
</script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
element.init();
});
</script>
<script>
//Demo
layui.use('form', function(){
<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>
<script>
var sex = "${student.s_sex}";
if (sex == '男') {
$("#idsex").attr("checked","checked");
$("#idsex2").removeAttr("checked");
} else if (sex == '女') {
$("#idsex2").attr("checked","checked");
$("#idsex").removeAttr("checked");
}else{
$("#idsex").removeAttr("checked");
$("#idsex2").removeAttr("checked");
}
</script>
<script type="text/javascript">
$(function () {
$('#inforeset').bind('click',function () {
<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");
$("#student-name").val("");
$("#student-age").val("");
$("#student-phone").val("");
$("#student-email").val("");
$("#student-address").val("");
alert("已重置！");
});
// 如果获取到的性别信息不是"男"或"女"（可能为空等情况），则将两个单选按钮的选中状态都移除
}
</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>
});
</script>
</body>
</html>
</html>

243
web/WEB-INF/student/studentAddPhoto.jsp
Unescape View File

@ -1,117 +1,172 @@
<%@ 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框架提供的样式，用于页面布局、组件美化等操作，使页面呈现layui框架定义的外观风格 -->
<link rel="stylesheet" href="./css/style.css">
<!-- 引入自定义的样式表文件style.css，同样采用相对路径引用，用于添加符合特定需求的个性化页面样式，对页面显示效果做进一步定制 -->
<link rel="stylesheet" href="./css/file.css">
<!-- 引入名为file.css的样式表文件（同样通过相对路径），可能专门用于此页面中与文件相关元素的样式设置，比如文件选择、上传等部分的样式 -->
<script src="./layui.js"></script>
<!-- 引入layui框架的JavaScript脚本文件，从当前页面所在目录获取该文件（假设layui.js与当前页面处于同一级目录），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">
<jsp:include page="/filterLogin.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/sHeader.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/studentNav.jsp"></jsp:include>
<div class="layui-layout layui-layout-admin">
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<span class="layui-breadcrumb">
<a href="">学生端</a>
<a><cite>修改头像</cite></a>
</span>
<p style="text-align: center;">
<img id="sphoto" src="${pageContext.request.contextPath}/showPhotoServlet" style="border: solid #009688;padding: 10px;margin: 20px;text-align: center;width: 100px;">
</p>
<p style="text-align: center;">
<span id="filename"></span>
<span id="filesize"></span>
</p>
<form name="formf" method="post" enctype="multipart/form-data" style="text-align: center;">
<!-- 为页面主体（body）设置类名“layui-layout-body”，同时将背景颜色设定为浅灰色（#F2F2F2），这里的类名通常与layui框架的布局样式相关联，按照其框架规范来构建页面整体外观 -->
<jsp:include page="/filterLogin.jsp"></jsp:include>
<!-- 通过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>
<!-- 再次使用JSP的include指令，包含WEB-INF/student目录下的studentNav.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><cite>修改头像</cite></a>
</span>
<!-- 创建一个layui框架提供的面包屑导航组件，通过一系列超链接（a标签）展示当前页面在整个系统中的层级路径，这里展示了从“学生端”进入到当前的“修改头像”页面，但超链接的href属性为空，可能后续需完善具体跳转地址以实现页面导航功能 -->
<p style="text-align: center;">
<!-- 创建一个段落（p）元素，并通过内联样式设置文本居中对齐，用于包裹下面的元素，使其整体在页面中居中显示 -->
<img id="sphoto" src="${pageContext.request.contextPath}/showPhotoServlet" style="border: solid #009688;padding: 10px;margin: 20px;text-align: center;width: 100px;">
<!-- 创建一个图片（img）元素，设置了id为“sphoto”，方便后续通过JavaScript操作该元素，图片的src属性指向名为“showPhotoServlet”的Servlet（通过EL表达式动态获取上下文路径拼接而成，可能用于获取并显示当前用户的头像图片），同时通过内联样式设置图片的边框样式（solid #009688表示实线边框，颜色为特定的绿色）、内边距为10px、外边距为20px、文本对齐方式为居中以及宽度为100px，使其在页面中有合适的显示效果 -->
</p>
<p style="text-align: center;">
<span id="filename"></span>
<span id="filesize"></span>
<!-- 创建一个段落元素，文本居中对齐，内部包含两个空的<span>元素，分别设置了id为“filename”和“filesize”，后续会通过JavaScript代码往这两个元素中填充选择文件的名称和大小信息 -->
</p>
<form name="formf" method="post" enctype="multipart/form-data" style="text-align: center;">
<!-- 创建一个表单（form）元素，设置其名称为“formf”，提交方法为POST，设置enctype属性为“multipart/form-data”，这是用于实现文件上传功能的必要设置，表明表单数据包含文件类型的数据，通过内联样式设置文本居中对齐，此表单用于用户选择要上传的头像文件并进行提交操作 -->
<a href="javascript:;" class="file">选择文件
<input id="selectfiles" accept="image/jpeg,image/gif" type="file" name="myfile">
<!-- 创建一个超链接（a标签），设置href属性为“javascript:;”使其点击时不进行实际的页面跳转，应用了“file”类名（可能对应特定样式），内部包含一个文件选择输入框（input，类型为file），设置了id为“selectfiles”方便后续操作，通过accept属性限制可选择的文件类型为JPEG图像和GIF图像，设置名称为“myfile”，用于在表单提交时传递文件数据 -->
</a>
<a href="javascript:;" class="file" type="submit">开始上传
<input type="submit" id="postfiles" value="upload">
<!-- 创建另一个超链接，同样href属性设置为“javascript:;”，应用“file”类名且设置类型为“submit”（虽然这里在超链接上设置提交类型不太规范，实际起提交作用的是内部的input按钮），内部包含一个提交按钮（input，类型为submit），设置了id为“postfiles”，按钮文本为“upload”，点击这个按钮会触发表单的提交操作，将选择的文件发送到服务器端 -->
</a>
</form>
<p style="text-align: center;">
<span id="msg">${update_msg}</span>
</p>
<jsp:include page="/footer.jsp"></jsp:include>
<p style="text-align: center;">
<span id="msg">${update_msg}</span>
<!-- 创建一个段落元素，文本居中对齐，内部包含一个<span>元素，设置了id为“msg”，通过EL表达式显示名为“update_msg”的变量的值，可能用于在页面上显示一些与头像更新操作相关的提示信息，比如上传成功或失败的消息等 -->
</p>
<jsp:include page="/footer.jsp"></jsp:include>
<!-- 包含名为footer.jsp的页面，一般用于展示页面底部的一些通用信息，比如版权声明、网站相关链接、联系方式等内容 -->
</div>
</div>
</div>
</div>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
element.init();
});
</script>
<script>
//Demo
layui.use('form', function(){
});
</script>
<script>
$('#selectfiles').change(function(e){
// console.log($(this).val());//val()获取到的是完整的文件路径值；C:\fakepath\js-dom.png
//前端替换图片
var fileObj = document.getElementById("selectfiles").files[0];
var filepath = window.URL.createObjectURL(fileObj);
$('#sphoto').attr('src',filepath);
$('#news').text("");
var fileMsg = e.currentTarget.files;
var fileName = fileMsg[0].name;
var fileSize = fileMsg[0].size;
var fileType = fileMsg[0].type;
$('#filename').text(fileName);
$('#filesize').text('('+getfilesize(fileSize)+')');
$('#msg').text('');
function getfilesize(size) {
if (!size)
return "";
var num = 1024.00; //byte
if (size < num)
return size + "B";
if (size < Math.pow(num, 2))
return (size / num).toFixed(2) + "K"; //kb
if (size < Math.pow(num, 3))
return (size / Math.pow(num, 2)).toFixed(2) + "M"; //M
if (size < Math.pow(num, 4))
return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
}
});
$('#postfiles').click(function(){
var fileInput = $('#selectfiles').get(0).files[0];
if (fileInput == null) {
alert("请先选择文件！");
return;
} else {
document.formf.action="${pageContext.request.contextPath}/uploadImageServlet";
}
});
</script>
</body>
</html>
<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>
$('#selectfiles').change(function(e){
// 为id为“selectfiles”的元素（即文件选择输入框）绑定“change”事件，当用户选择了新的文件时，会触发此函数执行相应操作
// console.log($(this).val());//val()获取到的是完整的文件路径值；C:\fakepath\js-dom.png
// 这行代码是用于在控制台打印出选择文件的完整路径值（目前被注释掉了），在实际调试时可查看用户选择的文件路径情况，但由于浏览器的安全限制，通常获取到的路径是类似“C:\fakepath\...”这样的假路径，实际应用中不能依赖这个路径做后续操作
//前端替换图片
var fileObj = document.getElementById("selectfiles").files[0];
// 通过DOM方法获取到用户选择的文件对象（files属性返回一个文件列表，这里取第一个文件，因为一次只能选择一个文件，假设此处只处理单个文件上传情况）
var filepath = window.URL.createObjectURL(fileObj);
// 使用浏览器的URL对象的createObjectURL方法，根据文件对象创建一个临时的URL，用于在页面上展示该文件（比如图片文件可以直接显示）
$('#sphoto').attr('src',filepath);
// 使用jQuery选择器选中id为“sphoto”的图片元素，并通过attr方法将其src属性设置为上面创建的临时URL，实现用户选择文件后在页面上即时预览图片的效果
$('#news').text("");
// 这里试图清空id为“news”的元素的文本内容，但代码中未看到该元素的定义，可能是遗留的多余代码或者后续计划添加的元素相关操作
var fileMsg = e.currentTarget.files;
// 获取当前触发事件的目标元素（即文件选择框）的文件列表，和上面获取文件对象的方式类似，但这里是通过事件对象的currentTarget属性来获取，结果是一样的，都是获取用户选择的文件信息
var fileName = fileMsg[0].name;
// 从文件列表中获取第一个文件（也就是用户选择的文件）的文件名，用于后续显示文件名信息
var fileSize = fileMsg[0].size;
// 获取文件的大小（单位为字节），同样用于后续展示文件大小相关信息
var fileType = fileMsg[0].type;
// 获取文件的类型（例如image/jpeg等），不过在代码中暂时未看到对文件类型做进一步处理，可能仅用于判断是否符合要求（前面在文件选择框设置了可接受的文件类型）
$('#filename').text(fileName);
// 使用jQuery选择器选中id为“filename”的<span>元素，并通过text方法将其文本内容设置为获取到的文件名，实现文件名在页面上的显示
$('#filesize').text('('+getfilesize(fileSize)+')');
// 选中id为“filesize”的<span>元素，将其文本内容设置为调用getfilesize函数处理文件大小后的结果（会根据文件大小转换为合适的单位并显示，如KB、MB等），括号用于让显示格式更清晰
$('#msg').text('');
// 清空id为“msg”的<span>元素的文本内容，可能是为了清除之前显示的提示信息，准备显示新的相关提示
function getfilesize(size) {
if (!size)
return "";
// 如果传入的文件大小参数为0或者未定义（即!size为真），则直接返回空字符串，表示不显示文件大小信息
var num = 1024.00; //byte
// 定义一个常量，表示字节与其他单位换算时的基数，这里以1024字节为1KB进行单位换算
if (size < num)
return size + "B";
// 如果文件大小小于1024字节，直接返回文件大小数值加上单位“B”（表示字节），例如文件大小为500字节，就显示“500B”
if (size < Math.pow(num, 2))
return (size / num).toFixed(2) + "K"; //kb
// 如果文件大小小于1024 * 1024字节（即1MB），将文件大小除以1024并保留两位小数，然后加上单位“K”（表示KB），例如文件大小为2048字节，就显示“2.00K”
if (size < Math.pow(num, 3))
return (size / Math.pow(num, 2)).toFixed(2) + "M"; //M
// 如果文件大小小于1024 * 1024 * 1024字节（即1GB），将文件大小除以1024的平方（即换算为MB）并保留两位小数，加上单位“M”（表示MB），例如文件大小为2097152字节，就显示“2.00M”
if (size < Math.pow(num, 4))
return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
// 如果文件大小小于1024 * 1024 * 1024 * 1024字节（即1TB），将文件大小除以1024的立方（即换算为GB）并保留两位小数，加上单位“G”（表示GB）
return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
// 如果文件大小大于等于1TB，将文件大小除以1024的四次方（即换算为TB）并保留两位小数，加上单位“T”（表示TB）
}
});
$('#postfiles').click(function(){
// 为id为“postfiles”的元素（即提交按钮）绑定“click”事件，当点击该按钮时，执行以下操作
var fileInput = $('#selectfiles').get(0).files[0];
// 通过jQuery选择器获取id为“selectfiles”的文件选择框元素，再通过DOM方法获取其第一个文件对象（和前面获取文件对象的方式类似），目的是获取用户选择的文件信息
if (fileInput == null) {
alert("请先选择文件！");
return;
// 如果获取到的文件对象为空（即用户没有选择文件就点击了提交按钮），则弹出一个提示框提醒用户先选择文件，并通过return语句终止后续代码的执行，避免表单提交无效的数据
} else {
document.formf.action="${pageContext.request.contextPath}/uploadImageServlet";
// 如果用户已经选择了文件，就设置名为“formf”的表单的action属性，将表单提交的目标地址设置为名为“uploadImageServlet”的Servlet（通过EL表达式动态获取上下文路径拼接而成），以便将用户选择的文件发送到服务器端进行头像上传处理
}
});
</script>
</body>
</html>

125
web/WEB-INF/student/studentNav.jsp
Unescape View File

@ -1,59 +1,86 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 这是JSP页面的指令，用于设置页面的内容类型为text/html（即HTML格式页面），同时指定字符编码为UTF-8，表明该页面使用Java语言来处理相关逻辑，确保页面能正确显示各种字符 -->
<html>
<head>
<meta charset="utf-8">
<!-- 再次明确页面的字符编码为utf-8，虽然前面的JSP指令已经设置了编码，但HTML页面中添加此<meta>标签也是一种常见的做法，用于告知浏览器页面的编码格式，增强兼容性 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 这是一个用于设置页面视口（viewport）的元标签，它的作用是让页面在移动设备上能正确显示，具体含义如下：
"width=device-width"表示页面的宽度将根据设备的屏幕宽度进行自适应调整；
"initial-scale=1"设置页面初始缩放比例为1，也就是不进行缩放显示；
"maximum-scale=1"限制页面最大缩放比例为1，防止用户过度缩放页面，保证页面布局在一定范围内保持相对稳定 -->
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test" id="nav">
<li class="layui-nav-item">
<a class="" href="javascript:;">选课信息</a>
<dl class="layui-nav-child">
<dd><a href="${pageContext.request.contextPath}/studentSelectCourseListServlet">选课与成绩</a></dd>
<dd><a href="${pageContext.request.contextPath}/studentOptionalCourseServlet">可选课程</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;">学生通讯录</a>
<dl class="layui-nav-child">
<dd><a href="${pageContext.request.contextPath}/findStudentByPageServlet">本院学生信息</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;">教师通讯录</a>
<dl class="layui-nav-child">
<dd><a href="${pageContext.request.contextPath}/teacherListServlet">本院教师信息</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;">学院专业信息</a>
<dl class="layui-nav-child">
<dd><a href="${pageContext.request.contextPath}/cdcListServlet">学院专业查询</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;">个人信息管理</a>
<dl class="layui-nav-child">
<dd><a href="${pageContext.request.contextPath}/studentInfomationServlet">个人信息</a></dd>
<dd><a href="${pageContext.request.contextPath}/studentPasswordIndexServlet">修改密码</a></dd>
<dd><a href="${pageContext.request.contextPath}/fileListServlet">文件列表</a></dd>
</dl>
</li>
</ul>
<!-- 为页面主体（body）设置类名“layui-layout-body”，这个类名通常与layui框架的布局样式相关联，按照layui框架的规范来构建页面整体外观，比如应用默认的背景、边距等样式 -->
<div class="layui-layout layui-layout-admin">
<!-- 创建一个div元素，并赋予其两个类名“layui-layout”和“layui-layout-admin”，这是layui框架中用于定义页面整体布局结构的特定类名，遵循layui框架的布局规范来划分页面不同区域，常见的会划分出如侧边栏、头部、主体内容区域等 -->
<div class="layui-side layui-bg-black">
<!-- 创建一个用于表示页面左侧侧边栏的div元素，应用了“layui-side”类名表示这是侧边栏区域，“layui-bg-black”类名则用于设置该侧边栏的背景颜色为黑色，使其在视觉上与页面其他区域区分开来 -->
<div class="layui-side-scroll">
<!-- 创建一个div元素，应用“layui-side-scroll”类名，通常在layui框架中用于处理侧边栏内容的滚动效果，当侧边栏内容较多超出可视范围时，可以通过滚动条来查看全部内容 -->
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test" id="nav">
<!-- 创建一个无序列表（ul）元素，应用了“layui-nav”和“layui-nav-tree”类名以及“lay-filter”属性和“id”属性：
“layui-nav”用于构建layui框架下的导航栏；
“layui-nav-tree”表示这是一个树形结构的导航（通常用于有层级关系的菜单，比如这里的下拉子菜单形式）；
“lay-filter”属性设置了一个名为“test”的过滤器，可在后续JavaScript代码中利用这个过滤器来对导航栏进行相关的交互操作配置，例如菜单展开收起、点击事件等；
“id”属性设置为“nav”，方便后续通过JavaScript或者CSS选择器来选中这个导航栏元素进行操作 -->
<li class="layui-nav-item">
<!-- 创建一个列表项（li）元素，应用“layui-nav-item”类名，表示这是导航栏中的一个可点击的菜单项 -->
<a class="" href="javascript:;">选课信息</a>
<!-- 创建一个超链接（a标签），href属性设置为“javascript:;”表示点击该链接时暂时不执行实际的页面跳转，而是可以通过后续添加JavaScript代码来定义点击后的具体行为，显示文本为“选课信息”，作为该菜单项的标题 -->
<dl class="layui-nav-child">
<!-- 创建一个定义列表（dl）元素，应用“layui-nav-child”类名，在layui框架中用于表示这是上面菜单项的子菜单列表，用于展示下拉菜单等子级导航内容 -->
<dd><a href="${pageContext.request.contextPath}/studentSelectCourseListServlet">选课与成绩</a></dd>
<!-- 创建一个定义列表项（dd）元素，内部包含一个超链接，链接地址指向名为“studentSelectCourseListServlet”的Servlet（通过EL表达式动态获取上下文路径拼接而成），显示文本为“选课与成绩”，点击可跳转到对应的功能页面，查看选课以及成绩相关信息 -->
<dd><a href="${pageContext.request.contextPath}/studentOptionalCourseServlet">可选课程</a></dd>
<!-- 类似上面的dd元素，这个超链接指向“studentOptionalCourseServlet”Servlet，显示文本为“可选课程”，用于跳转到查看可选课程的页面 -->
</dl>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;">学生通讯录</a>
<dl class="layui-nav-child">
<dd><a href="${pageContext.request.contextPath}/findStudentByPageServlet">本院学生信息</a></dd>
<!-- 创建一个子菜单链接，指向“findStudentByPageServlet”Servlet，显示文本为“本院学生信息”，点击可查询并展示本院学生的相关信息 -->
</dl>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;">教师通讯录</a>
<dl class="layui-nav-child">
<dd><a href="${pageContext.request.contextPath}/teacherListServlet">本院教师信息</a></dd>
<!-- 超链接指向“teacherListServlet”Servlet，显示文本为“本院教师信息”，用于查看本院教师的相关信息 -->
</dl>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;">学院专业信息</a>
<dl class="layui-nav-child">
<dd><a href="${pageContext.request.contextPath}/cdcListServlet">学院专业查询</a></dd>
<!-- 链接到“cdcListServlet”Servlet，显示文本为“学院专业查询”，用于查询学院专业相关的信息 -->
</dl>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;">个人信息管理</a>
<dl class="layui-nav-child">
<dd><a href="${pageContext.request.contextPath}/studentInfomationServlet">个人信息</a></dd>
<!-- 超链接指向“studentInfomationServlet”Servlet，显示文本为“个人信息”，点击可查看或修改个人信息 -->
<dd><a href="${pageContext.request.contextPath}/studentPasswordIndexServlet">修改密码</a></dd>
<!-- 链接到“studentPasswordIndexServlet”Servlet，显示文本为“修改密码”，用于进入修改密码的功能页面 -->
<dd><a href="${pageContext.request.contextPath}/fileListServlet">文件列表</a></dd>
<!-- 超链接指向“fileListServlet”Servlet，显示文本为“文件列表”，用于查看相关文件列表信息 -->
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
element.init();
});
</script>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
element.init();
// 使用layui框架的element模块，调用其init方法进行初始化操作。在layui框架中，element模块提供很多页面元素交互相关功能，例如实现页面布局动态切换、菜单展开收起等交互效果，通过调用init方法可激活这些功能，确保页面上基于element模块构建的各种UI组件能正常工作
});
</script>
</body>
</html>
</html>

117
web/WEB-INF/student/studentOptionalCourse.jsp
Unescape View File

@ -1,70 +1,97 @@
<%@ 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">
<jsp:include page="/filterLogin.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/sHeader.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/studentNav.jsp"></jsp:include>
<div class="layui-layout layui-layout-admin">
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<!-- 为页面主体（body）设置类名“layui-layout-body”，同时将背景颜色设定为浅灰色（#F2F2F2），这里的类名大概率与layui框架的布局样式相关联，按照其框架规范来构建页面整体外观 -->
<jsp:include page="/filterLogin.jsp"></jsp:include>
<!-- 通过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>
<!-- 再次使用JSP的include指令，包含WEB-INF/student目录下的studentNav.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属性为空，可能后续需完善具体跳转地址以实现页面导航功能 -->
<span style="color: red;margin-right: 100px;float: right;">${select_msg}</span>
<table class="layui-table" lay-filter="test">
<thead>
<tr>
<th>ID</th>
<th>课程号</th>
<th>课程名</th>
<th>课程简介</th>
<th>教师号</th>
<th>教师姓名</th>
<th>操作</th>
</tr>
</thead>
<c:forEach items="${optionalcourses}" var="optionalcourse" varStatus="s">
<!-- 创建一个<span>元素，通过内联样式设置文本颜色为红色、右边距为100px以及向右浮动，用于显示名为“select_msg”的变量的值（通过EL表达式获取，可能是用于展示一些与选课相关的提示信息，比如选课成功/失败的消息等） -->
<table class="layui-table" lay-filter="test">
<!-- 创建一个layui框架的表格组件，设置名为“test”的过滤器，该过滤器可在后续JavaScript代码中用于配置表格相关交互功能，例如实现表格行点击事件、数据筛选、排序等操作 -->
<thead>
<tr>
<td>${s.count}</td>
<td>${optionalcourse.c_id}</td>
<td>${optionalcourse.c_name}</td>
<td>${optionalcourse.c_info}</td>
<td>${optionalcourse.t_id}</td>
<td>${optionalcourse.t_name}</td>
<td><a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/doSelectCourseServlet?id=${optionalcourse.c_id}">选课</a></td>
<th>ID</th>
<th>课程号</th>
<th>课程名</th>
<th>课程简介</th>
<th>教师号</th>
<th>教师姓名</th>
<th>操作</th>
<!-- 定义表格头部的列标题，分别列出要展示的可选课程相关的各个字段，如序号（ID）、课程号、课程名、课程简介、教师号、教师姓名以及操作（用于进行选课等相关操作） -->
</tr>
</c:forEach>
</table>
<jsp:include page="/footer.jsp"></jsp:include>
</thead>
<c:forEach items="${optionalcourses}" var="optionalcourse" varStatus="s">
<!-- 使用JSTL的forEach标签进行循环遍历操作，循环的对象是名为“optionalcourses”的数据集合（通常是从后端传递过来的可选课程信息列表），每次循环将当前元素赋值给变量“optionalcourse”，同时利用“varStatus”获取循环状态信息（如当前循环次数等）并赋值给变量“s” -->
<tr>
<td>${s.count}</td>
<td>${optionalcourse.c_id}</td>
<td>${optionalcourse.c_name}</td>
<td>${optionalcourse.c_info}</td>
<td>${optionalcourse.t_id}</td>
<td>${optionalcourse.t_name}</td>
<td><a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/doSelectCourseServlet?id=${optionalcourse.c_id}">选课</a></td>
<!-- 在表格的每一行中，通过EL表达式（Expression Language，如${s.count}等）分别展示对应的数据：
${s.count}表示当前循环次数，作为序号列的值；
后面依次展示课程的课程号、课程名、课程简介、教师号、教师姓名等具体信息；
最后一列创建一个超链接（a标签），应用layui框架的按钮样式类（layui-btn layui-btn-normal，表示一个常规样式的按钮），链接地址指向名为“doSelectCourseServlet”的Servlet（通过EL表达式动态传递当前课程的ID参数，拼接在URL中），显示文本为“选课”，点击该链接可进行相应课程的选课操作 -->
</tr>
</c:forEach>
</table>
<jsp:include page="/footer.jsp"></jsp:include>
<!-- 包含名为footer.jsp的页面，一般用于展示页面底部的一些通用信息，比如版权声明、网站相关链接、联系方式等内容 -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#nav li:nth-child(1) dl dd:nth-child(2)").addClass("layui-this");
$("#nav li:nth-child(1)").addClass("layui-nav-itemed");
</script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
element.init();
});
</script>
<script type="text/javascript">
$("#nav li:nth-child(1) dl dd:nth-child(2)").addClass("layui-this");
// 使用jQuery选择器选中页面中id为“nav”的元素下的第1个子元素li下的dl元素下的第2个dd元素，并为其添加类名“layui-this”，在layui框架中，添加此名通常意味着将对应的导航菜单项标记为当前选中状态，使其呈现特定样式（如改变颜色、加粗等），表明当前所在页面功能模块对应的菜单选项
$("#nav li:nth-child(1)").addClass("layui-nav-itemed");
// 同样用jQuery选择器选中页面中id为“nav”的元素下的第1个子元素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>
</body>
</html>
</html>

47
web/WEB-INF/student/studentSelectCourseList.jsp
Unescape View File

@ -1,27 +1,44 @@
<%@ 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">
<jsp:include page="/filterLogin.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/sHeader.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/studentNav.jsp"></jsp:include>
<div class="layui-layout layui-layout-admin">
<!-- 为页面主体（body）设置类名“layui-layout-body”，同时将背景颜色设定为浅灰色（#F2F2F2），这里的类名大概率与layui框架的布局样式相关联，按照其框架规范来构建页面整体外观 -->
<jsp:include page="/filterLogin.jsp"></jsp:include>
<!-- 通过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>
<!-- 再次使用JSP的include指令，包含WEB-INF/student目录下的studentNav.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;">
<span class="layui-breadcrumb">
<a href="">学生端</a>
<a href="">选课信息</a>
<a><cite>选课与成绩</cite></a>
</span>
<!-- 新建一个div元素，并通过内联样式设置其四周内边距为15px，主要用于对内部元素进行排版，让页面内容看起来更规整，避免显得过于紧凑或松散 -->
<span class="layui-breadcrumb">
<a href="">学生端</a>
<a href="">选课信息</a>
<a><cite>选课与成绩</cite></a>
</span>
<!-- 创建一个layui框架提供的面包屑导航组件，通过一系列超链接（a标签）展示当前页面在整个系统中的层级路径，这里展示了从“学生端”进入“选课信息”，再到“选课与成绩”页面，但目前超链接的href属性为空，可能后续需完善具体跳转地址以实现页面导航功能 -->
<table class="layui-table" lay-filter="test">
<!-- 创建一个layui框架的表格组件，设置名为“test”的过滤器，该过滤器可在后续JavaScript代码中用于配置表格相关交互功能，例如实现表格行点击事件、数据筛选、排序等操作 -->
<thead>
<tr>
<th>ID</th>
@ -33,10 +50,12 @@
<th>教师号</th>
<th>教师</th>
<th>分数</th>
<!-- 定义表格头部的列标题，分别列出要展示的选课与成绩相关的各个字段，如序号（ID）、学号、学生姓名、课程号、课程名、课程简介、教师号、教师姓名以及成绩等 -->
</tr>
</thead>
<c:forEach items="${selectcourses}" var="selectcourse" varStatus="s">
<!-- 使用JSTL的forEach标签进行循环遍历操作，循环的对象是名为“selectcourses”的数据集合（通常是从后端传递过来的选课与成绩信息列表），每次循环将当前元素赋值给变量“selectcourse”，同时利用“varStatus”获取循环状态信息（如当前循环次数等）并赋值给变量“s” -->
<tr style="height: 70px;">
<td>${s.count}</td>
<td>${selectcourse.s_id}</td>
@ -47,10 +66,14 @@
<td>${selectcourse.t_id}</td>
<td>${selectcourse.t_name}</td>
<td>${selectcourse.score}</td>
<!-- 在表格的每一行中，通过EL表达式（Expression Language，如${s.count}等）分别展示对应的数据：
${s.count}表示当前循环次数，作为序号列的值；
后面依次展示选课的学号、学生姓名、课程号、课程名、课程简介、教师号、教师姓名以及成绩等具体信息 -->
</tr>
</c:forEach>
</table>
<jsp:include page="/footer.jsp"></jsp:include>
<!-- 包含名为footer.jsp的页面，一般用于展示页面底部的一些通用信息，比如版权声明、网站相关链接、联系方式等内容 -->
</div>
</div>
</div>
@ -58,16 +81,18 @@
<script type="text/javascript">
$("#nav li:nth-child(1) dl dd:nth-child(1)").addClass("layui-this");
// 使用jQuery选择器选中页面中id为“nav”的元素下的第1个子元素li下的dl元素下的第1个dd元素，并为其添加类名“layui-this”，在layui框架中，添加此名通常意味着将对应的导航菜单项标记为当前选中状态，使其呈现特定样式（如改变颜色、加粗等），表明当前所在页面功能模块对应的菜单选项
$("#nav li:nth-child(1)").addClass("layui-nav-itemed");
// 同样用jQuery选择器选中页面中id为“nav”的元素下的第1个子元素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>
</body>
</html>
</html>

149
web/WEB-INF/student/studentUpdatePassword.jsp
Unescape View File

@ -1,86 +1,115 @@
<%@ 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框架提供的样式，用于页面布局、组件美化等操作，使页面呈现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">
<jsp:include page="/filterLogin.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/sHeader.jsp"></jsp:include>
<jsp:include page="/WEB-INF/student/studentNav.jsp"></jsp:include>
<div class="layui-layout layui-layout-admin">
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<span class="layui-breadcrumb">
<a href="">学生端</a>
<a href="">个人信息管理</a>
<a><cite>修改密码</cite></a>
</span>
<form class="layui-form" action="${pageContext.request.contextPath}/studentPasswordUpdateServlet" style="padding-top: 50px" method="post">
<div class="layui-form-item">
<label class="layui-form-label">学号</label>
<div class="layui-input-block">
<input type="text" name="title" value="${student.s_id}" required readonly="readonly" lay-verify="required" autocomplete="off" class="layui-input">
<!-- 为页面主体（body）设置类名“layui-layout-body”，同时将背景颜色设定为浅灰色（#F2F2F2），这里的类名通常与layui框架的布局样式相关联，按照其框架规范来构建页面整体外观 -->
<jsp:include page="/filterLogin.jsp"></jsp:include>
<!-- 通过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>
<!-- 再次使用JSP的include指令，包含WEB-INF/student目录下的studentNav.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}/studentPasswordUpdateServlet" style="padding-top: 50px" method="post">
<!-- 创建一个layui框架的表单（form），设置其提交的目标地址为名为studentPasswordUpdateServlet的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" name="title" value="${student.s_id}" required readonly="readonly" lay-verify="required" autocomplete="off" class="layui-input">
<!-- 创建一个文本输入框（input）元素，类型为文本（type: text），名称为“title”，其值通过EL表达式从名为“student”的对象中获取（可能是从后台查询出当前登录学生的学号信息进行回显），设置为必填项（required），同时设置为只读（readonly="readonly"），通过layui框架的验证机制（lay-verify="required"）来确保用户不能留空，关闭自动完成功能（autocomplete="off"），并应用layui框架的输入框样式类（layui-input） -->
</div>
</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="${student.s_password}" readonly="readonly" placeholder="" autocomplete="off" class="layui-input">
<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="${student.s_password}" readonly="readonly" placeholder="" autocomplete="off" class="layui-input">
<!-- 创建一个文本输入框，类型为文本，名称为“student-password”，设置了id为“student-password”方便后续通过JavaScript操作该元素，输入框的值通过EL表达式获取当前学生的密码信息进行回显，设置为只读，关闭自动完成功能，应用layui框架输入框样式，这里用于展示当前密码但不允许用户修改 -->
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">新密码</label>
<div class="layui-input-block">
<input type="password" name="student-newpassword" id="student-newpassword" value="" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
<div class="layui-form-item">
<label class="layui-form-label">新密码</label>
<div class="layui-input-block">
<input type="password" name="student-newpassword" id="student-newpassword" value="" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
<!-- 创建一个密码输入框（input，类型为password），名称为“student-newpassword”，设置了id为“student-newpassword”，初始值为空，设置为必填项且通过layui框架验证机制确保必填，关闭自动完成功能，用于让用户输入新的密码信息 -->
</div>
</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="student-ennewpassword" id="student-ennewpassword" value="" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-block">
<input type="password" name="student-ennewpassword" id="student-ennewpassword" value="" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
<!-- 创建一个密码输入框，名称为“student-ennewpassword”，id为“student-ennewpassword”，初始值为空，通过layui框架验证机制确保必填，用于让用户再次输入密码进行确认，确保两次输入的新密码一致 -->
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
<span style="padding-left: 20px;">${update_msg}</span>
<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 -->
<span style="padding-left: 20px;">${update_msg}</span>
<!-- 通过EL表达式显示名为“update_msg”的变量的值，可能用于在页面上显示一些与密码更新操作相关的提示信息，比如更新成功或失败的消息等 -->
</div>
</div>
</div>
</form>
<jsp:include page="/footer.jsp"></jsp:include>
</form>
<jsp:include page="/footer.jsp"></jsp:include>
<!-- 包含名为footer.jsp的页面，一般用于展示页面底部的一些通用信息，比如版权声明、网站相关链接、联系方式等内容 -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#nav li:nth-child(5) dl dd:nth-child(2)").addClass("layui-this");
$("#nav li:nth-child(5)").addClass("layui-nav-itemed");
</script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
element.init();
});
</script>
<script type="text/javascript">
$("#nav li:nth-child(5) dl dd:nth-child(2)").addClass("layui-this");
// 使用jQuery选择器选中页面中id为“nav”的元素下的第5个子元素li下的dl元素下的第2个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(){
});
</script>
<script>
//Demo
layui.use('form', function(){
// 使用layui框架的form模块，后续可以在这个回调函数内部编写与表单相关的交互逻辑代码，不过目前这里没有具体内容，可能是预留的用于进一步开发表单验证、提交等相关功能的地方
});
</script>
</body>
</html>
</html>
Write Preview
Loading…
Cancel
Save