|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<!-- 以上两行是JSP页面的指令声明：
|
|
|
第一行设置此JSP页面输出内容的类型为HTML格式（text/html），并且指定字符编码为UTF-8，同时表明该页面使用Java语言来编写相关逻辑代码；
|
|
|
第二行引入了JSTL（JavaServer Pages Standard Tag Library）的核心标签库，定义了前缀“c”，后续就能利用这个标签库提供的标签在页面里进行诸如数据遍历、条件判断等操作 -->
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>公告列表</title>
|
|
|
<!-- 设置HTML页面的标题为“公告列表”，这个标题会显示在浏览器的标题栏上，让用户直观知晓当前页面的主要内容 -->
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入layui框架的样式表文件，layui.css里面包含了众多用于页面布局设计、各种组件样式定义等的样式规则，借助它可以快速搭建出风格统一的页面外观 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入自定义的style.css样式文件，通常是开发者根据页面的特定需求编写的，用于对layui框架的默认样式进行补充或者覆盖，实现更个性化的页面展示效果 -->
|
|
|
<script src="./layui.js"></script>
|
|
|
<!-- 引入layui框架对应的JavaScript文件，layui.js包含了大量实现页面交互功能、各种组件业务逻辑等的代码，是让页面具备动态交互能力的关键所在 -->
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
|
|
<!-- 引入jQuery库，jQuery是一个广泛应用的JavaScript库，它提供了简洁且方便的方法来操作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">
|
|
|
<div class="layui-body">
|
|
|
<!-- 这是layui框架中定义的用于承载页面主要内容的部分，也就是所谓的内容主体区域，各种核心业务数据、功能展示都会放置在此处 -->
|
|
|
<div style="padding: 15px;">
|
|
|
<span class="layui-breadcrumb">
|
|
|
<a>教师端</a>
|
|
|
<a><cite>公告列表</cite></a>
|
|
|
</span>
|
|
|
<!-- 展示面包屑导航，通过这种方式可以清晰地向教师展示当前页面在整个教师端系统的层级结构中所处的位置，方便教师了解自己当前所在的页面路径 -->
|
|
|
<p> </p>
|
|
|
|
|
|
<table class="layui-table" lay-filter="test">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>公告ID</th>
|
|
|
<th>公告日期</th>
|
|
|
<th>公告内容</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<!-- 定义表格的表头部分，这里创建了三个列标题，分别用于展示公告的唯一标识符（公告ID）、公告发布的具体日期以及公告包含的详细内容，后续表格行的数据会按照这个表头结构来依次填充 -->
|
|
|
<c:forEach items="${notifys}" var="notify" varStatus="n">
|
|
|
<tr>
|
|
|
<td>${n.count}</td>
|
|
|
<td>${notify.notifyDate}</td>
|
|
|
<td>${notify.notifyInfo}</td>
|
|
|
</tr>
|
|
|
</c:forEach>
|
|
|
<!-- 使用JSTL的forEach标签对名为“notifys”的集合进行循环遍历，这个集合通常是由后端程序传递过来的公告数据列表。
|
|
|
针对列表里的每一条公告数据（用变量“notify”表示），都会创建一个表格行（<tr>标签）来展示对应公告的相关信息：
|
|
|
第一个<td>单元格展示的是序号，通过varStatus对象的count属性来实现计数功能，序号从1开始；
|
|
|
第二个<td>单元格展示的是该公告的发布日期；
|
|
|
第三个<td>单元格展示的是该公告包含的具体内容 -->
|
|
|
</table>
|
|
|
|
|
|
<jsp:include page="/footer.jsp"></jsp:include>
|
|
|
<!-- 引入“/footer.jsp”页面，一般来说，这个页面用于展示页面底部的相关信息，像版权声明、联系方式、网站相关的友情链接等内容 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
//JavaScript代码区域，以下代码的目的是初始化layui框架的相关功能模块，使其能正常工作并提供相应的交互功能
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
});
|
|
|
// 通过layui框架提供的use方法来加载“element”模块，在加载完成后的回调函数里获取该模块的实例（将其赋值给变量“element”），然后调用实例的“init”方法进行初始化操作。
|
|
|
// “element”模块在layui框架中主要负责处理页面元素相关的交互逻辑，例如菜单的展开与收起、选项卡的切换等功能的初始化工作
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
