|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<!-- 这是JSP页面的指令，用于设定页面的相关属性。这里指定页面的内容类型为"text/html"，意味着页面将以HTML格式呈现内容，同时将字符编码设置为UTF-8，确保可以正确处理和显示各种字符（包括中文等非英文字符），避免出现乱码情况，并且表明这个JSP页面是使用Java语言来实现其内部逻辑的。 -->
|
|
|
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<!-- 引入JSTL（JavaServer Pages Standard Tag Library）核心标签库，通过设置前缀为"c"，后续在页面中就能使用以"c"开头的各种JSTL标签了。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功能，像弹出层展示、表单验证、页面元素交互等功能都可以通过该框架的相关API来实现，从而为页面添加丰富的交互性和动态效果。 -->
|
|
|
<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>
|
|
|
<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>
|
|
|
<!-- 表头单元格，显示“班级”标题，其对应的表格列用于展示具体的班级名称等班级相关信息，有助于全面查看学院专业下涉及的班级情况。 -->
|
|
|
</tr>
|
|
|
</thead>
|
|
|
|
|
|
<c:forEach items="${cdcs}" var="cdc" varStatus="c">
|
|
|
<!-- 使用JSTL的forEach标签来进行循环遍历操作，这里会从名为"cdcs"的集合（这个集合通常是在服务器端，比如对应的Servlet中进行数据查询获取后，设置并传递到当前JSP页面的）里依次取出每一个元素，将当前取出的元素赋值给变量"cdc"，同时借助"varStatus"属性把循环的状态信息（像当前循环的次数等）赋值给变量"c"，以便在循环体内部能够利用这些信息来进行相应的操作，例如展示序号等。 -->
|
|
|
<tr>
|
|
|
<!-- 在循环体内部创建表格的每一行，用于展示具体的学院专业相关数据内容，每一次循环就生成一行数据展示在表格中。 -->
|
|
|
<td>${c.count}</td>
|
|
|
<!-- 通过EL表达式（Expression Language）输出循环状态变量"c"的"count"属性，也就是当前循环的次数，一般可以将其作为序号展示在表格中，方便用户清晰查看每一行数据的顺序以及整体的数据数量情况。 -->
|
|
|
<td>${cdc.college}</td>
|
|
|
<!-- 利用EL表达式输出从集合元素（赋值给"cdc"变量）中获取的学院名称信息，将具体的学院名称值显示在表格对应的单元格内，以便用户直观看到相应的学院信息。 -->
|
|
|
<td>${cdc.department}</td>
|
|
|
<!-- 同样使用EL表达式输出集合元素中包含的专业名称信息，在表格相应的单元格中展示具体的专业名称内容，方便查看各学院下的专业设置情况。 -->
|
|
|
<td>${cdc.cclass}</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(4) dl dd:nth-child(1)").addClass("layui-this");
|
|
|
// 使用jQuery选择器来定位页面中特定的元素，具体选择的是id为"nav"的元素下的第四个li元素内的dl元素中的第一个dd元素，然后为其添加"layui-this"样式类。这么做大概率是为了在导航菜单中标记当前选中的菜单项（依据页面本身的导航结构和样式设置逻辑来确定），使其呈现出被选中的视觉效果，例如改变颜色、加粗等样式变化，从而清晰地表明当前所在的功能页面对应的导航位置。
|
|
|
$("#nav li:nth-child(4)").addClass("layui-nav-itemed");
|
|
|
// 同样利用jQuery选择器选择id为"nav"的元素下的第四个li元素，并为其添加"layui-nav-itemed"样式类，这通常是用于展开或折叠对应的导航菜单项目，使其显示出该导航项处于展开状态的视觉效果（按照Layui导航组件的样式规则来实现），方便展示相关的子菜单或者突出当前所在的主菜单部分。
|
|
|
</script>
|
|
|
<script>
|
|
|
//JavaScript代码区域
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
// 使用Layui框架的模块加载机制，加载"element"模块，获取该模块实例并赋值给变量"element"，随后调用模块的"init"方法进行初始化操作。"element"模块在Layui框架中通常用于页面元素的操作、动态渲染以及交互效果实现等方面，通过初始化这个模块，可以准备好相关的DOM操作环境、绑定必要的事件等，以此确保该模块能够正常工作，进而实现页面中各种基于该模块的功能，例如页面布局的动态调整、元素显示隐藏控制等功能。
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |
