|
|
<%@ 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>文件列表</title>
|
|
|
<!-- 设置当前HTML页面的标题为"文件列表"，这个标题通常会显示在浏览器的标题栏位置 -->
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入layui框架的样式表文件，通过相对路径（从当前页面所在目录下的css文件夹中查找）来应用layui框架所提供的样式，用于页面布局、组件美化等方面 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 同样是引入样式表文件，不过这里的style.css是自定义的样式文件，也是通过相对路径引用，用于添加一些个性化的页面样式，满足特定的页面设计需求 -->
|
|
|
<script src="./layui.js"></script>
|
|
|
<!-- 引入layui框架的JavaScript脚本文件，从当前页面所在目录下获取该文件，该脚本为页面提供了诸多交互功能以及各种组件支持，方便实现如菜单交互、页面元素动态展示等功能 -->
|
|
|
<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" 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，主要用于对内部元素进行一定的排版，让内容看起来更加规整，避免显得过于紧凑或者松散 -->
|
|
|
<span class="layui-breadcrumb">
|
|
|
<a href="">学生端</a>
|
|
|
<a href="">个人信息管理</a>
|
|
|
<a><cite>文件列表</cite></a>
|
|
|
</span>
|
|
|
<!-- 创建一个layui框架提供的面包屑导航组件，通过一系列的超链接（a标签）展示当前页面在整个系统中的层级路径，这里展示了从"学生端"进入到"个人信息管理"，再到当前的"文件列表"页面，但目前超链接的href属性为空，可能后续需要完善具体的跳转地址，以实现页面导航功能 -->
|
|
|
<table class="layui-table" lay-filter="test">
|
|
|
<!-- 创建一个layui框架的表格组件，设置了一个名为"test"的过滤器，该过滤器可以在后续的JavaScript代码中用于配置表格相关的交互功能，例如实现表格行的点击事件、数据筛选、排序等操作 -->
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>ID</th>
|
|
|
<th>文件名</th>
|
|
|
<th>文件路径</th>
|
|
|
<th>文件大小</th>
|
|
|
<th>操作</th>
|
|
|
<!-- 定义表格头部的列标题，分别为"ID"（可能用于标识每条文件记录的序号等）、"文件名"、"文件路径"（用于显示文件存储的具体位置信息）、"文件大小"（展示文件所占存储空间大小）以及"操作"（一般用于放置针对文件的各种操作按钮，如下载、删除等） -->
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<c:forEach items="${fileLists}" var="filelist" varStatus="f">
|
|
|
<!-- 使用JSTL的forEach标签来进行循环遍历操作，循环的对象是名为"fileLists"的数据集合（这个集合通常是从后台传递过来的，包含了一系列文件相关信息的列表，比如文件名、路径、大小等），每次循环将当前元素赋值给变量"filelist"，同时利用"varStatus"获取循环的状态信息（例如当前循环的次数等）并赋值给变量"f" -->
|
|
|
<tr>
|
|
|
<td>${f.count}</td>
|
|
|
<td>${filelist.fileName}</td>
|
|
|
<td>${filelist.filePath}</td>
|
|
|
<td>${filelist.fileSize}</td>
|
|
|
<td><a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/downloadServlet?filename=${filelist.fileName}">下载</a></td>
|
|
|
<!-- 在表格的每一行中，通过EL表达式（Expression Language，如${f.count}等）分别展示对应的数据：
|
|
|
${f.count}表示当前循环的次数，作为序号列的值；
|
|
|
${filelist.fileName}展示文件的名称；
|
|
|
${filelist.filePath}显示文件存储的路径；
|
|
|
${filelist.fileSize}呈现文件的大小；
|
|
|
最后一列是一个超链接（a标签），设置了layui框架的按钮类名（layui-btn和layui-btn-normal）使其呈现出特定的按钮样式，其href属性指向了一个名为downloadServlet的Servlet，并通过URL传递参数filename（值为当前行对应的文件名），用于实现文件下载的功能 -->
|
|
|
</tr>
|
|
|
</c:forEach>
|
|
|
</table>
|
|
|
<jsp:include page="/footer.jsp"></jsp:include>
|
|
|
<!-- 包含名为footer.jsp的页面，一般该页面用于展示页面底部的一些通用信息，比如版权声明、网站相关链接、联系方式等内容 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
$("#nav li:nth-child(5) dl dd:nth-child(3)").addClass("layui-this");
|
|
|
// 使用jQuery选择器来选中页面中id为"nav"的元素下的第5个子元素li下的dl元素下的第3个dd元素，并为其添加类名"layui-this"，在layui框架中，添加这个类名通常意味着将对应的导航菜单项标记为当前选中状态，使其呈现出特定的样式（例如改变颜色、加粗等），以此来表明当前所在的页面功能模块对应的菜单选项
|
|
|
$("#nav li:nth-child(5)").addClass("layui-nav-itemed");
|
|
|
// 同样使用jQuery选择器选中页面中id为"nav"的元素下的第5个子元素li，并为其添加类名"layui-nav-itemed"，在layui框架里，这个类名可能用于控制导航菜单的展开或折叠状态，使得对应的菜单层级结构展示相应的效果，方便用户查看相关子菜单 -->
|
|
|
</script>
|
|
|
<script>
|
|
|
//JavaScript代码区域
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
// 使用layui框架的element模块，调用其init方法进行初始化操作。在layui框架中，element模块提供了很多页面元素交互相关的功能，例如实现页面布局的动态切换、菜单的展开收起等交互效果，通过调用init方法可以激活这些功能，确保页面上基于element模块构建的各种UI组件能够正常工作
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
