|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
|
|
|
<!-- 这是JSP页面的指令，用于设置页面的相关属性。
|
|
|
contentType指定页面响应的内容类型为HTML，字符编码采用UTF-8。
|
|
|
language表示使用的编程语言是Java，pageEncoding同样指定页面编码为UTF-8，确保能正确处理中文等各种字符 -->
|
|
|
<html>
|
|
|
<head>
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入layui框架的样式表文件，路径为相对路径下的css/layui.css，用于页面的样式布局等美化 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入自定义的样式表文件style.css（相对路径），用于添加项目特定的样式规则 -->
|
|
|
<link rel="icon" href="./images/favicon.ico" type="image/x-icon">
|
|
|
<!-- 设置页面的图标，图标文件位于相对路径下的images/favicon.ico，指定图标类型为image/x-icon -->
|
|
|
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
|
|
|
<!-- 同样是设置页面的快捷方式图标，与上面的图标设置类似，很多浏览器会根据此显示页面标签上的小图标 -->
|
|
|
<script src="layui.js"></script>
|
|
|
<!-- 引入layui框架的JavaScript脚本文件，用于实现layui框架相关的功能 -->
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
|
|
<!-- 从CDN（内容分发网络）引入jQuery库的最小化版本，jQuery是常用的JavaScript库，方便进行DOM操作、事件处理等 -->
|
|
|
</head>
|
|
|
<body class="layui-layout-body">
|
|
|
<!-- 设置body标签的类名为layui-layout-body，可能会被相关的样式表用于布局等样式应用 -->
|
|
|
<div class="layui-layout layui-layout-admin">
|
|
|
<!-- 创建一个具有layui-layout和layui-layout-admin类名的div，可能是用于整体的页面布局框架，layui框架相关的布局样式会作用于此 -->
|
|
|
<div class="layui-header">
|
|
|
<!-- 这是页面头部区域的div，通常放置一些导航、标题等元素 -->
|
|
|
<div class="layui-logo" style="font-size: 52px">SIMS</div>
|
|
|
<!-- 创建一个具有layui-logo类名的div，显示内容为“SIMS”，并且设置字体大小为52px，可能是页面的标识、系统名称等 -->
|
|
|
<!-- 头部区域（可配合layui已有的水平导航） -->
|
|
|
<ul class="layui-nav layui-layout-left">
|
|
|
<!-- 创建一个无序列表，类名为layui-nav和layui-layout-left，用于放置左侧的导航栏元素，layui-nav类名表明这是layui框架的导航组件 -->
|
|
|
<li class="layui-nav-item"><a class = "layui-icon layui-icon-home" id="fresh" href="index.jsp"> 主页</a></li>
|
|
|
<!-- 创建一个列表项，里面包含一个链接。链接具有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>
|
|
|
<!-- 类似上面的列表项，这个链接点击时会执行JavaScript代码location.reload()来刷新当前页面，图标类名为layui-icon-refresh-3，显示文本为“刷新” -->
|
|
|
<li class="layui-nav-item">
|
|
|
<a class="layui-icon layui-icon-link" href="javascript:;"> 其它</a>
|
|
|
<!-- 创建一个列表项，里面的链接初始点击没有具体跳转地址（href为javascript:;），图标类名为layui-icon-link，显示文本为“其它”，可能后续通过JavaScript动态添加功能 -->
|
|
|
<dl class="layui-nav-child">
|
|
|
<!-- 在这个列表项里创建一个定义列表，类名为layui-nav-child，通常用于显示下拉菜单等子导航内容 -->
|
|
|
<dd><a href="#">小吐槽</a></dd>
|
|
|
<!-- 定义列表中的一项，里面的链接暂时没有具体跳转地址（href为#），显示文本为“小吐槽”，可能后续添加对应功能 -->
|
|
|
<dd><a href="#">学校公告</a></dd>
|
|
|
<!-- 同样是定义列表中的一项，链接暂时无实际跳转（href为#），显示文本为“学校公告” -->
|
|
|
</dl>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<ul class="layui-nav layui-layout-right">
|
|
|
<!-- 创建一个无序列表，类名为layui-nav和layui-layout-right，用于放置右侧的导航栏元素 -->
|
|
|
<li class="layui-nav-item">
|
|
|
<a href="javascript:;">
|
|
|
<!-- 列表项中的链接，初始点击无具体跳转（href为javascript:;），可能后续添加对应JavaScript逻辑 -->
|
|
|
<img src="https://cdn.yoyling.com/logo.png" class="layui-nav-img">
|
|
|
<!-- 显示一张图片，图片来源是指定的URL，并且具有layui-nav-img类名，可能是用户头像等用途 -->
|
|
|
${admin.a_id} 管理员
|
|
|
<!-- 这里使用了EL表达式（Expression Language）${admin.a_id}，可能是从后台获取管理员的编号等信息并显示，后面跟着文本“管理员” -->
|
|
|
</a>
|
|
|
<dl class="layui-nav-child">
|
|
|
<!-- 同样创建一个定义列表，用于显示下拉菜单等子导航内容 -->
|
|
|
<dd><a href="#">个人信息</a></dd>
|
|
|
<!-- 定义列表项，链接暂时无实际跳转（href为#），显示文本为“个人信息” -->
|
|
|
<dd><a href="${pageContext.request.contextPath}/logoutServlet">退出</a></dd>
|
|
|
<!-- 定义列表项，链接指向名为logoutServlet的后端资源路径（通过pageContext.request.contextPath获取当前项目的上下文路径拼接），显示文本为“退出”，用于执行退出登录等相关操作 -->
|
|
|
</dl>
|
|
|
</li>
|
|
|
<li class="layui-nav-item"><a class="layui-icon layui-icon-about" href="JavaScript:alertabout()"> 关于</a></li>
|
|
|
<!-- 列表项中的链接，点击时会调用名为alertabout的JavaScript函数，图标类名为layui-icon-about，显示文本为“关于” -->
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script>
|
|
|
//注意：导航 依赖 element 模块，否则无法进行功能性操作
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
});
|
|
|
<!-- 使用layui框架的use方法来加载element模块，加载成功后获取element对象并调用其init方法，对页面中的相关元素进行初始化等操作，确保导航等功能正常使用 -->
|
|
|
</script>
|
|
|
<script type="text/javascript">
|
|
|
function alertabout() {
|
|
|
alert("学生信息管理系统\n陈双全1812123206");
|
|
|
}
|
|
|
<!-- 定义一个名为alertabout的JavaScript函数，当函数被调用时，会弹出一个包含“学生信息管理系统”以及“陈双全1812123206”内容的提示框 -->
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
