p4to3rklf
/
text1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cx

Browse Source
chenxi 8 months ago
parent 14768edcdf
commit c509188b1d
4 changed files with 485 additions and 333 deletions
Show Stats Download Patch File Download Diff File

114
web/WEB-INF/admin/aHeader.jsp
Unescape View File

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

261
web/WEB-INF/admin/aIndex.jsp
Unescape View File

@ -1,17 +1,22 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- JSP页面指令，设置页面响应的内容类型为HTML，字符编码采用UTF-8，使用的编程语言为Java -->
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 引入JSTL（JavaServer Pages Standard Tag Library）核心标签库，前缀为“c”，后续可以使用该前缀来调用核心标签库中的各种标签 -->
<html> <html>
<head> <head>
<title>${html_title}</title> <title>${html_title}</title>
<!-- 设置页面的标题，这里使用了EL表达式（Expression Language）${html_title}，意味着标题的值可能是从后台动态传递过来的 -->
<script> <script>
//JavaScript代码区域 //JavaScript代码区域
layui.use('element', function(){ layui.use('element', function(){
var element = layui.element; var element = layui.element;
element.init(); element.init();
}); });
<!-- 使用layui框架的use方法加载element模块，加载成功后获取element对象并调用其init方法，对页面中的相关元素进行初始化等操作，确保layui框架相关的导航、布局等功能正常使用 -->
</script> </script>
<style> <style>
.layui-card .layui-card-body .layui-icon { .layui-card.layui-card-body.layui-icon {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: 60px; height: 60px;
@ -21,127 +26,163 @@
font-size: 30px; font-size: 30px;
background-color: #F8F8F8; background-color: #F8F8F8;
color: #333; color: #333;
transition: all .3s; transition: all.3s;
-webkit-transition: all .3s; -webkit-transition: all.3s;
} }
.layui-card .layui-card-body { <!-- 对类名为layui-card下的layui-card-body里的layui-icon元素设置样式。使其以块级元素内联显示，设置宽度、高度、行高、文本对齐方式、边框圆角、字体大小、背景颜色、文字颜色以及过渡效果等样式属性 -->
.layui-card.layui-card-body {
text-align: center; text-align: center;
} }
<!-- 对类名为layui-card下的layui-card-body元素设置文本对齐方式为居中 -->
#notify { #notify {
text-align: left; text-align: left;
} }
<!-- 对id为notify的元素设置文本对齐方式为左对齐 -->
</style> </style>
</head> </head>
<body class="layui-layout-body" style="background-color: #F2F2F2"> <body class="layui-layout-body" style="background-color: #F2F2F2">
<jsp:include page="/filterLogin.jsp"></jsp:include> <!-- 设置body标签的类名为layui-layout-body，并设置背景颜色为#F2F2F2，类名可能会被layui框架相关样式应用 -->
<jsp:include page="/WEB-INF/admin/aHeader.jsp"></jsp:include> <jsp:include page="/filterLogin.jsp"></jsp:include>
<jsp:include page="/WEB-INF/admin/adminNav.jsp"></jsp:include> <!-- 使用JSP的include指令包含名为filterLogin.jsp的页面内容，可能用于处理登录相关的过滤、验证等逻辑 -->
<div class="layui-layout layui-layout-admin"> <jsp:include page="/WEB-INF/admin/aHeader.jsp"></jsp:include>
<div class="layui-body"> <!-- 包含位于WEB-INF/admin目录下的aHeader.jsp页面内容，通常用于展示页面头部相关的布局、导航等元素 -->
<!-- 内容主体区域 --> <jsp:include page="/WEB-INF/admin/adminNav.jsp"></jsp:include>
<div style="padding: 15px;"> <!-- 包含位于WEB-INF/admin目录下的adminNav.jsp页面内容，大概率是用于展示管理员相关的导航栏内容 -->
<div class="layui-card"> <div class="layui-layout layui-layout-admin">
<div class="layui-card-header" id="index-function">功能</div> <!-- 创建一个具有layui-layout和layui-layout-admin类名的div，可能是用于整体的页面布局框架，layui框架相关的布局样式会作用于此 -->
<div class="layui-card-body"> <div class="layui-body">
<ul class="layui-row layui-col-space10 layui-this"> <!-- 这是页面的主体内容区域的div -->
<li class="layui-col-xs3"> <!-- 内容主体区域 -->
<a lay-href="/mavenTemplate/student/query"> <div style="padding: 15px;">
<i class="layui-icon layui-icon-survey"></i> <!-- 创建一个带有内边距为15px的div，用于放置具体的内容模块 -->
<cite>选课列表</cite> <div class="layui-card">
</a> <!-- 创建一个具有layui-card类名的div，通常是layui框架中卡片式布局的容器 -->
</li> <div class="layui-card-header" id="index-function">功能</div>
<li class="layui-col-xs3"> <!-- 创建一个具有layui-card-header类名且id为index-function的div，用于显示卡片的头部标题，这里标题为“功能” -->
<a lay-href="/mavenTemplate/class/query"> <div class="layui-card-body">
<i class="layui-icon layui-icon-survey"></i> <!-- 创建一个具有layui-card-body类名的div，用于放置卡片的主体内容 -->
<cite>可选课程</cite> <ul class="layui-row layui-col-space10 layui-this">
</a> <!-- 创建一个无序列表，应用了layui框架相关的类名，layui-row表示行布局，layui-col-space10可能用于设置列之间的间距，layui-this可能是表示当前选中之类的样式相关类名 -->
</li> <li class="layui-col-xs3">
<li class="layui-col-xs3"> <!-- 创建一个列表项，应用了layui-col-xs3类名，表示该列在小屏幕（xs）下占3份（可能基于layui的栅格系统） -->
<a lay-href="/mavenTemplate/major/query"> <a lay-href="/mavenTemplate/student/query">
<i class="layui-icon layui-icon-survey"></i> <!-- 创建一个链接，使用了layui框架自定义的属性lay-href来指定跳转地址，指向/mavenTemplate/student/query路径 -->
<cite>查询学生</cite> <i class="layui-icon layui-icon-survey"></i>
</a> <!-- 创建一个图标元素，应用了layui-icon和layui-icon-survey类名，用于显示特定图标 -->
</li> <cite>选课列表</cite>
<li class="layui-col-xs3"> <!-- 使用cite标签包裹文本“选课列表”，用于表示引用等语义，在这里可能就是显示链接对应的文字说明 -->
<a lay-href="/mavenTemplate/user/info"> </a>
<i class="layui-icon layui-icon-user"></i> </li>
<cite>增加学生</cite> <li class="layui-col-xs3">
</a> <a lay-href="/mavenTemplate/class/query">
</li> <i class="layui-icon layui-icon-survey"></i>
<li class="layui-col-xs3"> <cite>可选课程</cite>
<a lay-href="/mavenTemplate/user/password"> </a>
<i class="layui-icon layui-icon-set"></i> </li>
<cite>查询教师</cite> <!-- 与上面类似的列表项结构，链接指向/mavenTemplate/class/query路径，显示文本为“可选课程” -->
</a> <li class="layui-col-xs3">
</li> <a lay-href="/mavenTemplate/major/query">
<li class="layui-col-xs3"> <i class="layui-icon layui-icon-survey"></i>
<a lay-href="/mavenTemplate/user/email"> <cite>查询学生</cite>
<i class="layui-icon layui-icon-set"></i> </a>
<cite>增加教师</cite> </li>
</a> <!-- 链接指向/mavenTemplate/major/query路径，显示文本为“查询学生” -->
</li> <li class="layui-col-xs3">
<li class="layui-col-xs3"> <a lay-href="/mavenTemplate/user/info">
<a lay-href="/mavenTemplate/student/modify"> <i class="layui-icon layui-icon-user"></i>
<i class="layui-icon layui-icon-survey"></i> <cite>增加学生</cite>
<cite>学院专业查询</cite> </a>
</a> </li>
</li> <!-- 链接指向/mavenTemplate/user/info路径，显示文本为“增加学生” -->
<li class="layui-col-xs3"> <li class="layui-col-xs3">
<a lay-href="/mavenTemplate/student/modify"> <a lay-href="/mavenTemplate/user/password">
<i class="layui-icon layui-icon-survey"></i> <i class="layui-icon layui-icon-set"></i>
<cite>学院专业增加</cite> <cite>查询教师</cite>
</a> </a>
</li> </li>
<li class="layui-col-xs3"> <!-- 链接指向/mavenTemplate/user/password路径，显示文本为“查询教师” -->
<a lay-href="/mavenTemplate/student/modify"> <li class="layui-col-xs3">
<i class="layui-icon layui-icon-survey"></i> <a lay-href="/mavenTemplate/user/email">
<cite>公告发布</cite> <i class="layui-icon layui-icon-set"></i>
</a> <cite>增加教师</cite>
</li> </a>
<li class="layui-col-xs3"> </li>
<a lay-href="/mavenTemplate/student/modify"> <!-- 链接指向/mavenTemplate/user/email路径，显示文本为“增加教师” -->
<i class="layui-icon layui-icon-survey"></i> <li class="layui-col-xs3">
<cite>公告列表</cite> <a lay-href="/mavenTemplate/student/modify">
</a> <i class="layui-icon layui-icon-survey"></i>
</li> <cite>学院专业查询</cite>
<li class="layui-col-xs3"> </a>
<a lay-href="/mavenTemplate/student/modify"> </li>
<i class="layui-icon layui-icon-survey"></i> <!-- 链接指向/mavenTemplate/student/modify路径，显示文本为“学院专业查询” -->
<cite>文件发布</cite> <li class="layui-col-xs3">
</a> <a lay-href="/mavenTemplate/student/modify">
</li> <i class="layui-icon layui-icon-survey"></i>
<li class="layui-col-xs3"> <cite>学院专业增加</cite>
<a lay-href="/mavenTemplate/student/modify"> </a>
<i class="layui-icon layui-icon-survey"></i> </li>
<cite>文件列表</cite> <!-- 链接同样指向/mavenTemplate/student/modify路径，显示文本为“学院专业增加” -->
</a> <li class="layui-col-xs3">
</li> <a lay-href="/mavenTemplate/student/modify">
</ul> <i class="layui-icon layui-icon-survey"></i>
<cite>公告发布</cite>
</a>
</li>
<!-- 链接指向/mavenTemplate/student/modify路径，显示文本为“公告发布” -->
<li class="layui-col-xs3">
<a lay-href="/mavenTemplate/student/modify">
<i class="layui-icon layui-icon-survey"></i>
<cite>公告列表</cite>
</a>
</li>
<!-- 链接指向/mavenTemplate/student/modify路径，显示文本为“公告列表” -->
<li class="layui-col-xs3">
<a lay-href="/mavenTemplate/student/modify">
<i class="layui-icon layui-icon-survey"></i>
<cite>文件发布</cite>
</a>
</li>
<!-- 链接指向/mavenTemplate/student/modify路径，显示文本为“文件发布” -->
<li class="layui-col-xs3">
<a lay-href="/mavenTemplate/student/modify">
<i class="layui-icon layui-icon-survey"></i>
<cite>文件列表</cite>
</a>
</li>
<!-- 链接指向/mavenTemplate/student/modify路径，显示文本为“文件列表” -->
</ul>
</div>
</div>
<div class="layui-card">
<!-- 创建另一个layui-card类名的卡片式布局容器 -->
<div class="layui-card-header">学校最新公告</div>
<!-- 设置卡片头部标题为“学校最新公告” -->
<c:forEach items="${notifys}" var="notify">
<!-- 使用JSTL的forEach标签循环遍历名为notifys的集合（可能是从后台传递过来的公告数据集合），每次循环将集合中的一个元素赋值给变量notify -->
<div class="layui-card-body" id="notify">${notify.notifyInfo}<p>${notify.notifyDate}</div>
<!-- 在卡片主体内容区域，使用EL表达式展示当前公告元素（notify）中的notifyInfo（公告信息内容）和notifyDate（公告日期），这里的HTML结构不太规范，<p>标签没有闭合，可能会导致渲染问题 -->
</c:forEach>
</div> </div>
</div>
<div class="layui-card">
<div class="layui-card-header">学校最新公告</div>
<c:forEach items="${notifys}" var="notify">
<div class="layui-card-body" id="notify">${notify.notifyInfo}<p>${notify.notifyDate}</div>
</c:forEach>
</div> </div>
</div> </div>
<jsp:include page="/footer.jsp"></jsp:include>
<!-- 包含名为footer.jsp的页面内容，通常用于展示页面底部的相关信息，如版权声明、联系方式等 -->
</div> </div>
<jsp:include page="/footer.jsp"></jsp:include> <script type="text/javascript">
</div> document.onkeydown = function(e) {
<script type="text/javascript"> e = window.event || e;
document.onkeydown = function(e) { var k = e.keyCode;
e = window.event || e; }
var k = e.keyCode; <!-- 给document对象绑定keydown事件监听器，当键盘按键被按下时触发该函数。在函数内将事件对象进行兼容处理（兼容不同浏览器获取事件对象的方式），然后获取按下按键的键码（keyCode），但目前代码里没有针对键码进行后续的具体操作 -->
} </script>
</script> <script type="text/javascript">
<script type="text/javascript"> $("#nav li:nth-child(1)").addClass("layui-nav-itemed");
$("#nav li:nth-child(1)").addClass("layui-nav-itemed"); $("#nav li:nth-child(2)").addClass("layui-nav-itemed");
$("#nav li:nth-child(2)").addClass("layui-nav-itemed"); $("#nav li:nth-child(3)").addClass("layui-nav-itemed");
$("#nav li:nth-child(3)").addClass("layui-nav-itemed"); $("#nav li:nth-child(4)").addClass("layui-nav-itemed");
$("#nav li:nth-child(4)").addClass("layui-nav-itemed"); $("#nav li:nth-child(5)").addClass("layui-nav-itemed");
$("#nav li:nth-child(5)").addClass("layui-nav-itemed"); <!-- 通过jQuery选择器选择id为nav的元素下的第1、2、3、4、5个子元素（li标签），并给它们添加类名为layui-nav-itemed的类，可能是用于设置这些导航项的选中状态等样式相关操作，但前提是页面中存在id为nav的元素且有对应的li子元素，这里没有对jQuery库是否加载成功做判断 -->
</script> </script>
</body> </body>
</html> </html>

