|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
|
|
|
<!-- JSP页面指令，用于设置页面相关属性：
|
|
|
- “contentType”属性指定页面内容类型为“text/html”，表明页面以HTML格式展示内容，同时设置字符编码为“UTF-8”，确保能正确处理和显示各种字符（如中文等），避免乱码。
|
|
|
- “language=java”说明该页面内部逻辑使用Java语言来实现，比如与服务器交互、处理业务数据等操作可通过Java代码完成。
|
|
|
- “pageEncoding”属性再次明确页面的编码格式为“UTF-8”，它主要用于指定JSP页面本身的编码方式，与“contentType”中的编码设置相配合，保证整个页面字符处理的一致性。 -->
|
|
|
|
|
|
<html>
|
|
|
<head>
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入Layui框架的样式文件，通过相对路径“./css/layui.css”找到对应的CSS文件，该文件定义了Layui框架相关组件（如导航栏、表格、按钮等元素）的样式规则，使页面运用Layui框架的元素按预设样式展示，保持页面整体风格统一、美观。 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入自定义的样式文件“style.css”，开发人员可在其中对页面样式进行个性化定制，例如覆盖Layui框架部分默认样式，或添加特定的布局、颜色搭配等样式设置，使其符合项目的特定设计需求。 -->
|
|
|
<link rel="icon" href="./images/favicon.ico" type="image/x-icon">
|
|
|
<!-- 设置页面的图标（favicon），浏览器在地址栏、书签栏等位置会显示该图标，通过指定相对路径“./images/favicon.ico”找到对应的图标文件，其类型为“image/x-icon”，用于标识该网页，增强页面的辨识度。 -->
|
|
|
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
|
|
|
<!-- 同样是设置页面的快捷方式图标，和上面“link rel="icon"”作用类似，在不同浏览器或操作系统环境下，确保当页面被添加为快捷方式时能正确显示对应的图标，提升用户体验和页面的品牌辨识度。 -->
|
|
|
<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">
|
|
|
<!-- 为页面主体设置样式类为“layui-layout-body”，这通常是遵循Layui框架的样式规范，意味着页面主体部分将应用Layui框架相关的布局样式，方便后续按照框架既定的布局方式来组织页面内容，营造出符合框架风格的页面整体效果。 -->
|
|
|
<div class="layui-layout layui-layout-admin">
|
|
|
<!-- 创建采用Layui框架的布局容器，使用“layui-layout”和“layui-layout-admin”样式类，按Layui框架提供的布局模式规划页面布局，常用于后台管理系统，有着清晰规范的分区结构，便于组织不同功能内容，比如划分出头部、侧边栏、主体内容区、页脚等区域。 -->
|
|
|
<div class="layui-header">
|
|
|
<!-- 在Layui布局容器内定义页面的头部区域，该区域一般用于放置页面的标题、导航菜单等重要元素，是用户进入页面首先看到且频繁操作的部分，对于页面的整体导航和功能引导起着关键作用。 -->
|
|
|
<div class="layui-logo" style="font-size: 52px">SIMS</div>
|
|
|
<!-- 创建一个带有特定样式（设置字体大小为52px）的div元素，用于展示页面的标识或名称，这里显示的是“SIMS”，通常作为网站或系统的品牌标识展示在头部显眼位置，方便用户识别和区分不同的系统。 -->
|
|
|
<!-- 头部区域（可配合layui已有的水平导航） -->
|
|
|
<ul class="layui-nav layui-layout-left">
|
|
|
<!-- 创建一个使用Layui框架样式的无序列表，作为水平导航菜单的容器，应用“layui-nav”样式类使其呈现出Layui框架定义的导航样式，“layui-layout-left”样式类用于控制导航在页面头部靠左布局，里面放置具体的导航菜单项，方便用户在页面不同功能模块间进行切换操作。 -->
|
|
|
<li class="layui-nav-item"><a class = "layui-icon layui-icon-home" id="fresh" href="index.jsp"> 主页</a></li>
|
|
|
<!-- 创建导航菜单中的一个菜单项，应用“layui-nav-item”样式类使其具备Layui框架中菜单项的基本样式效果，里面包含一个链接元素，链接应用“layui-icon layui-icon-home”样式类展示对应的图标（这里是主页图标），设置ID为“fresh”，链接地址指向“index.jsp”，点击可跳转到主页页面，文本显示为“ 主页”，方便用户返回系统首页。 -->
|
|
|
<li class="layui-nav-item "><a class = "layui-icon layui-icon-refresh-3" href="javascript:location.reload();"> 刷新</a></li>
|
|
|
<!-- 同样创建菜单项，图标样式为“layui-icon layui-icon-refresh-3”表示刷新图标，链接地址设置为“javascript:location.reload();”，意味着点击该链接会执行JavaScript代码来刷新当前页面，实现页面内容的重新加载，文本显示为“ 刷新”，方便用户手动刷新页面查看最新数据或状态。 -->
|
|
|
<li class="layui-nav-item">
|
|
|
<a class="layui-icon layui-icon-link" href="javascript:;"> 其它</a>
|
|
|
<!-- 创建菜单项，图标样式为“layui-icon layui-icon-link”，链接地址暂时设置为“javascript:;”，表示点击暂时不会进行页面跳转（可能后续通过JavaScript代码添加点击事件来实现具体的交互逻辑），文本显示为“ 其它”，作为一个可展开的父级菜单，用于包含更多相关的子菜单选项。 -->
|
|
|
<dl class="layui-nav-child">
|
|
|
<!-- 创建一个定义列表（dl）元素，应用“layui-nav-child”样式类，用于放置“其它”菜单项下的子菜单列表，使其呈现出子菜单的样式效果，与父级菜单在视觉上进行区分，且符合Layui框架的导航菜单结构规范。 -->
|
|
|
<dd><a href="#">小吐槽</a></dd>
|
|
|
<!-- 创建一个定义列表项（dd）元素，里面包含一个链接元素，链接暂时指向一个空的地址（“#”），通常表示在当前页面内进行定位（这里可能后续会完善具体的跳转逻辑），文本显示为“小吐槽”，点击可进入对应的小吐槽相关功能页面（具体功能需后续开发完善）。 -->
|
|
|
<dd><a href="${pageContext.request.contextPath}/notifyListToServlet">学校公告</a></dd>
|
|
|
<!-- 创建定义列表项及链接元素，链接通过EL表达式（Expression Language）动态生成，指向“notifyListToServlet”这个Servlet，点击可跳转到对应的Servlet处理逻辑，用于展示学校公告相关信息，文本显示为“学校公告”，方便用户查看学校发布的各类通知公告信息。 -->
|
|
|
</dl>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<ul class="layui-nav layui-layout-right">
|
|
|
<!-- 创建另一个使用Layui框架样式的无序列表，应用“layui-nav”样式类呈现导航样式，“layui-layout-right”样式类用于控制导航在页面头部靠右布局，通常用于放置与用户相关的操作菜单，如用户登录信息、设置、退出等功能选项。 -->
|
|
|
<li class="layui-nav-item">
|
|
|
<a href="javascript:;">
|
|
|
<img src="${pageContext.request.contextPath}/showPhotoServlet" class="layui-nav-img">
|
|
|
${teacher.t_id} ${teacher.t_name}
|
|
|
</a>
|
|
|
<!-- 创建菜单项，链接地址暂时设置为“javascript:;”，表示点击暂时不会进行页面跳转（后续可能添加逻辑），里面包含一个图片元素，图片的来源地址通过EL表达式指向“showPhotoServlet”这个Servlet（大概率是用于获取并展示用户的头像图片），应用“layui-nav-img”样式类使其按照Layui框架中导航栏图片的样式显示，后面跟着通过EL表达式显示的教师工号（${teacher.t_id}）和教师姓名（${teacher.t_name}），整体用于展示当前登录教师的基本信息，方便用户知晓当前登录身份。 -->
|
|
|
<dl class="layui-nav-child">
|
|
|
<!-- 创建子菜单列表容器，用于放置该菜单项展开后的子菜单选项，符合Layui框架导航结构规范。 -->
|
|
|
<dd><a href="#">个人信息</a></dd>
|
|
|
<!-- 创建定义列表项及链接元素，链接暂时指向空地址（“#”），表示在当前页面内定位（后续可能完善具体跳转逻辑），文本显示为“个人信息”，点击可进入查看或编辑个人信息的相关页面（功能需后续开发）。 -->
|
|
|
<dd><a href="${pageContext.request.contextPath}/logoutServlet">退出</a></dd>
|
|
|
<!-- 创建定义列表项及链接元素，链接通过EL表达式指向“logoutServlet”这个Servlet，点击可执行退出登录的操作，跳转到对应的Servlet处理逻辑，实现安全退出系统的功能，文本显示为“退出”，方便用户结束当前登录会话。 -->
|
|
|
</dl>
|
|
|
</li>
|
|
|
<li class="layui-nav-item"><a class="layui-icon layui-icon-about" href="JavaScript:alertabout()"> 关于</a></li>
|
|
|
<!-- 创建菜单项，图标样式为“layui-icon layui-icon-about”表示关于图标，链接地址设置为“JavaScript:alertabout()”，意味着点击该链接会调用名为“alertabout”的JavaScript函数（在后续代码中有定义），用于展示关于系统的相关信息，文本显示为“ 关于”，方便用户了解系统的基本情况、版本信息等内容。 -->
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script>
|
|
|
//注意：导航 依赖 element 模块，否则无法进行功能性操作
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
// 使用Layui框架的模块加载机制，加载“element”模块，获取该模块实例并赋值给变量“element”，然后调用模块的“init”方法进行初始化操作。“element”模块在Layui框架中通常用于页面元素的操作、动态渲染以及交互效果实现等，通过初始化该模块，可以准备好相关的DOM操作环境、绑定必要的事件等，确保模块能正常工作，进而实现页面中基于该模块的各种功能，例如展开收起导航菜单、切换菜单项的选中状态等操作，使得导航菜单具备相应的交互功能。
|
|
|
});
|
|
|
</script>
|
|
|
<script type="text/javascript">
|
|
|
function alertabout() {
|
|
|
alert("学生信息管理系统\n陈双全1812123206");
|
|
|
// 定义一个名为“alertabout”的JavaScript函数，当被调用时，会弹出一个提示框，提示框内显示“学生信息管理系统”以及“陈双全1812123206”这两行文本信息，通常用于向用户展示系统的相关说明信息，比如系统名称、开发者信息等内容。
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |
