|
|
<%@ 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提供的各类标签进行动态数据处理，比如循环遍历、条件判断等操作 -->
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>可选课程</title>
|
|
|
<!-- 设置HTML页面的标题为“可选课程”，此标题会显示在浏览器的标题栏，让用户明确该页面的主要功能 -->
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入layui框架的样式表文件，通过相对路径（从当前页面所在目录下的css文件夹中查找）应用layui框架提供的样式，用于页面布局、组件美化等，使页面呈现layui框架特有的外观风格 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入自定义的样式表文件style.css，同样采用相对路径引用，目的是添加符合特定需求的个性化页面样式，对页面显示效果做进一步定制 -->
|
|
|
<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库，能简化页面中对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/admin/aHeader.jsp"></jsp:include>
|
|
|
<!-- 包含位于WEB-INF/admin目录下的aHeader.jsp页面，通常用于构建页面的头部区域，可能包含如网站logo、导航栏等常见的头部元素，起到统一页面头部布局的作用 -->
|
|
|
<jsp:include page="/WEB-INF/admin/adminNav.jsp"></jsp:include>
|
|
|
<!-- 再次使用JSP的include指令，包含WEB-INF/admin目录下的adminNav.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属性大多为空，后续可能需要完善具体跳转地址以实现页面导航功能 -->
|
|
|
<span style="color: red;margin-right: 100px;float: right;">${select_msg}</span>
|
|
|
<!-- 创建一个<span>标签，设置文本颜色为红色，通过右浮动（float: right）使其靠右显示，并设置右边距为100px，内部通过EL表达式显示名为“select_msg”的变量的值，可能用于在页面上显示一些与可选课程操作相关的提示信息，比如课程删除成功或失败等消息 -->
|
|
|
<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>
|
|
|
<!-- 定义表格头部的列标题，分别列出要展示的可选课程相关的各个字段，如序号（ID）、课程号、课程名、课程简介、教师号、教师姓名以及操作（用于进行删除等相关操作） -->
|
|
|
</tr>
|
|
|
</thead>
|
|
|
|
|
|
<c:forEach items="${optionalcourses}" var="optionalcourse" varStatus="s">
|
|
|
<!-- 使用JSTL的forEach标签进行循环遍历操作，循环的对象是名为“optionalcourses”的数据集合（通常是从后端传递过来的可选课程信息列表），每次循环将当前元素赋值给变量“optionalcourse”，同时利用“varStatus”获取循环状态信息（如当前循环次数等）并赋值给变量“s” -->
|
|
|
<tr>
|
|
|
<td>${s.count}</td>
|
|
|
<td>${optionalcourse.c_id}</td>
|
|
|
<td>${optionalcourse.c_name}</td>
|
|
|
<td>${optionalcourse.c_info}</td>
|
|
|
<td>${optionalcourse.t_id}</td>
|
|
|
<td>${optionalcourse.t_name}</td>
|
|
|
<td><a class="layui-btn layui-btn-danger" href="javascript:deleteCourse(${optionalcourse.c_id});">删除</a></td>
|
|
|
<!-- 在表格的每一行中，通过EL表达式（Expression Language，如${s.count}等）分别展示对应的数据：
|
|
|
先展示序号（通过${s.count}表示当前循环次数），然后依次展示课程号、课程名、课程简介、教师号、教师姓名等具体信息；
|
|
|
最后一列创建一个超链接（a标签），应用layui框架的危险样式按钮类（layui-btn layui-btn-danger，表示红色警示样式按钮），设置href属性为调用名为“deleteCourse”的JavaScript函数并传递当前课程的ID（通过EL表达式获取当前课程对象中的课程ID，即${optionalcourse.c_id}）作为参数，用于实现删除当前行对应的课程信息的功能 -->
|
|
|
</tr>
|
|
|
</c:forEach>
|
|
|
</table>
|
|
|
<jsp:include page="/footer.jsp"></jsp:include>
|
|
|
<!-- 包含名为footer.jsp的页面，一般此页面用于展示页面底部的一些通用信息，比如版权声明、网站相关链接、联系方式等内容 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
$("#nav li:nth-child(1) dl dd:nth-child(2)").addClass("layui-this");
|
|
|
// 使用jQuery选择器选中页面中id为“nav”的元素下的第1个子元素li下的dl元素下的第2个dd元素，并为其添加类名“layui-this”。在layui框架中，添加这个类名通常意味着将对应的导航菜单项标记为当前选中状态，使其呈现特定的样式（比如改变颜色、加粗等），以此表明当前所在页面功能模块对应的菜单选项
|
|
|
$("#nav li:nth-child(1)").addClass("layui-nav-itemed");
|
|
|
// 同样使用jQuery选择器选中页面中id为“nav”的元素下的第1个子元素li，并为其添加类名“layui-nav-itemed”。在layui框架里，这个类名可能用于控制导航菜单的展开或折叠状态，让对应的菜单层级结构展示相应的效果，方便用户查看相关的子菜单
|
|
|
</script>
|
|
|
<script>
|
|
|
//JavaScript代码区域
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
// 使用layui框架的element模块，调用其init方法进行初始化操作。在layui框架中，element模块提供了很多页面元素交互相关的功能，例如实现页面布局动态切换、菜单展开收起等交互效果，通过调用init方法可以激活这些功能，确保页面上基于element模块构建的各种UI组件能够正常工作
|
|
|
});
|
|
|
</script>
|
|
|
<script>
|
|
|
function deleteCourse(c_id) {
|
|
|
if (confirm("你确定删除该学生吗？")) {
|
|
|
location.href = "${pageContext.request.contextPath}/doDeleteSelectCourseServlet?cid=" + c_id;
|
|
|
// 定义一个名为deleteCourse的函数，接收课程的ID（c_id）作为参数。这里函数名虽然是deleteCourse（暗示删除课程），但函数内部确认提示文字是“你确定删除该学生吗？”可能存在文本错误，正常应该提示“你确定删除该课程吗？”。
|
|
|
// 在函数内部，通过JavaScript的confirm函数弹出一个确认框，询问用户是否确定要执行删除操作（当前文本提示的是删除学生，应为删除课程）。当用户点击确定（即confirm函数返回true）时，使用location.href属性将页面重定向到名为“doDeleteSelectCourseServlet”的Servlet，并通过URL拼接的方式传递要删除的课程的ID参数，从而触发后端对应的删除课程信息的逻辑
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |
