|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<!-- 上述两行是JSP页面相关的指令：
|
|
|
第一行用于设置此JSP页面的内容类型为text/html（即HTML格式页面），指定字符编码为UTF-8，同时表明该页面使用Java语言来处理页面中的相关逻辑。
|
|
|
第二行引入了JSTL（JavaServer Pages Standard Tag Library）的核心标签库，给其定义的前缀是"c"，后续就能通过这个前缀来使用JSTL提供的各类标签，例如用于循环遍历、条件判断等操作的标签，便于在JSP页面中灵活处理动态数据 -->
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>学生信息查询</title>
|
|
|
<!-- 设置当前HTML页面的标题为"学生信息查询"，这个标题通常会显示在浏览器的标题栏上，让用户明确当前页面的主要功能 -->
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入layui框架的样式表文件，通过相对路径（从当前页面所在目录下的css文件夹中查找）来应用layui框架提供的样式，可用于页面布局、组件美化等操作，使页面呈现出特定的外观风格 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入自定义的样式表文件style.css，同样采用相对路径引用方式，用于添加一些符合特定需求的个性化页面样式，对页面的显示效果进行进一步定制 -->
|
|
|
<script src="./layui.js"></script>
|
|
|
<!-- 引入layui框架的JavaScript脚本文件，从当前页面所在目录下获取该文件，layui脚本为页面提供了众多交互功能以及各种组件支持，例如实现菜单交互、页面元素动态展示等功能 -->
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
|
|
<!-- 从CDN（内容分发网络）引入jQuery库的最小化版本，jQuery是一个广泛使用的JavaScript库，它能够简化在页面中对DOM元素的操作、事件处理以及实现各种动画效果等，方便开发人员编写JavaScript代码来实现页面交互逻辑 -->
|
|
|
</head>
|
|
|
<body class="layui-layout-body" style="background-color: #F2F2F2">
|
|
|
<!-- 为页面主体（body）设置了类名"layui-layout-body"，同时将背景颜色设定为浅灰色（颜色值为#F2F2F2），这里的类名大概率与layui框架的布局样式相关联，按照其框架规范来构建页面的整体外观 -->
|
|
|
<jsp:include page="/filterLogin.jsp"></jsp:include>
|
|
|
<!-- 通过JSP的include指令包含名为filterLogin.jsp的页面内容，通常这个页面用于处理用户登录相关的验证逻辑或者展示登录相关的界面元素，比如登录表单等，以此确保只有登录后的用户才能访问后续页面内容 -->
|
|
|
<jsp:include page="/WEB-INF/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>
|
|
|
</form>
|
|
|
|
|
|
|
|
|
<table class="layui-table" lay-filter="test">
|
|
|
<!-- 创建一个layui框架的表格组件，设置了一个名为"test"的过滤器，该过滤器可以在后续的JavaScript代码中用于配置表格相关的交互功能，例如实现表格行的点击事件、数据筛选、排序等操作 -->
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>ID</th>
|
|
|
<th>学号</th>
|
|
|
<th>学院</th>
|
|
|
<th>系别</th>
|
|
|
<th>班级</th>
|
|
|
<th>姓名</th>
|
|
|
<th>性别</th>
|
|
|
<th>年龄</th>
|
|
|
<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>
|
|
|
<td>${student.s_college}</td>
|
|
|
<td>${student.s_department}</td>
|
|
|
<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>
|
|
|
<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}">
|
|
|
<!-- 使用JSTL的条件判断标签（c:if）来判断当前页码（从名为"pb"的对象中获取当前页码属性）是否等于1，如果是，则执行下面的代码块 -->
|
|
|
<a href ="javascript:return false;">
|
|
|
<!-- 创建一个超链接（a标签），但通过设置href属性为"javascript:return false;"使其点击时不执行任何实际跳转操作，通常用于禁用当前不可用的上一页链接（当在第一页时，没有上一页了） -->
|
|
|
</c:if>
|
|
|
<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}">
|
|
|
<!-- 如果当前页码不等于循环中的页码"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;">
|
|
|
<!-- 创建一个超链接，设置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]}">
|
|
|
<!-- 创建一个超链接，链接地址指向名为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");
|
|
|
// 使用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框架里，这个类名可能用于控制导航菜单的展开或折叠状态，使得对应的菜单层级结构展示相应的效果，方便用户查看相关子菜单 --> |
