|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
|
|
|
<!-- 这是JSP页面的指令，设置页面的内容类型为text/html（即HTML格式页面），指定字符编码为UTF-8，同时表明页面使用Java语言编写并且编码格式也是UTF-8，确保页面能正确处理和显示各种字符 -->
|
|
|
<html>
|
|
|
<head>
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入layui框架的样式表文件，通过相对路径（从当前页面所在目录下的css文件夹中查找）应用layui框架提供的样式，用于页面布局、组件美化等，使页面呈现出layui框架定义的外观风格 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入自定义的样式表文件style.css，同样采用相对路径引用，用于添加符合特定需求的个性化页面样式，对页面显示效果做进一步定制 -->
|
|
|
<link rel="icon" href="./images/favicon.ico" type="image/x-icon">
|
|
|
<!-- 设置页面的图标（favicon），即浏览器标签页上显示的小图标，通过相对路径指定图标文件的位置（位于当前页面所在目录下的images文件夹中），类型为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.js和当前页面在同一级目录下），layui脚本为页面提供众多交互功能以及各种组件支持，例如实现菜单交互、页面元素动态展示等功能 -->
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
|
|
<!-- 从CDN（内容分发网络）引入jQuery库的最小化版本，jQuery是常用的JavaScript库，能简化页面中对DOM元素的操作、事件处理以及实现各种动画效果等，方便开发人员编写JavaScript代码来实现页面交互逻辑 -->
|
|
|
</head>
|
|
|
<body class="layui-layout-body">
|
|
|
<!-- 为页面主体（body）设置类名“layui-layout-body”，这个类名通常与layui框架的布局样式相关联，按照其框架规范来构建页面整体外观，可能会应用默认的背景、边距等样式 -->
|
|
|
<div class="layui-layout layui-layout-admin">
|
|
|
<!-- 创建一个div元素，并赋予其两个类名“layui-layout”和“layui-layout-admin”，这一般是layui框架中用于定义页面整体布局结构的特定类名，遵循layui框架的布局规范来划分页面不同区域，比如头部、主体、侧边栏等（具体根据框架的设定） -->
|
|
|
<div class="layui-header">
|
|
|
<!-- 创建一个用于表示页面头部的div元素，在layui框架布局里，这个区域通常用于放置如网站logo、导航栏等头部相关的元素 -->
|
|
|
<div class="layui-logo" style="font-size: 52px">SIMS</div>
|
|
|
<!-- 创建一个带有特定样式（设置字体大小为52px）的div元素，显示内容为“SIMS”，一般作为网站或系统的标识（logo），在layui框架里，这个元素通常会按照框架对.logo类的样式设定来展示，比如位置、颜色等 -->
|
|
|
<!-- 头部区域（可配合layui已有的水平导航） -->
|
|
|
<ul class="layui-nav layui-layout-left">
|
|
|
<!-- 创建一个无序列表（ul）元素，应用了“layui-nav”和“layui-layout-left”类名，在layui框架中，“layui-nav”用于构建导航栏，“layui-layout-left”表示该导航栏在页面布局中靠左显示，这个列表里会放置导航栏的各个菜单项 -->
|
|
|
<li class="layui-nav-item"><a class = "layui-icon layui-icon-home" id="fresh" href="index.jsp"> 主页</a></li>
|
|
|
<!-- 创建一个列表项（li）元素，应用“layui-nav-item”类名表示这是导航栏中的一个可点击项，内部包含一个超链接（a标签），超链接应用了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），通过设置href属性为“javascript:location.reload();”，点击时会执行JavaScript代码来重新加载当前页面 -->
|
|
|
<li class="layui-nav-item">
|
|
|
<a class="layui-icon layui-icon-link" href="javascript:;"> 其它</a>
|
|
|
<!-- 创建一个导航项，显示文本为“ 其它”，应用了链接图标类（layui-icon layui-icon-link），但href属性设置为“javascript:;”，暂时没有实际的跳转链接，可能后续会通过JavaScript动态添加功能，点击时目前不会有实际跳转操作 -->
|
|
|
<dl class="layui-nav-child">
|
|
|
<!-- 创建一个定义列表（dl）元素，应用“layui-nav-child”类名，在layui框架中，这个类名用于表示该列表是上面导航项的子菜单，用于展示下拉菜单等子级导航内容 -->
|
|
|
<dd><a href="${pageContext.request.contextPath}/complaintListServlet">小吐槽</a></dd>
|
|
|
<!-- 创建一个定义列表项（dd）元素，内部包含一个超链接，链接地址指向名为“complaintListServlet”的Servlet（通过EL表达式动态获取上下文路径拼接而成），显示文本为“小吐槽”，点击可跳转到对应的功能页面，可能用于查看一些吐槽信息等功能 -->
|
|
|
<dd><a href="${pageContext.request.contextPath}/notifyListToServlet">学校公告</a></dd>
|
|
|
<!-- 类似上面的dd元素，这里的超链接指向“notifyListToServlet”Servlet，显示文本为“学校公告”，用于跳转到查看学校公告的页面 -->
|
|
|
</dl>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<ul class="layui-nav layui-layout-right">
|
|
|
<!-- 创建另一个无序列表元素，应用“layui-nav”和“layui-layout-right”类名，用于构建靠右显示的导航栏，放置一些和用户相关或者其他功能的导航项 -->
|
|
|
<li class="layui-nav-item">
|
|
|
<a href="javascript:;">
|
|
|
<img src="${pageContext.request.contextPath}/showPhotoServlet" class="layui-nav-img">
|
|
|
${student.s_id} ${student.s_name}
|
|
|
</a>
|
|
|
<!-- 创建一个导航项，超链接的href属性暂时设置为“javascript:;”无实际跳转功能（可能后续添加），内部包含一个图片元素（img），图片的src属性指向名为“showPhotoServlet”的Servlet（通过EL表达式动态获取上下文路径拼接，可能用于获取并显示用户头像），并应用“layui-nav-img”类名按照layui框架样式展示图片，后面跟着通过EL表达式显示的学生学号（${student.s_id}）和姓名（${student.s_name}），整体用于展示当前登录学生的信息 -->
|
|
|
<dl class="layui-nav-child">
|
|
|
<dd><a href="${pageContext.request.contextPath}/studentInfomationServlet">个人信息</a></dd>
|
|
|
<!-- 创建子菜单列表项，超链接指向“studentInfomationServlet”Servlet，显示文本为“个人信息”，点击可跳转到查看或修改个人信息的页面 -->
|
|
|
<dd><a href="${pageContext.request.contextPath}/uploadImageServlet">修改头像</a></dd>
|
|
|
<!-- 子菜单列表项，超链接指向“uploadImageServlet”Servlet，显示文本为“修改头像”，用于跳转到修改用户头像的功能页面 -->
|
|
|
<dd><a href="${pageContext.request.contextPath}/logoutServlet">退出</a></dd>
|
|
|
<!-- 子菜单列表项，超链接指向“logoutServlet”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”图标类（表示关于图标），href属性设置为调用JavaScript函数“alertabout()”的代码，点击时会执行该函数弹出关于系统的相关信息 -->
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
//注意：导航 依赖 element 模块，否则无法进行功能性操作
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
// 使用layui框架的element模块，调用其init方法进行初始化操作。在layui框架中，element模块提供很多页面元素交互相关功能，例如实现页面布局动态切换、菜单展开收起等交互效果，通过调用init方法可激活这些功能，确保页面上基于element模块构建的各种UI组件能正常工作
|
|
|
});
|
|
|
</script>
|
|
|
<script type="text/javascript">
|
|
|
function alertabout() {
|
|
|
alert("学生信息管理系统\n陈双全1812123206");
|
|
|
// 定义一个名为“alertabout”的JavaScript函数，当被调用时，会弹出一个包含特定文本信息（“学生信息管理系统”以及“陈双全1812123206”，中间换行显示）的提示框，用于展示关于系统的一些基本信息，比如系统名称、开发者相关信息等
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
