|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<!-- JSP页面指令，用于设置页面的相关属性。
|
|
|
- “contentType”属性指定页面内容类型为“text/html”，表明页面以HTML格式展示内容。
|
|
|
- “charset=UTF-8”设置字符编码为UTF-8，确保能正确处理和显示各类字符（如中文等），避免出现乱码问题，保证页面内容正常展示。
|
|
|
- “language=java”说明该JSP页面内部逻辑基于Java语言实现，比如与服务器交互、处理业务数据等操作会使用Java代码来完成。 -->
|
|
|
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<!-- 引入JSTL（JavaServer Pages Standard Tag Library）核心标签库，通过设置前缀“c”，后续可以使用以“c”开头的JSTL标签。这些标签能方便地实现循环遍历、条件判断、数据输出等功能，增强JSP页面处理动态数据和展示内容的灵活性，让页面可以根据不同情况呈现相应的信息。 -->
|
|
|
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>本院学生信息</title>
|
|
|
<!-- 设置HTML页面的标题，该标题会显示在浏览器标题栏中，让用户明确知晓页面的主要功能，这里表示是用于展示“本院学生信息”相关内容的页面。 -->
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入Layui框架的样式文件，通过相对路径“./css/layui.css”定位对应的CSS文件，该文件定义了Layui框架相关组件（如表格、按钮、表单等元素）的样式规则，使页面运用Layui框架的元素按预设样式展示，保持页面整体风格统一、美观。 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入自定义的样式文件“style.css”，开发人员可在其中对页面样式进行个性化定制，例如覆盖Layui框架部分默认样式，或添加特定的布局、颜色搭配等样式设置，使其符合项目的特定设计需求。 -->
|
|
|
<script src="./layui.js"></script>
|
|
|
<!-- 引入Layui框架的JavaScript核心文件，借助这个文件，页面可调用Layui框架提供的各种JavaScript功能，像弹出层展示、表单验证、页面元素交互等，为页面添加丰富的交互性和动态效果，提升用户操作体验。 -->
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
|
|
<!-- 从CDN（内容分发网络）引入jQuery库的精简版本，jQuery是常用的JavaScript库，能简化HTML文档遍历、事件处理、动画效果创建以及AJAX交互等操作，方便开发人员操作DOM元素，实现各种交互功能，进一步增强页面动态交互性。 -->
|
|
|
</head>
|
|
|
<body class="layui-layout-body" style="background-color: #F2F2F2">
|
|
|
<!-- 为页面主体设置样式类为“layui-layout-body”，并通过内联样式指定背景颜色为“#F2F2F2”，按照Layui框架的样式规范定义主体部分外观风格，营造特定视觉背景，符合项目统一的页面设计要求，便于后续布局页面内容。 -->
|
|
|
<jsp:include page="/filterLogin.jsp"></jsp:include>
|
|
|
<!-- 通过JSP的“include”指令包含名为“filterLogin.jsp”的页面，该页面通常用于处理用户登录验证逻辑，判断用户是否已登录，未登录时引导用户跳转到登录页面，以此控制页面访问权限，保障系统安全和数据合法性。 -->
|
|
|
<jsp:include page="/WEB-INF/teacher/tHeader.jsp"></jsp:include>
|
|
|
<!-- 包含“WEB-INF/teacher/tHeader.jsp”页面，一般用于定义教师端页面的头部区域，包含如页面标题、导航栏、用户信息展示等元素，构建出页面头部的布局结构，使页面头部呈现规范的样式和功能。 -->
|
|
|
<jsp:include page="/WEB-INF/teacher/teacherNav.jsp"></jsp:include>
|
|
|
<!-- 包含“WEB-INF/teacher/teacherNav.jsp”页面，大概率用于展示教师端的导航菜单，方便教师在不同功能模块（如课程管理、学生管理、个人信息管理等）间切换操作，实现页面功能的导航跳转，提高操作便利性。 -->
|
|
|
<div class="layui-layout layui-layout-admin">
|
|
|
<!-- 创建采用Layui框架的布局容器，使用“layui-layout”和“layui-layout-admin”样式类，按Layui框架提供的布局模式规划页面布局，常用于后台管理系统，有着清晰规范的分区结构，便于组织不同功能内容。 -->
|
|
|
<div class="layui-body">
|
|
|
<!-- 在Layui布局容器内定义页面主体内容区域，该区域依Layui框架布局规则自适应显示，用于承载具体业务相关内容，像下面展示本院学生信息的表单、表格及分页等内容。 -->
|
|
|
<!-- 内容主体区域 -->
|
|
|
<div style="padding: 15px;">
|
|
|
<!-- 创建带有内边距（上下左右均为15px）的div容器，通过设置内边距让内部内容在页面中有空白间隔，使布局更美观易读，便于对内部元素排版布局，避免内容显得拥挤。 -->
|
|
|
<span class="layui-breadcrumb">
|
|
|
<!-- 使用Layui框架的面包屑组件，向用户展示页面的导航路径，清晰呈现当前页面在系统中的位置层级关系，方便用户了解所处功能位置及如何进行相关操作，提升导航便利性。 -->
|
|
|
<a href="">教师端</a>
|
|
|
<!-- 面包屑中的第一个链接，通常指向教师端首页或入口页面，不过此处没设具体链接地址（可能后续完善），点击理论上可返回教师端主要界面。 -->
|
|
|
<a href="">学生通讯录</a>
|
|
|
<!-- 面包屑中的第二个链接，指向学生通讯录相关页面，可能是学生信息总览或分类展示页面等，同样暂无具体链接地址，点击可进入对应界面。 -->
|
|
|
<a><cite>本院学生信息</cite></a>
|
|
|
<!-- 面包屑中的最后一个元素，显示当前页面具体功能为“本院学生信息”，仅作标识展示，告知用户所在功能位置，一般不可点击。 -->
|
|
|
</span>
|
|
|
<form style="padding-top: 20px;" action="${pageContext.request.contextPath}/findStudentByPageServlet" method="post">
|
|
|
<!-- 创建表单，设置顶部内边距为20px使表单有垂直间距，表单提交地址通过EL表达式动态指向“findStudentByPageServlet”这个Servlet，意味着表单提交时数据会发往此处处理，提交方法为“post”，常用于提交较大量或需保密的数据。 -->
|
|
|
<div class="layui-form-item">
|
|
|
<!-- 在表单内创建Layui框架的表单项目容器，用于对单个输入项分组和布局，方便统一管理和设置样式，使每个输入项在页面中规范显示。 -->
|
|
|
<div class="layui-inline">
|
|
|
<!-- 创建行内块级元素容器，用于让内部元素在行内排列，方便在一行内放置多个表单输入项及按钮等元素，实现紧凑的布局效果。 -->
|
|
|
<label class="layui-form-label" style="width: auto;">学号</label>
|
|
|
<!-- 创建表单标签，用于显示输入项对应的提示文本，此处提示用户输入“学号”信息，设置宽度为自动适应内容宽度。 -->
|
|
|
<div class="layui-input-inline">
|
|
|
<!-- 创建放置输入框的行内块级容器，按Layui框架布局规则，输入框会在此合理显示，确保页面布局整齐，与其他行内元素排列有序。 -->
|
|
|
<input type="tel" name="s_id" value="${condition.s_id[0]}" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建电话号码类型的输入框，设置名称为“s_id”，通过EL表达式将“condition.s_id[0]”（可能是从服务器端传递过来的初始学号值）作为初始值显示，关闭自动完成功能，应用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">
|
|
|
<!-- 类似学号输入框，创建用于输入姓名的文本输入框，名称为“s_name”，初始值通过EL表达式显示（可能来自服务器端传递的初始值），关闭自动完成功能，用户可输入或修改姓名内容。 -->
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-input-inline">
|
|
|
<!-- 再次创建行内块级容器，用于放置按钮等元素，保持布局的连贯性和合理性。 -->
|
|
|
<button type="submit" class="layui-btn">查询</button>
|
|
|
<!-- 创建使用Layui框架样式的按钮，文本显示为“查询”，类型为“submit”，意味着点击该按钮会触发表单提交操作，将用户输入的学号、姓名等信息发往指定的“findStudentByPageServlet”处理，以获取符合条件的学生信息。 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
<table class="layui-table" lay-filter="test">
|
|
|
<!-- 创建使用Layui框架样式的表格，设置过滤器名称为“test”，用于后续JavaScript代码绑定表格相关事件，应用“layui-table”样式类使其外观符合Layui框架的表格风格，便于统一页面风格及进行交互操作。 -->
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<!-- 创建表格中的表头行，用于放置各列的标题单元格（th元素），定义表格列的名称和顺序。 -->
|
|
|
<th>ID</th>
|
|
|
<!-- 表头单元格，标题为“ID”，具体含义可能是每条学生记录在系统中的唯一标识序号等，用于区分不同学生记录，后续列会展示对应学生的详细信息。 -->
|
|
|
<th>学号</th>
|
|
|
<!-- 表头单元格，显示“学号”标题，对应列展示学生的学号信息，方便识别和查找特定学生。 -->
|
|
|
<th>学院</th>
|
|
|
<!-- 表头单元格，标题为“学院”，所在列呈现学生所属学院信息，帮助了解学生所在学院情况。 -->
|
|
|
<th>系别</th>
|
|
|
<!-- 表头单元格，显示“系别”标题，其列展示学生所在系别的相关信息，进一步细化学生所属专业范畴。 -->
|
|
|
<th>班级</th>
|
|
|
<!-- 表头单元格，标题为“班级”，对应列展示学生所在班级信息，便于在学院、系别基础上精准定位学生所在班级。 -->
|
|
|
<th>姓名</th>
|
|
|
<!-- 表头单元格，显示“姓名”标题，所在列展示学生的具体姓名，方便直观认识学生。 -->
|
|
|
<th>性别</th>
|
|
|
<!-- 表头单元格，标题为“性别”，其列展示学生的性别信息，属于基本个人信息范畴。 -->
|
|
|
<th>年龄</th>
|
|
|
<!-- 表头单元格，标题为“年龄”，对应列展示学生的年龄情况，也是常见的个人信息内容。 -->
|
|
|
<th>城市</th>
|
|
|
<!-- 表头单元格，标题为“城市”，所在列展示学生家庭所在城市等地址相关信息，丰富对学生的了解维度。 -->
|
|
|
<th>手机号</th>
|
|
|
<!-- 表头单元格，显示“手机号”标题，其列展示学生的手机号码信息，便于联系沟通。 -->
|
|
|
<th>邮箱</th>
|
|
|
<!-- 表头单元格，标题为“邮箱”，对应列展示学生的邮箱地址信息，同样可用于联系或发送相关信息等用途。 -->
|
|
|
</tr>
|
|
|
</thead>
|
|
|
|
|
|
<c:forEach items="${pb.list}" var="student" varStatus="s">
|
|
|
<!-- 使用JSTL的“forEach”标签进行循环遍历操作，“items”属性指定要遍历的集合为“pb.list”（可能是从服务器端获取并封装好的当前页学生信息列表），“var”属性定义变量“student”用于接收每次循环取出的学生信息元素，“varStatus”定义变量“s”记录循环状态（如当前循环次数等）。 -->
|
|
|
<tr style="height: 70px;">
|
|
|
<!-- 在循环体内创建表格的每一行，设置行高为70px，用于展示具体学生的各项信息，每循环一次生成一行数据展示在表格中。 -->
|
|
|
<td>${s.count}</td>
|
|
|
<!-- 通过EL表达式输出循环状态变量“s”的“count”属性，即当前循环次数，作为序号展示在表格中，方便查看每行数据顺序及整体数据量情况。 -->
|
|
|
<td>${student.s_id}</td>
|
|
|
<!-- 利用EL表达式输出从集合元素（赋值给“student”变量）中获取的学号信息，将具体学号值显示在表格对应单元格内，便于识别学生。 -->
|
|
|
<td>${student.s_college}</td>
|
|
|
<!-- 同样使用EL表达式输出学生所属学院信息，展示在表格相应单元格，帮助了解学生所在学院。 -->
|
|
|
<td>${student.s_department}</td>
|
|
|
<!-- 通过EL表达式输出学生所在系别信息，在表格对应单元格呈现，进一步明确学生专业相关情况。 -->
|
|
|
<td>${student.s_class}</td>
|
|
|
<!-- 输出学生所在班级信息到表格单元格，方便精准定位学生所在班级情况。 -->
|
|
|
<td>${student.s_name}</td>
|
|
|
<!-- 展示学生姓名信息到表格相应单元格，直观呈现学生个人信息。 -->
|
|
|
<td>${student.s_sex}</td>
|
|
|
<!-- 输出学生性别信息到表格单元格，作为基本个人信息展示。 -->
|
|
|
<td>${student.s_age}</td>
|
|
|
<!-- 展示学生年龄信息到表格对应单元格，属于常见个人信息展示内容。 -->
|
|
|
<td>${student.s_address}</td>
|
|
|
<!-- 通过EL表达式输出学生家庭所在城市等地址相关信息，丰富对学生情况的了解维度。 -->
|
|
|
<td>${student.s_phone}</td>
|
|
|
<!-- 输出学生手机号码信息到表格单元格，便于联系沟通等用途。 -->
|
|
|
<td>${student.s_email}</td>
|
|
|
<!-- 展示学生邮箱地址信息到表格对应单元格，可用于联系或发送相关信息等操作。 -->
|
|
|
</tr>
|
|
|
</c:forEach>
|
|
|
</table>
|
|
|
<ul>
|
|
|
<!-- 创建无序列表，用于放置分页相关的链接和页码显示元素，实现分页导航功能。 -->
|
|
|
<c:if test="${pb.currentPage == 1}">
|
|
|
<!-- 使用JSTL的“if”条件判断标签，判断当前页码（“pb.currentPage”，可能是从服务器端传递过来表示当前显示的页码信息）是否等于1，如果是则执行下面的内容。 -->
|
|
|
<a href ="javascript:return false;">
|
|
|
<!-- 创建链接元素，设置链接地址为“javascript:return false;”，意味着点击时不会进行实际的页面跳转，通常用于禁用当前链接，在这里就是禁用上一页链接（因为当前已经是第一页了）。 -->
|
|
|
</c:if>
|
|
|
<c:if test="${pb.currentPage!= 1}">
|
|
|
<!-- 另一个“if”条件判断，当当前页码不等于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]}">
|
|
|
<!-- 创建链接元素，链接地址通过EL表达式动态生成，指向“findStudentByPageServlet”这个Servlet，并传递当前页码减1作为新页码（实现上一页功能），同时传递每页显示行数、学号、姓名等查询条件参数，点击可跳转到上一页对应的数据展示页面。 -->
|
|
|
</c:if>
|
|
|
<li class="page-li">上一页</li></a>
|
|
|
<!-- 创建列表项元素，应用样式类“page-li”（可能是自定义的用于分页链接样式的类），文本显示为“上一页”，作为上一页的链接文本展示，点击时根据上述链接地址进行跳转（如果链接地址有效）。 -->
|
|
|
</a>
|
|
|
<c:forEach begin="1" end="${pb.totalPage}" var="i">
|
|
|
<!-- 使用“forEach”标签进行循环遍历，从1开始到总页数（“pb.totalPage”，可能是从服务器端获取的总页码数量）结束，定义变量“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>
|
|
|
<!-- 创建链接元素，链接地址指向“findStudentByPageServlet”并传递当前页码等参数，在链接内创建列表项元素，应用“page-li”样式类并额外设置背景色、圆角、文字颜色等样式，使当前页码突出显示，文本显示为页码数字“i”，点击可跳转到对应页码的数据展示页面。 -->
|
|
|
</c:if>
|
|
|
<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>
|
|
|
<!-- 创建链接元素，链接地址类似上述 |
