|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<!-- 这是JSP页面的指令，用于设置页面的内容类型为"text/html"，字符编码为UTF-8，并且指定页面使用的编程语言是Java，确保页面能够正确地处理和显示文本内容，避免中文等特殊字符出现乱码问题，并告知服务器该页面是基于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"找到对应的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，通过样式类和内联样式相结合的方式来定义页面主体部分的外观风格，可能符合整个项目中统一的页面布局和色彩搭配要求。 -->
|
|
|
<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;">
|
|
|
<!-- 创建一个具有内边距的div容器，用于对内部的内容进行布局排版，使得内容在页面中显示时有一定的空白间隔，更加美观和易读。 -->
|
|
|
<span class="layui-breadcrumb">
|
|
|
<!-- 使用Layui框架的面包屑组件，用于显示页面的导航路径，方便用户了解当前页面在整个系统中的位置层级关系。 -->
|
|
|
<a href="">教师端</a>
|
|
|
<!-- 面包屑中的第一个链接，通常指向教师端的首页或者入口页面，点击可以返回教师端的主要界面，这里暂时没有设置具体的链接地址（可能后续根据实际情况补充完整）。 -->
|
|
|
<a href="">课程信息</a>
|
|
|
<!-- 面包屑中的第二个链接，指向课程信息相关的页面，点击可能进入课程信息的总览页面或者列表页面等，同样暂时没设置具体链接地址。 -->
|
|
|
<a><cite>添加课程</cite></a>
|
|
|
<!-- 面包屑中的最后一个元素，显示当前页面的具体功能是“添加课程”，通常不可点击，只是用于展示当前所在功能位置的标识。 -->
|
|
|
</span>
|
|
|
<form class="layui-form" action="${pageContext.request.contextPath}/addOptionalCourseServlet" style="padding-top: 50px" method="post">
|
|
|
<!-- 创建一个使用Layui框架样式的表单，设置表单的提交地址为通过EL表达式（Expression Language）获取的相对路径"/addOptionalCourseServlet"，意味着当表单提交时，数据会发送到对应的Servlet进行处理，同时设置表单的提交方法为"post"，一般用于提交较大量的数据或者需要保密的数据（比如涉及密码等情况），并且在顶部设置了50px的内边距，使表单在页面中显示有一定的垂直间距。 -->
|
|
|
<div class="layui-form-item">
|
|
|
<!-- 在表单内创建一个Layui框架的表单项目容器，用于对表单中的单个输入项进行分组和布局，方便统一管理和设置样式。 -->
|
|
|
<label class="layui-form-label">课程号</label>
|
|
|
<!-- 创建一个表单标签，用于显示输入项对应的提示文本，这里提示用户输入“课程号”。 -->
|
|
|
<div class="layui-input-block">
|
|
|
<!-- 创建一个用于放置输入框的块级容器，按照Layui框架的布局规则，输入框会在这个块内进行合适的显示布局。 -->
|
|
|
<input type="text" name="cid" required lay-verify="required" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建一个文本输入框，设置其名称为"cid"，通过"required"属性和"lay-verify=required"声明该输入项是必填项，并且关闭自动完成功能（防止浏览器自动填充可能不符合要求的数据），同时应用Layui框架的输入框样式类"layui-input"，使其外观符合Layui框架的风格，用户需要在此输入课程号信息。 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<label class="layui-form-label">课程名</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input type="text" name="course-name" required lay-verify="required" autocomplete="off" class="layui-input">
|
|
|
<!-- 与上面课程号输入框类似，创建一个用于输入课程名的文本输入框，名称为"course-name"，同样是必填项，关闭自动完成功能并应用Layui框架样式，用户在此输入课程的名称信息。 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<label class="layui-form-label">课程信息</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input type="text" name="course-info" required lay-verify="required" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建用于输入课程详细信息的文本输入框，名称为"course-info"，也是必填项，遵循相同的规则，用户在此输入课程的详细介绍等相关信息。 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
<div class="layui-input-block">
|
|
|
<button class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
|
|
|
<!-- 创建一个使用Layui框架样式的按钮，文本显示为“添加”，通过"lay-submit"属性声明该按钮用于提交表单，"lay-filter=formDemo"则可能是用于设置表单提交的验证规则或者事件监听等相关的过滤器名称（需要在后续的JavaScript代码中进一步定义具体逻辑），点击该按钮可以触发表单提交操作，将用户输入的课程相关信息发送到指定的Servlet进行处理。 -->
|
|
|
<span style="padding-left: 20px;">${update_msg}</span>
|
|
|
<!-- 通过EL表达式显示名为"update_msg"的变量内容，这个变量可能是在服务器端（比如对应的Servlet）设置的提示信息，用于向用户反馈操作结果（比如添加课程成功或失败的提示等），并设置了左边20px的内边距，使其与按钮有一定的间距显示。 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
<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(4)").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导航组件的样式规则）。
|
|
|
</script>
|
|
|
<script>
|
|
|
//JavaScript代码区域
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
// 使用Layui框架的模块加载机制，加载"element"模块，获取该模块实例并赋值给变量"element"，然后调用模块的"init"方法进行初始化操作，这个"element"模块通常用于页面元素的操作、动态渲染以及交互效果实现等，初始化操作可能是准备相关的DOM操作环境、绑定事件等，确保模块能正常工作，实现页面中各种基于该模块的功能，比如页面布局的动态调整、元素显示隐藏控制等。
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
//Demo
|
|
|
layui.use('form', function(){
|
|
|
// 使用Layui框架的模块加载机制，加载"form"模块，通常加载这个模块后可以使用Layui框架提供的表单相关的功能，比如表单验证、提交前的数据处理等操作，不过这里暂时没有在回调函数内添加具体的业务逻辑代码（可能后续根据实际的表单验证等需求补充完整）。
|
|
|
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |
