|
|
<%@ 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>${html_title}</title>
|
|
|
<!-- 设置HTML页面的标题,不过这里使用了EL表达式(Expression Language),意味着标题的值是动态从服务器端传递过来的,具体的标题内容会根据服务器设置的“html_title”变量值来显示,方便灵活地定制页面标题。 -->
|
|
|
<script>
|
|
|
//JavaScript代码区域
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
// 使用Layui框架的模块加载机制,加载“element”模块,获取该模块的实例并赋值给变量“element”,然后调用“init”方法进行初始化操作。“element”模块在Layui框架中通常用于页面元素的操作、动态渲染以及交互效果实现等,通过初始化该模块,可以准备好相关的DOM操作环境、绑定必要的事件等,确保模块能正常工作,进而实现页面中基于该模块的各种功能,例如展开收起导航菜单、切换菜单项的选中状态等操作,使得页面元素具备相应的交互功能。
|
|
|
});
|
|
|
</script>
|
|
|
<style>
|
|
|
.layui-card.layui-card-body.layui-icon {
|
|
|
display: inline-block;
|
|
|
width: 100%;
|
|
|
height: 60px;
|
|
|
line-height: 60px;
|
|
|
text-align: center;
|
|
|
border-radius: 2px;
|
|
|
font-size: 30px;
|
|
|
background-color: #F8F8F8;
|
|
|
color: #333;
|
|
|
transition: all.3s;
|
|
|
-webkit-transition: all.3s;
|
|
|
/* 以下是对类选择器组合“layui-card.layui-card-body.layui-icon”所匹配元素的样式设置:
|
|
|
- “display: inline-block;”:将元素设置为行内块级元素,使其既能像行内元素一样在一行内排列,又能像块级元素一样设置宽度、高度等属性,方便布局和样式控制。
|
|
|
- “width: 100%;”:设置元素宽度占满其所在容器的宽度,确保在相应布局中能充分利用空间。
|
|
|
- “height: 60px;”和“line-height: 60px;”:分别设置元素的高度以及行高为60像素,使元素内的文本在垂直方向上居中显示,达到美观的排版效果。
|
|
|
- “text-align: center;”:让元素内的文本内容在水平方向上居中显示,进一步优化排版布局。
|
|
|
- “border-radius: 2px;”:给元素设置2像素的圆角效果,使元素外观更加圆润,增加视觉美感。
|
|
|
- “font-size: 30px;”:设置元素内文本的字体大小为30像素,调整文本显示的大小,使其更醒目易读。
|
|
|
- “background-color: #F8F8F8;”:指定元素的背景颜色为浅灰色(#F8F8F8),为元素提供一个特定的背景色调,便于视觉区分和整体页面风格统一。
|
|
|
- “color: #333;”:设置元素内文本的颜色为深灰色(#333),确保文本颜色与背景色搭配协调,提高可读性。
|
|
|
- “transition: all.3s;”和“-webkit-transition: all.3s;”:定义元素在进行样式变化时的过渡效果,这里表示所有样式属性的变化都将在0.3秒内平滑过渡,用于实现一些动态交互时的视觉效果优化(如鼠标悬停等操作时元素样式改变的过渡效果),“-webkit-transition”是为了兼容webkit内核的浏览器(如Chrome、Safari等)。 */
|
|
|
}
|
|
|
.layui-card.layui-card-body {
|
|
|
text-align: center;
|
|
|
/* 对类选择器组合“layui-card.layui-card-body”所匹配元素的样式设置,将元素内的文本内容在水平方向上设置为居中对齐,使得在该类元素内部包含的内容整体呈现居中布局效果,常用于对卡片主体内容进行排版布局,保证页面整体风格统一和美观。 */
|
|
|
}
|
|
|
#notify {
|
|
|
text-align: left;
|
|
|
/* 通过ID选择器“#notify”对特定元素设置样式,将匹配元素内的文本内容在水平方向上设置为左对齐,这里可能是针对特定的通知内容区域进行的样式调整,使其文本按照常规的阅读习惯从左到右排列,方便用户查看相关信息。 */
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
</head>
|
|
|
<body class="layui-layout-body" style="background-color: #F2F2F2">
|
|
|
<!-- 为页面主体设置样式类为“layui-layout-body”,同时通过内联样式设定背景颜色为“#F2F2F2”,按照Layui框架的样式规范定义主体部分外观风格,营造出一种浅灰色(#F2F2F2)的视觉背景,符合项目统一的页面设计要求,便于后续布局页面内容,并且使页面整体视觉效果保持一致。 -->
|
|
|
<%--<jsp:include page="/filterLogin.jsp"></jsp:include>--%>
|
|
|
<!-- 此处原本是通过JSP的“include”指令包含名为“filterLogin.jsp”的页面,一般这个页面用于处理用户登录验证逻辑,判断用户是否已登录,未登录时引导用户跳转到登录页面,不过这里被注释掉了,可能暂时不需要该登录验证功能或者后续会根据实际情况再启用它。 -->
|
|
|
<jsp:include page="/WEB-INF/teacher/tHeader.jsp"></jsp:include>
|
|
|
<!-- 通过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容器,通过设置内边距让内部内容在页面中有空白间隔,使布局更美观易读,便于对内部元素排版布局,避免内容显得拥挤,提升用户查看和操作页面内容时的体验感。 -->
|
|
|
<div class="layui-card">
|
|
|
<!-- 创建一个使用Layui框架样式的卡片元素,通常用于对相关内容进行分组展示,使其在页面上有一个清晰的视觉边界,方便用户区分不同的功能模块或者信息板块,符合Layui框架的页面布局和展示风格。 -->
|
|
|
<div class="layui-card-header" id="index-function">功能</div>
|
|
|
<!-- 创建卡片的头部区域元素,设置ID为“index-function”,文本内容显示为“功能”,用于给卡片添加一个标题,提示下面卡片主体内容所涉及的大致范畴,让用户一目了然知道该部分的主要作用。 -->
|
|
|
<div class="layui-card-body">
|
|
|
<!-- 创建卡片的主体内容区域元素,用于放置具体的功能相关内容,在这里会展示一系列功能链接等元素,是卡片中实际展示核心信息的部分。 -->
|
|
|
<ul class="layui-row layui-col-space10 layui-this">
|
|
|
<!-- 创建一个使用Layui框架样式的无序列表,应用“layui-row”样式类使其具备行布局的特点,“layui-col-space10”样式类用于设置列表项之间的水平间距为10像素,“layui-this”样式类可能是用于标记当前选中或特殊样式的状态(具体取决于Layui框架的样式定义),整体用于放置多个功能相关的列表项元素,方便以列表形式展示各项功能入口,并且实现一定的布局和样式效果。 -->
|
|
|
<li class="layui-col-xs3">
|
|
|
<!-- 创建列表项元素,应用“layui-col-xs3”样式类,意味着该元素在小屏幕设备(如手机等)上会占据3列的宽度(基于Layui框架的栅格系统布局规则),方便实现响应式布局,根据不同设备屏幕大小合理分配空间,展示功能链接等内容。 -->
|
|
|
<a lay-href="/mavenTemplate/student/query">
|
|
|
<!-- 创建一个链接元素,使用了Layui框架自定义的“lay-href”属性(可能是用于实现特定的链接跳转逻辑或者与Layui框架的交互功能相关),链接地址指向“/mavenTemplate/student/query”,点击可跳转到对应的学生信息查询功能页面,用于引导用户进入相关功能操作界面。 -->
|
|
|
<i class="layui-icon layui-icon-survey"></i>
|
|
|
<!-- 创建一个图标元素,应用“layui-icon”样式类以及具体的图标样式“layui-icon-survey”,用于展示特定的图标(这里可能是表示查询相关的图标),增强功能链接的可视化效果,让用户更直观地识别功能。 -->
|
|
|
<cite>学生信息查询</cite>
|
|
|
<!-- 创建一个引用(cite)元素,用于显示具体的功能名称文本“学生信息查询”,明确告知用户该链接对应的功能是什么,方便用户进行操作选择。 -->
|
|
|
</a>
|
|
|
</li>
|
|
|
<li class="layui-col-xs3">
|
|
|
<a lay-href="/mavenTemplate/teacher/query">
|
|
|
<i class="layui-icon layui-icon-survey"></i>
|
|
|
<cite>教师信息查询</cite>
|
|
|
</a>
|
|
|
<!-- 与上述“学生信息查询”功能项类似,创建教师信息查询的功能链接元素,包含对应的图标展示和功能名称文本显示,链接地址指向“/mavenTemplate/teacher/query”,点击可进入教师信息查询相关页面,方便教师查询教师相关信息。 -->
|
|
|
</li>
|
|
|
<li class="layui-col-xs3">
|
|
|
<a lay-href="/mavenTemplate/class/query">
|
|
|
<i class="layui-icon layui-icon-survey"></i>
|
|
|
<cite>班级信息查询</cite>
|
|
|
</a>
|
|
|
<!-- 同样的结构,创建班级信息查询的功能链接元素,展示对应图标,显示功能名称“班级信息查询”,链接指向“/mavenTemplate/class/query”,用于引导用户进入班级信息查询功能页面,获取班级相关信息。 -->
|
|
|
</li>
|
|
|
<li class="layui-col-xs3">
|
|
|
<a lay-href="/mavenTemplate/major/query">
|
|
|
<i class="layui-icon layui-icon-survey"></i>
|
|
|
<cite>专业&学院信息查询</cite>
|
|
|
</a>
|
|
|
<!-- 创建专业和学院信息查询的功能链接元素,展示图标并显示功能名称“专业&学院信息查询”(这里“&”是HTML中表示“&”符号的实体编码,用于正确显示“专业&学院信息查询”这样的文本内容),链接地址指向“/mavenTemplate/major/query”,方便用户查询专业和学院相关信息。 -->
|
|
|
</li>
|
|
|
<li class="layui-col-xs3">
|
|
|
<a lay-href="/mavenTemplate/user/info">
|
|
|
<i class="layui-icon layui-icon-user"></i>
|
|
|
<cite>个人资料</cite>
|
|
|
</a>
|
|
|
<!-- 创建个人资料查看或编辑相关的功能链接元素,图标样式为“layui-icon-user”表示用户相关图标,显示功能名称“个人资料”,链接指向“/mavenTemplate/user/info”,点击可进入个人资料管理相关页面,方便用户查看和修改自己的个人信息。 -->
|
|
|
</li>
|
|
|
<li class="layui-col-xs3">
|
|
|
<a lay-href="/mavenTemplate/user/password">
|
|
|
<i class="layui-icon layui-icon-set"></i>
|
|
|
<cite>修改密码</cite>
|
|
|
</a>
|
|
|
<!-- 创建用于修改密码的功能链接元素,图标样式为“layui-icon-set”(可能表示设置相关图标),显示功能名称“修改密码”,链接指向“/mavenTemplate/user/password”,点击可进入密码修改功能页面,方便用户更新自己的登录密码,保障账号安全。 -->
|
|
|
</li>
|
|
|
<li class="layui-col-xs3">
|
|
|
<a lay-href="/mavenTemplate/user/email">
|
|
|
<i class="layui-icon layui-icon-set"></i>
|
|
|
<cite>修改邮箱</cite>
|
|
|
</a>
|
|
|
<!-- 创建修改邮箱的功能链接元素,同样使用“layui-icon-set”图标样式,显示功能名称“修改邮箱”,链接指向“/mavenTemplate/user/email”,点击可进入邮箱修改功能页面,便于用户更新自己关联账号的邮箱地址等信息。 -->
|
|
|
</li>
|
|
|
<li class="layui-col-xs3">
|
|
|
<a lay-href="/mavenTemplate/student/modify">
|
|
|
<i class="layui-icon layui-icon-survey"></i>
|
|
|
<cite>学生信息修改</cite>
|
|
|
</a>
|
|
|
<!-- 创建学生信息修改的功能链接元素,图标为“layui-icon-survey”,显示功能名称“学生信息修改”,链接指向“/mavenTemplate/student/modify”,点击可进入对学生信息进行修改的功能页面,方便教师等有权限用户对学生相关信息进行编辑更新操作。 -->
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-card">
|
|
|
<!-- 再次创建一个Layui框架样式的卡片元素,用于展示另一个功能模块或者信息板块的内容,这里用于展示学校最新公告相关信息,通过卡片形式使其与其他内容区分开来,保持页面布局的清晰性和可读性。 -->
|
|
|
<div class="layui-card-header">学校最新公告</div>
|
|
|
<!-- 创建卡片的头部区域元素,文本内容显示为“学校最新公告”,用于给该卡片添加标题,明确提示下面卡片主体内容是关于学校最新发布的公告信息,方便用户快速知晓该部分的主题。 -->
|
|
|
<c:forEach items="${notifys}" var="notify">
|
|
|
<!-- 使用JSTL(JavaServer Pages Standard Tag Library)的“forEach”标签来进行循环遍历操作,“items”属性指定了要遍历的集合对象,在这里就是名为“notifys”的集合(这个集合通常是在服务器端,比如对应的Servlet中通过查询数据库或者其他数据存储方式获取到的学校公告相关数据,然后将这些数据封装成集合的形式,再设置并传递到当前的JSP页面中来的),“var”属性定义了一个变量名“notify”,在每次循环的过程中,会从“notifys”集合里依次取出每一个元素,并将当前取出的元素赋值给这个变量,方便在循环体内部使用该变量来获取元素中的具体数据内容,例如公告的详细信息、发布日期等。 -->
|
|
|
<div class="layui-card-body" id="notify">${notify.notifyInfo}<p>${notify.notifyDate}</div>
|
|
|
<!-- 在循环体内部创建卡片的主体内容区域元素,应用ID为“notify”(与前面定义的样式选择器匹配,可能用于特定的样式应用),通过EL表达式输出从集合元素(赋值给“notify”变量)中获取的公告详细信息(“${notify.notifyInfo}”)以及公告发布日期(“${notify.notifyDate}”),不过这里的HTML结构不太规范,应该将“<p>”标签正确闭合,如“<div class="layui-card-body" id="notify">${notify.notifyInfo}</div><p>${notify.notifyDate}</p>”,这样才能正确展示公告信息和日期,且符合HTML语法规范,方便用户查看学校发布的每条公告的具体内容和发布时间。 -->
|
|
|
</c:forEach>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div> |