291
web/WEB-INF/admin/updateTeacher.jsp
Unescape View File

@ -1,162 +1,201 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- JSP页面指令，设置页面响应的内容类型为HTML，字符编码采用UTF-8，表明使用的编程语言是Java -->
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 引入JSTL（JavaServer Pages Standard Tag Library）核心标签库，前缀为“c”，后续可以通过该前缀调用核心标签库中的各种标签 -->
<html> <html>
<head> <head>
<title>修改教师信息</title> <title>修改教师信息</title>
<!-- 设置页面的标题为“修改教师信息” -->
<link rel="stylesheet" href="./css/layui.css"> <link rel="stylesheet" href="./css/layui.css">
<!-- 引入layui框架的样式表文件，路径为相对路径下的css/layui.css，用于页面的样式布局等美化 -->
<link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/style.css">
<!-- 引入自定义的样式表文件style.css（相对路径），用于添加项目特定的样式规则 -->
<script src="./layui.js"></script> <script src="./layui.js"></script>
<!-- 引入layui框架的JavaScript脚本文件，用于实现layui框架相关的功能 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 从CDN（内容分发网络）引入jQuery库的最小化版本，jQuery是常用的JavaScript库，方便进行DOM操作、事件处理等 -->
</head> </head>
<body class="layui-layout-body" style="background-color: #F2F2F2"> <body class="layui-layout-body" style="background-color: #F2F2F2">
<jsp:include page="/filterLogin.jsp"></jsp:include> <!-- 设置body标签的类名为layui-layout-body，并设置背景颜色为#F2F2F2，类名可能会被相关的样式表用于布局等样式应用 -->
<jsp:include page="/WEB-INF/admin/aHeader.jsp"></jsp:include> <jsp:include page="/filterLogin.jsp"></jsp:include>
<jsp:include page="/WEB-INF/admin/adminNav.jsp"></jsp:include> <!-- 使用JSP的include指令包含名为filterLogin.jsp的页面内容，可能用于处理登录相关的过滤、验证等逻辑 -->
<div class="layui-layout layui-layout-admin"> <jsp:include page="/WEB-INF/admin/aHeader.jsp"></jsp:include>
<div class="layui-body"> <!-- 包含位于WEB-INF/admin目录下的aHeader.jsp页面内容，通常用于展示页面头部相关的布局、导航等元素 -->
<!-- 内容主体区域 --> <jsp:include page="/WEB-INF/admin/adminNav.jsp"></jsp:include>
<div style="padding: 15px;"> <!-- 包含位于WEB-INF/admin目录下的adminNav.jsp页面内容，大概率是用于展示管理员相关的导航栏内容 -->
<span class="layui-breadcrumb"> <div class="layui-layout layui-layout-admin">
<a href="">管理员</a> <!-- 创建一个具有layui-layout和layui-layout-admin类名的div，可能是用于整体的页面布局框架，layui框架相关的布局样式会作用于此 -->
<a href="">教师管理</a> <div class="layui-body">
<a><cite>修改教师信息</cite></a> <!-- 这是页面的主体内容区域的div -->
</span> <!-- 内容主体区域 -->
<form class="layui-form" action="${pageContext.request.contextPath}/updateTeacherInfoServlet" style="padding-top: 50px" method="post"> <div style="padding: 15px;">
<div class="layui-form-item"> <!-- 创建一个带有内边距为15px的div，用于放置具体的内容模块 -->
<label class="layui-form-label">工号</label> <span class="layui-breadcrumb">
<div class="layui-input-block"> <a href="">管理员</a>
<input type="text" readonly="readonly" name="teacher-id" value="${teacher.t_id}" autocomplete="off" class="layui-input"> <a href="">教师管理</a>
</div> <a><cite>修改教师信息</cite></a>
</div> </span>
<div class="layui-form-item"> <!-- 创建一个layui框架的面包屑导航元素，包含三个链接，分别指向不同层级（这里链接暂时都为空，可能后续会补充完整路径），最后一个链接包裹的cite标签内显示“修改教师信息”文本，用于展示当前页面在整个系统中的层级位置 -->
<label class="layui-form-label">学院</label> <form class="layui-form" action="${pageContext.request.contextPath}/updateTeacherInfoServlet" style="padding-top: 50px" method="post">
<div class="layui-input-block"> <!-- 创建一个layui框架的表单，设置表单提交的目标地址为通过EL表达式动态获取的路径（指向名为updateTeacherInfoServlet的后端资源），设置表单顶部的内边距为50px，提交方法为post -->
<select name="selectCollege"> <div class="layui-form-item">
<label class="layui-form-label">工号</label>
<%-- <option value="${teacher.t_college}" selected>${teacher.t_college}</option>--%> <!-- 创建一个表单标签元素，用于显示“工号”文本 -->
<option value="" selected></option> <div class="layui-input-block">
<input type="text" readonly="readonly" name="teacher-id" value="${teacher.t_id}" autocomplete="off" class="layui-input">
<c:forEach items="${collegeLists}" var="collegeList"> <!-- 创建一个文本输入框，设置为只读状态，其name属性为“teacher-id”，输入框的值通过EL表达式从名为teacher的对象（可能是从后台传递过来的教师相关数据对象）中获取t_id属性值，关闭自动完成功能，应用layui-input类名，用于展示教师的工号信息，不可编辑 -->
<option value="${collegeList.college}">${collegeList.college}</option> </div>
</c:forEach>
</select>
</div> </div>
</div> <div class="layui-form-item">
<div class="layui-form-item"> <label class="layui-form-label">学院</label>
<label class="layui-form-label">系别</label> <div class="layui-input-block">
<div class="layui-input-block"> <select name="selectCollege">
<select name="selectDepartment" lay-search> <!-- 创建一个下拉选择框，name属性为“selectCollege”，用于选择教师所属学院 -->
<%-- <option value="${teacher.t_department}" selected>${teacher.t_department}</option>--%> <%-- <option value="${teacher.t_college}" selected>${teacher.t_college}</option>--%>
<option value="" selected></option> <option value="" selected></option>
<c:forEach items="${departmentLists}" var="departmentList"> <!-- 这里原本可能是想默认选中教师当前所属学院（通过EL表达式获取t_college值），但目前注释掉了，改为一个空的默认选中项，可能后续有其他逻辑处理默认值 -->
<option>${departmentList.department}</option> <c:forEach items="${collegeLists}" var="collegeList">
</c:forEach> <option value="${collegeList.college}">${collegeList.college}</option>
</select> </c:forEach>
</div> <!-- 使用JSTL的forEach标签循环遍历名为collegeLists的集合（可能是从后台获取的学院列表数据集合），每次循环创建一个下拉选项，选项的值和显示文本都通过当前循环的collegeList对象的college属性获取 -->
</div> </select>
<div class="layui-form-item"> </div>
<label class="layui-form-label">班级</label>
<div class="layui-input-block">
<select name="selectClass" lay-search>
<%-- <option value="${teacher.t_class}" selected>${teacher.t_class}</option>--%>
<option value="" selected></option>
<c:forEach items="${classLists}" var="classList">
<option>${classList.cclass}</option>
</c:forEach>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="teacher-name" id="teacher-name" value="${teacher.t_name}" placeholder="" autocomplete="off" class="layui-input">
</div> </div>
</div> <div class="layui-form-item">
<div class="layui-form-item"> <label class="layui-form-label">系别</label>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="radio" name="teacher-sex" id="idsex" value="男" title="男"> <select name="selectDepartment" lay-search>
<input type="radio" name="teacher-sex" id="idsex2" value="女" title="女"> <!-- 创建一个带有lay-search属性的下拉选择框（layui框架中可能用于支持搜索功能），name属性为“selectDepartment”，用于选择教师所属系别 -->
<%-- <option value="${teacher.t_department}" selected>${teacher.t_department}</option>--%>
<option value="" selected></option>
<!-- 同样原本可能想默认选中教师当前系别（通过EL表达式获取t_department值），现注释掉，改为空的默认选中项 -->
<c:forEach items="${departmentLists}" var="departmentList">
<option>${departmentList.department}</option>
</c:forEach>
<!-- 循环遍历名为departmentLists的集合（可能是系别列表数据集合），创建下拉选项，显示文本为当前departmentList对象的department属性值 -->
</select>
</div> </div>
</div> </div>
<div class="layui-inline"> <div class="layui-form-item">
<label class="layui-form-label">文化程度</label> <label class="layui-form-label">班级</label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="text" name="teacher-education" id="teacher-education" value="${teacher.t_education}" placeholder="" autocomplete="off" class="layui-input"> <select name="selectClass" lay-search>
<!-- 创建一个带有lay-search属性的下拉选择框，name属性为“selectClass”，用于选择教师所属班级 -->
<%-- <option value="${teacher.t_class}" selected>${teacher.t_class}</option>--%>
<option value="" selected></option>
<!-- 也是原本想默认选中教师当前班级（通过EL表达式获取t_class值），现注释掉，改为空默认选中项 -->
<c:forEach items="${classLists}" var="classList">
<option>${classList.cclass}</option>
</c:forEach>
<!-- 循环遍历名为classLists的集合（班级列表数据集合），创建下拉选项，显示文本为当前classList对象的cclass属性值 -->
</select>
</div> </div>
</div> </div>
<div class="layui-inline"> <div class="layui-form-item">
<label class="layui-form-label">职称</label> <label class="layui-form-label">姓名</label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="text" name="teacher-title" id="teacher-title" value="${teacher.t_title}" placeholder="" autocomplete="off" class="layui-input"> <input type="text" name="teacher-name" id="teacher-name" value="${teacher.t_name}" placeholder="" autocomplete="off" class="layui-input">
<!-- 创建一个文本输入框，name属性为“teacher-name”，id为“teacher-name”，输入框的值通过EL表达式从teacher对象获取t_name属性值，无占位符文本，关闭自动完成功能，应用layui-input类名，用于输入教师姓名 -->
</div> </div>
</div> </div>
</div> <div class="layui-form-item">
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
<button class="layui-btn layui-btn-primary" id="inforeset">重置</button>
<span style="padding-left: 20px;">${update_msg}</span>
</div> </div>
</div> <div class="layui-form-item">
</form> <div class="layui-inline">
<jsp:include page="/footer.jsp"></jsp:include> <label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="teacher-sex" id="idsex" value="男" title="男">
<input type="radio" name="teacher-sex" id="idsex2" value="女" title="女">
<!-- 创建两个单选按钮，name属性都为“teacher-sex”，用于选择教师性别，id分别为“idsex”和“idsex2”，对应的值分别为“男”和“女”，显示的标题文本也分别为“男”和“女” -->
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">文化程度</label>
<div class="layui-input-block">
<input type="text" name="teacher-education" id="teacher-education" value="${teacher.t_education}" placeholder="" autocomplete="off" class="layui-input">
<!-- 创建一个文本输入框，用于输入教师的文化程度，相关属性设置与前面类似 -->
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">职称</label>
<div class="layui-input-block">
<input type="text" name="teacher-title" id="teacher-title" value="${teacher.t_title}" placeholder="" autocomplete="off" class="layui-input">
<!-- 创建一个文本输入框，用于输入教师的职称，相关属性设置与前面类似 -->
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
<!-- 创建一个layui框架样式的按钮，点击该按钮会触发表单提交，并且通过lay-filter属性关联到名为“formDemo”的过滤器（可能用于在提交前进行一些验证等操作），按钮显示文本为“修改” -->
<button class="layui-btn layui-btn-primary" id="inforeset">重置</button>
<!-- 创建一个layui框架样式的按钮，应用了layui-btn-primary类名（可能是默认样式），id为“inforeset”，按钮显示文本为“重置”，用于重置表单输入内容 -->
<span style="padding-left: 20px;">${update_msg}</span>
<!-- 显示一个文本内容，通过EL表达式展示名为update_msg的值（可能是从后台传递过来的与修改操作相关的提示信息），并且设置左边距为20px -->
</div>
</div>
</form>
<jsp:include page="/footer.jsp"></jsp:include>
<!-- 包含名为footer.jsp的页面内容，通常用于展示页面底部的相关信息，如版权声明、联系方式等 -->
</div>
</div> </div>
</div> </div>
</div>
<script type="text/javascript"> <script type="text/javascript">
$("#nav li:nth-child(3) dl dd:nth-child(2)").addClass("layui-this"); $("#nav li:nth-child(3) dl dd:nth-child(2)").addClass("layui-this");
$("#nav li:nth-child(3)").addClass("layui-nav-itemed"); <!-- 通过jQuery选择器选择id为nav的元素下的第3个子元素（li标签）里的dl元素下的第2个dd元素，并给其添加类名为layui-this的类，可能是用于设置当前导航项或子项的选中状态等样式相关操作，但前提是页面中存在相应结构的元素 -->
$("#hidden-update2").removeAttr("hidden"); $("#nav li:nth-child(3)").addClass("layui-nav-itemed");
</script> <!-- 通过jQuery选择器选择id为nav的元素下的第3个子元素（li标签），并给其添加类名为layui-nav-itemed的类，同样可能是用于设置导航项的选中状态等样式相关操作 -->
<script> $("#hidden-update2").removeAttr("hidden");
//JavaScript代码区域 <!-- 通过jQuery选择器找到id为hidden-update2的元素，并移除其hidden属性（如果有的话），可能是用于显示原本隐藏的某个元素 -->
layui.use('element', function(){ </script>
var element = layui.element; <script>
element.init(); //JavaScript代码区域
}); layui.use('element', function(){
</script> var element = layui.element;
element.init();
});
<!-- 使用layui框架的use方法加载element模块，加载成功后获取element对象并调用其init方法，对页面中的相关元素进行初始化等操作，确保layui框架相关的导航、布局等功能正常使用 -->
</script>
<script> <script>
//Demo //Demo
layui.use('form', function(){ layui.use('form', function(){
}); });
</script> <!-- 这里本意可能是使用layui框架的use方法加载form模块，但函数体里暂时没有具体代码，一般加载form模块后可以利用其提供的表单相关功能，比如表单验证等 -->
<script> </script>
var sex = "${teacher.t_sex}"; <script>
if (sex == '男') { var sex = "${teacher.t_sex}";
$("#idsex").attr("checked","checked"); if (sex == '男') {
$("#idsex2").removeAttr("checked"); $("#idsex").attr("checked","checked");
} else if (sex == '女') { $("#idsex2").removeAttr("checked");
$("#idsex2").attr("checked","checked"); } else if (sex == '女') {
$("#idsex").removeAttr("checked"); $("#idsex2").attr("checked","checked");
}else{ $("#idsex").removeAttr("checked");
$("#idsex").removeAttr("checked"); }else{
$("#idsex2").removeAttr("checked");
}
</script>
<script type="text/javascript">
$(function () {
$('#inforeset').bind('click',function () {
$("#idsex").removeAttr("checked"); $("#idsex").removeAttr("checked");
$("#idsex2").removeAttr("checked"); $("#idsex2").removeAttr("checked");
$("#teacher-name").val(""); }
$("#teacher-education").val(""); <!-- 通过EL表达式获取teacher对象的t_sex属性值赋值给变量sex，然后根据sex的值来设置对应的性别单选按钮（id为idsex和idsex2的）的选中状态，如果是“男”则选中“男”对应的单选按钮，“女”则选中“女”对应的，其他情况则都不选中 -->
$("#teacher-title").val(""); </script>
alert("已重置！"); <script type="text/javascript">
$(function () {
$('#inforeset').bind('click',function () {
$("#idsex").removeAttr("checked");
$("#idsex2").removeAttr("checked");
$("#teacher-name").val("");
$("#teacher-education").val("");
$("#teacher-title").val("");
alert("已重置！");
});
}); });
}); <!-- 当页面DOM加载完成后（通过$(function () {...}) 结构），给id为inforeset的元素（即前面的“重置”按钮）绑定点击事件监听器，当按钮被点击时，执行函数内的代码，清除所有单选按钮的选中状态，清空姓名、文化程度、职称输入框的内容，并弹出一个提示框显示“已重置！” -->
</script> </script>
</body> </body>
</html> </html>

