|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<!-- 这是JSP页面的指令语句，用于设置页面的相关属性。
|
|
|
- “contentType”属性指定页面内容的类型为“text/html”，意味着这个页面将以HTML格式来呈现内容。
|
|
|
- “charset=UTF-8”表示页面使用UTF-8字符编码，这样可以确保页面能够正确地处理和显示各种字符，包括中文等非ASCII字符，避免出现乱码问题。
|
|
|
- “language=java”表明该JSP页面使用Java语言来实现其内部的业务逻辑等功能。 -->
|
|
|
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<!-- 引入JSTL（JavaServer Pages Standard Tag Library）核心标签库。
|
|
|
- “prefix”属性指定了在页面中使用该标签库时的前缀为“c”，后续就可以通过“<c:xxx>”这样的形式来使用JSTL核心标签库中提供的各种标签了。
|
|
|
- “uri”属性给出了标签库的统一资源标识符，用于定位这个核心标签库所在的位置，方便服务器解析和处理对应的标签逻辑，利用这些标签可以方便地在页面中进行诸如循环遍历、条件判断、数据输出等操作，增强页面的动态展示能力。 -->
|
|
|
|
|
|
<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）交互等操作，使得开发人员能够更轻松地实现页面中的各种交互功能，进一步增强页面整体的动态交互体验。 -->
|
|
|
</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>
|
|
|
<!-- 表头单元格，标题为“操作”，该列用于放置针对每一行授课记录数据可进行的操作按钮等元素，比如修改、查看、删除等操作按钮，方便教师根据实际需求对相应的授课信息进行各种操作管理，提供便捷的交互功能入口。 -->
|
|
|
</tr>
|
|
|
</thead>
|
|
|
|
|
|
<c:forEach items="${optionalcourses}" var="optionalcourse" varStatus="t">
|
|
|
<!-- 使用JSTL（JavaServer Pages Standard Tag Library）的“forEach”标签来进行循环遍历操作。
|
|
|
- “items”属性指定了要遍历的集合对象，这里是名为“optionalcourses”的集合（这个集合通常是在服务器端，比如对应的Servlet中进行数据查询获取后，将查询到的教师授课相关数据封装成集合形式，然后设置并传递到当前JSP页面的）。
|
|
|
- “var”属性定义了一个变量名“optionalcourse”，在每次循环过程中，会从“optionalcourses”集合里依次取出每一个元素，并将当前取出的元素赋值给这个变量，方便在循环体内部使用该变量来获取元素中的具体数据内容。
|
|
|
- “varStatus”属性则是定义了一个循环状态变量“t”，这个变量可以获取到循环的一些状态信息，例如当前循环的次数、是否是第一次或最后一次循环等，在这里主要是利用它的“count”属性（表示当前循环次数）来展示序号等相关信息，增强表格数据展示的可读性。 -->
|
|
|
<tr>
|
|
|
<!-- 在循环体内部创建表格的每一行，用于展示具体的教师授课相关数据内容，每一次循环就生成一行数据展示在表格中，这样通过循环就可以将集合中的所有授课数据逐行展示出来，形成完整的数据表格展示效果。 -->
|
|
|
<td>${t.count}</td>
|
|
|
<!-- 通过EL表达式（Expression Language）输出循环状态变量“t”的“count”属性，也就是当前循环的次数，将其作为序号展示在表格的这一单元格中，方便用户清晰地查看每一行数据的顺序以及整体的数据数量情况，使得数据展示更加有条理，便于用户快速定位和查看特定行的数据内容。 -->
|
|
|
<td>${optionalcourse.c_id}</td>
|
|
|
<!-- 利用EL表达式输出从集合元素（赋值给“optionalcourse”变量）中获取的课程号信息，将具体的课程编号值显示在表格对应的单元格内，以便教师直观地看到每一门授课课程的编号，方便与系统中其他地方涉及课程号的操作进行关联和对应。 -->
|
|
|
<td>${optionalcourse.c_name}</td>
|
|
|
<!-- 同样使用EL表达式输出集合元素中包含的课程名称信息，在表格相应的单元格中展示具体的课程名称内容，使得教师能够清楚地知道每一行数据对应的是哪一门具体的课程，便于查看和管理授课课程信息。 -->
|
|
|
<td>${optionalcourse.c_info}</td>
|
|
|
<!-- 通过EL表达式输出集合元素里的课程简介等相关信息，将课程的详细介绍展示在表格对应的单元格中，帮助教师更全面地了解每门授课课程的具体情况，比如课程的教学重点、难点等相关内容，辅助教师进行教学相关的操作和决策。 -->
|
|
|
<td><a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/updateTeacherOptionalCourseServlet?cid=${optionalcourse.c_id}">修改</a><a class="layui-btn" href="${pageContext.request.contextPath}/findStudentCourseScoreServlet?cid=${optionalcourse.c_id}">查看</a><a class="layui-btn layui-btn-danger" href="javascript:deleteOptionalCourse(${optionalcourse.c_id});">删除</a></td>
|
|
|
<!-- 在操作列的单元格中创建三个链接按钮，用于提供不同的操作功能入口：
|
|
|
- 第一个按钮应用“layui-btn”和“layui-btn-normal”样式类，使其呈现Layui框架正常风格的按钮样式，按钮文本为“修改”，其链接地址通过EL表达式动态生成，指向“updateTeacherOptionalCourseServlet”这个Servlet，并传递当前行对应的课程号（${optionalcourse.c_id}）作为参数，点击该按钮可跳转到相应的页面进行授课课程信息的修改操作，方便教师根据实际情况对课程相关内容进行调整更新。
|
|
|
- 第二个按钮应用“layui-btn”样式类，按钮文本为“查看”，链接通过EL表达式指向“findStudentCourseScoreServlet”这个Servlet，并同样传递课程号作为参数，点击该按钮可跳转到对应的页面查看选修该课程的学生的成绩等相关信息，便于教师了解授课效果等情况。
|
|
|
- 第三个按钮应用“layui-btn”和“layui-btn-danger”样式类，呈现危险操作（通常红色表示重要或危险操作）的按钮样式，按钮文本为“删除”，点击时会执行JavaScript函数“deleteOptionalCourse(${optionalcourse.c_id});”（这个函数在后续的JavaScript代码中有定义，用于实现删除授课相关的具体业务逻辑，比如向服务器端发送删除请求等操作），实现对相应授课记录的删除功能，不过执行删除操作一般会需要用户进一步确认，以防误操作。 -->
|
|
|
</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(1)").addClass("layui-this");
|
|
|
// 使用jQuery选择器来定位页面中特定的元素，具体选择的是id为“nav”的元素下的第一个li元素内的dl元素中的第一个dd元素，然后为其添加“layui-this”样式类。这么做大概率是为了在导航菜单中标记当前选中的菜单项（依据页面本身的导航结构和样式设置逻辑来确定），使其呈现出被选中的视觉效果，例如改变颜色、加粗等样式变化，从而清晰地表明当前所在的功能页面对应的导航位置，方便用户直观地知晓当前所处的功能模块在整个导航体系中的位置关系。
|
|
|
$("#nav li:nth-child(1)").addClass("layui-nav-itemed");
|
|
|
// 同样利用jQuery选择器选择id为“nav”的元素下的第一个li元素，并为其添加“layui-nav-itemed”样式类，这通常是用于展开或折叠对应的导航菜单 |
