pi8vtulof
/
text
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

马腾

Browse Source
mt_branch
mt 1 year ago
parent c28add6a87
commit 30b3c6038f
15 changed files with 1841 additions and 482 deletions
Show Stats Download Patch File Download Diff File

156
web/css/file.css
Unescape View File

@ -1,54 +1,198 @@
.progress{
margin-top:2px;
/*
.progress类用于定义一个具有特定样式的进度条容器元素。以下是对该类中各个样式属性的详细注释：
*/
.progress {
/*
设置元素的上外边距为2像素，使该元素与上方元素在垂直方向上保持一定的间隔距离，增加页面布局的层次感。
*/
margin-top: 2px;
/*
定义元素的宽度为200像素，确定了进度条在水平方向上所占据的空间大小。
*/
width: 200px;
/*
设置元素的高度为14像素，规定了进度条在垂直方向上的尺寸。
*/
height: 14px;
/*
设置元素的下外边距为10像素，让该元素与下方元素在垂直方向上隔开一定距离，避免布局显得过于紧凑。
*/
margin-bottom: 10px;
/*
将溢出的内容隐藏起来，防止内部元素超出该容器的范围而显示异常，确保进度条的外观整洁、规范。
*/
overflow: hidden;
/*
设置元素的背景颜色为#f5f5f5，这是一种浅灰色，通常用于给元素提供一个较为柔和、中性的背景色调，符合常见的页面设计风格。
*/
background-color: #f5f5f5;
/*
给元素添加圆角效果，这里将四个角的半径都设置为4像素，使元素看起来更加圆润、美观，避免生硬的直角边框，提升视觉效果。
*/
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
/*
以下是针对WebKit浏览器（如Chrome、Safari等）添加的内部阴影效果，用于在元素内部营造出一种立体感。
inset关键字表示这是内部阴影，0 1px 2px表示阴影在水平方向不偏移、垂直方向偏移1像素、模糊半径为2像素，rgba(0,0,0,.1)表示阴影的颜色为黑色且透明度为0.1，整体效果是给元素内部添加一个淡淡的阴影，增强层次感。
*/
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0,.1);
/*
与上面的-webkit-box-shadow类似，这是标准的CSS盒阴影属性，用于在不支持WebKit前缀的浏览器中也能实现相同的内部阴影效果，确保在不同浏览器下的视觉一致性。
*/
box-shadow: inset 0 1px 2px rgba(0, 0, 0,.1);
}
.progress-bar{
/*
.progress-bar类用于定义进度条内部的填充部分（表示进度的可视化部分）的样式，以下是对该类各样式属性的详细解释：
*/
.progress-bar {
/*
设置进度条填充部分的背景颜色为rgb(92, 184, 92)，这是一种绿色调，通常用于表示进度的增长、完成等积极的含义，符合常见的进度条颜色使用习惯。
*/
background-color: rgb(92, 184, 92);
/*
使用线性渐变来为背景添加一种纹理效果，使进度条看起来更有质感。
linear-gradient函数用于创建线性渐变，45deg表示渐变的方向是从左下角到右上角呈45度角，后面跟着一系列的颜色停止点及透明度设置。
例如rgba(255, 255, 255, 0.14902) 25%, transparent 25%表示在渐变的25%位置处使用具有一定透明度的白色，然后在25%位置切换到透明色，以此类推，通过这样的设置形成一种斜向的条纹纹理效果，增强视觉上的丰富度。
*/
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.14902) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.14902) 50%, rgba(255, 255, 255, 0.14902) 75%, transparent 75%, transparent);
/*
定义背景图像（这里就是上面设置的线性渐变纹理）的尺寸大小为40px 40px，即宽度和高度都为40像素，控制纹理的疏密程度等外观效果。
*/
background-size: 40px 40px;
/*
给进度条填充部分添加一个下边框的内部阴影效果，使进度条看起来有一定的凹陷感，增强立体感。
rgba(0, 0, 0, 0.14902)表示阴影颜色为黑色且具有一定透明度，0px -1px 0px 0px表示阴影在水平方向不偏移、垂直方向向上偏移1px、模糊半径为0px、扩展半径为0px，inset表示这是内部阴影，整体效果是在进度条填充部分的底部添加一条很细的阴影线。
*/
box-shadow: rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset;
/*
设置元素的盒模型计算方式为 border-box，意味着元素的宽度和高度包含了边框（border）和内边距（padding）的尺寸，这样在设置元素的尺寸以及添加边框、内边距时，不会导致元素整体尺寸超出预期，方便进行布局控制。
*/
box-sizing: border-box;
/*
设置元素内文本的颜色为白色（rgb(255, 255, 255)），通常进度条填充部分上可能会显示进度相关的文字信息（比如百分比等），这里将文字颜色设置为白色，使其在背景颜色上能够清晰显示。
*/
color: rgb(255, 255, 255);
/*
将元素设置为块级元素，使其在页面布局中独占一行，并且可以设置宽度、高度、内外边距等属性，像一个独立的矩形区域一样进行布局排版，符合进度条填充部分作为一个独立的可视化组件的布局需求。
*/
display: block;
/*
使元素向左浮动，让多个进度条（如果存在多个的情况）可以在同一行内水平排列，实现多个进度条并列展示的布局效果，常用于同时展示多个任务或阶段的进度情况。
*/
float: left;
/*
设置元素内文本的字体大小为12像素，控制进度条上显示文字的大小，确保文字在进度条填充部分内的显示比例合适，清晰可读。
*/
font-size: 12px;
height: 20px;
/*
设置元素的行高为20像素，行高通常会影响文本在垂直方向上的对齐方式以及元素的整体高度感受，这里设置合适的行高可以让文本在进度条填充部分内垂直居中显示，视觉效果更美观。
*/
line-height: 20px;
/*
设置文本在元素内的水平对齐方式为居中对齐，使得进度条上显示的文字（如进度百分比等）能够在水平方向上处于进度条填充部分的中间位置，看起来更加整齐、规范。
*/
text-align: center;
/*
设置过渡效果的延迟时间为0秒，即当触发过渡相关的变化（比如进度条宽度改变等情况）时，立即开始过渡动画，没有延迟。
*/
transition-delay: 0s;
/*
设置过渡效果的持续时间为0.6秒，规定了从初始状态到目标状态（比如进度条宽度变化等过渡情况）整个过渡动画所花费的时间长度，通过合适的时长设置可以让过渡效果看起来更加自然流畅。
*/
transition-duration: 0.6s;
/*
指定过渡效果应用的CSS属性为宽度（width），意味着只有当元素的宽度发生变化时，才会触发设置好的过渡动画效果，比如进度条宽度随进度增加而增长时会有平滑的过渡动画展示。
*/
transition-property: width;
/*
设置过渡效果的时间函数为ease，这是一种常见的缓动函数，它使得过渡动画在开始时较慢，中间加速，结尾时再变慢，让过渡效果更加自然、柔和，符合人眼观察物体运动变化的习惯，提升视觉体验。
*/
transition-timing-function: ease;
/*
设置元素的初始宽度为266.188像素，这个宽度值可能是根据具体的页面布局需求或者默认进度情况来设定的，后续可以通过JavaScript等方式根据实际进度动态改变该宽度值来展示进度变化效果。
*/
width: 266.188px;
}
/*
.file类用于定义一个类似文件上传按钮或链接的样式，具有特定的外观和交互效果，以下是对该类各属性的注释：
*/
.file {
/*
将元素设置为相对定位，相对定位的元素会相对于其原本在文档流中的位置进行定位调整，方便后续通过top、right、bottom、left等属性对其内部绝对定位的子元素（如下面的input元素）进行精准定位，同时又不会脱离文档流影响整体布局。
*/
position: relative;
/*
将元素设置为内联块级元素，它既有内联元素的特点（可以与其他内联元素在同一行显示），又具备块级元素的一些特性（可以设置宽度、高度、内外边距等属性），这样可以方便地在文本流中按照需求排列，并且呈现出类似按钮或链接的外观样式。
*/
display: inline-block;
/*
设置元素的背景颜色为#337ab7，这是一种蓝色调，常用于表示可操作、交互的元素背景色，给用户传达一种可以点击、进行操作的视觉暗示。
*/
background-color: #337ab7;
/*
给元素添加圆角效果，将四个角的半径都设置为4像素，使其外观更加圆润、美观，符合现代网页设计中对于按钮等元素的常见样式风格，避免生硬的直角边框。
*/
border-radius: 4px;
/*
设置元素的内边距，上下内边距为8像素，左右内边距为12像素，通过合适的内边距设置可以让元素内部的文本（如按钮上的文字说明等）与边框之间有一定的空白空间，看起来更加舒适、美观，也便于用户点击操作。
*/
padding: 8px 12px;
/*
将溢出的内容隐藏起来，防止内部元素（比如可能存在的一些特殊样式的子元素等）超出该元素的范围而显示异常，确保元素外观的完整性和规范性。
*/
overflow: hidden;
/*
设置元素内文本的颜色为白色（#FFFFFF），使得文本在背景颜色上能够清晰显示，提高可读性，符合常见的按钮或链接文本颜色与背景色搭配习惯，让用户能够轻易识别元素上的文字内容。
*/
color: #FFFFFF;
/*
清除元素的文本装饰（比如默认的下划线等），如果该元素用于模拟按钮等交互功能，通常不需要文本有下划线等装饰，使其外观更简洁、干净，符合操作按钮的视觉风格。
*/
text-decoration: none;
/*
设置文本的缩进为0，确保文本在元素内按照正常的对齐方式从左边开始显示，没有额外的缩进效果，保持文本显示的规范性。
*/
text-indent: 0;
/*
设置元素的行高为20像素，与上面类似，合适的行高可以让文本在垂直方向上处于合适的位置，视觉效果更美观，并且方便用户查看和点击操作。
*/
line-height: 20px;
}
/*
.file类下的input子元素的样式定义，通常用于隐藏实际的文件选择输入框，通过其他样式和交互设计来模拟一个更美观、易用的文件上传操作界面，以下是对该子元素样式属性的注释：
*/
.file input {
/*
将元素设置为绝对定位，绝对定位的元素会脱离文档流，根据最近的已定位祖先元素（这里就是上面设置为相对定位的.file元素）来进行定位，通过下面设置的right和top属性，可以将其精准定位到.file元素的右上角位置，方便实现隐藏式的文件选择功能（因为它覆盖在可视区域之外）。
*/
position: absolute;
/*
设置元素的字体大小为100px，这个较大的字体大小可能是为了确保在某些特殊情况下（比如不同浏览器对文件选择输入框默认样式的处理差异等）能够完全覆盖住原有的输入框外观，实现更好的隐藏效果，具体使用场景和原因可能因整体页面设计需求而定。
*/
font-size: 100px;
/*
将元素定位到其相对定位的父元素（.file元素）的右上角，right: 0表示距离父元素右侧边界为0像素，top: 0表示距离父元素顶部边界为0像素，这样就将其放置在了父元素的右上角位置，超出了可视范围，达到隐藏的目的。
*/
right: 0;
top: 0;
/*
设置元素的透明度为0，使其完全透明不可见，进一步隐藏实际的文件选择输入框，让用户只能通过模拟的按钮或链接外观（即.file元素呈现的样式）来触发文件选择操作，提升用户体验和页面美观度。
*/
opacity: 0;
}
/*
.file类元素在鼠标悬停时的样式变化，通过改变背景颜色来提供一种交互反馈效果，让用户知道该元素是可以进行操作的，以下是对应的注释：
*/
.file:hover {
/*
当鼠标悬停在.file元素上时，改变其背景颜色为#598FBE，这是一种比原来稍深一点的蓝色调，通过这种颜色变化给用户一个视觉提示，表明该元素处于可交互状态，增强用户操作的直观性和交互性。
*/
background: #598FBE;
/*
再次强调清除文本装饰（比如悬停时也不出现下划线等），保持元素外观的简洁性和一致性，符合操作按钮在不同状态下的视觉规范。
*/
text-decoration: none;
}

