|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<!-- JSP页面指令，用于设置页面的相关属性：
|
|
|
- “contentType”属性指定页面内容类型为“text/html”，意味着页面以HTML格式展示内容，同时设置字符编码为“UTF-8”，这样能确保页面可以正确处理和显示各种字符（如中文等），避免出现乱码情况，保证页面内容正常展示。
|
|
|
- “language=java”表明该JSP页面内部的逻辑实现是基于Java语言的，例如可以在页面中嵌入Java代码片段来与服务器端进行交互、处理业务数据等操作。 -->
|
|
|
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<!-- 引入JSTL（JavaServer Pages Standard Tag Library）核心标签库，通过设定“prefix”属性为“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功能，像弹出层的展示、对表单进行验证、处理页面元素之间的交互操作（比如点击按钮触发特定的事件、动态地显示或隐藏某些元素等）等功能，利用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）交互等操作，都可以通过使用jQuery库轻松实现，这有助于开发人员更便捷地在页面中构建各种交互功能，进一步增强页面整体的动态交互体验。 -->
|
|
|
</head>
|
|
|
<body class="layui-layout-body" style="background-color: #F2F2F2">
|
|
|
<!-- 为页面主体设置样式类为“layui-layout-body”，同时通过内联样式设定背景颜色为“#F2F2F2”，这是按照Layui框架的样式规范来对页面主体部分的外观风格进行定义，使得页面呈现出特定的浅灰色（#F2F2F2）背景颜色，有助于营造出整体统一的视觉效果，并且方便后续依据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>
|
|
|
<form class="layui-form" action="${pageContext.request.contextPath}/teacherOptionalCourseUpdateServlet" style="padding-top: 50px" method="post">
|
|
|
<!-- 创建一个使用Layui框架样式的表单，应用“layui-form”样式类使其呈现出符合Layui框架规范的表单样式，方便进行表单元素的布局以及后续的表单验证等操作。设置顶部内边距为50px，使表单与上面的面包屑等元素有一定的垂直间隔，让页面看起来更加美观易读。提交方法为“post”，常用于提交较大量或需要保密的数据，“action”属性通过EL表达式（Expression Language）动态设置表单提交的目标地址为“teacherOptionalCourseUpdateServlet”这个Servlet，意味着当用户提交表单时，数据会被发送到对应的Servlet进行处理，该Servlet大概率负责执行课程修改的相关业务逻辑。 -->
|
|
|
<div class="layui-form-item">
|
|
|
<!-- 在表单内创建Layui框架的表单项目容器，用于对单个输入项或一组相关输入项进行分组和布局，方便统一管理和设置样式，使每个输入项在页面中规范显示，便于用户清晰地查看和操作各个表单元素。 -->
|
|
|
<label class="layui-form-label">课程号</label>
|
|
|
<!-- 创建表单标签，用于显示输入项对应的提示文本，这里提示用户输入的是“课程号”信息，引导用户明确该输入框的用途。 -->
|
|
|
<div class="layui-input-block">
|
|
|
<!-- 创建用于放置输入框等表单控件的块级容器，按照Layui框架的布局规则，输入框等元素会在这个容器内合理显示，确保页面布局整齐，与其他表单项目区分开来。 -->
|
|
|
<input type="text" name="cid" value="${course.c_id}" readonly="readonly" required lay-verify="required" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建一个文本输入框，名称为“cid”，通过EL表达式（Expression Language）将“course.c_id”（可能是从服务器端传递过来的课程编号值）作为初始值显示在输入框中，设置为只读（“readonly="readonly"”），意味着用户不能直接修改该输入框中的内容，设置为必填项（“required lay-verify="required"”，在Layui框架中用于表单验证，确保用户提交表单时该字段有值），关闭自动完成功能（“autocomplete="off"”），应用Layui框架输入框样式类“layui-input”，用于展示课程的编号信息，该编号作为课程的唯一标识，通常不允许随意修改。 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<label class="layui-form-label">课程名</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input type="text" name="course-name" value="${course.c_name}" required lay-verify="required" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建一个文本输入框，名称为“course-name”，通过EL表达式将“course.c_name”（可能是从服务器端传递过来的课程名称值）作为初始值显示在输入框中，设置为必填项，用于表单验证，关闭自动完成功能，应用相应样式类，这里用户可以修改课程名称，输入新的名称后提交表单来更新课程相关信息。 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-form-item">
|
|
|
<label class="layui-form-label">课程信息</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input type="text" name="course-info" value="${course.c_info}" required lay-verify="required" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建一个文本输入框，名称为“course-info”，通过EL表达式将“course.c_info”（可能是从服务器端传递过来的课程详细介绍信息值）作为初始值显示在输入框中，设置为必填项，关闭自动完成功能，应用样式类，用户可在此修改课程的详细介绍内容，然后通过表单提交更新到服务器端。 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
<div class="layui-input-block">
|
|
|
<button class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
|
|
|
<!-- 创建一个使用Layui框架样式的按钮，文本显示为“修改”，应用“layui-btn”样式类使其呈现出Layui框架中按钮的样式风格。设置“lay-submit”属性表示该按钮点击时会触发表单提交操作，“lay-filter”属性值为“formDemo”，用于后续结合Layui框架的表单验证等功能，为该按钮触发的提交行为绑定特定的验证逻辑或者事件处理逻辑（不过这里具体的验证或事件处理逻辑可能需要在JavaScript代码中进一步定义）。 -->
|
|
|
<span style="padding-left: 20px;">${update_msg}</span>
|
|
|
<!-- 创建一个行内的<span>元素，设置左边距为20像素，用于显示一个动态的消息内容（通过EL表达式“${update_msg}”获取，可能是服务器端返回的提示信息，比如课程修改成功或失败的提示等），向用户反馈课程修改操作的相关情况。 -->
|
|
|
</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(3)").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-update").removeAttr("hidden");
|
|
|
// 使用jQuery选择器选择id为“hidden-update”的元素，并移除其“hidden”属性（假设该元素初始是隐藏状态，通过这个操作可以使其在页面中显示出来），不过这里不清楚“hidden-update”具体代表的是什么元素以及它在页面功能中的具体作用，需要结合页面的完整业务逻辑和布局来进一步确定，但总体来说这个操作改变了该元素的显示隐藏状态。
|
|
|
</script>
|
|
|
<script>
|
|
|
//JavaScript代码区域
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
// 使用Layui框架的模块加载机制，加载“element”模块，获取该模块的实例并赋值给变量“element”，然后调用“init”方法进行初始化操作。“element”模块在Layui框架中通常用于页面元素的操作、动态渲染以及交互效果实现等，通过初始化该模块，可以准备好相关的DOM操作环境、绑定必要的事件等，确保模块能正常工作，进而实现页面中基于该模块的各种功能，例如展开收起导航菜单、切换菜单项的选中状态等操作，使得页面元素具备相应的交互功能。
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
//Demo
|
|
|
layui.use('form', function(){
|
|
|
// 使用Layui框架的模块加载机制，加载“form”模块，不过这里函数体内部暂时没有具体的代码逻辑，一般加载“form”模块后，可以利用它来进行表单相关的操作，比如进一步定义表单验证规则、处理表单提交前后的各种事件 |
