|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<!-- JSP页面指令，用于设置页面的多项属性：
|
|
|
- “contentType”属性将页面内容类型设定为“text/html”，意味着这个页面会以HTML格式来呈现内容，这是网页内容展示的常见格式。
|
|
|
- “charset=UTF-8”明确了字符编码为UTF-8，通过这样的设置，页面能够正确处理和显示各种字符，像中文等非ASCII字符也不会出现乱码情况，从而保障页面内容的正常展现。
|
|
|
- “language=java”表明该JSP页面内部的业务逻辑是通过Java语言来实现的，例如可以在页面中嵌入Java代码片段进行诸如与服务器端的数据交互、对业务数据的处理等操作。 -->
|
|
|
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<!-- 引入JSTL（JavaServer Pages Standard Tag Library）核心标签库，通过指定“prefix”属性为“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功能了。比如，可以实现弹出层的展示、对表单进行验证、处理页面元素之间的交互操作（像点击按钮触发特定的事件、动态地显示或隐藏某些元素等）等功能，借助Layui框架的相关API，能够为页面添加丰富多样的交互性和动态效果，从而提升用户在使用页面过程中的体验感。 -->
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
|
|
<!-- 从CDN（内容分发网络）引入jQuery库的精简版本，jQuery是一款非常流行且功能强大的JavaScript库，它极大地简化了在HTML页面中进行DOM（Document Object Model，文档对象模型）操作的复杂度，像方便地遍历HTML文档中的元素、处理各种页面事件（例如鼠标的点击、键盘的输入等事件）、创建动画效果以及实现AJAX（Asynchronous JavaScript and XML，异步的JavaScript和XML）交互等操作，都可以通过使用jQuery库轻松地实现，这有助于开发人员更加便捷地在页面中构建各种交互功能，进一步增强页面整体的动态交互体验。 -->
|
|
|
</head>
|
|
|
<body class="layui-layout-body" style="background-color: #F2F2F2">
|
|
|
<!-- 为页面主体设置样式类为“layui-layout-body”，同时通过内联样式设定背景颜色为“#F2F2F2”，这是按照Layui框架的样式规范来对页面主体部分的外观风格进行定义的，使得页面呈现出特定的背景颜色，有助于营造出整体统一的视觉效果，并且方便后续依据Layui框架既定的布局和样式规则来组织和展示页面中的其他各种内容元素。 -->
|
|
|
<jsp:include page="/filterLogin.jsp"></jsp:include>
|
|
|
<!-- 使用JSP的“include”指令将名为“filterLogin.jsp”的页面包含进来，通常情况下，这个“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;">
|
|
|
<!-- 创建一个带有内边距的div容器，通过设置“padding: 15px;”这样的内边距样式，意味着在这个容器的四周（也就是上、下、左、右四个方向）都会留出15像素的空白空间，这样做的好处是可以让容器内部的内容在页面中展示的时候有一定的间隔，使得页面的布局更加美观、易读，也更便于对内部的各个元素进行排版布局操作，避免内容显得过于拥挤，从而提升用户查看和操作页面内容时的体验感。 -->
|
|
|
<span class="layui-breadcrumb">
|
|
|
<!-- 使用Layui框架的面包屑组件，其最主要的作用就是向用户清晰地展示当前页面的导航路径，让用户能够直观地了解当前页面在整个系统中的位置层级关系，通过面包屑组件所展示出来的路径信息，用户可以清楚地知道自己是如何一步步进入到当前这个“本院教师信息”页面的，同时也方便用户在需要的时候，能够按照这个路径进行回退或者跳转到相关的上级页面等操作，有效地提升了页面的导航便利性以及用户对整个系统结构的理解程度。 -->
|
|
|
<a href="">教师端</a>
|
|
|
<!-- 面包屑中的第一个链接，通常情况下它是指向教师端的首页或者是整个教师端功能的主要入口页面的，不过在这里暂时没有设置具体的链接地址（可能后续会根据实际情况进一步去完善它），从理论上来说，用户点击该链接是可以引导其返回教师端的核心界面的，也就是回到一个相对比较顶层的功能页面位置上。 -->
|
|
|
<a href="">教师通讯录</a>
|
|
|
<!-- 面包屑中的第二个链接，它所指向的是与教师通讯录相关的页面，这个页面可能是教师通讯录的总览页面或者是对教师信息进行分类展示的列表页面等相关页面，同样在这里暂时也没有设定具体的链接地址，一般情况下用户点击该链接就可以进入到对应的教师通讯录相关的界面中，进而去查看更详细的教师信息相关内容。 -->
|
|
|
<a><cite>本院教师信息</cite></a>
|
|
|
<!-- 面包屑中的最后一个元素，明确地显示出当前页面的具体功能是“本院教师信息”，它主要起到一个标识当前所在功能位置的作用，通常情况下这个元素是不可点击的，仅仅是作为文字提示信息展示给用户，告知用户当前所处的具体业务功能页面是什么。 -->
|
|
|
</span>
|
|
|
<table class="layui-table" lay-filter="test">
|
|
|
<!-- 创建一个使用Layui框架样式的表格，通过应用“layui-table”样式类使得表格的外观符合Layui框架所定义的表格风格，整体看上去会更加美观、专业，并且能够与整个系统的界面风格保持一致性要求。同时，利用“lay-filter”属性设置了一个过滤器名称为“test”，这个过滤器在后续的JavaScript代码中可以用于绑定表格相关的各种事件（例如当用户点击某一行数据时触发的事件、对表格中的数据进行排序时触发的事件、对单元格内容进行编辑时触发的事件等等），方便实现对表格的交互操作以及数据处理等功能，进而增强表格在实际使用过程中的实用性和用户交互性。 -->
|
|
|
<thead>
|
|
|
<!-- 定义表格的表头部分，这部分主要是用于清晰地展示出各列所代表的标题信息，让用户在查看表格中的具体数据时，一眼就能明白每一列数据的含义以及所代表的内容属性，起到对数据列进行说明的作用，便于用户能够快速地理解和查看表格中所展示的具体数据内容。 -->
|
|
|
<tr>
|
|
|
<!-- 创建表格中的一行，该行的作用是用于放置表头单元格（也就是th元素），每个th元素会对应表格中的一列标题，按照从左到右的顺序依次排列，这样就形成了一个完整的表头行结构。 -->
|
|
|
<th>ID</th>
|
|
|
<!-- 表头单元格，标题为“ID”，此处的“ID”具体含义可能是每条教师记录在系统中的唯一标识编号，或者是按照一定规则生成的序号等，具体的含义要根据业务系统的设计需求来确定，其所在的列后续会展示相应的标识信息，方便对不同的教师记录进行区分和索引查找。 -->
|
|
|
<th>工号</th>
|
|
|
<!-- 表头单元格，显示的标题是“工号”，对应列将会展示具体的教师工号信息，通过工号用户可以直观地了解到每个教师的基本编号，便于识别和区分不同的教师。 -->
|
|
|
<th>姓名</th>
|
|
|
<!-- 表头单元格，标题为“姓名”，所在列会呈现出相应教师的具体姓名信息，这是最基本也是最直观的教师个人信息，方便用户对教师进行识别和称呼。 -->
|
|
|
<th>性别</th>
|
|
|
<!-- 表头单元格，显示“性别”这一标题，其对应的表格列用于展示具体的教师性别信息，这属于教师的基本个人信息范畴，有助于更全面地了解教师情况。 -->
|
|
|
<th>文化程度</th>
|
|
|
<!-- 表头单元格，标题为“文化程度”，所在列会展示教师的文化程度相关信息，比如学历水平等内容，对于了解教师的专业素养等方面有一定帮助。 -->
|
|
|
<th>职称</th>
|
|
|
<!-- 表头单元格，标题为“职称”，对应的表格列用于展示教师的职称信息，职称通常反映了教师在专业领域内的级别和能力情况，是衡量教师专业水平的一个重要指标。 -->
|
|
|
</tr>
|
|
|
</thead>
|
|
|
|
|
|
<c:forEach items="${teachers}" var="teacher" varStatus="t">
|
|
|
<!-- 使用JSTL（JavaServer Pages Standard Tag Library）的“forEach”标签来进行循环遍历操作。
|
|
|
- “items”属性指定了要遍历的集合对象，在这里就是名为“teachers”的集合（这个集合通常是在服务器端，比如对应的Servlet中通过查询数据库或者其他数据存储方式获取到的教师相关数据，然后将这些数据封装成集合的形式，再设置并传递到当前的JSP页面中来的）。
|
|
|
- “var”属性定义了一个变量名“teacher”，在每次循环的过程中，会从“teachers”集合里依次取出每一个元素，并将当前取出的元素赋值给这个变量，方便在循环体内部使用该变量来获取元素中的具体数据内容，例如教师的各个属性信息等。
|
|
|
- “varStatus”属性则是定义了一个循环状态变量“t”，这个变量可以获取到循环的一些状态信息，例如当前循环的次数、是否是第一次或者最后一次循环等，在这里主要是利用它的“count”属性（也就是当前循环的次数）来展示序号等相关信息，以此增强表格数据展示的可读性，让用户更清晰地查看每一行数据的顺序以及整体的数据数量情况。 -->
|
|
|
<tr style="height: 70px;">
|
|
|
<!-- 在循环体内部创建表格的每一行，用于展示具体的教师相关数据内容，每一次循环就会生成一行数据展示在表格中，并且通过设置“style="height: 70px;"”为每行设置了一个固定的行高，使表格看上去更加规整，通过这样的循环操作，就可以将集合中的所有教师数据逐行地展示出来，从而形成一个完整的数据表格展示效果。 -->
|
|
|
<td>${t.count}</td>
|
|
|
<!-- 通过EL表达式（Expression Language）输出循环状态变量“t”的“count”属性，也就是当前循环的次数，将其作为序号展示在表格的这一单元格中，方便用户能够清晰地查看每一行数据的顺序以及整体的数据数量情况，使得数据在表格中的展示更加有条理，便于用户快速地定位和查看特定行的数据内容。 -->
|
|
|
<td>${teacher.t_id}</td>
|
|
|
<!-- 利用EL表达式输出从集合元素（赋值给“teacher”变量）中获取的工号信息，将具体的教师工号值显示在表格对应的单元格内，以便用户直观地看到每一个教师的具体工号，方便对教师进行识别和区分。 -->
|
|
|
<td>${teacher.t_name}</td>
|
|
|
<!-- 同样使用EL表达式输出集合元素中包含的姓名信息，在表格相应的单元格中展示具体的教师姓名内容，使得用户可以清楚地知道每一行数据对应的是哪一位教师，便于进行查看和管理等操作。 -->
|
|
|
<td>${teacher.t_sex}</td>
|
|
|
<!-- 通过EL表达式输出集合元素里的性别信息，将教师的性别信息展示在表格对应的单元格中，让用户能够了解到教师的这一基本个人信息情况。 -->
|
|
|
<td>${teacher.t_education}</td>
|
|
|
<!-- 利用EL表达式输出教师的文化程度相关信息，将学历水平等文化程度内容展示在表格对应的单元格中，帮助用户进一步了解教师的专业素养等方面的情况。 -->
|
|
|
<td>${teacher.t_title}</td>
|
|
|
<!-- 通过EL表达式输出教师的职称信息，将职称相关内容展示在表格对应的单元格中，便于用户知晓教师在专业领域内的级别和能力情况。 -->
|
|
|
</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");
|
|
|
// 使用jQuery选择器来定位页面中特定的元素，具体选择的是id为“nav”的元素下的第三个li元素内的dl元素中的第一个dd元素，然后为其添加“layui-this”样式类。这么做大概率是为了在导航菜单中标记当前选中的菜单项（依据页面本身的导航结构和样式设置逻辑来确定），使其呈现出被选中的视觉效果，例如改变颜色、加粗等样式变化，从而清晰地表明当前所在的功能页面对应的导航位置，方便用户直观地知晓当前所处的功能模块在整个导航体系中的位置关系。
|
|
|
$("#nav li:nth-child(3)").addClass("layui-nav-itemed");
|
|
|
// 同样利用jQuery选择器选择id为“nav”的元素下的第三个li元素，并为其添加“layui-nav-itemed”样式类，这通常是用于展开或折叠对应的导航菜单项目，使其显示出该导航项处于展开状态的视觉效果（按照Layui导航组件 |