417
web/css/layui.css
View File

File diff suppressed because one or more lines are too long

520
web/css/layui.mobile.css
View File

File diff suppressed because one or more lines are too long

27
web/css/login.css
Unescape View File

@ -1,11 +1,19 @@
@charset "utf-8";
/*
* @charset "utf-8";
* 声明该CSS文件使用的字符编码为utf-8，确保能正确解析文件中的各种字符，包括中文等特殊字符。
*/
body {
background: url("../images/bg.jpg");
/* 设置页面背景图片的路径，这里图片位于相对于当前CSS文件的images文件夹下，文件名为bg.jpg */
background-position: center;
/* 让背景图片在水平和垂直方向都居中显示 */
background-size: cover;
/* 使背景图片自适应铺满整个页面可视区域，可能会根据页面尺寸拉伸或缩放图片以完全覆盖 */
padding-bottom: 0px;
/* 将body元素底部的内边距设置为0像素，控制页面底部空白区域大小等布局效果 */
}
.layadmin-user-login-icon {
position: absolute;
left: 1px;
@ -14,7 +22,22 @@ body {
line-height: 36px;
text-align: center;
color: #d2d2d2;
/*
* 以下是对该类选择器样式的详细解释：
* position: absolute; 将元素设置为绝对定位，它会相对于最近的已定位祖先元素（如果没有则相对于html元素）来确定位置。
* left: 1px; 元素距离左侧边界1像素的距离。
* top: 1px; 元素距离顶部边界1像素的距离。
* width: 38px; 设置元素的宽度为38像素。
* line-height: 36px; 定义行高为36像素，影响文本在垂直方向上的排版。
* text-align: center; 让元素内部的文本在水平方向居中对齐。
* color: #d2d2d2; 设置文本的颜色为指定的灰色（十六进制颜色值表示）。
*/
}
.login-main .layui-input {
.login-main.layui-input {
padding-left: 38px;
/*
* 选择类名为login-main下的所有拥有layui-input类的元素，给它们设置左侧内边距为38像素，
* 可能是为了给这些输入框等元素预留一定的空间，比如放置图标之类的元素。
*/
}

569
web/css/style.css
Unescape View File

@ -1,6 +1,10 @@
@charset "utf-8";
/*
* @charset "utf-8";
* 声明该CSS文件使用的字符编码为utf-8，确保文件中的各种字符（如中文等）能被正确解析和显示。
*/
.layui-layout-admin .my-header {
/* 针对layui布局下的自定义头部样式 */
.layui-layout-admin.my-header {
position: fixed;
top: 0;
left: 0;
@ -8,9 +12,19 @@
height: 60px;
background: #393D49;
z-index: 2;
}
.layui-layout-admin .my-header .my-header-logo {
/*
* position: fixed; 将元素固定定位，使其相对于浏览器窗口固定位置，不会随页面滚动而移动。
* top: 0; 距离浏览器窗口顶部0像素，即紧贴顶部显示。
* left: 0; 距离浏览器窗口左侧0像素，即从最左边开始显示。
* width: 100%; 占据整个浏览器窗口的宽度。
* height: 60px; 设置头部高度为60像素。
* background: #393D49; 定义头部的背景颜色为指定的深灰色（十六进制颜色值表示）。
* z-index: 2; 设置元素的堆叠顺序，值越大越在上面，这里确保头部在一些其他元素之上显示。
*/
}
/* layui布局下头部中自定义的logo样式 */
.layui-layout-admin.my-header.my-header-logo {
display: inline-block;
width: auto;
height: 30px;
@ -19,31 +33,60 @@
line-height: 30px;
padding: 15px;
vertical-align: top;
}
.layui-layout-admin .my-header img.my-header-logo {
/*
* display: inline-block; 让元素以行内块级元素显示，既能像行内元素一样在一行排列，又能设置宽高。
* width: auto; 宽度自动适应内容宽度。
* height: 30px; 设置元素高度为30像素。
* color: white; 设置文本颜色为白色，与深色背景形成对比。
* font-size: 18px; 定义文本字号为18像素。
* line-height: 30px; 行高与元素高度一致，使文本垂直居中。
* padding: 15px; 在元素四周添加内边距，增加元素内部空间感。
* vertical-align: top; 设置元素垂直对齐方式为顶部对齐，常用于行内块元素的垂直对齐调整。
*/
}
/* layui布局下头部中作为图片的logo样式 */
.layui-layout-admin.my-header img.my-header-logo {
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
padding: 10px;
border: none;
}
/*
* 针对类名为my-header-logo的图片元素进行样式设置：
* width: 150px; 定义图片宽度为150像素。
* height: 40px; 设置图片高度为40像素。
* text-align: center; 让图片内如果有文本（通常这种情况较少）在水平方向居中对齐，这里更多是一种统一的样式设置习惯。
* line-height: 40px; 使图片在垂直方向上文本（同样通常较少）能有合适的排版，这里也是一种样式规范设定。
* padding: 10px; 在图片四周添加内边距，影响图片在布局中的占位空间。
* border: none; 去除图片默认的边框（如果有的话）。
*/
}
/* 以下是名为my-header-btn的类选择器样式，可能用于头部的按钮相关元素 */
/* index */
.my-header-btn {
display: inline-block;
width: auto;
height: 100%;
line-height: 60px;
/*
* display: inline-block; 以行内块方式显示元素，方便布局。
* width: auto; 宽度自动根据内容自适应。
* height: 100%; 高度与父元素（可能是头部元素）高度一致，这里应该是占满整个头部高度的垂直空间。
* line-height: 60px; 行高与元素高度相同，便于内部文本垂直居中对齐，使按钮等内容在垂直方向上看起来更规整。
*/
}
.my-header-btn .layui-btn .layui-icon {
.my-header-btn.layui-btn.layui-icon {
margin-right: 0;
/* 针对同时具有layui-btn和layui-icon类的元素（可能是layui框架中的按钮图标元素），将其右侧外边距设置为0，调整图标与其他元素的间距 */
}
.my-header-user-nav {
float: right;
/* 让该元素（可能是包含用户相关操作的导航元素）向右浮动，使其在头部靠右排列，常用于页面头部的用户信息、操作按钮等布局 */
}
.my-header-user-nav img {
@ -53,22 +96,40 @@
line-height: 40px;
border: none;
border-radius: 5px;
/*
* 对用户导航中的图片元素进行样式设置：
* width: 40px; 设置图片宽度为40像素。
* height: 40px; 定义图片高度为40像素，使其呈现正方形。
* text-align: center; 水平方向文本居中对齐（通常图片内无文本，但保持样式统一）。
* line-height: 40px; 垂直方向文本排版（同样一般无文本，但规范样式）。
* border: none; 去除图片边框。
* border-radius: 5px; 给图片设置圆角，使其外观更圆润，常用于头像等图片展示，增加美观度。
*/
}
.my-header-user-nav .layui-nav-item a.name {
padding-left: 5px !important;
.my-header-user-nav.layui-nav-item a.name {
padding-left: 5px!important;
/* 针对用户导航中类名为layui-nav-item下的a元素且类名为name的元素（可能是显示用户名之类的文本元素），强制设置左侧内边距为5像素，调整文本与其他元素的间距 */
}
.my-header ul.layui-nav {
display: inline-block;
vertical-align: top;
border-radius: 0;
/*
* 针对头部中具有layui-nav类的ul列表元素进行样式设置：
* display: inline-block; 以行内块方式显示列表，便于与其他元素在同一行排列布局。
* vertical-align: top; 垂直对齐方式为顶部对齐，调整列表与其他行内块元素在垂直方向上的对齐情况。
* border-radius: 0; 去除列表默认的边框圆角效果（如果有），使其外观更规整。
*/
}
.my-header ul.layui-nav li a {
max-height: 60px;
/* 限制头部导航列表中每个列表项（li）内链接（a）元素的最大高度为60像素，可能是为了保证整体头部布局的一致性和美观性 */
}
/* 侧边栏样式 */
.my-side {
position: fixed;
top: 60px;
@ -76,21 +137,35 @@
width: 200px;
z-index: 2;
overflow-x: hidden;
/*
* position: fixed; 固定定位侧边栏，使其在页面滚动时位置固定。
* top: 60px; 距离浏览器窗口顶部60像素，刚好在头部下方显示。
* bottom: 0; 距离浏览器窗口底部0像素，使其占满页面垂直方向剩余空间。
* width: 200px; 设置侧边栏宽度为200像素。
* z-index: 2; 定义堆叠顺序，确保在合适的层级显示，可能在主体内容之上等情况。
* overflow-x: hidden; 隐藏水平方向的溢出内容，防止侧边栏内容超出宽度时出现滚动条等情况。
*/
}
.my-side .layui-nav {
.my-side.layui-nav {
border-radius: 0;
min-height: 100%;
/*
* 针对侧边栏内的layui-nav类元素（通常是导航相关），去除边框圆角效果，并设置最小高度为100%，使其占满侧边栏的垂直空间，保证内容完整显示。
*/
}
.my-side ul.layui-nav li a i, .layui-nav .layui-nav-child a i, .layui-nav .layui-nav-item a i, .layui-tab-card > .layui-tab-title li span i {
.my-side ul.layui-nav li a i,.layui-nav.layui-nav-child a i,.layui-nav.layui-nav-item a i,.layui-tab-card >.layui-tab-title li span i {
margin-right: 5px;
/* 对侧边栏导航、子导航、普通导航项以及选项卡标题中的图标元素（i标签）统一设置右侧外边距为5像素，调整图标与文本的间距，使布局更美观 */
}
.my-side ul.layui-nav li dl dd a i {
margin-left: 15px;
/* 针对侧边栏导航中dl列表下dd元素内的图标元素（i标签），设置左侧外边距为15像素，调整图标在这些特定元素内的位置布局 */
}
/* 页面主体内容区域样式 */
.my-body {
position: fixed;
top: 60px;
@ -99,10 +174,20 @@
right: 0;
z-index: 1;
overflow: hidden;
/*
* position: fixed; 固定定位主体内容区域，使其位置固定。
* top: 60px; 位于头部下方60像素处开始显示。
* bottom: 0; 占满页面底部剩余垂直空间。
* left: 200px; 距离浏览器窗口左侧200像素，即从侧边栏右侧开始显示。
* right: 0; 占满页面右侧剩余水平空间。
* z-index: 1; 设置堆叠顺序，通常在头部、侧边栏等元素之后显示。
* overflow: hidden; 隐藏超出该区域的内容，避免出现滚动条等情况，可能后续会通过内部元素的滚动设置来处理内容过多的情况。
*/
}
.body {
padding: 10px;
/* 给类名为body的元素设置内边距为10像素，在元素内部四周增加一定空间，方便内容排版，避免内容紧贴边界 */
}
.frame-main {
@ -112,19 +197,30 @@
height: 433px;
background-color: #edededbf;
backdrop-filter: blur(20px);
/*
* margin-top: -210px; 将元素向上移动一定距离，这里结合top: 50%可以使其在垂直方向上居中显示（具体根据父元素等情况综合来看）。
* top: 50%; 垂直方向上位于父元素（或相对定位的参考元素）的中间位置。
* position: relative; 设置相对定位，方便基于自身原本位置进行一些偏移等布局调整。
* height: 433px; 定义元素高度为433像素。
* background-color: #edededbf; 设置背景颜色为带一定透明度的灰色（通过rgba形式表示颜色和透明度）。
* backdrop-filter: blur(20px); 给元素添加背景模糊效果，模糊程度为20像素，常用于营造出一种毛玻璃等特殊视觉效果。
*/
}
.my-body .layui-tab, .my-body .layui-tab .layui-tab-content {
.my-body.layui-tab,.my-body.layui-tab.layui-tab-content {
margin: 0;
padding: 0;
/* 去除主体内容区域内选项卡（layui-tab）及其内容区域（layui-tab-content）的默认外边距和内边距，方便进行自定义的布局和样式调整 */
}
.my-body .layui-tab .layui-tab-title li:first-child > i {
.my-body.layui-tab.layui-tab-title li:first-child > i {
display: none;
/* 隐藏主体内容区域内选项卡标题（layui-tab-title）中第一个列表项（li）内的图标元素（i标签），可能是根据设计需求对首个选项卡的图标进行特殊处理 */
}
.my-body .layui-tab, .my-body .layui-tab .layui-tab-content, .my-body .layui-tab .layui-tab-item {
.my-body.layui-tab,.my-body.layui-tab.layui-tab-content,.my-body.layui-tab.layui-tab-item {
height: 100%;
/* 让主体内容区域内的选项卡、选项卡内容以及每个选项卡对应的具体内容项（layui-tab-item）都占满所在父元素的垂直空间，保证内容完整显示且布局合理 */
}
.my-body iframe {
@ -132,447 +228,94 @@
height: 100%;
border: none;
outline: none;
/*
* 针对主体内容区域内的iframe元素（通常用于嵌入其他页面等），设置宽度和高度都为100%，使其占满父元素空间，并且去除边框和默认的轮廓线，使其外观更简洁，无缝融入页面布局。
*/
}
.layui-layout-admin .my-footer {
/* 页面底部样式 */
.layui-layout-admin.my-footer {
height: 40px;
padding: 2px 0;
/* 设置底部元素的高度为40像素，并在垂直方向上添加2像素的内边距（上下内边距），用于放置底部相关的版权信息、提示文字等内容 */
}
.layui-layout-admin .my-footer p {
.layui-layout-admin.my-footer p {
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
/*
* 针对底部元素内的p段落元素进行样式设置：
* height: 20px; 定义段落高度为20像素。
* line-height: 20px; 行高与段落高度一致，使文本垂直居中对齐。
* font-size: 12px; 设置文本字号为12像素，通常用于显示较小的版权、说明等文字信息。
* text-align: center; 让文本在水平方向居中对齐，使底部内容排版更整齐美观。
*/
}
.my-btn-box {
height: 38px;
margin-bottom: 10px;
/* 定义一个类名为my-btn-box的元素样式，设置高度为38像素，并在底部添加10像素的外边距，可能用于按钮组等元素的整体样式控制，方便布局和外观调整 */
}
.my-pay-box > div p {
text-align: center;
margin-bottom: 10px;
/* 针对类名为my-pay-box下的div元素内的p元素，设置文本水平居中对齐，并在底部添加10像素的外边距，常用于支付相关信息、提示等文本的排版布局 */
}
/* welcome */
/* welcome页面相关样式 */
.my-index-main button.layui-icon {
width: 100%;
font-size: 20px;
/* 针对类名为my-index-main下的button元素且具有layui-icon类（可能是layui框架中的图标按钮元素），设置宽度为100%占满父元素宽度，字号为20像素，用于调整按钮图标大小和外观显示效果 */
}
.my-index-main .my-nav-btn {
.my-index-main.my-nav-btn {
background: #efefef;
cursor: pointer;
border-radius: 2px;
overflow: hidden;
/*
* 对类名为my-index-main下的my-nav-btn类元素（可能是导航相关按钮元素）进行样式设置：
* background: #efefef; 设置背景颜色为浅灰色（十六进制颜色值表示）。
* cursor: pointer; 当鼠标悬停在元素上时，鼠标指针变为手型，提示用户可点击操作。
* border-radius: 2px; 给按钮添加2像素的圆角效果，使其外观更圆润。
* overflow: hidden; 隐藏超出元素范围的内容，防止因内容过多等情况出现显示异常。
*/
}
.my-index-main .my-nav-text:first-child {
.my-index-main.my-nav-text:first-child {
height: 24px;
line-height: 25px;
font-size: 16px;
font-weight: bold;
/* 针对类名为my-index-main下的my-nav-text类的第一个元素（可能是导航相关文本元素）进行样式设置：
* height: 24px; 定义元素高度为24像素。
* line-height: 25px; 行高稍大于元素高度，使文本垂直方向有合适的排版效果。
* font-size: 16px; 设置文本字号为16像素。
* font-weight: bold; 将文本加粗显示，突出重要性，常用于导航栏标题等文本。
*/
}
.my-index-main .my-nav-text:last-child {
.my-index-main.my-nav-text:last-child {
height: 20px;
line-height: 20px;
font-size: 12px;
/* 针对类名为my-index-main下的my-nav-text类的最后一个元素（可能是导航相关的辅助说明文本元素）进行样式设置：
* height: 20px; 定义元素高度为20像素。
* line-height: 20px; 行高与元素高度一致，使文本垂直居中对齐。
* font-size: 12px; 设置文本字号为12像素，用于显示较小的辅助说明文字。
*/
}
/* login */
/* 登录页面相关样式 */
.login-box {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 320px;
height: 241px;
max-height: 300px;
}
.login-body .login-box h3 {
color: #444;
font-size: 22px;
font-weight: 100;
text-align: center;
}
.login-box .layui-input[type='number'] {
display: inline-block;
width: 50%;
vertical-align: top;
}
.login-box img {
display: inline-block;
width: 46%;
height: 38px;
border: none;
vertical-align: top;
cursor: pointer;
margin-left: 4%;
}
.login-box button.btn-reset {
width: 95px;
}
.login-box button.btn-submit {
width: 190px;
}
.login-main {
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 350px;
margin: 0 auto;
}
.login-main header {
height: 35px;
line-height: 35px;
font-size: 30px;
font-weight: 100;
text-align: center;
padding-top: 58px;
}
.login-main header, .login-main form, .login-main form .layui-input-inline {
margin-bottom: 15px;
}
.login-main form .layui-input-inline, .login-main form .layui-input-inline input, .login-main form .layui-input-inline button {
width: 100%;
}
.login-main form .login-btn {
margin-bottom: 5px;
}
/* demo */
.site-demo-button div {
margin: 20px 30px 10px;
}
.site-demo-button .layui-btn {
margin: 0 7px 10px 0;
}
/* check */
input[type='checkbox'] {
vertical-align: middle;
}
.my-checkbox {
-webkit-appearance: none;
position: relative;
width: 20px;
height: 20px;
background-color: #FFFFFF;
border: solid 2px #28B779;
border-radius: 2px;
background-clip: padding-box;
display: inline-block;
cursor: pointer;
}
.my-checkbox:checked {
background-color: #28B779;
border: solid 0 #28B779;
}
.my-checkbox:checked:before {
position: absolute;
display: inline-block;
right: 50%;
bottom: 50%;
-webkit-transform: translate(50%, 50%);
-ms-transform: translate(50%, 50%);
transform: translate(50%, 50%);
font-family: "Microsoft Yahei";
content: "√";
color: #FFFFFF;
font-size: 16px;
font-weight: 600;
}
/* dblclick css */
.dblclick-tab tr td {
height: 30px;
line-height: 30px;
padding: 0 6px;
border-radius: 2px;
cursor: pointer;
}
.dblclick-tab tr td:hover {
color: black;
background: white;
}
.dblclick-tab tr td i {
position: relative;
top: 2px;
display: inline-block;
margin-right: 5px;
}
/* tips 404 */
.my-page-box {
font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", FontAwesome, sans-serif;
text-align: center;
padding: 20px;
background-color: white;
}
.my-page-box i {
font-size: 100px;
}
.my-page-box h2, .my-page-box h3, .my-page-box h4, .my-page-box h5 {
font-size: 80px;
}
.my-page-box p.msg {
color: #dce2ec;
font-size: 20px;
margin-top: 20px;
}
.my-page-box p.text {
color: #666;
font-size: 16px;
margin-top: 20px;
}
.my-page-box .my-btn-box {
margin-top: 20px;
margin-bottom: 20px;
}
/* tree table */
.my-tree-table-box .tree-table-tree-box {
width: 20%;
min-height: 200px;
display: inline-block;
vertical-align: top;
overflow-y: auto;
overflow-x: auto;
}
.my-tree-table-box .tree-table-table-box {
display: inline-block;
vertical-align: top;
width: 79%;
margin-left: 1%;
}
/* skin0 */
html .skin-0 .dblclick-tips-box .layui-layer-content {
background-color: #009688;
}
html .skin-0 .dblclick-tips-box i.layui-layer-TipsB {
border-right-color: #009688;
}
/* skin1 */
html .skin-1 .my-header .my-header-logo,
html .skin-1 .layui-nav .layui-nav-item a,
html .skin-1 .layui-nav .layui-nav-item a:hover {
color: #444;
}
html .skin-1 .my-header,
html .skin-1 .layui-nav,
html .skin-1 .layui-nav-child {
background: white;
}
html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this a {
color: white;
}
html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this,
html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this > a,
html .skin-1 .layui-nav-tree .layui-nav-item > a:hover,
html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd:hover > a,
html .skin-1 .layui-tab-title li .layui-tab-close:hover,
html .skin-1 .dblclick-tips-box .layui-layer-content {
color: white !important;
background-color: #666 !important;
}
html .skin-1 .dblclick-tips-box i.layui-layer-TipsB {
border-right-color: #666;
}
html .skin-1 .layui-nav .layui-nav-itemed > a {
background: #444 !important;
}
html .skin-1 .layui-nav .layui-nav-more {
border-color: #444 transparent transparent;
}
html .skin-1 .layui-nav .layui-nav-mored {
border-color: transparent transparent #444;
}
/* skin2 */
html .skin-2 .my-header .my-header-logo,
html .skin-2 .layui-nav .layui-nav-item a,
html .skin-2 .layui-nav .layui-nav-item a:hover {
color: white;
}
html .skin-2 .my-header,
html .skin-2 .layui-nav,
html .skin-2 .layui-nav-child {
background-color: #01AAED;
}
html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this a {
color: white;
}
html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this,
html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this > a,
html .skin-2 .layui-nav-tree .layui-nav-item > a:hover,
html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd:hover > a,
html .skin-2 .layui-tab-title li .layui-tab-close:hover,
html .skin-2 .dblclick-tips-box .layui-layer-content {
color: white !important;
background-color: #00C0F7 !important;
}
html .skin-2 .dblclick-tips-box i.layui-layer-TipsB {
border-right-color: #00C0F7;
}
html .skin-2 .layui-nav .layui-nav-itemed > a {
background-color: #1684af !important;
}
/* skin0-2 */
html .skin-2 .layui-nav .layui-nav-more,
html .skin-1 .layui-nav-tree .layui-nav-more,
html .skin-2 .layui-nav-tree .layui-nav-more {
border-color: white transparent transparent;
}
html .skin-2 .layui-nav .layui-nav-mored,
html .skin-1 .layui-nav-itemed .layui-nav-more,
html .skin-2 .layui-nav-itemed .layui-nav-more {
border-color: transparent transparent white;
}
/* tools */
.fl {
float: left;
}
.fr {
float: right;
}
.none {
display: none;
}
.block {
display: block;
}
.tc {
text-align: center;
}
.max-auto {
max-height: 450px;
overflow-y: auto;
}
/* layui css cover */
html body .layui-nav .layui-nav-bar {
opacity: 0 !important;
overflow: hidden !important;
}
.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
background-color: transparent;
}
.my-body .layui-tab-card > .layui-tab-title li {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.layui-layer-tips .layui-layer-content {
padding: 5px;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
position: relative;
left: 12%;
top: -10px;
}
.tooltip .tooltiptext {
width: 138px;
background-color: #dad5d545;
color: #ff4545;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.page-active-li {
background-color: #00FF00;
}
.page-li {
float: left;
border: 1px solid #e2e2e2;
display: inline-block;
vertical-align: middle;
padding: 0 15px;
height: 28px;
line-height: 28px;
margin: 0px 2px 5px -3px;
background-color: #fff;
color: #333;
font-size: 12px;
}
.page-li:hover {
color: #009688;
}
/* media */
@media screen and ( max-width: 450px) {
.my-header ul.my-header-user-nav li a.pay {
display: none;
}
}
right:0;
}

45
web/error.jsp
Unescape View File

@ -1,11 +1,19 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 这是JSP页面的指令，用于设置页面的内容类型为HTML，字符编码为UTF-8，并且指定使用的语言是Java -->
<html>
<head>
<meta charset="<?php $this->options->charset(); ?>">
<!-- 设置页面的字符编码，不过这里的写法不太常规，<?php...?>这种语法一般是用在PHP中，在这里可能是一种错误的混用，正常在HTML中可以直接写固定值如<meta charset="UTF-8"> -->
<meta charset="<?php $this->options->charset();?>">
<!-- 指示浏览器以IE的最高版本或者Chrome 1的模式来渲染页面，用于解决不同浏览器的兼容性问题 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<!-- 指示浏览器使用WebKit内核来渲染页面 -->
<meta name="renderer" content="webkit">
<!-- 设置视口相关属性，规定页面宽度等于设备宽度，初始缩放比例、最小缩放比例、最大缩放比例都为1.0，禁止用户手动缩放页面 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- 指示浏览器不要对页面进行缓存转换，保持获取到的原始内容 -->
<meta http-equiv="Cache-Control" content="no-transform"/>
<!-- 定义页面的图标链接 -->
<link rel="icon" href="https://yoyling.com/favicon.ico">
<title>ERROR</title>
@ -13,17 +21,20 @@
body{
margin:0;padding:0;
font-family: PingFang SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
/* 设置页面主体的外边距和内边距为0，定义字体族，优先使用苹方字体，其次是微软雅黑、文泉驿微米黑等无衬线字体 */
}
a, button.submit {
color:#6E7173;
text-decoration:none;
-webkit-transition:all .1s ease-in;
-moz-transition:all .1s ease-in;
-o-transition:all .1s ease-in;
transition:all .1s ease-in;
-webkit-transition:all.1s ease-in;
-moz-transition:all.1s ease-in;
-o-transition:all.1s ease-in;
transition:all.1s ease-in;
/* 设置链接和特定按钮的文本颜色为灰色，去除下划线，并且定义了在不同浏览器下过渡效果的属性，当元素状态改变时（如鼠标悬停等）会在0.1秒内平滑过渡样式变化 */
}
a:hover, a:active {
color:#6E7173;
/* 当鼠标悬停或者激活（比如点击按住时）链接元素时，保持文本颜色为灰色 */
}
.body404{
position: absolute;
@ -31,9 +42,11 @@
width: 100%;
background:#fff;
background-size: auto 100%;
/* 定义一个类名为body404的元素，设置其绝对定位，占满整个页面的高度和宽度，背景颜色为白色，背景图片尺寸自适应高度为100%（这里没看到背景图片相关设置，可能后续会添加或者有遗漏情况） */
}
.body-about .body404{
.body-about.body404{
background:#fff;
/* 当父元素有body-about类时，其内部的body404元素背景颜色设置为白色，可能用于特定页面布局区分样式 */
}
.site-name404 {
margin: 0 auto;
@ -47,21 +60,25 @@
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
/* 定义一个类名为site-name404的元素，使其水平居中，文本居中对齐，设置字间距、字体大小、行高、字体粗细等样式属性，文本颜色通过渐变背景和裁剪、填充等设置来实现渐变文字效果，并且添加了一个名为hue的动画，持续60秒，无限循环，线性播放 */
}
.site-name404 h1{
margin: 0 0 10px;
font-size:50px;
line-height:1.2;
/* 针对site-name404内部的h1元素设置外边距、字体大小和行高样式 */
}
.title404 span{
font-size: 15px;
width: 2px;
/* 设置类名为title404内部的span元素的字体大小和宽度样式 */
}
.title404 p{
font-size: 20px;
line-height:1.5;
margin:0;
color:#7b8993;
/* 设置类名为title404内部的p元素的字体大小、行高、外边距和文本颜色样式 */
}
.info404{
position: absolute;
@ -69,13 +86,16 @@
text-align: center;
width: 100%;
margin-top: -160px;
/* 定义一个类名为info404的元素，绝对定位在页面垂直居中的位置（通过top: 50%和负的外边距来实现精准居中），文本居中对齐，宽度占满整个页面 */
}
.body-about .info404{
.body-about.info404{
margin-top: -180px;
/* 当父元素有body-about类时，其内部的info404元素调整上边距，用于特定页面布局下的垂直位置微调 */
}
#footer404{
margin-top:30px;
font-size:10px;
/* 设置id为footer404的元素，距离上方元素有30px的外边距，字体大小为10px */
}
.index404 {
margin-top: 24px;
@ -98,9 +118,11 @@
border-radius: 25px;
background-color: #fff;
color: #7b8993;
/* 定义类名为index404的元素样式，设置上边距、显示为行内块元素、禁止文本换行、鼠标指针变为手型、字间距、字体大小等诸多样式属性，包括边框、行高、文本对齐、高度、内边距、圆角、背景颜色和文本颜色等，用于呈现一个特定外观和交互效果的按钮样式 */
}
.icon-about{
padding: 10px 0 25px;
/* 定义类名为icon-about的元素的内边距样式，用于布局调整 */
}
.icon-about a{
font-size: 20px;
@ -109,6 +131,7 @@
background-color: #000;
border-radius: 100%;
padding: 6px;
/* 定义类名为icon-about内部的链接元素样式，设置字体大小、外边距、文本颜色、背景颜色、边框圆角和内边距，用于呈现特定外观的图标样式（可能是社交媒体图标之类的元素） */
}
@-webkit-keyframes hue {
from {
@ -118,21 +141,27 @@
to {
-webkit-filter: hue-rotate(-360deg);
}
/* 定义名为hue的动画关键帧，从初始状态（色相旋转0度）到结束状态（色相旋转-360度），用于实现文本颜色渐变的动画效果 */
}
</style>
</head>
<body>
<div class="body404">
<div class="info404">
<header id="header404" class="clearfix">
<div class="site-name404">Time Out</div>
<!-- 创建一个id为header404的头部元素，应用clearfix类（可能用于清除浮动相关布局，不过没看到具体的clearfix样式定义），内部包含一个类名为site-name404的元素，显示文本"Time Out" -->
</header>
<section>
<div class="title404">
<p>I have no secret of success but hard work.</p>
<!-- 在section元素内，有一个类名为title404的div元素，内部包含一个段落元素显示相应的文本内容 -->
</div><a href="javascript:history.back()" class="index404">Go back</a>
<!-- 创建一个链接元素，点击时通过JavaScript的history.back()方法实现返回上一页的功能，应用index404类来呈现相应的样式 -->
</section>
</div>
</div>
</body>
</html>
</html>

18
web/filterLogin.jsp
Unescape View File

@ -1,16 +1,28 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 这是JSP页面的指令，作用如下：
- contentType="text/html;charset=UTF-8"：设置该JSP页面响应的内容类型为HTML格式，并且指定字符编码为UTF-8，确保页面中的中文等特殊字符能正确显示与传输。
- language="java"：明确该页面中使用的脚本语言是Java，意味着可以在页面中嵌入Java代码片段来实现业务逻辑等功能。 -->
<html>
<head>
<title>TITLE</title>
<!-- 设置HTML页面的标题，在浏览器标签页等地方会显示该标题内容 -->
</head>
<body>
<%
if (session.getAttribute("student")==null && session.getAttribute("teacher")==null && session.getAttribute("admin")==null) {
// 以下是一段嵌入在JSP页面中的Java代码片段，用于判断当前会话（session）中是否存在某些特定属性。
// session.getAttribute("student")==null：检查名为"student"的会话属性是否不存在（值为null）。
// session.getAttribute("teacher")==null：检查名为"teacher"的会话属性是否不存在（值为null）。
// session.getAttribute("admin")==null：检查名为"admin"的会话属性是否不存在（值为null）。
// 整体逻辑是，只有当这三个属性在会话中都不存在时，才会执行后续的转发操作。
if (session.getAttribute("student") == null && session.getAttribute("teacher") == null && session.getAttribute("admin") == null) {
%>
<jsp:forward page = "login.jsp"/>
<jsp:forward page = "login.jsp"/>
<!-- 这是JSP的一个动作标签（<jsp:forward>），用于将请求转发到指定的页面（这里是"login.jsp"页面）。
意味着当满足上述Java代码中判断条件时，当前请求会被直接转发到"login.jsp"页面，浏览器地址栏的URL可能不会发生改变（取决于服务器的具体配置和实现），
并且后续当前JSP页面中未执行的部分代码将不会再执行，控制权交给了被转发到的"login.jsp"页面。 -->
<%
}
%>
</body>
</html>
</html>

9
web/footer.jsp
Unescape View File

@ -1,7 +1,10 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 这是JSP（Java Server Pages）页面的指令标签。
- contentType="text/html;charset=UTF-8"：用于设定此页面响应内容的类型为HTML格式，同时指定字符编码为UTF-8，这样可以保证页面能够正确地显示和处理各种字符，比如中文等特殊字符不会出现乱码情况。
- language="java"：明确表明在这个JSP页面中所使用的脚本语言是Java，意味着后续可以在页面中嵌入Java代码片段来实现诸如业务逻辑处理、数据交互等功能。 -->
<div class="layui-footer">
<!-- 底部固定区域 -->
<!-- 这是一个HTML的<div>标签，使用了名为"layui-footer"的类名。通常在前端框架（如Layui框架）中，这样带有特定类名的元素会被赋予相应的样式，此处大概率是用于构建页面底部的布局结构，从注释“底部固定区域”可以推测，它可能是用来创建页面底部的固定显示区域，比如放置版权信息、相关链接等内容。 -->
© yoyling.com - 学生信息管理系统
</div>
<!-- 此处显示的是版权声明相关的文本内容，表明该学生信息管理系统的版权归属网站为“yoyling.com”，是页面底部常见的用于标识版权所有者及系统名称的展示信息。 -->
</div>

53
web/forget.jsp
Unescape View File

@ -1,65 +1,116 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 这是JSP（Java Server Pages）页面的指令标签，具体作用如下：
- contentType="text/html;charset=UTF-8"：指定该页面响应内容的类型为HTML格式，同时将字符编码设置为UTF-8，确保页面能正确处理和显示各种字符，像中文等特殊字符不会出现乱码现象。
- language="java"：表明在这个JSP页面中使用的脚本语言是Java，后续可以在页面里嵌入Java代码片段来实现诸如与服务器端交互、业务逻辑处理等功能。不过从当前整个页面来看，主要还是以HTML、CSS和JavaScript实现前端相关功能为主 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置HTML页面的字符编码为UTF-8，与上面JSP指令中的字符编码设置相呼应，保证页面内容能正确解析和显示 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 指示浏览器以IE的最高版本或者Chrome 1的模式来渲染页面，用于解决不同浏览器之间的兼容性问题，尽量保证页面在不同浏览器下呈现的效果相对一致 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 设置视口相关属性，让页面宽度等于设备宽度，初始缩放比例为1，最大缩放比例也为1，意味着页面在移动端等设备上初始显示时按设备宽度自适应，并且用户不能进行缩放操作 -->
<title>忘记密码</title>
<!-- 设置HTML页面的标题，这个标题会显示在浏览器的标签栏上，让用户清楚当前页面的主要功能是用于“忘记密码”相关操作 -->
<link rel="stylesheet" href="./css/layui.css">
<!-- 引入外部样式表文件layui.css，通常这是Layui前端框架的核心样式文件，用于应用该框架预定义的各种UI组件、布局等样式 -->
<link rel="stylesheet" href="./css/style.css">
<!-- 引入自定义的style.css样式文件，可能用于覆盖Layui框架的部分默认样式或者添加页面特定的样式规则 -->
<link rel="stylesheet" href="./css/login.css">
<!-- 引入专门针对登录相关功能（此处是忘记密码功能，可能和登录共用部分样式逻辑）的login.css样式文件，进一步定制页面的外观样式 -->
<script src="layui.js"></script>
<!-- 引入Layui框架的JavaScript核心文件，通过这个文件可以使用Layui框架提供的各种JavaScript组件和功能，比如表单验证、弹出层等功能 -->
</head>
<body>
<div class="frame-main">
<!-- 这可能是整个页面主体内容的一个外层框架容器，用于整体布局，通过类名"frame-main"可以在CSS样式表中对其设置宽度、高度、边距等布局相关的样式属性 -->
<div class="login-main">
<!-- 可能是专门用于放置登录相关内容（此处是忘记密码相关元素）的容器，通过类名"login-main"可以进一步定制其内部元素的排列、样式等 -->
<header class="layui-elip">找回密码</header>
<!-- 使用了layui-elip类的<header>元素，可能是应用了Layui框架中特定的样式类来实现文本的某种排版效果（比如省略显示等，不过具体要看对应样式定义），用于显示页面的主要标题“找回密码” -->
<form class="layui-form">
<!-- 创建一个表单元素，并且应用了layui-form类，表明这个表单会应用Layui框架提供的表单相关的样式和验证等功能 -->
<div class="layui-input-inline">
<!-- 创建一个行内块级的<div>元素，用于在表单内布局输入框等元素，使得它们可以在同一行显示（具体布局还取决于样式设置） -->
<label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
<!-- 创建一个<label>标签，应用了多个类名，其中layui-icon类表明它是Layui框架中的图标元素，layui-icon-username类指定了具体的图标样式（这里推测是代表用户名相关的图标），用于在输入框前面显示一个特定的图标作为提示 -->
<input type="text" name="account" required lay-verify="required" placeholder="请输入注册时的ID" autocomplete="off"
class="layui-input">
<!-- 创建一个文本输入框，设置了以下属性：
- type="text"：表明是文本类型的输入框，用于用户输入文本信息。
- name="account"：为输入框设置一个名称，方便后续在表单提交等操作中识别和获取该输入框的值。
- required：HTML5的属性，表明这个输入框是必填项，浏览器会进行相应的验证提示。
- lay-verify="required"：Layui框架的验证属性，再次强调这个输入框是必填的，当用户提交表单时，如果该输入框为空会触发验证提示。
- placeholder="请输入注册时的ID"：在输入框为空时显示的提示文本，提示用户应该输入的内容。
- autocomplete="off"：关闭浏览器的自动填充功能，避免浏览器自动填充一些不合适的信息到该输入框。
- class="layui-input"：应用Layui框架中针对输入框的样式类，使输入框呈现出相应的外观样式。 -->
</div>
<div class="layui-input-inline">
<label class="layadmin-user-login-icon layui-icon layui-icon-email"></label>
<input type="password" name="password" required lay-verify="required" placeholder="用于找回的邮箱" autocomplete="off"
class="layui-input">
<!-- 与上面的输入框类似，不过这里是一个密码类型的输入框（type="password"），用于用户输入找回密码所需要的邮箱地址，同样设置了必填、验证、提示文本等相关属性 -->
</div>
<div class="layui-input-inline login-btn">
<!-- 又是一个行内块级的<div>元素，用于放置提交按钮，并且应用了login-btn类，可能用于对按钮设置特定的样式，比如大小、颜色等 -->
<button lay-submit lay-filter="login" class="layui-btn">找回</button>
<!-- 创建一个按钮元素，应用了layui-btn类使其呈现Layui框架中按钮的默认样式，lay-submit属性表示这个按钮可以触发表单提交操作，lay-filter="login"属性用于为按钮绑定一个特定的事件过滤器，方便后续在JavaScript代码中对按钮的点击事件进行监听和处理 -->
</div>
<hr/>
<!-- 创建一个水平分割线元素，用于在页面上划分不同的区域，起到视觉上的分隔作用 -->
<p><a href="login.jsp" class="fl">登录&emsp;&emsp;&emsp;&emsp;</a><a href="https://yoyling.com" class="fl">如果你未绑定邮箱请联系我</a><a href="register.jsp" class="fr">注册</a></p>
<!-- 创建一个段落元素，里面包含了三个链接元素：
- 第一个链接（href="login.jsp"）指向登录页面（login.jsp），并应用了fl类（可能用于设置左浮动等样式布局相关操作），显示文本“登录”，方便用户在忘记密码页面可以直接跳转到登录页面。
- 第二个链接（href="https://yoyling.com"）指向一个外部网站（yoyling.com），同样应用了fl类，显示文本“如果你未绑定邮箱请联系我”，用于提示用户在未绑定邮箱的情况下如何寻求帮助。
- 第三个链接（href="register.jsp"）指向注册页面（register.jsp），应用了fr类（可能用于设置右浮动等样式布局相关操作），显示文本“注册”，方便用户进行注册相关操作。 -->
</form>
</div>
</div>
<footer style="position:absolute;bottom:0;width:100%;height:30px; text-align: center;">© 2018-2019.YOYLING.COM</footer>
<!-- 创建一个<footer>元素，通过内联样式设置其绝对定位在页面底部（bottom:0），宽度占满整个页面（width:100%），高度为30px，并且文本居中对齐（text-align: center），用于显示版权相关的声明信息“© 2018-2019.YOYLING.COM” -->
<script type="text/javascript">
layui.use(['form','layer','jquery'], function () {
// 使用Layui框架的模块加载机制，加载名为'form'（用于表单操作和验证等功能）、'layer'（用于弹出层提示等功能）、'jquery'（虽然这里写的是加载，但实际上可能是Layui内部已经集成了jQuery或者对其进行了适配，用于进行DOM操作、AJAX请求等常见的JavaScript操作）的模块，加载完成后执行回调函数。
// 操作对象
var form = layui.form;
// 获取Layui框架中表单模块的实例对象，后续可以通过这个对象调用表单相关的方法，比如进行表单验证、监听表单提交事件等操作。
var $ = layui.jquery;
// 获取Layui框架中经过适配后的jQuery对象（或者就是原生的jQuery对象，如果Layui是基于它来集成的），方便后续进行各种DOM操作和AJAX请求等操作。
form.on('submit(login)',function (data) {
// 使用表单模块的on方法来监听表单提交事件，这里监听的是lay-filter="login"的按钮点击提交表单时触发的事件。当事件触发时，会传入一个包含表单数据等信息的参数data，执行回调函数内的代码。
// console.log(data.field);
// 这行代码如果取消注释，可以在控制台打印出表单中各个输入框等元素提交的数据，用于调试查看用户输入的内容是否正确获取到了，此处是获取到以对象形式存储的表单数据（字段名为键，用户输入的值为对应的值）。
$.ajax({
url:'login.php',
// 设置AJAX请求的目标URL地址，这里是向名为login.php的服务器端脚本文件发送请求，通常这个文件会用于处理登录相关的业务逻辑（此处是忘记密码的验证逻辑，可能存在复用情况），比如验证用户输入的账号和邮箱是否匹配等操作。
data:data.field,
// 将获取到的表单数据（前面提到的data.field）作为请求的数据发送给服务器端，服务器端可以根据这些数据进行相应的处理。
dataType:'text',
// 设置期望从服务器端返回的数据类型为文本类型，意味着服务器端返回的内容会被当作普通文本进行处理。
type:'post',
// 设置AJAX请求的方式为POST方式，相比于GET方式，POST方式更适合用于提交表单数据等需要传递较多数据或者敏感数据的情况，数据会放在请求体中发送给服务器端。
success:function (data) {
// 这是AJAX请求成功后的回调函数，当服务器端正确响应并返回数据后，会执行这个函数，参数data就是服务器端返回的数据内容。
if (data == '1'){
location.href = "../index.php";
// 如果服务器端返回的数据内容是'1'，则认为验证通过，通过修改浏览器的地址栏，将页面重定向到上级目录下的index.php页面，这里推测index.php可能是系统的主页面或者登录成功后的欢迎页面等。
}else{
layer.msg('登录名或密码错误');
// 如果服务器端返回的数据不是'1'，则认为验证失败，使用Layui框架的layer模块弹出一个提示消息框，显示“登录名或密码错误”的提示信息，告知用户验证未通过的原因。
}
}
})
return false;
// 返回false阻止表单的默认提交行为，因为这里已经通过AJAX方式手动向服务器端发送了请求，不需要浏览器再进行默认的表单提交操作了，避免页面刷新等不必要的情况发生。
})
});

34
web/index.jsp
Unescape View File

@ -1,28 +1,42 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 页面指令：
contentType="text/html;charset=UTF-8"：指定了该JSP页面返回给客户端的内容类型是HTML格式，并且字符编码采用UTF-8，这样可以确保页面能够正确显示包含各种语言文字（尤其是中文等非ASCII字符）的内容，避免出现乱码情况。
language="java"：表明该JSP页面使用Java语言来编写脚本代码，JSP本质上最终会被服务器编译成Servlet（Java类）来执行，这里明确了其脚本所基于的编程语言。
-->
<html>
<head>
<title>TITLE</title>
</head>
<body>
<%
if (session.getAttribute("student")!=null) {
// 以下这段代码基于服务器端的会话（session）对象来判断用户的角色，并根据不同的角色进行页面转发操作。
// 它通过检查session对象中存储的特定属性（student、teacher、admin）是否存在来确定用户身份，然后将请求转发到相应的初始页面，
// 如果这些属性都不存在，意味着用户未登录或者登录状态失效等情况，就将请求转发到login.jsp页面让用户进行登录操作。
if (session.getAttribute("student")!= null) {
// 使用session.getAttribute("student")尝试从当前会话中获取名为student的属性值，
// 如果获取到的值不为null，表示当前用户的角色是学生，此时执行下面的转发操作，
// 利用JSP的转发标签<jsp:forward>将请求转发到WEB-INF/student/sIndex.jsp页面。
// WEB-INF目录下的资源通常是受保护的，不能直接通过浏览器URL访问，需要通过服务器端的转发等内部机制来访问，这样可以提高页面的安全性，避免用户直接绕过权限检查去访问一些应该有权限限制的页面。
%>
<jsp:forward page = "/WEB-INF/student/sIndex.jsp"/>
<jsp:forward page="/WEB-INF/student/sIndex.jsp" />
<%
}else if (session.getAttribute("teacher")!=null) {
} else if (session.getAttribute("teacher")!= null) {
// 类似地，如果student属性不存在，但是teacher属性存在于会话中，说明用户角色是教师，就会把请求转发到WEB-INF/teacher/tIndex.jsp页面。
%>
<jsp:forward page = "/WEB-INF/teacher/tIndex.jsp"/>
<jsp:forward page="/WEB-INF/teacher/tIndex.jsp" />
<%
}else if (session.getAttribute("admin")!=null) {
} else if (session.getAttribute("admin")!= null) {
// 若student和teacher属性都不存在，而admin属性存在，表明用户是管理员角色，会将请求转发到WEB-INF/admin/aIndex.jsp页面。
%>
<jsp:forward page = "/WEB-INF/admin/aIndex.jsp"/>
<jsp:forward page="/WEB-INF/admin/aIndex.jsp" />
<%
}else {
} else {
// 前面几个条件都不满足，也就是上述代表不同角色的属性在会话中都不存在时，会将请求转发到login.jsp页面，引导用户进行登录，
// 建立相应的会话属性来标识其角色，后续再次访问时就能根据角色转发到对应的页面了。
%>
<jsp:forward page = "login.jsp" />
<jsp:forward page="login.jsp" />
<%
}
%>
</body>
</html>
</html>

319
web/layui.js
View File

File diff suppressed because one or more lines are too long

41
web/login.jsp
Unescape View File

@ -1,84 +1,114 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- JSP 页面指令，设置页面的内容类型为 HTML 且字符编码为 UTF-8，表明使用 Java 语言编写 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 声明页面的字符编码为 UTF-8，确保页面中的文本能正确显示 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 用于指定浏览器以何种模式渲染页面，这里优先使用 IE 最新版本或 Chrome Frame（如果安装了） -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 设置视口相关属性，让页面在移动设备上能自适应屏幕宽度，初始缩放比例为 1，最大缩放比例也为 1 -->
<title>登录页</title>
<!-- 页面的标题，显示在浏览器标签栏上 -->
<link rel="stylesheet" href="./css/layui.css">
<!-- 引入 layui 框架的基础样式文件，用于构建页面的基本样式布局 -->
<link rel="stylesheet" href="./css/modules/layer/default/layer.css">
<!-- 引入 layui 中 layer 模块的默认样式文件，可能用于弹出层等相关组件的样式展示 -->
<link rel="stylesheet" href="./css/login.css">
<!-- 引入自定义的登录页面样式文件，用于覆盖或补充框架样式，实现特定的登录页外观设计 -->
<link rel="stylesheet" href="./css/style.css">
<!-- 引入其他自定义样式文件，可能包含页面通用的一些样式规则 -->
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
<!-- 设置页面的图标（显示在浏览器标签栏等位置），指定图标文件的路径和类型 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 引入 jQuery 库的压缩版本，方便进行 DOM 操作、事件处理等前端交互逻辑开发 -->
<style type="text/css">
</style>
<!-- 可以在此处编写页面内联样式，用于对特定元素进行样式设置，此处为空 -->
</head>
<body>
<div class="frame-main">
<div class="login-main">
<header class="layui-elip">学生信息管理系统</header>
<!-- 使用 layui 相关的类定义了一个标题元素，展示系统名称，可能应用了特定的样式效果（如文本截断等） -->
<form class="layui-form" action="" name="formf" method="post">
<!-- 定义一个表单，使用 layui 的表单类进行样式修饰，设置提交方式为 POST，初始 action 为空，后续会根据用户选择动态设置 -->
<div class="layui-input-inline">
<label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
<input type="text" name="id" id="id" value="${loginid}" required lay-verify="required" placeholder="用户名(学号或工号)" autocomplete="off"
class="layui-input">
</div>
<!-- 创建一个内联的输入框容器，里面包含一个图标标签（用于显示用户名图标）和一个文本输入框，输入框用于输入用户名（学号或工号），
设置了相关属性如 required 表示必填，lay-verify 用于 layui 框架的表单验证，placeholder 是提示文本，autocomplete 关闭自动完成功能 -->
<div class="layui-input-inline">
<label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
<input type="password" value="${loginpassword}" id="password" name="password" required lay-verify="required" placeholder="密码" autocomplete="off"
class="layui-input">
</div>
<!-- 类似上述输入框容器，用于输入密码，同样有相关的样式类、属性设置，并且通过 value 属性可能绑定了从后台传来的默认密码值（如果有） -->
<div class="layui-input-inline" style="width: 56%; margin-bottom: 0px;">
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode"></label>
<input type="password" name="verifycode" id="code" required lay-verify="required" placeholder="验证码" autocomplete="off"
class="layui-input">
</div>
<!-- 用于输入验证码的输入框容器，设置了相应的样式、属性以及提示文本等 -->
<a href="javascript:refreshCode()">
<img style="padding-left: 14px;" src="${pageContext.request.contextPath}/checkCodeServlet" title="刷新验证码" id="vcode" draggable="false">
</a>
<!-- 一个链接元素，绑定了 JavaScript 函数 refreshCode()，用于点击时刷新验证码图片，图片的 src 属性指向一个 Servlet 来获取验证码图片资源 -->
<div style="padding-left: 54px;padding-bottom: 6px;">
<input type="radio" name="roles" value="student" title="学生" checked>
<input type="radio" name="roles" value="teacher" title="老师">
<input type="radio" name="roles" value="admin" title="管理员">
</div>
<!-- 一组单选按钮，用于选择用户角色（学生、老师、管理员），默认选中学生角色 -->
<div class="layui-input-inline login-btn">
<button type="button" onclick="a()" lay-submit lay-filter="login" class="layui-btn" id="login" name="submit-login">登录</button>
</div>
<!-- 创建一个内联的按钮容器，里面包含一个登录按钮，按钮绑定了 onclick 事件调用函数 a()，同时使用了 layui 的相关属性用于表单提交验证等 -->
<hr/>
<!-- 水平分割线 -->
<!--<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-primary">QQ登录</button>
</div>
<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-normal">微信登录</button>
</div>-->
<!-- 被注释掉的部分，可能原本计划用于实现 QQ 登录和微信登录的按钮，目前未启用 -->
<p><a href="register.jsp" class="fl">立即注册</a>
<div class="tooltip">
<span class="tooltiptext">${login_msg}</span>
</div>
<a href="forget.jsp" class="fr">忘记密码？</a></p>
<div class="tooltip">
<span class="tooltiptext">${login_msg}</span>
</div>
<a href="forget.jsp" class="fr">忘记密码？</a></p>
<!-- 包含了两个链接，一个指向注册页面（register.jsp），另一个指向忘记密码页面（forget.jsp），中间有一个用于显示提示信息（可能是后台传来的登录相关消息）的元素 -->
</form>
</div>
</div>
<footer style="position:absolute;bottom:0;width:100%;height:30px; text-align: center;">© 2018-2019.YOYLING.COM</footer>
<!-- 页面底部的版权声明元素，绝对定位在页面底部，宽度占满整个页面，高度为 30px，文本居中显示 -->
<script src="layui.js"></script>
<script src="./lay/modules/layer.js"></script>
<!-- 引入 layui 框架的主脚本文件以及 layer 模块的脚本文件，用于实现页面交互逻辑和弹出层等功能 -->
<script type="text/javascript">
function refreshCode() {
var vcode = document.getElementById("vcode");
vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
}
// 定义 refreshCode 函数，用于刷新验证码图片的 src 属性，通过在 URL 后添加时间戳来避免浏览器缓存，确保每次获取到最新的验证码图片
</script>
<script type="text/javascript">
layui.use('form',function(){
var form = layui.form;
// 调用 layui 的 use 方法加载 form 模块，在回调函数中获取 form 实例，用于后续操作
//刷新界面 所有元素
form.render();
// 调用 form 模块的 render 方法，刷新页面上所有表单元素的状态，确保样式和交互功能正确显示
});
</script>
@ -112,6 +142,9 @@
}
}
}
// 定义函数 a，用于处理登录按钮的点击事件（原本可能是绑定在按钮的 click 事件上，现在通过 onclick 属性调用）
// 首先获取所有角色单选按钮，确定选中的角色值，然后获取用户名、密码、验证码输入框的值，进行非空验证
// 如果输入框有值为空则直接返回不进行后续操作，如果都有值，则根据选中的角色设置表单的 action 属性，指向对应的登录 Servlet 并提交表单
</script>
</body>
</html>

47
web/message.jsp
Unescape View File

@ -1,57 +1,67 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- JSP 页面指令，设置页面内容类型为 HTML，字符编码为 UTF-8，表明该页面使用 Java 语言编写 -->
<%@ page import="java.io.*,java.util.*,javax.servlet.*,javax.servlet.http.*" %>
<!-- 导入多个 Java 相关的包，用于处理输入输出、集合操作、Servlet 相关功能以及 HTTP 相关功能等，方便后续代码中使用这些类和接口 -->
<%@ page import="java.rmi.ServerException" %>
<!-- 导入用于处理服务器端异常的类，可能用于在出现问题时抛出合适的异常信息 -->
<%@ page import="java.nio.charset.Charset" %>
<%@ page import="java.nio.charset.StandardCharsets" %>
<!-- 导入字符编码相关的类和标准字符编码常量，用于处理字符编码转换等操作，比如后续将字节数组转换为字符串时指定编码 -->
<html>
<head>
<title></title>
</head>
<body>
<%
//定义上传文件的最大字节
//定义上传文件的最大字节数，这里设置的数值是 102400 * 102400 字节（不过这个数值看起来可能过大，也许是示例或特殊需求，通常会根据实际情况合理设置大小限制）
int MAX_SIZE = 102400 * 102400;
//创建根路径的保存变量
//创建根路径的保存变量，后续用于拼接出文件上传后的保存路径，初始时只是声明，还未赋值具体内容
String rootPath;
//声明文件读入类
//声明文件读入类，用于从请求流中读取上传的数据，初始化为 null，后续会在合适的逻辑中进行实例化
DataInputStream in = null;
//声明文件输出流类，用于将上传的数据写入到服务器端的文件中，初始化为 null，后续会在合适的逻辑中进行实例化
FileOutputStream fileOut = null;
//取得互联网程序的绝对地址
//取得互联网程序（即当前 Servlet 上下文对应的应用程序）的绝对地址，例如获取到类似项目部署在服务器上的根目录路径
String realPath = request.getSession().getServletContext().getRealPath("/");
//对获取到的绝对路径进行处理，截取掉其中 "\out" 及之后的部分，可能是为了获取到项目更合适的基础路径（具体取决于项目结构和需求）
realPath = realPath.substring(0, realPath.indexOf("\\out"));
// out.print(realPath);
//创建文件的保存目录
// 创建文件的保存目录，将处理后的路径与 "\web\upload\" 拼接起来，形成文件最终要保存的目录路径，这里假设项目中有这样一个用于存放上传文件的目录结构
rootPath = realPath + "\\web\\upload\\";
//取得客户端上传的数据类型
//取得客户端上传的数据类型，例如判断是否是 "multipart/form-data" 这种常见的文件上传类型的数据格式
String contentType = request.getContentType();
try {
// 判断客户端上传的数据类型是否是 "multipart/form-data"，如果是则进行文件上传相关的处理逻辑
if (contentType.indexOf("multipart/form-data") >= 0) {
//读入上传数据
// 读入上传数据，通过从请求输入流创建 DataInputStream 对象，以便按字节读取客户端上传的数据
in = new DataInputStream(request.getInputStream());
// 获取上传数据的总长度（字节数），用于后续循环读取数据以及判断是否超过设定的最大字节限制
int formDataLength = request.getContentLength();
// 检查上传的数据长度是否超过了预先定义的最大字节数，如果超过则输出提示信息并终止当前方法执行（直接返回）
if (formDataLength > MAX_SIZE) {
out.print("上传的字节不可以超过" + MAX_SIZE + "字节");
return;
}
//保存上传文件的数据
// 保存上传文件的数据，创建一个字节数组，大小为上传数据的总长度，用于存放从请求中读取到的字节数据
byte dataBytes[] = new byte[formDataLength];
int byteRead = 0;
int totalBytesRead = 0;
//上传的数据保存在byte数组里面
// 上传的数据保存在 byte 数组里面，通过循环从输入流中读取数据，每次读取一部分字节，直到读取完所有上传的数据
while (totalBytesRead < formDataLength) {
byteRead = in.read(dataBytes, totalBytesRead, formDataLength);
totalBytesRead += byteRead;
}
//根据byte数组创建字符串
// 根据 byte 数组创建字符串，使用指定的 UTF-8 编码将字节数组转换为字符串，方便后续对上传数据内容进行字符串相关的操作（比如提取文件名等信息）
String file = new String(dataBytes, StandardCharsets.UTF_8);
//取得上传数据的文件名
// 取得上传数据的文件名，通过对转换后的字符串进行一系列的截取操作，从包含文件名信息的字符串中提取出真正的文件名（处理了包含文件名的特定格式字符串）
String saveFile = file.substring(file.indexOf("filename=\"") + 10);
saveFile = saveFile.substring(0, saveFile.indexOf("\n"));
saveFile = saveFile.substring(saveFile.lastIndexOf("\\") + 1, saveFile.indexOf("\""));
int lastIndex = contentType.lastIndexOf("=");
//取得数据的分隔字符串
// 取得数据的分隔字符串，从上传数据的类型字符串（例如 "multipart/form-data; boundary=----WebKitFormBoundaryxxx"）中提取出用于分隔不同部分的边界字符串（boundary）
String boundary = contentType.substring(lastIndex + 1, contentType.length());
//创建保存路径的文件名
// 创建保存路径的文件名，将前面确定的文件保存目录路径与提取出的文件名拼接起来，形成完整的文件保存路径（包含文件名和目录）
String fileName = rootPath + saveFile;
int pos;
pos = file.indexOf("filename = \"");
@ -59,30 +69,33 @@
pos = file.indexOf("\n", pos) + 1;
pos = file.indexOf("\n", pos) + 1;
int boundaryLocation = file.indexOf(boundary, pos) - 4;
//取得文件数据的开始的位置
// 取得文件数据的开始的位置，通过对文件内容字符串进行一系列操作，先获取相关子字符串，再计算其字节长度来确定文件数据在整个上传数据中的起始位置
int startPos = ((file.substring(0, pos)).getBytes()).length;
int endPos = ((file.substring(0, boundaryLocation)).getBytes()).length;
File checkFile = new File(fileName);
// 检查要保存的文件是否已经存在，如果存在则输出提示信息并终止当前方法执行（直接返回）
if (checkFile.exists()) {
out.println("<p>" + saveFile + "文件已经存在.</p>");
return;
}
//检查上传文件的目录是否存在
// 检查上传文件的目录是否存在，如果不存在则创建该目录（包括上级目录等，会递归创建），确保文件保存的目录是存在的
File fileDir = new File(rootPath);
if (!fileDir.exists()) {
fileDir.mkdirs();
}
//创建文件的输出类
// 创建文件的输出类，通过指定文件保存路径实例化 FileOutputStream，用于将上传的数据写入到对应的文件中
fileOut = new FileOutputStream(fileName);
//保存文件的数据
// 保存文件的数据，将之前读取到的字节数组中对应文件数据部分写入到文件输出流中，实现文件在服务器端的保存
fileOut.write(dataBytes, startPos, (endPos - startPos));
fileOut.close();
out.print("<b>文件上传成功</b>");
} else {
// 如果上传的数据类型不是 "multipart/form-data"，则输出提示信息，告知用户需要上传该类型的文件
String content = request.getContentType();
out.print("上传的文件类型是" + content + "类型的，请上传目录mutipart/form-data类型的文件");
}
} catch (Exception ex) {
// 如果在文件上传过程中出现任何异常，捕获异常并抛出一个 ServerException，将原始异常的消息传递进去，方便在更上层进行统一的异常处理和日志记录等操作
throw new ServerException(ex.getMessage());
}
%>

56
web/register.jsp
Unescape View File

@ -1,30 +1,45 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- JSP页面指令，设置页面的内容类型为HTML格式，字符编码采用UTF-8，同时表明该页面使用Java语言编写 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 声明页面的字符编码为UTF-8，确保页面中的文本内容能正确显示 -->
<meta name="renderer" content="webkit">
<!-- 指定页面使用WebKit内核进行渲染，用于在一些特定浏览器环境下控制页面的渲染方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 指示浏览器以IE的最新版本或者Chrome Frame（如果已安装）来渲染页面，以解决不同浏览器版本兼容性问题 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 设置视口相关属性，让页面在移动设备上能自适应屏幕宽度，初始缩放比例和最大缩放比例都设置为1 -->
<title>注册页</title>
<!-- 页面的标题，会显示在浏览器的标签栏上 -->
<link rel="stylesheet" href="./css/layui.css">
<!-- 引入layui框架的基础样式文件，用于构建页面的整体样式布局，提供各种组件的默认样式 -->
<link rel="stylesheet" href="./css/style.css">
<!-- 引入自定义的通用样式文件，可能包含整个项目中通用的一些样式规则，用于补充或覆盖框架样式 -->
<link rel="stylesheet" href="./css/login.css">
<!-- 引入与登录相关的样式文件，也许注册页复用了部分登录页的样式或者有相似的样式需求 -->
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
<!-- 设置页面的图标，显示在浏览器标签栏等位置，指定了图标文件的路径和类型 -->
</head>
<body>
<div class="frame-main">
<div class="login-main">
<header class="layui-elip">学生信息管理系统</header>
<!-- 使用layui相关的类定义了一个标题元素，展示系统名称，可能应用了特定的样式效果（如文本截断等） -->
<!-- 表单选项 -->
<form class="layui-form" id="registerForm" action="${pageContext.request.contextPath}/registerServlet" method="post">
<!-- 定义一个表单，使用layui的表单类进行样式修饰，设置了表单的id为"registerForm"，指定提交的目标Servlet路径以及提交方式为POST -->
<div class="layui-input-inline">
<!-- 用户名 -->
<div class="layui-inline" style="width: 100%">
<label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
<input type="text" id="user" value="${studentid}" name="studentid" required lay-verify="required" placeholder="请输入学号" autocomplete="off" class="layui-input">
</div>
<!-- 创建一个内联的输入框容器，里面包含一个图标标签（用于显示用户名图标）和一个文本输入框，输入框用于输入学号（这里名为studentid），
设置了相关属性如required表示必填，lay-verify用于layui框架的表单验证，placeholder是提示文本，autocomplete关闭自动完成功能，
并且通过value属性可能绑定了从后台传来的默认学号值（如果有） -->
</div>
<!-- 密码 -->
<div class="layui-input-inline">
@ -32,6 +47,7 @@
<label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
<input type="password" id="pwd" value="${password}" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<!-- 类似上述输入框容器，用于输入密码，同样有相关的样式类、属性设置，并且通过value属性可能绑定了从后台传来的默认密码值（如果有） -->
</div>
<!-- 确认密码 -->
<div class="layui-input-inline">
@ -39,6 +55,7 @@
<label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
<input type="password" id="rpwd" value="${repassword}" name="repassword" required lay-verify="required" placeholder="请确认密码" autocomplete="off" class="layui-input">
</div>
<!-- 用于再次输入密码进行确认的输入框容器，同样设置了必要的样式、属性以及可能绑定的默认值 -->
</div>
<div class="layui-input-inline" style="width: 56%;">
@ -46,47 +63,62 @@
<input type="password" id="verifycode" name="verifycode" required lay-verify="required" placeholder="验证码" autocomplete="off"
class="layui-input">
</div>
<!-- 用于输入验证码的输入框容器，设置了相应的样式、属性以及提示文本等 -->
<a href="javascript:refreshCode()">
<img style="padding-left: 14px; margin-top: -15px;" src="${pageContext.request.contextPath}/checkCodeServlet" title="刷新验证码" id="vcode" draggable="false">
</a>
<!-- 一个链接元素，绑定了JavaScript函数refreshCode()，用于点击时刷新验证码图片，图片的src属性指向一个Servlet来获取验证码图片资源 -->
<div class="layui-input-inline login-btn" style="width: 100%">
<button type="submit" lay-submit lay-filter="sub" class="layui-btn">注册</button>
</div>
<!-- 创建一个内联的按钮容器，里面包含一个注册按钮，按钮类型为submit用于提交表单，同时使用了layui的相关属性用于表单提交验证等 -->
<hr style="width: 100%" />
<!-- 水平分割线 -->
<p style="width: 100%">
<a href="login.jsp" class="fl">立即登录</a>
<div class="tooltip">
<span class="tooltiptext">${msg}</span>
</div>
<a href="forget.jsp" class="fr">忘记密码？</a></p>
<a href="forget.jsp" class="fr">忘记密码？</a>
</p>
<!-- 包含了两个链接，一个指向登录页面（login.jsp），另一个指向忘记密码页面（forget.jsp），中间有一个用于显示提示信息（可能是后台传来的相关消息）的元素 -->
<i class="layui-icon" id="ri" style="color: green;font-weight: bolder; position: relative; left: 200px; top: -265px;" hidden></i>
<i class="layui-icon" id="wr" style="color: red; font-weight: bolder; position: relative; left: 200px; top: -265px;" hidden>ဆ</i>
<i class="layui-icon" id="pri" style="color: green;font-weight: bolder; position: relative; left: 180px; top: -213px;" hidden></i>
<i class="layui-icon" id="pwr" style="color: red; font-weight: bolder; position: relative; left: 180px; top: -213px;" hidden>ဆ</i>
<i class="layui-icon" id="rpri" style="color: green;font-weight: bolder; position: relative; left: 160px; top: -160px;" hidden></i>
<i class="layui-icon" id="rpwr" style="color: red; font-weight: bolder; position: relative; left: 160px; top: -160px;" hidden>ဆ</i>
<!-- 定义了一组layui图标元素，初始时设置为隐藏（hidden属性），通过JavaScript代码根据不同的验证情况来显示或隐藏这些图标，用于直观地提示用户输入是否正确，
例如绿色图标表示输入正确，红色图标表示输入有误 -->
</form>
</div>
<span id="s_id"></span>
<!-- 一个空的span元素，可能后续会通过JavaScript动态添加内容或者用于其他DOM操作相关用途 -->
</div>
<footer style="position:absolute;bottom:0;width:100%;height:30px; text-align: center;">© 2018-2019.YOYLING.COM</footer>
<!-- 页面底部的版权声明元素，绝对定位在页面底部，宽度占满整个页面，高度为30px，文本居中显示 -->
<script src="layui.js"></script>
<!-- 引入layui框架的主脚本文件，用于实现页面交互逻辑以及使用layui框架提供的各种组件和功能 -->
<script type="text/javascript">
function refreshCode() {
var vcode = document.getElementById("vcode");
vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
}
// 定义refreshCode函数，用于刷新验证码图片的src属性，通过在URL后添加时间戳来避免浏览器缓存，确保每次获取到最新的验证码图片
</script>
<script type="text/javascript">
layui.use(['form','jquery','layer'], function () {
var form = layui.form;
var $ = layui.jquery;
var layer = layui.layer;
//添加表单失焦事件
//验证表单
// 使用layui的use方法加载form、jquery、layer这几个模块，并在回调函数中获取对应的实例，方便后续操作
// 添加表单失焦事件，验证表单
$('#user').blur(function() {
var studentid = $(this).val();
$.get("findStudentServlet",{studentid:studentid},function (data) {
@ -97,12 +129,13 @@
title: '错误',content: data.msg,icon: 2
});
$('#user').val("");
} else {
}
});
});
// 为学号输入框（id为user）绑定blur事件（即失去焦点事件），当输入框失去焦点时，发送一个GET请求到"findStudentServlet"，传递当前输入的学号作为参数，
// 根据返回的数据（假设是一个JSON格式数据，包含studentExsit等属性）来判断学号是否已存在，如果已存在则显示错误图标（wr），隐藏正确图标（ri），
// 弹出一个layui的弹出层提示错误信息，并清空输入框内容
// 为密码添加正则验证
$('#pwd').blur(function() {
@ -118,6 +151,9 @@
$('#pwr').attr('hidden','hidden');
}
});
// 为密码输入框（id为pwd）绑定blur事件，当失去焦点时，使用正则表达式验证输入的密码是否符合要求（这里要求是3-6位的字母数字下划线组成的字符），
// 如果不符合则显示错误图标（pwr），隐藏正确图标（pri），弹出提示信息告知用户输入合法密码，并清空输入框内容，符合要求则反之显示正确图标，隐藏错误图标
$('#user').blur(function() {
var reg = /^[0-9]{10}$/;
if(!($('#user').val().match(reg))){
@ -131,12 +167,12 @@
$('#wr').attr('hidden','hidden');
}
});
// 再次为学号输入框（id为user）绑定blur事件，使用另一个正则表达式验证学号是否是10位数字，如果不符合要求则显示错误图标（wr），隐藏正确图标（ri），
// 弹出提示信息告知用户输入10位数字学号，并清空输入框内容，符合要求则反之显示正确图标，隐藏错误图标
//验证两次密码是否一致
$('#rpwd').blur(function() {
if($('#pwd').val() != $('#rpwd').val() || $('#rpwd').val()=='' || $('#pwd').val()==''){
if($('#pwd').val()!= $('#rpwd').val() || $('#rpwd').val()=='' || $('#pwd').val()==''){
$('#rpwr').removeAttr('hidden');
$('#rpri').attr('hidden','hidden');
// layer.msg('两次输入密码不一致!');
@ -146,6 +182,8 @@
$('#rpwr').attr('hidden','hidden');
};
});
// 为确认密码输入框（id为rpwd）绑定blur事件，当失去焦点时，检查两次输入的密码是否一致以及是否为空，如果不一致或为空则显示错误图标（rpwr），隐藏正确图标（rpri），
// 并清空确认密码输入框内容，一致且不为空则显示正确图标，隐藏错误图标
});
</script>
</body>

12
web/upload2.jsp
Unescape View File

@ -1,16 +1,28 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- JSP页面指令，设置此页面的内容类型为“text/html”（即HTML格式），字符编码采用UTF-8，同时表明该页面是使用Java语言编写的 -->
<html>
<head>
<title>文件上传</title>
<!-- 设置页面的标题，在浏览器的标签栏上会显示该标题内容，这里标题设置为“文件上传”，直观地表明页面的主要功能 -->
</head>
<body>
<h1>文件上传</h1>
<!-- 使用一级标题标签（<h1>）展示页面的主要功能提示，告知用户当前页面是用于文件上传操作的 -->
<form action="message.jsp" method="post" enctype="multipart/form-data">
<!-- 定义一个HTML表单，用于收集用户输入并向服务器提交数据。
- action属性指定了表单提交后数据将被发送到的目标页面（这里是“message.jsp”，通常该页面会在后端处理接收到的文件上传相关数据）。
- method属性设置为“post”，表示使用POST请求方式提交表单数据，相较于GET方式，POST更适合用于提交大量数据或包含敏感信息的数据，比如文件内容。
- enctype属性设置为“multipart/form-data”，这是用于指定表单数据的编码类型，当表单中包含文件上传字段时，必须设置该属性，以便正确地将文件数据和其他表单数据一起发送到服务器端。 -->
选择一个文件:
<input type="file" name="uploadFile"/>
<!-- 创建一个文件选择输入框，类型为“file”，允许用户从本地计算机中选择要上传的文件。name属性值“uploadFile”用于在服务器端接收数据时标识该文件数据，以便进行后续处理。 -->
<br/><br/>
<input type="submit" value="上传"/>
<!-- 创建一个提交按钮，类型为“submit”，当用户点击该按钮时，会触发表单的提交操作，将表单内的数据（包括选择的文件数据）按照前面设置的action、method和enctype属性规则发送到服务器端。按钮上显示的文本为“上传”，直观地提示用户点击该按钮执行文件上传操作。 -->
</form>
</body>
</html>
Write Preview
Loading…
Cancel
Save