152
web/WEB-INF/admin/uploadFile.jsp
Unescape View File

@ -1,72 +1,99 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %> <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<!-- JSP页面指令，设置页面响应的内容类型为HTML，字符编码采用UTF-8，同时指定页面使用的编程语言为Java，这里pageEncoding再次强调页面编码，确保字符能正确处理 -->
<html> <html>
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<!-- 定义HTML文档的字符编码为UTF-8，与上面JSP指令中的设置作用类似，确保页面内容能正确显示各种字符 -->
<title>文件传输</title> <title>文件传输</title>
<!-- 设置页面的标题为“文件传输” -->
<link rel="stylesheet" href="./css/file.css"/> <link rel="stylesheet" href="./css/file.css"/>
<!-- 引入自定义的file.css样式表文件（相对路径），用于为文件传输相关功能定制样式 -->
<link rel="stylesheet" href="./css/layui.css"> <link rel="stylesheet" href="./css/layui.css">
<!-- 引入layui框架的样式表文件，用于页面整体的样式布局等美化 -->
<link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/style.css">
<!-- 引入另一个自定义的style.css样式表文件，可能包含通用或特定的页面样式规则 -->
<script src="./layui.js"></script> <script src="./layui.js"></script>
<!-- 引入layui框架的JavaScript脚本文件，用于实现layui框架相关的功能 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 从CDN（内容分发网络）引入jQuery库的最小化版本，方便在页面中进行DOM操作、事件处理等操作 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 设置页面的视口属性，让页面宽度自适应设备宽度，初始缩放比例为1，最大缩放比例为1，禁止用户手动缩放，常用于移动端页面适配 -->
</head> </head>
<body class="layui-layout-body" style="background-color: #F2F2F2"> <body class="layui-layout-body" style="background-color: #F2F2F2">
<jsp:include page="/filterLogin.jsp"></jsp:include> <!-- 设置body标签的类名为layui-layout-body，并设置背景颜色为#F2F2F2，类名通常会被layui框架相关样式应用来布局页面 -->
<jsp:include page="/WEB-INF/admin/aHeader.jsp"></jsp:include> <jsp:include page="/filterLogin.jsp"></jsp:include>
<jsp:include page="/WEB-INF/admin/adminNav.jsp"></jsp:include> <!-- 使用JSP的include指令包含名为filterLogin.jsp的页面内容，一般用于处理登录相关的过滤、验证等逻辑 -->
<div class="layui-layout layui-layout-admin"> <jsp:include page="/WEB-INF/admin/aHeader.jsp"></jsp:include>
<div class="layui-body"> <!-- 包含位于WEB-INF/admin目录下的aHeader.jsp页面内容，通常用来展示页面头部相关的布局、导航等元素 -->
<!-- 内容主体区域 --> <jsp:include page="/WEB-INF/admin/adminNav.jsp"></jsp:include>
<div style="padding: 15px;"> <!-- 包含位于WEB-INF/admin目录下的adminNav.jsp页面内容，大概率是用于展示管理员相关的导航栏内容 -->
<span class="layui-breadcrumb"> <div class="layui-layout layui-layout-admin">
<a>管理员</a> <!-- 创建一个具有layui-layout和layui-layout-admin类名的div，是layui框架用于整体页面布局的常见结构，相关布局样式会作用于此 -->
<a>系统管理</a> <div class="layui-body">
<a><cite>文件发布</cite></a> <!-- 这是页面主体内容区域的div -->
</span> <!-- 内容主体区域 -->
<p> &nbsp;</p> <div style="padding: 15px;">
<!-- 创建一个带有内边距为15px的div，用于放置具体的内容模块 -->
<div id="center-file" style="padding-left: 41%;"> <span class="layui-breadcrumb">
<h2>文件上传</h2> <a>管理员</a>
<ol> <a>系统管理</a>
<li>可上传任意大小任意类型文件 </li> <a><cite>文件发布</cite></a>
</ol> </span>
<br> <!-- 创建一个layui框架的面包屑导航元素，包含三个链接，分别显示“管理员”“系统管理”，最后一个链接包裹cite标签显示“文件发布”，用于展示当前页面在整个系统中的层级位置 -->
<form enctype="multipart/form-data" method="POST" name="formf"> <p> &nbsp;</p>
<h4>请选择上传文件：</h4> <!-- 插入一个空的段落元素，可能用于增加一点页面间距等布局效果 -->
<div id="ossfile"><span id="filename"></span> <div id="center-file" style="padding-left: 41%;">
<span id="filesize"></span> <!-- 创建一个id为“center-file”的div，并设置左边距为41%，可能用于将内部内容在页面中居中显示等布局用途 -->
<b> <h2>文件上传</h2>
<span id="percentage"></span> <!-- 显示二级标题“文件上传” -->
</b> <ol>
<div class="progress"><div class="progress-bar" style="width: 100%;"></div></div></div> <li>可上传任意大小任意类型文件 </li>
</ol>
<br/> <!-- 创建一个有序列表，里面包含一个列表项，说明文件上传的相关规则，即可以上传任意大小和类型的文件 -->
<br>
<!-- 插入一个换行符，用于页面布局上的间隔 -->
<div id="container"> <form enctype="multipart/form-data" method="POST" name="formf">
<!-- 创建一个表单，设置表单的编码类型为“multipart/form-data”，用于支持文件上传，提交方法为POST，表单名称为“formf” -->
<h4>请选择上传文件：</h4>
<a href="javascript:;" class="file">选择文件 <!-- 显示四级标题“请选择上传文件：” -->
<input id="selectfiles" type="file" name="myfile"> <div id="ossfile"><span id="filename"></span>
</a> <span id="filesize"></span>
<b>
<a href="javascript:;" class="file" type="submit">开始上传 <span id="percentage"></span>
<input type="submit" id="postfiles" value="upload"> </b>
</a> <div class="progress"><div class="progress-bar" style="width: 100%;"></div></div></div>
</div> <!-- 创建一个id为“ossfile”的div，内部包含几个用于显示文件相关信息（文件名、文件大小、上传进度等）的span元素，以及一个用于展示进度条外观的div结构，初始进度条宽度设置为100%（可能后续会动态改变） -->
<p> </p> <br/>
<span id="news">${news}</span> <!-- 插入一个换行符 -->
</form> <div id="container">
<!-- 创建一个id为“container”的div，用于放置文件选择和上传相关的操作元素 -->
<a href="javascript:;" class="file">选择文件
<input id="selectfiles" type="file" name="myfile">
</a>
<!-- 创建一个链接元素，点击链接无实际跳转（href为javascript:;），应用“file”类名，里面包含一个文件选择的输入框，id为“selectfiles”，类型为“file”，name属性为“myfile”，用于让用户选择要上传的文件 -->
<a href="javascript:;" class="file" type="submit">开始上传
<input type="submit" id="postfiles" value="upload">
</a>
<!-- 创建另一个链接元素，同样点击无实际跳转，应用“file”类名且设置类型为“submit”（虽然这种写法不太规范，一般表单提交按钮直接用button或input[type="submit"]，这里可能是借助链接样式模拟按钮效果），里面包含一个真正的提交按钮，id为“postfiles”，显示文本为“upload”，用于触发文件上传操作 -->
</div>
<p> </p>
<!-- 插入一个空的段落元素 -->
<span id="news">${news}</span>
<!-- 显示一个id为“news”的span元素，其内容通过EL表达式展示名为“news”的值（可能是从后台传递过来的与文件上传相关的提示信息等） -->
</form>
</div>
<jsp:include page="/footer.jsp"></jsp:include>
<!-- 包含名为footer.jsp的页面内容，通常用于展示页面底部的相关信息，如版权声明、联系方式等 -->
</div> </div>
<jsp:include page="/footer.jsp"></jsp:include>
</div> </div>
</div> </div>
</div>
</body> </body>
<script type="text/javascript"> <script type="text/javascript">
$("#nav li:nth-child(5) dl dd:nth-child(3)").addClass("layui-this"); $("#nav li:nth-child(5) dl dd:nth-child(3)").addClass("layui-this");
<!-- 通过jQuery选择器选择id为“nav”的元素下的第5个子元素（li标签）里的dl元素下的第3个dd元素，并给其添加类名为“layui-this”的类，可能是用于设置当前导航项或子项的选中状态等样式相关操作，但前提是页面中存在相应结构的元素 -->
$("#nav li:nth-child(5)").addClass("layui-nav-itemed"); $("#nav li:nth-child(5)").addClass("layui-nav-itemed");
<!-- 通过jQuery选择器选择id为“nav”的元素下的第5个子元素（li标签），并给其添加类名为“layui-nav-itemed”的类，同样可能是用于设置导航项的选中状态等样式相关操作 -->
</script> </script>
<script> <script>
//JavaScript代码区域 //JavaScript代码区域
@ -74,51 +101,66 @@
var element = layui.element; var element = layui.element;
element.init(); element.init();
}); });
<!-- 使用layui框架的use方法加载“element”模块，加载成功后获取“element”对象并调用其“init”方法，对页面中的相关元素进行初始化等操作，确保layui框架相关的导航、布局等功能正常使用 -->
</script> </script>
<script> <script>
$('#selectfiles').change(function(e){ $('#selectfiles').change(function(e){
// console.log($(this).val());//val()获取到的是完整的文件路径值；C:\fakepath\js-dom.png // console.log($(this).val());//val()获取到的是完整的文件路径值；C:\fakepath\js-dom.png
// 当文件选择输入框的值发生改变（即用户选择了文件）时触发此函数，这里注释掉了打印文件完整路径值的代码，因为在浏览器中获取到的路径通常是假路径（出于安全考虑）
$('#news').text(""); $('#news').text("");
// 清空id为“news”的元素内的文本内容，可能是清除之前显示的相关提示信息
var fileMsg = e.currentTarget.files; var fileMsg = e.currentTarget.files;
// 获取当前触发事件的目标元素（即文件选择输入框）的files属性，得到用户选择的文件列表（虽然一般一次只选一个文件上传，但这里是数组形式）
var fileName = fileMsg[0].name; var fileName = fileMsg[0].name;
// 获取选择的第一个文件（通常就是用户选的那个文件）的文件名
var fileSize = fileMsg[0].size; var fileSize = fileMsg[0].size;
// 获取该文件的大小（单位为字节）
var fileType = fileMsg[0].type; var fileType = fileMsg[0].type;
// 获取文件的类型（如image/png等）
$('#filename').text(fileName); $('#filename').text(fileName);
// 将获取到的文件名显示在id为“filename”的元素内
$('#filesize').text('('+getfilesize(fileSize)+')'); $('#filesize').text('('+getfilesize(fileSize)+')');
// 调用getfilesize函数将文件大小转换为合适的单位（如KB、MB等）并显示在id为“filesize”的元素内，外面加上括号
$('#percentage').text('0%'); $('#percentage').text('0%');
// 初始化上传进度显示为0%，显示在id为“percentage”的元素内
$('.progress-bar').css("width","0%"); $('.progress-bar').css("width","0%");
// 将进度条的宽度设置为0%，通过修改样式来更新进度条的外观
function getfilesize(size) { function getfilesize(size) {
if (!size) if (!size)
return ""; return "";
// 如果文件大小为空，直接返回空字符串
var num = 1024.00; //byte var num = 1024.00; //byte
// 定义单位换算的基数，这里以字节为基础，1KB = 1024字节
if (size < num) if (size < num)
return size + "B"; return size + "B";
// 如果文件大小小于1024字节，直接以字节为单位显示，后面加上“B”表示字节
if (size < Math.pow(num, 2)) if (size < Math.pow(num, 2))
return (size / num).toFixed(2) + "K"; //kb return (size / num).toFixed(2) + "K"; //kb
// 如果文件大小小于1024 * 1024字节（即1MB），将字节数除以1024转换为KB，并保留两位小数，后面加上“K”表示KB
if (size < Math.pow(num, 3)) if (size < Math.pow(num, 3))
return (size / Math.pow(num, 2)).toFixed(2) + "M"; //M return (size / Math.pow(num, 2)).toFixed(2) + "M"; //M
// 如果文件大小小于1024 * 1024 * 1024字节（即1GB），将字节数除以1024的平方转换为MB，并保留两位小数，后面加上“M”表示MB
if (size < Math.pow(num, 4)) if (size < Math.pow(num, 4))
return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
// 如果文件大小小于1024 * 1024 * 1024 * 1024字节（即1TB），将字节数除以1024的三次方转换为GB，并保留两位小数，后面加上“G”表示GB
return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
// 如果文件大小大于等于1TB，将字节数除以1024的四次方转换为TB，并保留两位小数，后面加上“T”表示TB
} }
}); });
$('#postfiles').click(function(){ $('#postfiles').click(function(){
var fileInput = $('#selectfiles').get(0).files[0]; var fileInput = $('#selectfiles').get(0).files[0];
// 获取文件选择输入框的第一个文件（也就是用户选择准备上传的那个文件）
if (fileInput == null) { if (fileInput == null) {
alert("请先选择文件！"); alert("请先选择文件！");
// 如果没有选择文件，弹出提示框提醒用户先选择文件
} else { } else {
document.formf.action="${pageContext.request.contextPath}/uploadServlet"; document.formf.action="${pageContext.request.contextPath}/uploadServlet";
// 如果选择了文件，设置表单（名为“formf”）的提交地址为通过EL表达式动态获取的路径（指向名为“uploadServlet”的后端资源），用于将文件上传到服务器端对应的处理逻辑
} }
$('.inp_file').val(null); $('.inp_file').val(null);
// 这里代码可能有误，页面中似乎没有名为“inp_file”的元素，如果有，这行代码是将其值清空，可能是想清空相关的文件输入框之类的，但要确保元素存在且类型合适
}); });
</script> </script>

Write Preview
Loading…
Cancel
Save