|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<!-- 设置JSP页面的相关属性，指定页面内容类型为"text/html"，字符编码采用UTF-8，这样能确保页面正确显示各种字符（包括中文等特殊字符），避免乱码问题，同时表明该页面使用Java语言来实现相关逻辑，它是整个JSP页面的基础配置指令。 -->
|
|
|
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<!-- 引入JSTL（JavaServer Pages Standard Tag Library）核心标签库，定义前缀为"c"，后续就可以使用以"c"开头的各种JSTL标签，方便在JSP页面中进行如循环遍历、条件判断、数据输出等常见操作，增强页面的动态处理能力，让页面能更灵活地展示数据和实现业务逻辑。 -->
|
|
|
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>我的授课</title>
|
|
|
<!-- 设置HTML页面的标题，在浏览器的标题栏中会显示该标题内容，方便用户清晰地知道当前页面的主题是关于“我的授课”相关内容，起到页面标识的作用。 -->
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入Layui框架的样式文件，通过相对路径"./css/layui.css"来定位该文件，这个文件定义了页面使用Layui框架相关组件（如表格、按钮等）的样式规则，使得页面元素能按照Layui预设的风格进行展示，呈现出统一、美观的视觉效果。 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入自定义的样式文件"style.css"，可以在这个文件里对页面的样式进行个性化定制，比如覆盖部分Layui框架默认样式，或者添加一些独特的页面布局、颜色搭配等样式设置，以满足特定的页面设计需求。 -->
|
|
|
<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库，它简化了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>ID</th>
|
|
|
<!-- 表头单元格，用于显示“ID”这一列的标题，具体含义可能是记录的唯一标识或者序号等，根据业务需求而定。 -->
|
|
|
<th>学号</th>
|
|
|
<!-- 表头单元格，显示“学号”列标题，代表学生的学号信息，后续表格行会对应展示具体学生的学号内容。 -->
|
|
|
<th>学生姓名</th>
|
|
|
<!-- 表头单元格，用于展示“学生姓名”这一标题，对应列会显示具体学生的姓名信息。 -->
|
|
|
<th>课程号</th>
|
|
|
<!-- 表头单元格，标题为“课程号”，该列将展示相应课程的编号信息，用于区分不同的课程。 -->
|
|
|
<th>课程名</th>
|
|
|
<!-- 表头单元格，显示“课程名”标题，对应的表格列会呈现具体课程的名称信息。 -->
|
|
|
<th>课程简介</th>
|
|
|
<!-- 表头单元格，标题为“课程简介”，其所在列会展示相应课程的详细介绍信息，方便教师查看课程相关情况。 -->
|
|
|
<th>学生分数</th>
|
|
|
<!-- 表头单元格，用于展示“学生分数”这一标题，对应列会显示学生在相应课程上的成绩情况。 -->
|
|
|
<td>操作</td>
|
|
|
<!-- 表头单元格（这里使用td也可以，不过按规范表头一般用th更好些），标题为“操作”，该列用于放置针对每一行数据可进行的操作按钮等元素，比如修改分数、删除等操作。 -->
|
|
|
</tr>
|
|
|
</thead>
|
|
|
|
|
|
<c:forEach items="${scs}" var="sc" varStatus="t">
|
|
|
<!-- 使用JSTL的forEach标签进行循环遍历操作，从名为"scs"的集合（这个集合通常是在服务器端（比如对应的Servlet）设置并传递到JSP页面的）中取出每一个元素，将当前元素赋值给变量"sc"，同时通过"varStatus"属性将循环状态信息（如当前循环次数等）赋值给变量"t"，以便在循环体中可以使用这些信息进行相关操作，比如序号的展示等。 -->
|
|
|
<tr>
|
|
|
<!-- 在循环体内创建表格的每一行，用于展示具体的学生成绩相关数据。 -->
|
|
|
<td>${t.count}</td>
|
|
|
<!-- 使用EL表达式（Expression Language）输出循环状态变量"t"的"count"属性，即当前循环的次数，一般可作为序号展示在表格中，方便查看每一行数据的顺序和数量情况。 -->
|
|
|
<td>${sc.s_id}</td>
|
|
|
<!-- 通过EL表达式输出从集合元素（赋值给"sc"变量）中获取的学生学号信息，将具体的学号值显示在表格对应的单元格中，展示该学生的学号。 -->
|
|
|
<td>${sc.s_name}</td>
|
|
|
<!-- 同样使用EL表达式输出集合元素中包含的学生姓名信息，在表格相应单元格展示具体学生的姓名内容。 -->
|
|
|
<td>${sc.c_id}</td>
|
|
|
<!-- 利用EL表达式输出课程号信息，将对应的课程编号展示在表格单元格中，便于识别课程。 -->
|
|
|
<td>${sc.c_name}</td>
|
|
|
<!-- 通过EL表达式输出课程名称信息，在表格单元格中显示具体的课程名，方便教师查看课程相关情况。 -->
|
|
|
<td>${sc.c_info}</td>
|
|
|
<!-- 使用EL表达式输出课程简介信息，将课程的详细介绍展示在表格单元格中，让教师更全面地了解课程内容。 -->
|
|
|
<td>${sc.score}</td>
|
|
|
<!-- 通过EL表达式输出学生的分数信息，在表格相应单元格呈现该学生在对应课程上的成绩情况，便于查看成绩。 -->
|
|
|
<td><a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/updateScoreServlet?cid=${sc.c_id}&sid=${sc.s_id}">修改分数</a><a class="layui-btn layui-btn-danger" href="javascript:deleteStudentSelectCourse();">删除</a></td>
|
|
|
<!-- 在操作列的单元格中创建两个链接按钮，第一个按钮应用"layui-btn"和"layui-btn-normal"样式类，使其呈现Layui框架正常风格的按钮样式，按钮文本为“修改分数”，其链接地址通过EL表达式动态生成，指向"updateScoreServlet"这个Servlet，并传递当前行对应的课程号（${sc.c_id}）和学号（${sc.s_id}）作为参数，点击该按钮可跳转到相应页面进行分数修改操作；第二个按钮应用"layui-btn"和"layui-btn-danger"样式类，呈现危险操作（通常红色表示重要或危险操作）的按钮样式，按钮文本为“删除”，点击时会执行JavaScript函数"deleteStudentSelectCourse();"（不过这里函数体暂时未看到完整定义，可能在后续补充或者外部引入的脚本中有定义，用于实现删除相关的业务逻辑）。 -->
|
|
|
</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"的元素下的第一个li元素内的dl元素中的第二个dd元素，并为其添加"layui-this"样式类，很可能是用于在导航菜单中标记当前选中的菜单项（依据页面的导航结构和样式设置逻辑），使其呈现出被选中的视觉效果，例如改变颜色、加粗等样式变化，表明当前所在的功能页面对应的导航位置。
|
|
|
$("#nav li:nth-child(1)").addClass("layui-nav-itemed");
|
|
|
// 同样使用jQuery选择器选择id为"nav"的元素下的第一个li元素，并为其添加"layui-nav-itemed"样式类，大概率是用于展开或折叠对应的导航菜单项目，使其显示出该导航项处于展开状态的视觉效果（根据Layui导航组件的样式规则），方便展示相关的子菜单或者突出当前所在的主菜单。
|
|
|
$("#hidden-score").removeAttr("hidden");
|
|
|
// 使用jQuery选择器选择id为"hidden-score"的元素，并移除其"hidden"属性（如果有的话），意味着原本可能隐藏的元素（根据HTML中"hidden"属性的作用）会变为可见状态，具体这个元素是什么以及作用如何，要结合页面的其他部分代码来看，可能是与成绩相关的某个隐藏元素现在需要显示出来，比如隐藏的分数统计区域等（只是猜测，具体依业务而定）。
|
|
|
</script>
|
|
|
<script>
|
|
|
//JavaScript代码区域
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
// 使用Layui框架的模块加载机制，加载"element"模块，获取该模块实例并赋值给变量"element"，然后调用模块的"init"方法进行初始化操作，"element"模块通常用于页面元素的操作、动态渲染以及交互效果实现等，初始化这个模块可以准备好相关的DOM操作环境、绑定必要的事件等，确保模块能正常工作，进而实现页面中各种基于该模块的功能，比如页面布局的动态调整、元素显示隐藏控制等。
|
|
|
});
|
|
|
</script>
|
|
|
<script type="text/javascript">
|
|
|
function deleteOptionalCourse(c_id) {
|
|
|
if (confirm("你确定删除授课吗？")) {
|
|
|
location.href = "${pageContext.request.contextPath}/deleteOptionalCourseServlet?cid=" + c_id;
|
|
|
}
|
|
|
}
|
|
|
// 定义一个名为"deleteOptionalCourse"的JavaScript函数，接收一个参数"c_id"，该函数用于处理删除授课相关的操作逻辑。首先通过"confirm"函数弹出一个确认对话框，询问用户是否确定要删除授课，当用户点击“确定”按钮时（返回值为true时），会将页面的地址跳转到通过EL表达式动态生成的路径，指向"deleteOptionalCourseServlet"这个Servlet，并传递当前要删除授课对应的课程号（"c_id"参数的值）作为参数，以便在服务器端（对应的Servlet中）根据课程号执行相应的删除授课的业务逻辑，实现删除操作。
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
