|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<!-- 以上两行是JSP页面的指令声明部分：
|
|
|
第一行用于设置该JSP页面输出的内容类型为HTML格式（text/html），并指定字符编码为UTF-8，同时表明此页面使用Java语言来编写相应的逻辑代码；
|
|
|
第二行引入了JSTL（JavaServer Pages Standard Tag Library）的核心标签库，通过定义前缀“c”，后续可以方便地使用该标签库所提供的各种标签进行诸如数据遍历、条件判断等操作 -->
|
|
|
<html>
|
|
|
<head>
|
|
|
<!-- 设置页面标题为“学院专业查询”，此标题会显示在浏览器的标题栏位置，让用户直观知晓当前页面的主要功能 -->
|
|
|
<title>学院专业查询</title>
|
|
|
<!-- 引入layui的样式文件，layui.css中包含了众多预先定义好的样式规则，用于实现页面的布局、组件样式等方面的美化效果，能帮助快速搭建出具有一定风格的页面 -->
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入自定义的样式文件，style.css文件可以由开发者根据本页面的特定需求来编写样式规则，用于对layui框架默认样式进行补充或者覆盖，以实现更符合业务需求的页面外观展示 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入layui的JavaScript文件，layui.js包含了丰富的代码逻辑，实现了诸多交互组件（如表单、表格、菜单等）以及相应的交互功能，是页面实现动态效果的重要依赖 -->
|
|
|
<script src="./layui.js"></script>
|
|
|
<!-- 引入jQuery库的.min压缩版本，jQuery是一个广受欢迎的JavaScript库，它提供了简洁易用的方法来操作DOM元素（例如查找、修改、删除页面元素等）、处理页面事件（如点击、鼠标移动等事件）以及实现动画效果等，极大地方便了前端开发工作 -->
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
|
|
</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/admin/aHeader.jsp"></jsp:include>
|
|
|
<!-- 引入“/WEB-INF/admin/aHeader.jsp”页面，通常这个页面用于构建管理员端页面的头部区域，比如展示系统名称、管理员相关的功能菜单、用户信息等通用元素 -->
|
|
|
<jsp:include page="/WEB-INF/admin/adminNav.jsp"></jsp:include>
|
|
|
<!-- 引入“/WEB-INF/admin/adminNav.jsp”页面，其主要功能是生成管理员端的导航栏，通过该导航栏可以方便管理员在不同的功能模块、业务页面之间进行切换操作 -->
|
|
|
<div class="layui-layout layui-layout-admin">
|
|
|
<div class="layui-body">
|
|
|
<!-- 这是layui框架中定义的用于承载页面主要内容的部分，也就是所谓的内容主体区域，各类核心业务数据展示以及相关操作功能都会放置在此处 -->
|
|
|
<div style="padding: 15px;">
|
|
|
<!-- 使用layui的面包屑组件，通过面包屑可以清晰地向用户展示当前页面在整个系统层级结构中的位置，方便用户了解自己所在的页面路径以及页面之间的关联关系 -->
|
|
|
<span class="layui-breadcrumb">
|
|
|
<!-- 面包屑的一级导航，此处设置了一个超链接（href属性虽为空，但可能根据实际情况绑定相应的点击事件或指向根路径相关功能），显示文本为“管理员”，代表当前用户所处的角色层级 -->
|
|
|
<a href="">管理员</a>
|
|
|
<!-- 面包屑的二级导航，同样设置了超链接（可能有对应指向学院专业管理相关页面的功能），显示文本为“学院专业管理”，进一步细化用户所在的业务模块层级 -->
|
|
|
<a href="">学院专业管理</a>
|
|
|
<!-- 面包屑的三级导航，这里没有设置超链接，直接通过<cite>标签显示当前页面的具体名称“学院专业查询”，明确当前所处的具体页面 -->
|
|
|
<a><cite>学院专业查询</cite></a>
|
|
|
</span>
|
|
|
<!-- 使用layui的表格组件来展示学院专业相关的数据，layui-table是layui框架中预定义好样式和交互功能的表格样式类，lay-filter属性通常用于为表格绑定一些特定的筛选、排序等交互功能（此处定义为“test”，后续可能需要相应的JavaScript代码来实现具体交互） -->
|
|
|
<table class="layui-table" lay-filter="test">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<!-- 定义表格表头的第一列标题为“ID”，用于展示每条学院专业相关记录的唯一标识符 -->
|
|
|
<th>ID</th>
|
|
|
<!-- 定义表格表头的第二列标题为“学院”，用于展示对应的学院名称信息 -->
|
|
|
<th>学院</th>
|
|
|
<!-- 定义表格表头的第三列标题为“专业”，用于展示所属的专业名称信息 -->
|
|
|
<th>专业</th>
|
|
|
<!-- 定义表格表头的第四列标题为“班级”，用于展示具体的班级名称信息 -->
|
|
|
<th>班级</th>
|
|
|
<!-- 定义表格表头的第五列标题为“操作”，这一列通常用于放置对表格中每一条数据记录进行操作的按钮等交互元素，比如删除、编辑等操作按钮 -->
|
|
|
<th>操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<!-- 使用JSTL的forEach标签对名为“cdcs”的集合进行循环遍历，这个集合通常是由后端程序传递过来的、包含学院专业相关数据的集合，每一个元素代表一条具体的学院专业记录 -->
|
|
|
<c:forEach items="${cdcs}" var="cdc" varStatus="c">
|
|
|
<tr>
|
|
|
<!-- 在表格行的第一列单元格中显示当前循环的序号，通过varStatus对象的count属性来实现计数功能，序号从1开始，方便用户查看数据的顺序 -->
|
|
|
<td>${c.count}</td>
|
|
|
<!-- 在表格行的第二列单元格中显示当前循环对象（cdc）中的学院名称属性值，该属性值应该是从后端传递过来的数据对象中提取出来的，用于展示具体的学院名称信息 -->
|
|
|
<td>${cdc.college}</td>
|
|
|
<!-- 在表格行的第三列单元格中显示当前循环对象（cdc）中的专业名称属性值，同样是从后端数据对象中获取对应属性值来展示具体的专业名称 -->
|
|
|
<td>${cdc.department}</td>
|
|
|
<!-- 在表格行的第四列单元格中显示当前循环对象（cdc）中的班级名称属性值，用于展示具体的班级名称情况 -->
|
|
|
<td>${cdc.cclass}</td>
|
|
|
<!-- 在表格行的第五列（操作列）单元格中添加一个删除按钮，按钮应用了layui的危险按钮样式（layui-btn-danger），使其在视觉上更醒目地提示用户操作的危险性；
|
|
|
点击该按钮时会调用JavaScript中的deleteCDC函数（目前函数未定义完整，后续需要补充具体的删除逻辑，比如向服务器发送删除请求等相关操作） -->
|
|
|
<td><a class="layui-btn layui-btn-danger" href="javascript:deleteCDC();">删除</a></td>
|
|
|
</tr>
|
|
|
</c:forEach>
|
|
|
</table>
|
|
|
<!-- 引入“/footer.jsp”页面，通常这个页面用于展示页面底部的相关信息，例如版权声明、联系方式、网站相关的友情链接等通用的底部元素 -->
|
|
|
<jsp:include page="/footer.jsp"></jsp:include>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!-- 使用jQuery选择器（通过特定的选择表达式）选择导航栏中特定的DOM元素（此处是第4个li元素下的第一个dl元素下的第一个dd元素），并为其添加类名“layui-this”，
|
|
|
一般来说，添加这个类名是为了通过CSS样式来改变该元素的外观，使其呈现出与其他导航项不同的样式效果，用于标识当前选中的导航项或者处于特定状态的导航项（具体样式效果取决于对应的CSS定义） -->
|
|
|
<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>
|
|
|
<!-- 使用layui框架提供的use方法来加载“element”模块，在加载完成后的回调函数里获取该模块的实例（将其赋值给变量“element”），然后调用实例的“init”方法进行初始化操作。
|
|
|
“element”模块在layui框架中主要负责处理页面元素相关的交互逻辑，例如菜单的展开与收起、选项卡的切换等功能的初始化工作，确保这些交互元素能正常展示和使用 -->
|
|
|
<script>
|
|
|
//JavaScript代码区域
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |
