|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<!-- 上述两行是JSP页面相关的指令:
|
|
|
第一行用于设置此JSP页面的内容类型为text/html(即HTML格式页面),指定字符编码为UTF-8,同时表明该页面使用Java语言来处理页面中的相关逻辑。
|
|
|
第二行引入了JSTL(JavaServer Pages Standard Tag Library)的核心标签库,给其定义的前缀是"c",后续就能通过这个前缀来使用JSTL提供的各类标签,例如用于循环遍历、条件判断等操作的标签,便于在JSP页面中灵活处理动态数据 -->
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>${html_title}</title>
|
|
|
<!-- 设置当前HTML页面的标题,这里使用了EL表达式(${html_title}),意味着标题的值是动态从后台传递过来的某个变量所对应的值,而不是固定的文本 -->
|
|
|
<script>
|
|
|
//JavaScript代码区域
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
// 使用layui框架的element模块,调用其init方法进行初始化操作。在layui框架中,element模块提供了很多页面元素交互相关的功能,例如实现页面布局的动态切换、菜单的展开收起等交互效果,通过调用init方法可以激活这些功能,确保页面上基于element模块构建的各种UI组件能够正常工作
|
|
|
});
|
|
|
</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),使其能在水平方向排列且可以设置宽高;
|
|
|
宽度占满父元素的100%,高度设置为60px;
|
|
|
通过line-height属性让内部文本垂直居中;
|
|
|
文本水平居中(text-align: center);
|
|
|
设置圆角半径为2px,使其边角更圆润;
|
|
|
字体大小为30px;
|
|
|
背景颜色为浅灰色(#F8F8F8),文本颜色为深灰色(#333);
|
|
|
定义了CSS过渡效果(transition),当元素的样式属性发生变化时,会在0.3秒内平滑过渡,同时添加了-webkit-前缀是为了兼容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">
|
|
|
<!-- 为页面主体(body)设置了类名"layui-layout-body",同时将背景颜色设定为浅灰色(颜色值为#F2F2F2),这里的类名大概率与layui框架的布局样式相关联,按照其框架规范来构建页面的整体外观 -->
|
|
|
<jsp:include page="/filterLogin.jsp"></jsp:include>
|
|
|
<!-- 通过JSP的include指令包含名为filterLogin.jsp的页面内容,通常这个页面用于处理用户登录相关的验证逻辑或者展示登录相关的界面元素,比如登录表单等,以此确保只有登录后的用户才能访问后续页面内容 -->
|
|
|
<jsp:include page="/WEB-INF/student/sHeader.jsp"></jsp:include>
|
|
|
<!-- 包含位于WEB-INF/student目录下的sHeader.jsp页面,该页面一般用于构建页面的头部区域,可能包含如网站logo、导航栏等常见的头部元素,起到统一页面头部布局的作用 -->
|
|
|
<jsp:include page="/WEB-INF/student/studentNav.jsp"></jsp:include>
|
|
|
<!-- 再次使用JSP的include指令,包含了WEB-INF/student目录下的studentNav.jsp页面,这个页面大概率是用来展示学生端特有的导航菜单内容,方便用户在不同功能模块之间进行切换操作 -->
|
|
|
<div class="layui-layout layui-layout-admin">
|
|
|
<!-- 创建一个div元素,并赋予其两个类名"layui-layout"和"layui-layout-admin",这通常是layui框架中用于定义页面整体布局结构的特定类名,遵循layui框架的布局规范来划分页面的不同区域 -->
|
|
|
<div class="layui-body">
|
|
|
<!-- 在上述布局div内部再创建一个div元素,类名为"layui-body",在layui框架里,这个区域一般是用于承载页面主要内容的部分,例如展示各种业务数据、操作按钮等内容 -->
|
|
|
<!-- 内容主体区域 -->
|
|
|
<div style="padding: 15px;">
|
|
|
<!-- 新建一个div元素,并通过内联样式设置其四周内边距为15px,这样做主要是为了对内部元素进行一定的排版,让页面内容看起来更加规整,避免显得过于紧凑或者松散 -->
|
|
|
<div class="layui-card">
|
|
|
<!-- 创建一个layui框架的卡片(card)组件,layui的卡片组件常用于对相关内容进行分组展示,使其在页面上有比较清晰的视觉划分 -->
|
|
|
<div class="layui-card-header" id="index-function">功能</div>
|
|
|
<!-- 创建一个用于显示卡片头部的div元素,设置了id为"index-function",显示文本为"功能",通常用于给卡片添加标题说明,在layui框架里会按照其样式规则展示,比如有特定的背景色、字体样式等 -->
|
|
|
<div class="layui-card-body">
|
|
|
<!-- 创建一个用于显示卡片主体内容的div元素,在layui框架中,这个区域就是放置具体内容的地方 -->
|
|
|
<ul class="layui-row layui-col-space10 layui-this">
|
|
|
<!-- 创建一个无序列表(ul)元素,应用了"layui-row"、"layui-col-space10"和"layui-this"类名:
|
|
|
"layui-row"表示该列表按照layui框架的布局规则以行的形式进行排列;
|
|
|
"layui-col-space10"用于设置列表项之间的水平间距为10px;
|
|
|
"layui-this"可能是用于标记当前元素处于某种特定状态(比如选中状态等,具体依赖layui框架的样式设定) -->
|
|
|
<li class="layui-col-xs3">
|
|
|
<!-- 创建一个列表项(li)元素,应用"layui-col-xs3"类名,表示该元素在小屏幕(xs,一般指手机等小尺寸设备)下占父元素宽度的1/4(基于layui的响应式布局规则) -->
|
|
|
<a href="${pageContext.request.contextPath}/studentSelectCourseListServlet">
|
|
|
<!-- 创建一个超链接(a标签),链接地址指向名为"studentSelectCourseListServlet"的Servlet(通过EL表达式动态获取上下文路径拼接而成),点击该链接会跳转到对应的功能页面,用于实现相关业务操作 -->
|
|
|
<i class="layui-icon layui-icon-survey"></i>
|
|
|
<!-- 创建一个图标元素(i标签),应用了layui框架的图标类(layui-icon layui-icon-survey,表示一个特定的图标样式),用于直观展示相关功能 -->
|
|
|
<cite>选课与成绩</cite>
|
|
|
<!-- 使用<cite>标签显示文本"选课与成绩",用于对链接对应的功能进行文字说明 -->
|
|
|
</a>
|
|
|
</li>
|
|
|
<li class="layui-col-xs3">
|
|
|
<a href="${pageContext.request.contextPath}/studentOptionalCourseServlet">
|
|
|
<i class="layui-icon layui-icon-survey"></i>
|
|
|
<cite>可选课程</cite>
|
|
|
</a>
|
|
|
<!-- 与上面的列表项类似,这个li元素也是创建一个功能链接,链接到"studentOptionalCourseServlet" Servlet,显示图标和文字说明分别为对应的图标样式和"可选课程",用于跳转到查看可选课程的页面 -->
|
|
|
</li>
|
|
|
<li class="layui-col-xs3">
|
|
|
<a href="${pageContext.request.contextPath}/findStudentByPageServlet">
|
|
|
<i class="layui-icon layui-icon-survey"></i>
|
|
|
<cite>本院学生信息</cite>
|
|
|
</a>
|
|
|
<!-- 同样的结构,链接指向"findStudentByPageServlet" Servlet,显示图标和文字说明用于跳转到查询本院学生信息的页面 -->
|
|
|
</li>
|
|
|
<li class="layui-col-xs3">
|
|
|
<a href="${pageContext.request.contextPath}/teacherListServlet">
|
|
|
<i class="layui-icon layui-icon-user"></i>
|
|
|
<cite>本院教师信息</cite>
|
|
|
</a>
|
|
|
<!-- 链接到"teacherListServlet" Servlet,图标样式换为表示用户的图标(layui-icon layui-icon-user),文字说明为"本院教师信息",用于查看本院教师相关信息 -->
|
|
|
</li>
|
|
|
<li class="layui-col-xs3">
|
|
|
<a href="${pageContext.request.contextPath}/cdcListServlet">
|
|
|
<i class="layui-icon layui-icon-set"></i>
|
|
|
<cite>学院专业查询</cite>
|
|
|
</a>
|
|
|
<!-- 链接到"cdcListServlet" Servlet,图标样式为另一种(layui-icon layui-icon-set),文字说明是"学院专业查询",用于进行学院专业相关信息的查询操作 -->
|
|
|
</li>
|
|
|
<li class="layui-col-xs3">
|
|
|
<a href="${pageContext.request.contextPath}/studentInfomationServlet">
|
|
|
<i class="layui-icon layui-icon-set"></i>
|
|
|
<cite>个人信息</cite>
|
|
|
</a>
|
|
|
<!-- 链接到"studentInfomationServlet" Servlet,图标样式和文字说明用于跳转到查看或修改个人信息的页面 -->
|
|
|
</li>
|
|
|
<li class="layui-col-xs3">
|
|
|
<a href="${pageContext.request.contextPath}/studentPasswordIndexServlet">
|
|
|
<i class="layui-icon layui-icon-survey"></i>
|
|
|
<cite>修改密码</cite>
|
|
|
</a>
|
|
|
<!-- 链接到"studentPasswordIndexServlet" Servlet,图标样式搭配文字说明,用于进入修改密码的功能页面 -->
|
|
|
</li>
|
|
|
<li class="layui-col-xs3">
|
|
|
<a href="${pageContext.request.contextPath}/fileListServlet">
|
|
|
<i class="layui-icon layui-icon-survey"></i>
|
|
|
<cite>文件列表</cite>
|
|
|
</a>
|
|
|
<!-- 链接到"fileListServlet" Servlet,图标样式与文字说明对应查看文件列表的功能,点击可跳转到相应页面 -->
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-card">
|
|
|
<!-- 再创建一个layui框架的卡片组件,用于展示另一部分内容 -->
|
|
|
<div class="layui-card-header">学校最新公告</div>
|
|
|
<!-- 创建卡片头部元素,显示文本为"学校最新公告",用于给下面的公告内容添加标题说明 -->
|
|
|
<c:forEach items="${notifys}" var="notify">
|
|
|
<!-- 使用JSTL的forEach标签来进行循环遍历操作,循环的对象是名为"notifys"的数据集合(这个集合通常是从后端传递过来的学校公告信息列表),每次循环将当前元素赋值给变量"notify" -->
|
|
|
<div class="layui-card-body" id="notify">${notify.notifyInfo}<p>${notify.notifyDate}</div>
|
|
|
<!-- 在每个循环中,创建一个用于显示卡片主体内容的div元素,设置id为"notify"(虽然这里id重复使用了,可能不太规范,但根据代码逻辑应该是想统一设置样式等),通过EL表达式展示公告的具体信息(${notify.notifyInfo}),后面跟着一个段落标签(<p>),再通过EL表达式展示公告的发布日期(${notify.notifyDate}),但这里缺少闭合的</p>标签,可能是代码遗漏,正确应该是<</p>来闭合段落标签,用于在页面上展示每条公告的详细内容和发布时间 -->
|
|
|
</c:forEach>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<jsp:include page="/footer.jsp"></jsp:include>
|
|
|
<!-- 包含名为footer.jsp的页面,一般该页面用于展示页面底部的一些通用信息,比如版权声明、网站相关链接、联系方式等内容 -->
|
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
$("#nav li:nth-child(1)").addClass("layui-nav-itemed");
|
|
|
// 使用jQuery选择器选中页面中id为"nav"的元素下的第1个子元素li,并为其添加类名"layui-nav-itemed",在layui框架里,这个类名可能用于控制导航菜单的展开或折叠状态,使得对应的菜单层级结构展示相应的效果,方便用户查看相关子菜单,这里是对第1个菜单项进行此操作
|
|
|
$("#nav li:nth-child(2)").addClass("layui-nav-itemed");
|
|
|
// 对id为"nav"的元素下的第2个子元素li添加"layui-nav-itemed"类名,作用同上,用于处理对应的导航菜单状态
|
|
|
$("#nav li:nth-child(3)").addClass("layui-nav-itemed");
|
|
|
// 对第3个li元素添加类名,控制对应菜单状态
|
|
|
$("#nav li:nth-child(4)").addClass("layui-nav-itemed");
|
|
|
// 对第4个li元素添加类名,控制对应菜单状态
|
|
|
$("#nav li:nth-child(5)").addClass("layui-nav-itemed");
|
|
|
// 对第5个li元素添加类名,控制对应菜单状态,具体效果都依赖layui框架对于该类名的样式和交互逻辑定义
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |