pscmholb5
/
library_manage_system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Labels Milestones
New Pull Request

注释_何家燕 #10

Closed
pifh2pw87 wants to merge 8 commits from branch_he into develop
Conversation 0 Commits 8 Files Changed 28
28 changed files with 1915 additions and 1810 deletions
Show Stats Download Patch File Download Diff File

113
WebContent/loginReader.html
Unescape View File

@ -1,72 +1,71 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>借阅者登录页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="./public/css/animate.css">
<link rel="stylesheet" href="./public/css/login.css" />
<style>
button:hover{
background-color:#ffd6e7;
}
</style>
<meta charset="UTF-8"> <!-- 设置文档字符编码为UTF-8 -->
<title>借阅者登录页面</title> <!-- 设置网页标题 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- 设置视口属性，使页面在移动设备上显示良好 -->
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="./public/css/animate.css"> <!-- 引入动画效果的CSS文件 -->
<link rel="stylesheet" href="./public/css/login.css" /> <!-- 引入自定义的登录页面样式表 -->
<style>
button:hover{
background-color:#ffd6e7; /* 鼠标悬停在按钮上时的背景颜色 */
}
</style>
</head>
<body>
<div class="container main">
<div id="login" class="contain animated fadeInDown">
<h1>借阅者登录</h1>
<form method="post">
<input type="text" name="user" class="form-control my_input" placeholder="请输入账号" required="required">
<input type="password" name="psw" class="form-control my_input" placeholder="请输入密码" required="required">
<input type="submit" class="form-control" value="登录" onclick="javascript:void(0);">
</form>
</div>
<div class="container main"> <!-- 主容器 -->
<div id="login" class="contain animated fadeInDown"> <!-- 登录表单容器，添加了动画效果 -->
<h1>借阅者登录</h1> <!-- 页面标题 -->
<form method="post"> <!-- 登录表单，使用POST方法提交数据 -->
<input type="text" name="user" class="form-control my_input" placeholder="请输入账号" required="required"> <!-- 用户名输入框 -->
<input type="password" name="psw" class="form-control my_input" placeholder="请输入密码" required="required"> <!-- 密码输入框 -->
<input type="submit" class="form-control" value="登录" onclick="javascript:void(0);"><!-- 提交按钮 -->
</form>
</div>
<div style="position:fixed; bottom:0; right:0;">
<a href="loginManager.html" target="_blank"><img src="public/image/manager.png" width="50px" height="50px"></a><br>
<a href="adminLogin.html" target="_blank"><img src="public/image/admin.png" width="50px" height="50px"></a>
</div>
<script src="./public/js/layer/layer.js"></script>
<script>
</div>
<div style="position:fixed; bottom:0; right:0;"> <!-- 固定位置的链接容器 -->
<a href="loginManager.html" target="_blank"><img width="50px" height="50px"></a><br> <!-- 跳转到管理员登录页面的链接 -->
<a href="adminLogin.html" target="_blank"><img width="50px" height="50px"></a> <!-- 跳转到管理员登录页面的链接 -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入jQuery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script> <!-- 引入Layer弹窗插件 -->
<script>
$(function(){
//登录
// 登录操作
$("input[type=submit]").click(function(){
$.ajax({
url: "./readerLogin",
type: "post",
data: $("form").serialize(),
dataType: "json",
success: function( data ){
if(data.code == 0){
url: "./readerLogin", // 请求的URL地址
type: "post", // 请求类型为POST
data: $("form").serialize(), // 序列化表单数据
dataType: "json", // 预期服务器返回的数据类型为JSON
success: function(data){ // 成功回调函数
if(data.code == 0){ // 如果返回的code为0，表示登录成功
layer.msg("登录成功", {
icon: 6,
time: 1000
icon: 6, // 图标类型为笑脸
time: 1000 // 显示时间为1秒
}, function(){
location.href = data.url;
})
}else{
location.href = data.url; // 跳转到指定URL
});
} else { // 如果返回的code不为0，表示登录失败
layer.open({
title: "登录失败",
content: data.msg,
icon: 5,
anim: 6
})
title: "登录失败", // 弹窗标题
content: data.msg, // 弹窗内容为返回的错误信息
icon: 5, // 图标类型为哭脸
anim: 6 // 动画效果
});
}
}
})
return false;
})
})
</script>
});
return false; // 阻止表单默认提交行为
});
});
</script>
</body>
</html>
</html>

618
WebContent/public/css/animate.css vendored
Unescape View File

@ -2898,597 +2898,611 @@
}
}
/* 定义一个名为zoomInDown的关键帧动画 */
@keyframes zoomInDown {
/* 动画开始时的状态 */
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
opacity: 0; /* 完全透明 */
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); /* 缩小并向上移动 */
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); /* 缩小并向上移动 */
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
}
/* 动画进行到60%时的状态 */
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
opacity: 1; /* 完全不透明 */
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); /* 放大并向下移动 */
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); /* 放大并向下移动 */
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
}
}
/* 应用zoomInDown动画的类 */
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
-webkit-animation-name: zoomInDown; /* 使用WebKit内核的浏览器 */
animation-name: zoomInDown; /* 使用标准内核的浏览器 */
}
/* 定义一个名为zoomInLeft的关键帧动画（适用于WebKit内核） */
@-webkit-keyframes zoomInLeft {
/* 动画开始时的状态 */
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
opacity: 0; /* 完全透明 */
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); /* 缩小并向左移动 */
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); /* 缩小并向左移动 */
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
}
/* 动画进行到60%时的状态 */
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
opacity: 1; /* 完全不透明 */
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); /* 放大并向右移动 */
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); /* 放大并向右移动 */
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
}
}
/* 定义一个名为zoomInLeft的关键帧动画（适用于标准内核） */
@keyframes zoomInLeft {
/* 动画开始时的状态 */
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
opacity: 0; /* 完全透明 */
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); /* 缩小并向左移动 */
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); /* 缩小并向左移动 */
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
}
/* 动画进行到60%时的状态 */
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
opacity: 1; /* 完全不透明 */
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); /* 放大并向右移动 */
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); /* 放大并向右移动 */
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
}
}
/* 应用zoomInLeft动画的类 */
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft;
-webkit-animation-name: zoomInLeft; /* 使用WebKit内核的浏览器 */
animation-name: zoomInLeft; /* 使用标准内核的浏览器 */
}
/* 定义一个名为zoomInRight的关键帧动画（适用于WebKit内核） */
@-webkit-keyframes zoomInRight {
/* 动画开始时的状态 */
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
opacity: 0; /* 完全透明 */
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); /* 缩小并向右移动 */
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); /* 缩小并向右移动 */
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
}
/* 动画进行到60%时的状态 */
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
opacity: 1; /* 完全不透明 */
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); /* 放大并向左移动 */
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); /* 放大并向左移动 */
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
}
}
/* 定义一个名为zoomInRight的关键帧动画 */
@keyframes zoomInRight {
/* 动画开始时的状态 */
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
opacity: 0; /* 完全透明 */
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); /* 缩小并向右移动 */
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); /* 缩小并向右移动 */
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
}
/* 动画进行到60%时的状态 */
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
opacity: 1; /* 完全不透明 */
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); /* 放大并向左移动 */
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); /* 放大并向左移动 */
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
}
}
/* 应用zoomInRight动画的类 */
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
-webkit-animation-name: zoomInRight; /* 指定动画名称 */
animation-name: zoomInRight; /* 指定动画名称 */
}
/* 定义一个名为zoomInUp的关键帧动画 */
@keyframes zoomInUp {
/* 动画开始时的状态 */
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
opacity: 0; /* 完全透明 */
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); /* 缩小并向下移动 */
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); /* 缩小并向下移动 */
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
}
/* 动画进行到60%时的状态 */
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
opacity: 1; /* 完全不透明 */
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); /* 放大并向上移动 */
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); /* 放大并向上移动 */
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
}
}
/* 应用zoomInUp动画的类 */
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
-webkit-animation-name: zoomInUp; /* 指定动画名称 */
animation-name: zoomInUp; /* 指定动画名称 */
}
/* 定义一个名为zoomOut的关键帧动画 */
@keyframes zoomOut {
/* 动画开始时的状态 */
from {
opacity: 1;
opacity: 1; /* 完全不透明 */
}
/* 动画进行到50%时的状态 */
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
opacity: 0; /* 完全透明 */
-webkit-transform: scale3d(0.3, 0.3, 0.3); /* 缩小 */
transform: scale3d(0.3, 0.3, 0.3); /* 缩小 */
}
/* 动画结束时的状态 */
to {
opacity: 0;
opacity: 0; /* 完全透明 */
}
}
/* 应用zoomOut动画的类 */
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
-webkit-animation-name: zoomOut; /* 指定动画名称 */
animation-name: zoomOut; /* 指定动画名称 */
}
/* 定义一个名为zoomOutDown的关键帧动画 */
@keyframes zoomOutDown {
/* 动画进行到40%时的状态 */
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
opacity: 1; /* 完全不透明 */
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); /* 放大并向上移动 */
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); /* 放大并向上移动 */
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
}
/* 动画结束时的状态 */
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
opacity: 0; /* 完全透明 */
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); /* 缩小并向下移动 */
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); /* 缩小并向下移动 */
-webkit-transform-origin: center bottom; /* 变换原点在底部中心 */
transform-origin: center bottom; /* 变换原点在底部中心 */
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
}
}
/* 应用zoomOutDown动画的类 */
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown;
-webkit-animation-name: zoomOutDown; /* 指定动画名称 */
animation-name: zoomOutDown; /* 指定动画名称 */
}
@-webkit-keyframes zoomOutLeft {
/* 定义一个名为zoomOutLeft的关键帧动画 */
@keyframes zoomOutLeft {
/* 动画进行到40%时的状态 */
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
opacity: 1; /* 完全不透明 */
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); /* 放大并向右移动 */
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); /* 放大并向右移动 */
}
/* 动画结束时的状态 */
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
opacity: 0; /* 完全透明 */
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); /* 缩小并向左移动 */
transform: scale(0.1) translate3d(-2000px, 0, 0); /* 缩小并向左移动 */
-webkit-transform-origin: left center; /* 变换原点在左侧中心 */
transform-origin: left center; /* 变换原点在左侧中心 */
}
}
/* 应用zoomOutLeft动画的类 */
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft; /* 指定动画名称 */
animation-name: zoomOutLeft; /* 指定动画名称 */
}
/* 定义一个名为zoomOutLeft的关键帧动画 */
@keyframes zoomOutLeft {
/* 在动画的40%时 */
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
opacity: 1; /* 保持元素完全不透明 */
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); /* 缩小并向右移动元素 */
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); /* 缩小并向右移动元素 */
}
/* 动画结束时 */
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
opacity: 0; /* 完全透明 */
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); /* 将元素缩放到非常小并向左移动到视野外 */
transform: scale(0.1) translate3d(-2000px, 0, 0); /* 将元素缩放到非常小并向左移动到视野外 */
-webkit-transform-origin: left center; /* 设置变换的原点为元素的左中心 */
transform-origin: left center; /* 设置变换的原点为元素的左中心 */
}
}
/* 应用zoomOutLeft动画的类 */
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft;
-webkit-animation-name: zoomOutLeft; /* 指定使用zoomOutLeft关键帧动画 */
animation-name: zoomOutLeft; /* 指定使用zoomOutLeft关键帧动画 */
}
/* 定义一个名为zoomOutRight的关键帧动画，用于兼容旧版WebKit浏览器 */
@-webkit-keyframes zoomOutRight {
/* 在动画的40%时 */
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
opacity: 1; /* 保持元素完全不透明 */
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); /* 缩小并向左移动元素 */
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); /* 缩小并向左移动元素 */
}
/* 动画结束时 */
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
opacity: 0; /* 完全透明 */
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0); /* 将元素缩放到非常小并向右移动到视野外 */
transform: scale(0.1) translate3d(2000px, 0, 0); /* 将元素缩放到非常小并向右移动到视野外 */
-webkit-transform-origin: right center; /* 设置变换的原点为元素的右中心 */
transform-origin: right center; /* 设置变换的原点为元素的右中心 */
}
}
/* 定义一个名为zoomOutRight的关键帧动画 */
@keyframes zoomOutRight {
/* 在动画的40%时 */
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
opacity: 1; /* 保持元素完全不透明 */
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); /* 缩小并向左移动元素 */
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); /* 缩小并向左移动元素 */
}
/* 动画结束时 */
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
opacity: 0; /* 完全透明 */
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0); /* 将元素缩放到非常小并向右移动到视野外 */
transform: scale(0.1) translate3d(2000px, 0, 0); /* 将元素缩放到非常小并向右移动到视野外 */
-webkit-transform-origin: right center; /* 设置变换的原点为元素的右中心 */
transform-origin: right center; /* 设置变换的原点为元素的右中心 */
}
}
/* 应用zoomOutRight动画的类 */
.zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight;
-webkit-animation-name: zoomOutRight; /* 指定使用zoomOutRight关键帧动画 */
animation-name: zoomOutRight; /* 指定使用zoomOutRight关键帧动画 */
}
/* 定义一个名为zoomOutUp的关键帧动画，用于兼容旧版WebKit浏览器 */
@-webkit-keyframes zoomOutUp {
/* 在动画的40%时 */
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
opacity: 1; /* 保持元素完全不透明 */
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); /* 缩小并向上移动元素 */
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); /* 缩小并向上移动元素 */
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 自定义缓动函数 */
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 自定义缓动函数 */
}
/* 动画结束时 */
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
opacity: 0; /* 完全透明 */
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); /* 将元素缩放到非常小并向下移动到视野外 */
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); /* 将元素缩放到非常小并向下移动到视野外 */
-webkit-transform-origin: center bottom; /* 设置变换的原点为元素的底部中心 */
transform-origin: center bottom; /* 设置变换的原点为元素的底部中心 */
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 自定义缓动函数 */
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 自定义缓动函数 */
}
}
/* 定义一个名为zoomOutUp的关键帧动画 */
@keyframes zoomOutUp {
/* 在动画的40%时 */
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
opacity: 1; /* 保持元素完全不透明 */
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); /* 缩小并向上移动元素 */
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); /* 缩小并向上移动元素 */
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 自定义缓动函数 */
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 自定义缓动函数 */
}
/* 动画结束时 */
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
opacity: 0; /* 完全透明 */
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); /* 将元素缩放到非常小并向下移动到视野外 */
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); /* 将元素缩放到非常小并向下移动到视野外 */
-webkit-transform-origin: center bottom; /* 设置变换的原点为元素的底部中心 */
transform-origin: center bottom; /* 设置变换的原点为元素的底部中心 */
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 自定义缓动函数 */
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 自定义缓动函数 */
}
}
/* 应用zoomOutUp动画的类 */
.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp;
-webkit-animation-name: zoomOutUp; /* 指定使用zoomOutUp关键帧动画 */
animation-name: zoomOutUp; /* 指定使用zoomOutUp关键帧动画 */
}
/* 定义一个名为slideInDown的关键帧动画，用于兼容旧版WebKit浏览器 */
@-webkit-keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
-webkit-transform: translate3d(0, -100%, 0); /* 从上方开始移动 */
transform: translate3d(0, -100%, 0); /* 从上方开始移动 */
visibility: visible; /* 确保元素可见 */
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 回到原始位置 */
transform: translate3d(0, 0, 0); /* 回到原始位置 */
}
}
/* 定义一个名为slideInDown的关键帧动画 */
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
-webkit-transform: translate3d(0, -100%, 0); /* 从上方开始移动 */
transform: translate3d(0, -100%, 0); /* 从上方开始移动 */
visibility: visible; /* 确保元素可见 */
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 回到原始位置 */
transform: translate3d(0, 0, 0); /* 回到原始位置 */
}
}
/* 应用slideInDown动画的类 */
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
-webkit-animation-name: slideInDown; /* 指定使用slideInDown关键帧动画 */
animation-name: slideInDown; /* 指定使用slideInDown关键帧动画 */
}
/* 定义从左侧滑入的动画 */
@-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
-webkit-transform: translate3d(-100%, 0, 0); /* 初始位置在屏幕左侧外 */
transform: translate3d(-100%, 0, 0); /* 初始位置在屏幕左侧外 */
visibility: visible; /* 元素可见 */
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 最终位置回到原位 */
transform: translate3d(0, 0, 0); /* 最终位置回到原位 */
}
}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
-webkit-transform: translate3d(-100%, 0, 0); /* 初始位置在屏幕左侧外 */
transform: translate3d(-100%, 0, 0); /* 初始位置在屏幕左侧外 */
visibility: visible; /* 元素可见 */
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 最终位置回到原位 */
transform: translate3d(0, 0, 0); /* 最终位置回到原位 */
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
-webkit-animation-name: slideInLeft; /* 使用slideInLeft动画 */
animation-name: slideInLeft; /* 使用slideInLeft动画 */
}
/* 定义从右侧滑入的动画 */
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
-webkit-transform: translate3d(100%, 0, 0); /* 初始位置在屏幕右侧外 */
transform: translate3d(100%, 0, 0); /* 初始位置在屏幕右侧外 */
visibility: visible; /* 元素可见 */
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 最终位置回到原位 */
transform: translate3d(0, 0, 0); /* 最终位置回到原位 */
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
-webkit-transform: translate3d(100%, 0, 0); /* 初始位置在屏幕右侧外 */
transform: translate3d(100%, 0, 0); /* 初始位置在屏幕右侧外 */
visibility: visible; /* 元素可见 */
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 最终位置回到原位 */
transform: translate3d(0, 0, 0); /* 最终位置回到原位 */
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
-webkit-animation-name: slideInRight; /* 使用slideInRight动画 */
animation-name: slideInRight; /* 使用slideInRight动画 */
}
/* 定义从上方滑入的动画 */
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
-webkit-transform: translate3d(0, 100%, 0); /* 初始位置在屏幕上方外 */
transform: translate3d(0, 100%, 0); /* 初始位置在屏幕上方外 */
visibility: visible; /* 元素可见 */
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 最终位置回到原位 */
transform: translate3d(0, 0, 0); /* 最终位置回到原位 */
}
}
@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
-webkit-transform: translate3d(0, 100%, 0); /* 初始位置在屏幕上方外 */
transform: translate3d(0, 100%, 0); /* 初始位置在屏幕上方外 */
visibility: visible; /* 元素可见 */
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 最终位置回到原位 */
transform: translate3d(0, 0, 0); /* 最终位置回到原位 */
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-name: slideInUp; /* 使用slideInUp动画 */
animation-name: slideInUp; /* 使用slideInUp动画 */
}
/* 定义向下滑动隐藏的动画 */
@-webkit-keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */
transform: translate3d(0, 0, 0); /* 初始位置在原位 */
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: hidden; /* 元素不可见 */
-webkit-transform: translate3d(0, 100%, 0); /* 最终位置在屏幕下方外 */
transform: translate3d(0, 100%, 0); /* 最终位置在屏幕下方外 */
}
}
@keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */
transform: translate3d(0, 0, 0); /* 初始位置在原位 */
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: hidden; /* 元素不可见 */
-webkit-transform: translate3d(0, 100%, 0); /* 最终位置在屏幕下方外 */
transform: translate3d(0, 100%, 0); /* 最终位置在屏幕下方外 */
}
}
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown;
-webkit-animation-name: slideOutDown; /* 使用slideOutDown动画 */
animation-name: slideOutDown; /* 使用slideOutDown动画 */
}
/* 定义向左滑动隐藏的动画 */
@-webkit-keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */
transform: translate3d(0, 0, 0); /* 初始位置在原位 */
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: hidden; /* 元素不可见 */
-webkit-transform: translate3d(-100%, 0, 0); /* 最终位置在屏幕左侧外 */
transform: translate3d(-100%, 0, 0); /* 最终位置在屏幕左侧外 */
}
}
@keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */
transform: translate3d(0, 0, 0); /* 初始位置在原位 */
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: hidden; /* 元素不可见 */
-webkit-transform: translate3d(-100%, 0, 0); /* 最终位置在屏幕左侧外 */
transform: translate3d(-100%, 0, 0); /* 最终位置在屏幕左侧外 */
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
-webkit-animation-name: slideOutLeft; /* 使用slideOutLeft动画 */
animation-name: slideOutLeft; /* 使用slideOutLeft动画 */
}
/* 定义向右滑动隐藏的动画 */
@-webkit-keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */
transform: translate3d(0, 0, 0); /* 初始位置在原位 */
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: hidden; /* 元素不可见 */
-webkit-transform: translate3d(100%, 0, 0); /* 最终位置在屏幕右侧外 */
transform: translate3d(100%, 0, 0); /* 最终位置在屏幕右侧外 */
}
}
@keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */
transform: translate3d(0, 0, 0); /* 初始位置在原位 */
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: hidden; /* 元素不可见 */
-webkit-transform: translate3d(100%, 0, 0); /* 最终位置在屏幕右侧外 */
transform: translate3d(100%, 0, 0); /* 最终位置在屏幕右侧外 */
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
-webkit-animation-name: slideOutRight; /* 使用slideOutRight动画 */
animation-name: slideOutRight; /* 使用slideOutRight动画 */
}
/* 定义向上滑动隐藏的动画 */
@-webkit-keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */
transform: translate3d(0, 0, 0); /* 初始位置在原位 */
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: hidden; /* 元素不可见 */
-webkit-transform: translate3d(0, -100%, 0); /* 最终位置在屏幕上方外 */
transform: translate3d(0, -100%, 0); /* 最终位置在屏幕上方外 */
}
}
@keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */
transform: translate3d(0, 0, 0); /* 初始位置在原位 */
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: hidden; /* 元素不可见 */
-webkit-transform: translate3d(0, -100%, 0); /* 最终位置在屏幕上方外 */
transform: translate3d(0, -100%, 0); /* 最终位置在屏幕上方外 */
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
-webkit-animation-name: slideOutUp; /* 使用slideOutUp动画 */
animation-name: slideOutUp; /* 使用slideOutUp动画 */
}

214
WebContent/public/css/component.css
Unescape View File

@ -1,156 +1,168 @@
/* General styles for the modal */
/*
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the
perspective effects (not including the modals and the overlay).
*/
/* 设置全局样式，适用于所有模态框 */
.md-perspective,
.md-perspective body {
height: 100%;
overflow: hidden;
height: 100%; /* 设置高度为100% */
overflow: hidden; /* 隐藏溢出内容 */
}
/* 容器样式，用于包裹页面内容以实现透视效果 */
.container {
background: steelblue;
min-height: 100%;
width:100%;
background: steelblue; /* 设置背景颜色为钢蓝色 */
min-height: 100%; /* 最小高度为100% */
width:100%; /* 宽度为100% */
}
/* 模态框基本样式 */
.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
position: fixed; /* 固定定位 */
top: 50%; /* 距离顶部50% */
left: 50%; /* 距离左侧50% */
width: 50%; /* 宽度为50% */
max-width: 630px; /* 最大宽度为630px */
min-width: 320px; /* 最小宽度为320px */
height: auto; /* 高度自动 */
z-index: 2000; /* z轴索引为2000 */
visibility: hidden; /* 初始不可见 */
-webkit-backface-visibility: hidden; /* Webkit浏览器隐藏背面 */
-moz-backface-visibility: hidden; /* Firefox浏览器隐藏背面 */
backface-visibility: hidden; /* 标准方式隐藏背面 */
-webkit-transform: translateX(-50%) translateY(-50%); /* Webkit浏览器居中 */
-moz-transform: translateX(-50%) translateY(-50%); /* Firefox浏览器居中 */
-ms-transform: translateX(-50%) translateY(-50%); /* IE浏览器居中 */
transform: translateX(-50%) translateY(-50%); /* 标准方式居中 */
}
/* 显示模态框时的样式 */
.md-show {
visibility: visible;
visibility: visible; /* 设置为可见 */
}
/* 遮罩层样式 */
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(232, 232, 232, 0.5);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
position: fixed; /* 固定定位 */
width: 100%; /* 宽度为100% */
height: 100%; /* 高度为100% */
visibility: hidden; /* 初始不可见 */
top: 0; /* 距离顶部0 */
left: 0; /* 距离左侧0 */
z-index: 1000; /* z轴索引为1000 */
opacity: 0; /* 初始透明度为0 */
background: rgba(232, 232, 232, 0.5); /* 背景色和透明度 */
-webkit-transition: all 0.3s; /* Webkit浏览器过渡效果 */
-moz-transition: all 0.3s; /* Firefox浏览器过渡效果 */
transition: all 0.3s; /* 标准方式过渡效果 */
}
/* 当模态框显示时，遮罩层的样式 */
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
opacity: 1; /* 透明度为1 */
visibility: visible; /* 设置为可见 */
}
/* Content styles */
/* 内容区域样式 */
.md-content {
color: black;
background: lightblue;
position: relative;
border-radius: 3px;
margin: 0 auto;
color: black; /* 文字颜色为黑色 */
background: lightblue; /* 背景色为浅蓝色 */
position: relative; /* 相对定位 */
border-radius: 3px; /* 圆角半径为3px */
margin: 0 auto; /* 水平居中 */
}
/* 标题样式 */
.md-content h3 {
margin: 0;
padding: 0.4em;
text-align: center;
font-size: 2.4em;
font-weight: 300;
opacity: 0.8;
background: rgba(0,0,0,0.1);
border-radius: 3px 3px 0 0;
margin: 0; /* 外边距为0 */
padding: 0.4em; /* 内边距为0.4em */
text-align: center; /* 文本居中 */
font-size: 2.4em; /* 字体大小为2.4em */
font-weight: 300; /* 字体粗细为300 */
opacity: 0.8; /* 透明度为0.8 */
background: rgba(0,0,0,0.1); /* 背景色和透明度 */
border-radius: 3px 3px 0 0; /* 圆角半径，上左和上右为3px，下左和下右为0 */
}
/* 内容区域的子元素样式 */
.md-content > div {
padding: 15px 40px 30px;
margin: 0;
font-weight: 300;
font-size: 1.15em;
padding: 15px 40px 30px; /* 内边距 */
margin: 0; /* 外边距为0 */
font-weight: 300; /* 字体粗细为300 */
font-size: 1.15em; /* 字体大小为1.15em */
}
/* 内容区域内的段落样式 */
.md-content > div p {
margin: 0;
padding: 10px 0;
margin: 0; /* 外边距为0 */
padding: 10px 0; /* 内边距为10px 0 */
}
/* 内容区域内的无序列表样式 */
.md-content > div ul {
margin: 0;
padding: 0 0 30px 20px;
margin: 0; /* 外边距为0 */
padding: 0 0 30px 20px; /* 内边距为0 0 30px 20px */
}
/* 列表项样式 */
.md-content > div ul li {
padding: 5px 0;
padding: 5px 0; /* 内边距为5px 0 */
}
/* 按钮样式 */
.md-content button {
display: block;
margin: 0 auto;
font-size: 0.8em;
display: block; /* 块级显示 */
margin: 0 auto; /* 水平居中 */
font-size: 0.8em; /* 字体大小为0.8em */
}
/* Individual modal styles with animations/transitions */
/* Effect 13: 3D slit */
/* 特效13：3D切片效果 */
.md-effect-13.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
-webkit-perspective: 1300px; /* Webkit浏览器透视效果 */
-moz-perspective: 1300px; /* Firefox浏览器透视效果 */
perspective: 1300px; /* 标准方式透视效果 */
}
/* 特效13的内容样式 */
.md-effect-13 .md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-3000px) rotateY(90deg);
-moz-transform: translateZ(-3000px) rotateY(90deg);
-ms-transform: translateZ(-3000px) rotateY(90deg);
transform: translateZ(-3000px) rotateY(90deg);
opacity: 0;
-webkit-transform-style: preserve-3d; /* Webkit浏览器保留3D变换 */
-moz-transform-style: preserve-3d; /* Firefox浏览器保留3D变换 */
transform-style: preserve-3d; /* 标准方式保留3D变换 */
-webkit-transform: translateZ(-3000px) rotateY(90deg); /* Webkit浏览器初始位置和旋转角度 */
-moz-transform: translateZ(-3000px) rotateY(90deg); /* Firefox浏览器初始位置和旋转角度 */
-ms-transform: translateZ(-3000px) rotateY(90deg); /* IE浏览器初始位置和旋转角度 */
transform: translateZ(-3000px) rotateY(90deg); /* 标准方式初始位置和旋转角度 */
opacity: 0; /* 初始透明度为0 */
}
/* 显示特效13时的动画效果 */
.md-show.md-effect-13 .md-content {
-webkit-animation: slit .7s forwards ease-out;
-moz-animation: slit .7s forwards ease-out;
animation: slit .7s forwards ease-out;
-webkit-animation: slit .7s forwards ease-out; /* Webkit浏览器动画效果 */
-moz-animation: slit .7s forwards ease-out; /* Firefox浏览器动画效果 */
animation: slit .7s forwards ease-out; /* 标准方式动画效果 */
}
/* Webkit浏览器的动画关键帧 */
@-webkit-keyframes slit {
50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;} /* 中间状态 */
100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; } /* 结束状态 */
}
/* Firefox浏览器的动画关键帧 */
@-moz-keyframes slit {
50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;} /* 中间状态 */
100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; } /* 结束状态 */
}
@keyframes slit {
50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
/* IE浏览器的动画关键帧 */
@-ms-keyframes slit {
50% { -ms-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -ms-animation-timing-function: ease-out;} /* 中间状态 */
100% { -ms-transform: translateZ(0) rotateY(0deg); opacity: 1; } /* 结束状态 */
}
/* 标准方式的动画关键帧 */
@keyframes slit {
50% { transform: translateZ(-250px) rotateY(89deg); opacity:1; animation-timing-function: ease-in;} /* 中间状态 */
100% { transform: translateZ(0) rotateY(0deg); opacity: 1; } /* 结束状态 */
}
/* 如果屏幕宽度小于或等于32em，则调整字体大小 */
@media screen and (max-width: 32em) {
body { font-size: 75%; }
}
body { font-size: 75%; } /* 字体大小缩小到75% */
}

56
WebContent/public/css/default.css
Unescape View File

@ -1,45 +1,50 @@
/* General Demo Style */
/* 导入Lato字体 */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
/* 定义codropsicons字体 */
@font-face {
font-family: 'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
font-weight: normal;
font-style: normal;
}
/* 设置所有元素的盒模型为border-box */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* 设置body和html的默认样式 */
body, html { font-size: 100%; padding: 0; margin: 0; }
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
/* Clearfix hack，用于清除浮动 */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
/* 设置body的字体、颜色和背景色 */
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #fff;
background: lightblue;
}
/* Header Style */
/* 主内容和头部容器的样式 */
.main,
.container > header {
margin: 0 auto;
padding: 2em;
}
/* 头部容器的文本对齐和背景色 */
.container > header {
text-align: center;
background: lightblue;
padding: 3em;
}
/* 头部标题的字体大小和行高 */
.container > header h1 {
font-size: 2.625em;
line-height: 1.3;
@ -47,17 +52,19 @@ body {
font-weight: 300;
}
/* 头部副标题的样式 */
.container > header span {
display: block;
opacity: 0.7;
padding: 0 0 0.6em 0.1em;
}
/* Main Content */
/* 主内容的宽度限制 */
.main {
max-width: 69em;
}
/* 列的样式 */
.column {
float: left;
width: 50%;
@ -66,10 +73,12 @@ body {
position: relative;
}
/* 第二列的阴影效果 */
.column:nth-child(2) {
box-shadow: -1px 0 0 rgba(0,0,0,0.1);
}
/* 列中段落的样式 */
.column p {
font-weight: 300;
font-size: 2em;
@ -79,11 +88,7 @@ body {
line-height: 1.5;
}
/* To Navigation Style */
/* 按钮的样式 */
button {
border: none;
padding: 0.6em 1.2em;
@ -99,32 +104,33 @@ button {
border-radius: 2px;
}
/* 按钮悬停时的样式 */
button:hover {
background: cornflowerblue;
}
/* 媒体查询：屏幕宽度小于等于46.0625em时 */
@media screen and (max-width: 46.0625em) {
.column {
width: 100%;
min-width: auto;
min-height: auto;
padding: 1em;
width: 100%; /* 列宽变为100% */
min-width: auto; /* 最小宽度自动 */
min-height: auto; /* 最小高度自动 */
padding: 1em; /* 内边距增加 */
}
.column p {
text-align: left;
font-size: 1.5em;
text-align: left; /* 段落左对齐 */
font-size: 1.5em; /* 字体大小减小 */
}
.column:nth-child(2) {
box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
box-shadow: 0 -1px 0 rgba(0,0,0,0.1); /* 阴影方向改变 */
}
}
/* 媒体查询：屏幕宽度小于等于25em时 */
@media screen and (max-width: 25em) {
.codrops-icon span {
display: none;
display: none; /* 隐藏图标描述文字 */
}
}
}

99
WebContent/public/css/login.css
Unescape View File

@ -1,48 +1,53 @@
body{
background-color: #f5f5f5;
}
.main{
margin-top: 150px;
font-family: system-ui,cursive,sans-serif;
}
#login{
max-width: 500px;
margin: 0 auto;
padding:25px 45px 45px 45px;
box-shadow: 8px 8px #b3e5fc;
border-radius: 15px;
background-image: -webkit-linear-gradient(top left, #ffd6e7, #cdfcf9);
background-image: -o-linear-gradient(top left, #ffd6e7, #cdfcf9);
background-image: linear-gradient(to bottom right, #ffd6e7, #cdfcf9);
font-size: 16px;
}
#login h1{
color: #4dd0e1;
text-align: center;
font-size: 30px;
}
#login .my_input{
margin-top: 25px;
border: none;
background-color: rgba(0,0,0,0);
box-shadow: none;
border-bottom: 2px solid white;
border-radius: 0px;
font-size: 20px;
transition: all 0.3s;
}
#login .my_input:hover{
border-bottom: 2px solid #ff9c6e;
}
#login input[type=submit]{
margin-top: 45px;
background-color: #fce4ec;
font-size: 18px;
transition: all 0.5s;
border-radius: 15px;
}
#login input[type=submit]:hover{
background-color: #ffd6e7;
body {
background-color: #f5f5f5; /* 设置页面背景颜色为浅灰色 */
}
.main {
margin-top: 150px; /* 设置主内容区域的上边距为150像素 */
font-family: system-ui, cursive, sans-serif; /* 设置字体样式，优先使用系统默认UI字体，其次是手写体和无衬线体 */
}
#login {
max-width: 500px; /* 设置登录框的最大宽度为500像素 */
margin: 0 auto; /* 水平居中对齐 */
padding: 25px 45px 45px 45px; /* 设置内边距：上、右、下、左均为45像素 */
box-shadow: 8px 8px #b3e5fc; /* 设置阴影效果，偏移量为8像素，颜色为#b3e5fc */
border-radius: 15px; /* 设置边框圆角半径为15像素 */
background-image: -webkit-linear-gradient(to top left, #ffd6e7, #cdfcf9); /* 设置背景渐变色，从左上角到右下角，颜色从#ffd6e7渐变到#cdfcf9 */
background-image: -o-linear-gradient(to top left, #ffd6e7, #cdfcf9); /* 兼容旧版Opera浏览器的渐变色设置 */
background-image: linear-gradient(to bottom right, #ffd6e7, #cdfcf9); /* 标准渐变色设置，从左下角到右上角，颜色从#ffd6e7渐变到#cdfcf9 */
font-size: 16px; /* 设置字体大小为16像素 */
}
#login h1 {
color: #4dd0e1; /* 设置标题文字颜色为#4dd0e1 */
text-align: center; /* 文本居中对齐 */
font-size: 30px; /* 设置标题字体大小为30像素 */
}
}
#login .my_input {
margin-top: 25px; /* 设置输入框的上边距为25像素 */
border: none; /* 移除边框 */
background-color: rgba(0, 0, 0, 0); /* 设置背景颜色为透明 */
box-shadow: none; /* 移除阴影效果 */
border-bottom: 2px solid white; /* 设置底部边框为2像素宽的白色实线 */
border-radius: 0px; /* 设置边框圆角半径为0像素 */
font-size: 20px; /* 设置字体大小为20像素 */
transition: all 0.3s; /* 设置所有属性的过渡时间为0.3秒 */
}
#login .my_input:hover {
border-bottom: 2px solid #ff9c6e; /* 当鼠标悬停时，底部边框变为2像素宽的橙色实线 */
}
#login input[type=submit] {
margin-top: 45px; /* 设置提交按钮的上边距为45像素 */
background-color: #fce4ec; /* 设置按钮背景颜色为#fce4ec */
font-size: 18px; /* 设置按钮字体大小为18像素 */
transition: all 0.5s; /* 设置所有属性的过渡时间为0.5秒 */
border-radius: 15px; /* 设置按钮边框圆角半径为15像素 */
}
#login input[type=submit]:hover {
background-color: #ffd6e7; /* 当鼠标悬停时，按钮背景颜色变为#ffd6e7 */
}

214
WebContent/public/css/message.css
Unescape View File

@ -1,133 +1,141 @@
body{
background: white;
color: #DDD;
font-family: 'Helvetica', 'Lucida Grande', 'Arial', sans-serif;
body {
background: white; /* 设置背景颜色为白色 */
color: #DDD; /* 设置文本颜色为浅灰色 */
font-family: 'Helvetica', 'Lucida Grande', 'Arial', sans-serif; /* 设置字体 */
}
.border{
height: 99%;
width: 30%;
.border {
height: 99%; /* 设置高度为父容器的99% */
width: 30%; /* 设置宽度为父容器的30% */
}
.rain{
height: 400px;
width: 35%;
.rain {
height: 400px; /* 设置固定高度为400像素 */
width: 35%; /* 设置宽度为父容器的35% */
}
/* Layout with mask */
.rain{
padding: 10px 12px 12px 10px;
-moz-box-shadow: 10px 10px 10px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset;
-webkit-box-shadow: 8px 8px 8px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset;
box-shadow: 8px 8px 8px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset;
margin: 100px auto;
/* 使用遮罩布局 */
.rain {
padding: 10px 12px 12px 10px; /* 设置内边距 */
-moz-box-shadow: 10px 10px 10px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset; /* Firefox阴影效果 */
-webkit-box-shadow: 8px 8px 8px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset; /* Webkit阴影效果 */
box-shadow: 8px 8px 8px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset; /* 标准阴影效果 */
margin: 100px auto; /* 设置外边距，使元素居中 */
}
/* Artifical "border" to clear border to bypass mask */
.border{
padding: 1px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* 人工“边框”以清除遮罩 */
.border {
padding: 1px; /* 设置内边距 */
-moz-border-radius: 5px; /* Firefox圆角效果 */
-webkit-border-radius: 5px; /* Webkit圆角效果 */
border-radius: 5px; /* 标准圆角效果 */
}
.border,
.rain,
.border.start,
.rain.start{
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
background-position: 0 0, 0 0, 0 0, 0 0;
/* Blue-ish Green Fallback for Mozilla */
.rain.start {
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x; /* 设置背景重复模式 */
background-position: 0 0, 0 0, 0 0, 0 0; /* 设置背景位置 */
/* Firefox下的蓝色渐变背景 */
background-image: -moz-linear-gradient(left, #09BA5E 0%, #00C7CE 15%, #3472CF 26%, #00C7CE 48%, #0CCF91 91%, #09BA5E 100%);
/* Add "Highlight" Texture to the Animation */
/* 添加动画纹理 */
background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25)));
/* Starting Color */
/* 起始颜色 */
background-color: #39f;
/* Just do something for IE-suck */
/* IE滤镜效果 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00BA1B', endColorstr='#00BA1B',GradientType=1 );
}
/* Non-keyframe fallback animation */
/* 非关键帧动画回退 */
.border.end,
.rain.end{
-moz-transition-property: background-position;
-moz-transition-duration: 30s;
-moz-transition-timing-function: linear;
-webkit-transition-property: background-position;
-webkit-transition-duration: 30s;
-webkit-transition-timing-function: linear;
-o-transition-property: background-position;
-o-transition-duration: 30s;
-o-transition-timing-function: linear;
transition-property: background-position;
transition-duration: 30s;
transition-timing-function: linear;
background-position: -5400px 0, -4600px 0, -3800px 0, -3000px 0;
.rain.end {
-moz-transition-property: background-position; /* Firefox过渡属性 */
-moz-transition-duration: 30s; /* Firefox过渡持续时间 */
-moz-transition-timing-function: linear; /* Firefox过渡时间函数 */
-webkit-transition-property: background-position; /* Webkit过渡属性 */
-webkit-transition-duration: 30s; /* Webkit过渡持续时间 */
-webkit-transition-timing-function: linear; /* Webkit过渡时间函数 */
-o-transition-property: background-position; /* Opera过渡属性 */
-o-transition-duration: 30s; /* Opera过渡持续时间 */
-o-transition-timing-function: linear; /* Opera过渡时间函数 */
transition-property: background-position; /* 标准过渡属性 */
transition-duration: 30s; /* 标准过渡持续时间 */
transition-timing-function: linear; /* 标准过渡时间函数 */
background-position: -5400px 0, -4800px 0, -4200px 0, -3600px 0; /* 设置背景位置 */
}
/* Keyfram-licious animation */
/* 关键帧动画 */
@-webkit-keyframes colors {
0% {background-color: pink;}
15% {background-color: hotpink;}
30% {background-color: rosybrown;}
45% {background-color: steelblue;}
60% {background-color: black;}
75% {background-color: #c9c0d3;}
90% {background-color: darkgreen;}
100% {background-color: orange;}
0% {background: pink;} /* 开始时的颜色 */
15% {background: hotpink;} /* 15%时的颜色 */
30% {background: rosybrown;} /* 30%时的颜色 */
45% {background: steelblue;} /* 45%时的颜色 */
60% {background: black;} /* 60%时的颜色 */
75% {background: #c9c0d3;} /* 75%时的颜色 */
90% {background: darkgreen;} /* 90%时的颜色 */
100% {background: orange;} /* 结束时的颜色 */
}
.border,.rain{
-webkit-animation-direction: normal;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colors;
-webkit-animation-timing-function: ease;
.border,
.rain {
-webkit-animation-direction: normal; /* Webkit动画方向 */
-webkit-animation-duration: 20s; /* Webkit动画持续时间 */
-webkit-animation-iteration-count: infinite; /* Webkit动画迭代次数 */
-webkit-animation-timing-function: ease; /* Webkit动画时间函数 */
-webkit-animation-name: colors; /* Webkit动画名称 */
}
/* In-Active State Style */
.border.unfocus{
background: #333 !important;
-moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
-webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
box-shadow: 0px 0px 15px rgba(255,255,255,.2);
-webkit-animation-name: none;
/* 无焦点状态样式 */
.border.unfocus {
background: #333 !important; /* 强制背景颜色 */
-moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2) inset; /* Firefox阴影效果 */
-webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2) inset; /* Webkit阴影效果 */
box-shadow: 0px 0px 15px rgba(255,255,255,.2) inset; /* 标准阴影效果 */
-webkit-animation-name: none; /* Webkit无动画 */
}
.rain.unfocus{
background: #000 !important;
-webkit-animation-name: none;
.rain.unfocus {
background: #000 !important; /* 强制背景颜色 */
-webkit-animation-name: none; /* Webkit无动画 */
}
/* Regular Form Styles */
form{
background: darkred;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 100%;
width: 335%;
background: -moz-radial-gradient(50% 46% 90deg,circle closest-corner, white, lightblue);
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(lightcyan), to(lightblue));
/* 表单样式 */
form {
background: darkred; /* 设置背景颜色为深红色 */
-moz-border-radius: 5px; /* Firefox圆角效果 */
-webkit-border-radius: 5px; /* Webkit圆角效果 */
border-radius: 5px; /* 标准圆角效果 */
height: 100%; /* 设置高度为父容器的100% */
width: 335%; /* 设置宽度为父容器的335% */
background: -moz-radial-gradient(center 46% 90deg, closest-corner, white, lightblue); /* Firefox径向渐变背景 */
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(lightcyan), to(lightblue));/* Webkit径向渐变背景 */
}
form label{
display: block;
padding: 10px 10px 5px 15px;
font-size: 20px;
color: hotpink;
form label {
display: block; /* 块级显示 */
padding: 10px 15px 10px 15px; /* 设置内边距 */
font-size: 20px; /* 设置字体大小 */
color: hotpink; /* 设置字体颜色 */
}
form textarea{
display: block;
margin: 5px 10px 10px 15px;
width: 85%;
background: #f0f8ff;
-moz-box-shadow: 0px 0px 4px grey inset;
-webkit-box-shadow: 0px 0px 4px grey inset;
box-shadow: 0px 0px 4px grey inset;
outline: 1px solid black;
border: 1px solid grey;
padding: 5px;
color: black;
font-size: 16px;
form input {
display: block; /* 块级显示 */
margin: 5px 10px 10px 15px; /* 设置外边距 */
width: 85%; /* 设置宽度为父容器的85% */
background: #f0f8ff; /* 设置背景颜色 */
-moz-box-shadow: 0px 0px 4px grey inset; /* Firefox阴影效果 */
-webkit-box-shadow: 0px 0px 4px grey inset; /* Webkit阴影效果 */
box-shadow: 0px 0px 4px grey inset; /* 标准阴影效果 */
outline: 1px solid black; /* 设置轮廓线 */
border: 1px solid grey; /* 设置边框 */
padding: 5px; /* 设置内边距 */
color: black; /* 设置字体颜色 */
font-size: 16px; /* 设置字体大小 */
}
form textarea:focus{
outline: 2px solid white;
color: #c0c0c0;
background-color: white;
form input:focus {
outline: 2px solid white; /* 设置聚焦时的轮廓线 */
color: #c0c0c0; /* 设置聚焦时的字体颜色 */
background-color: white; /* 设置聚焦时的背景颜色 */
}

153
WebContent/reader/01main.jsp
Unescape View File

@ -1,91 +1,94 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<style>
.showCarousel .carousel-inner > .item > img {
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- 引入Bootstrap CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- 引入jQuery（Bootstrap的JavaScript插件依赖于jQuery） -->
<script src="../js/jquery.min.js"></script>
<!-- 引入Bootstrap JavaScript -->
<script src="../js/bootstrap.min.js"></script>
display: block;
width:100%;
height:620px;
}
.showCarousel{
margin-top:2%;
}
font{
font-size:40px;
color:black;
font-family:YouYuan;
font-weight:900;
}
.carousel-caption{
margin-bottom:10%;
}
</style>
<style>
/* 轮播图图片样式 */
.showCarousel .carousel-inner > .item > img {
display: block;
width:100%;
height:620px;
}
/* 轮播图顶部间距 */
.showCarousel{
margin-top:2%;
}
/* 字体样式 */
font{
font-size:40px;
color:black;
font-family:YouYuan;
font-weight:900;
}
/* 轮播图文字描述底部间距 */
.carousel-caption{
margin-bottom:10%;
}
</style>
</head>
<body>
<%
if(session.getAttribute("reader")!=null && session.getAttribute("reader_first")!=null &&session.getAttribute("reader_first").equals("1")){
session.setAttribute("reader_first", "2");
//session.setAttribute("reader", session.getAttribute("reader"));
// 检查会话属性 'reader' 和 'reader_first' 是否不为空且 'reader_first' 等于 "1"
if(session.getAttribute("reader") != null && session.getAttribute("reader_first") != null && session.getAttribute("reader_first").equals("1")){
// 将 'reader_first' 设置为 "2"，表示用户已经访问过
session.setAttribute("reader_first", "2");
// 可选地，可以在会话中保留 reader 属性
// session.setAttribute("reader", session.getAttribute("reader"));
}
%>
<script>window.parent.location.href = "./04readerFrame.jsp";</script>
<%
}
%>
<!-- 轮播组件 -->
<div id="carousel-example-generic" class="carousel slide showCarousel" data-ride="carousel" data-interval="2000" style="width:96%;margin-left:2%;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- 指示器 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../public/image/1.jpg" alt="...">
<div class="carousel-caption">
<font style="color:white;">唯有知识永不负你!</font>
</div>
</div>
<div class="item">
<img src="../public/image/2.jpg" alt="...">
<div class="carousel-caption">
<font style="color:white;">学海无涯，书韵悠扬</font>
</div>
</div>
<div class="item">
<img src="../public/image/3.jpg" alt="...">
<div class="carousel-caption">
<font style="color:white;">图一份神闲气静，书几笔悦目赏心</font>
</div>
<!-- 轮播内容 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="path/to/image1.jpg" alt="..."> <!-- 在这里添加你的图片路径 -->
<div class="carousel-caption">
<font style="color:white;">唯有知识永不负你!</font>
</div>
</div>
<div class="item">
<img src="path/to/image2.jpg" alt="..."> <!-- 在这里添加你的图片路径 -->
<div class="carousel-caption">
<font style="color:white;">学海无涯，书韵悠扬</font>
</div>
</div>
<div class="item">
<img src="path/to/image3.jpg" alt="..."> <!-- 在这里添加你的图片路径 -->
<div class="carousel-caption">
<font style="color:white;">图一份神闲气静，书几笔悦目赏心</font>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!-- 控制按钮 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
</html>

101
WebContent/reader/02readerNav.jsp
Unescape View File

@ -1,61 +1,64 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<style>
<!-- 引入Bootstrap的CSS文件 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
</style>
<style>
</style>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">欢迎登陆图书管理系统</a>
</div>
<!-- 导航栏 -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- 折叠按钮，用于在小屏幕设备上显示菜单 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 网站标题 -->
<a class="navbar-brand" href="#">欢迎登陆图书管理系统</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- 左侧导航链接 -->
<ul class="nav navbar-nav">
<li><p style="margin-top:25%;color:grey;">借阅者页面<span class="sr-only">(current)</span></p></li>
</ul>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><p style="margin-top:25%;color:grey;">借阅者页面<span class="sr-only">(current)</span></p></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:;">
<%if(session.getAttribute("reader")==null){
<!-- 右侧导航链接 -->
<ul class="nav navbar-nav navbar-right">
<li><a href=";">
<!-- 如果session中没有reader属性，则不显示任何内容；否则显示reader的值 -->
<%if(session.getAttribute("reader")==null){
// 空操作
} else{%>
<%=session.getAttribute("reader") %>
<%} %>
</a></li>
<%if(session.getAttribute("reader") !=null) {%>
<li><a href="./exit" target="_parent">退出</a></li>
<%}else{%>
<li><a href="04readerFrame.jsp" target="_parent" onClick="">登录</a></li>
<%}
%>
</ul>
</div>
<%=session.getAttribute("reader") %>
<%} %>
</a></li>
<!-- 如果session中有reader属性，则显示退出链接；否则显示登录链接 -->
<%if(session.getAttribute("reader") !=null) {%>
<li><a href="./exit" target="_parent">退出</a></li>
<%}else{%>
<li><a href="04readerFrame.jsp" target="_parent" onClick="">登录</a></li>
<%}
%>
</ul>
</div>
</nav>
</div>
</nav>
</body>
</html>
</html>

102
WebContent/reader/03readerNavLeft.jsp
Unescape View File

@ -1,54 +1,68 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<style>
.sidebar li a:hover{
background:#337ab7;
color:white;
}
.faq-tabbable li a:focus{
background:skyblue;
color:white;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- 引入Bootstrap样式表 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<!-- 这里没有实际引入jQuery，但通常需要引入 -->
<style>
/* 自定义侧边栏菜单项的悬停效果 */
.sidebar li a:hover{
background:#337ab7; /* 背景颜色设置为蓝色 */
color:white; /* 文字颜色设置为白色 */
}
/* 自定义侧边栏菜单项获得焦点时的效果 */
.faq-tabbable li a:focus{
background:skyblue; /* 背景颜色设置为天蓝色 */
color:white; /* 文字颜色设置为白色 */
}
</style>
</head>
<body>
<div style="text-align:center;width:100%;height:100%;font-size：20px;">
<ul class="nav nav-pills nav-stacked nav-inverse sidebar faq-tabbable">
<div style="text-align:center;width:100%;height:100%;font-size：20px;">
<!-- 创建一个居中的div容器，宽度和高度均为100%，字体大小为20px -->
<ul class="nav nav-pills nav-stacked nav-inverse sidebar faq-tabbable">
<!-- 创建一个无序列表，用于显示侧边栏菜单项 -->
<% if(session.getAttribute("reader")!=null){%>
<li role="presentation"><a href="01main.jsp" target="view_frame"><span class="glyphicon glyphicon-picture" aria-hidden="true">&nbsp;首页</span></a></li>
<li role="presentation"><a href="05book.jsp" target="view_frame"><span class="glyphicon glyphicon-search" aria-hidden="true">&nbsp;图书查询</span></a></li>
<li role="presentation"><a href="12rules.jsp" target="view_frame"><span class="glyphicon glyphicon-bell" aria-hidden="true">&nbsp;读者规则</span></a></li>
<li role="presentation"><a href="07announcement.jsp" target="view_frame"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true">&nbsp;查看公告</span></a></li>
<li role="presentation"><a href="index.jsp" target="view_frame"><span class="glyphicon glyphicon-user" aria-hidden="true">&nbsp;个人信息</span></a></li>
<li role="presentation"><a href="06borrow.jsp" target="view_frame"><span class="glyphicon glyphicon-book" aria-hidden="true">&nbsp;借阅信息</span></a></li>
<li role="presentation"><a href="08illegalInfo.jsp" target="view_frame"><span class="glyphicon glyphicon-remove" aria-hidden="true">&nbsp;违章信息</span></a></li>
<li role="presentation"><a href="13message.jsp" target="view_frame"><span class="glyphicon glyphicon-pencil" aria-hidden="true">&nbsp;读者留言</span></a></li>
<%
}else{
%>
<li role="presentation"><a href="01main.jsp" target="view_frame"><span class="glyphicon glyphicon-picture" aria-hidden="true">&nbsp;首页</span></a></li>
<li role="presentation"><a href="05book.jsp" target="view_frame"><span class="glyphicon glyphicon-search" aria-hidden="true">&nbsp;图书查询</span></a></li>
<li role="presentation"><a href="12rules.jsp" target="view_frame"><span class="glyphicon glyphicon-bell" aria-hidden="true">&nbsp;读者规则</span></a></li>
<li role="presentation"><a href="07announcement.jsp" target="view_frame"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true">&nbsp;查看公告</span></a></li>
<li role="presentation"><a href="15checkMessage.jsp" target="view_frame"><span class="glyphicon glyphicon-envelope" aria-hidden="true">&nbsp;查看留言</span></a></li>
<%
}
%>
</ul>
</div>
<!-- 如果 session 中存在 reader 属性，则显示以下菜单项 -->
<li role="presentation"><a href="01main.jsp" target="view_frame"><span class="glyphicon glyphicon-picture" aria-hidden="true">&nbsp;首页</span></a></li>
<!-- 菜单项：首页 -->
<li role="presentation"><a href="05book.jsp" target="view_frame"><span class="glyphicon glyphicon-search" aria-hidden="true">&nbsp;图书查询</span></a></li>
<!-- 菜单项：图书查询 -->
<li role="presentation"><a href="12rules.jsp" target="view_frame"><span class="glyphicon glyphicon-bell" aria-hidden="true">&nbsp;读者规则</span></a></li>
<!-- 菜单项：读者规则 -->
<li role="presentation"><a href="07announcement.jsp" target="view_frame"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true">&nbsp;查看公告</span></a></li>
<!-- 菜单项：查看公告 -->
<li role="presentation"><a href="index.jsp" target="view_frame"><span class="glyphicon glyphicon-user" aria-hidden="true">&nbsp;个人信息</span></a></li>
<!-- 菜单项：个人信息 -->
<li role="presentation"><a href="06borrow.jsp" target="view_frame"><span class="glyphicon glyphicon-book" aria-hidden="true">&nbsp;借阅信息</span></a></li>
<!-- 菜单项：借阅信息 -->
<li role="presentation"><a href="08illegalInfo.jsp" target="view_frame"><span class="glyphicon glyphicon-remove" aria-hidden="true">&nbsp;违章信息</span></a></li>
<!-- 菜单项：违章信息 -->
<li role="presentation"><a href="13message.jsp" target="view_frame"><span class="glyphicon glyphicon-pencil" aria-hidden="true">&nbsp;读者留言</span></a></li>
<!-- 菜单项：读者留言 -->
<% } else { %>
<!-- 如果 session 中不存在 reader 属性，则显示以下菜单项 -->
<li role="presentation"><a href="01main.jsp" target="view_frame"><span class="glyphicon glyphicon-picture" aria-hidden="true">&nbsp;首页</span></a></li>
<!-- 菜单项：首页 -->
<li role="presentation"><a href="05book.jsp" target="view_frame"><span class="glyphicon glyphicon-search" aria-hidden="true">&nbsp;图书查询</span></a></li>
<!-- 菜单项：图书查询 -->
<li role="presentation"><a href="12rules.jsp" target="view_frame"><span class="glyphicon glyphicon-bell" aria-hidden="true">&nbsp;读者规则</span></a></li>
<!-- 菜单项：读者规则 -->
<li role="presentation"><a href="07announcement.jsp" target="view_frame"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true">&nbsp;查看公告</span></a></li>
<!-- 菜单项：查看公告 -->
<li role="presentation"><a href="15checkMessage.jsp" target="view_frame"><span class="glyphicon glyphicon-envelope" aria-hidden="true">&nbsp;查看留言</span></a></li>
<!-- 菜单项：查看留言 -->
<% } %>
</ul>
</div>
</body>
</html>
</html>

53
WebContent/reader/04readerFrame.jsp
Unescape View File

@ -3,33 +3,50 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>借阅者页面</title>
<meta charset="utf-8">
<!-- 设置页面字符编码为UTF-8 -->
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 确保页面在IE浏览器中以最新的渲染模式显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 使页面在移动设备上具有响应式设计 -->
<title>借阅者页面</title>
<!-- 设置页面标题为“借阅者页面” -->
<!-- 引入Bootstrap样式表 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<!-- 这里没有实际引入jQuery库，需要补充 -->
</head>
<frameset rows="7%,*" frameborder="no" border="0">
<frame src="02readerNav.jsp" scrolling="no">
<!-- 使用frameset布局，将页面分为上下两个部分 -->
<frameset rows="7%,*" frameborder="no" border="0">
<!-- 第一部分占整个页面高度的7%，不显示滚动条 -->
<frame scrolling="no">
<!-- 这里可以放置导航栏或其他固定内容 -->
</frame>
<frameset cols="14%,*" frameborder="no" border="0">
<frame src="03readerNavLeft.jsp">
<!-- 第二部分占整个页面剩余的高度，分为左右两个部分 -->
<frameset cols="14%,*" frameborder="no" border="0">
<!-- 左侧部分占整个页面宽度的14%，右侧部分占剩余宽度 -->
<frame >
<!-- 左侧框架，可以放置菜单或导航 -->
</frame>
<%
if(session.getAttribute("reader") == null){
%>
<frame src="06borrow.jsp" name="view_frame">
<!-- 如果session中没有reader属性，则显示一个空的view_frame框架 -->
<frame name="view_frame">
<%
}else{
%>
<!-- 如果session中有reader属性，则显示一个空的view_frame框架 -->
<frame name="view_frame">
<%
}else{
%>
<frame src="01main.jsp" name="view_frame">
<%
}
%>
</frameset>

244
WebContent/reader/05book.jsp
Unescape View File

@ -1,145 +1,133 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-table.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap-table.js"></script>
<script src="../bootstrap-table-zh-CN.js"></script>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title> <!-- 页面标题 -->
<meta charset="utf-8"> <!-- 设置文档的字符编码为UTF-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 设置视口宽度和初始缩放比例 -->
<title>图书管理系统</title> <!-- 页面标题 -->
<!-- Bootstrap CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet"> <!-- 引入Bootstrap样式表 -->
<link href="../css/bootstrap-table.css" rel="stylesheet"> <!-- 引入Bootstrap表格样式表 -->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> <!-- 引入LayUI样式表 -->
<style>
.layui-table,.layui-table-view{
margin: 0 0px;
margin: 0 0px; /* 设置表格的外边距 */
}
.layui-form-select dl dd.layui-this { background-color: #01AAED; }
.layui-form-select dl dd.layui-this { background-color: #01AAED; } /* 设置下拉选择框选中项的背景颜色 */
</style>
</head>
<body>
<jsp:useBean id="msg" scope="session" class="javabean.JDBCBean"></jsp:useBean>
<script src="../public/layui/layui.js" charset="utf-8"></script>
<!-- 表单 -->
<table class="layui-hide" id="cardTable" lay-filter="formFilter"></table>
<!-- 头部工具栏 -->
<script type="text/html" id="headBar">
条件搜索：
<div class="layui-inline">
<select id="condition" name="condition" lay-verify="required">
<option value=""></option>
<option value="id">图书编号</option>
<option value="name">图书名称</option>
<option value="author">作者</option>
<option value="position">位置</option>
<option value="description">描述</option>
</select>
</div>
<div class="layui-inline">
<input class="layui-input" id="conditionValue" name="conditionValue" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn layui-bg-blue" name="condition" data-type="reload" lay-event="search">搜索</button>
</script>
<!-- 使用 JSP Bean -->
<jsp:useBean id="msg" scope="session" class="javabean.JDBCBean"></jsp:useBean> <!-- 声明一个JSP Bean，ID为msg，作用域为session，类为javabean.JDBCBean -->
<!-- 表单 -->
<table class="layui-hide" id="cardTable" lay-filter="formFilter"></table> <!-- 定义一个隐藏的表格，ID为cardTable，用于LayUI的过滤功能 -->
<script>
layui.use(['table','jquery'], function(){
$ = layui.jquery;
var table = layui.table;
// 进行渲染
var tableIns = table.render({
elem: '#cardTable'
,url:'./book'
,toolbar: '#headBar'
,cols: [[
{field:'id', width:120, title: '图书编号', sort: true}
,{field:'name', width:130, title: '图书名称', sort: true}
,{field:'author', width:100, title: '作者', sort: true}
,{field:'library_id', title: '图书馆', width: 100, sort: true}
,{field:'sort_id', width:100, title: '分类', sort: true,}
,{field:'position', width:100, title: '位置', sort: true}
,{field:'status', width:100, title: '状态', sort: true,templet: function (item) {
var btns="";
if(item.status=='0'){
btns += '<span class=""style="color:orange">已借出</span>';
}else if(item.status=='1'){
btns += '<span class=""style="color:green">未借出</span>';
}
return btns;
}
}
,{field:'description', minWidth:80, title: '描述'}
<!-- 头部工具栏 -->
条件搜索：
<div class="layui-inline">
<select id="condition" name="condition" lay-verify="required"> <!-- 创建一个下拉选择框，ID为condition，名称为condition，验证规则为必填 -->
<option value=""></option> <!-- 空选项 -->
<option value="id">图书编号</option> <!-- 图书编号选项 -->
<option value="name">图书名称</option> <!-- 图书名称选项 -->
<option value="author">作者</option> <!-- 作者选项 -->
<option value="position">位置</option> <!-- 位置选项 -->
<option value="description">描述</option> <!-- 描述选项 -->
</select>
</div>
<div class="layui-inline">
<input class="layui-input" id="conditionValue" name="conditionValue" id="demoReload" autocomplete="off"> <!-- 创建一个输入框，类为layui-input，ID为conditionValue，名称为conditionValue，自动完成关闭 -->
</div>
<button class="layui-btn layui-bg-blue" name="condition" data-type="reload" lay-event="search">搜索</button> <!-- 创建一个按钮，类为layui-btn和layui-bg-blue，名称为condition，数据类型为reload，事件为search，显示文本为搜索 -->
]]
,page: true
,page: {theme: '#2F88FF'},
});
// 头部工具栏事件
table.on('toolbar(formFilter)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
// 条件查找图书证
case 'search':
var conditionValue = $('#conditionValue');
var condition = $('#condition');
// 进行搜索，重新渲染
tableIns.reload({
where: { //设定异步数据接口的额外参数，任意设
"condition": condition.val(),
"conditionValue": conditionValue.val()
}
,page: {
curr: 1 //重新从第 1 页开始
}
});
break;
case 'add':
var addCardLayer = layer.open({
type: 2,
title: '添加借书证',
area: ['800px', '500px'],
maxmin: true,
shadeClose: true,
content: 'cardadd.jsp',
});
//layer.full(addCardLayer);
};
<!-- 引入 layui 和 jQuery -->
<script src="../public/layui/layui.js"></script> <!-- 引入LayUI脚本文件 -->
<script src="../public/jquery/jquery.min.js"></script> <!-- 引入jQuery脚本文件 -->
<script>
layui.use(['table','jquery'], function(){ // 使用LayUI的table和jQuery模块
$ = layui.jquery; // 将LayUI的jQuery赋值给$变量
var table = layui.table; // 获取LayUI的table对象
// 进行渲染
var tableIns = table.render({
elem: '#cardTable', // 绑定元素，即表格的ID
url: './book', // 数据接口地址
toolbar: '#headBar', // 头部工具栏的ID
cols: [[ // 表头
{field:'id', width:120, title: '图书编号', sort: true}, // 图书编号列，宽度120，标题为图书编号，可排序
{field:'name', width:130, title: '图书名称', sort: true}, // 图书名称列，宽度130，标题为图书名称，可排序
{field:'author', width:100, title: '作者', sort: true}, // 作者列，宽度100，标题为作者，可排序
{field:'library_id', title: '图书馆', width: 100, sort: true}, // 图书馆列，标题为图书馆，宽度100，可排序
{field:'sort_id', width:100, title: '分类', sort: true}, // 分类列，宽度100，标题为分类，可排序
{field:'position', width:100, title: '位置', sort: true}, // 位置列，宽度100，标题为位置，可排序
{field:'status', width:100, title: '状态', sort: true, templet: function (item) { // 状态列，宽度100，标题为状态，可排序，自定义模板函数
var btns = ""; // 初始化按钮字符串
if(item.status == '0'){ // 如果状态为0
btns += '<span class="" style="color:orange">已借出</span>'; // 添加已借出的红色文字
} else if(item.status == '1'){ // 如果状态为1
btns += '<span class="" style="color:green">未借出</span>'; // 添加未借出的绿色文字
}
return btns; // 返回按钮字符串
}},
{field:'description', minWidth:80, title: '描述'}, // 描述列，最小宽度80，标题为描述
]],
page: true // 开启分页
});
// 头部工具栏事件
table.on('toolbar(formFilter)', function(obj){ // 监听头部工具栏事件
var checkStatus = table.checkStatus(obj.config.id); // 获取选中行的状态
switch(obj.event){ // 根据事件类型执行不同的操作
case 'condition': // 如果事件类型是condition
var condition = $('#condition'); // 获取条件选择框
var conditionValue = $('#conditionValue'); // 获取条件值输入框
// 条件查找图书证
var value = conditionValue.val(); // 获取输入框的值
conditionValue.val(''); // 清空输入框的值
tableIns.reload({ // 重新加载表格数据
where: { // 查询参数
condition: condition.val(), // 条件字段
value: value // 条件值
},
page: { // 分页参数
curr: 1 // 从第一页开始重新加载
}
});
break;
case 'add': // 如果事件类型是add
var addCardLayer = layer.open({ // 打开新增图书证的弹出层
type: 2, // 弹出层类型为iframe
title: '添加借书证', // 弹出层标题
area: ['800px', '500px'], // 弹出层大小
maxmin: true, // 允许最大化和最小化
shadeClose: true, // 点击遮罩层是否允许关闭
content: 'addBook.jsp', // 弹出层内容页面路径
});
break;
}
});
// 侧边工具栏事件
table.on(('tool(formFilter)'), function(obj){
var data = obj.data;
var layEvent = obj.event;
var tr = obj.tr;
switch(obj.event){
case 'edit':
layer.open({
type: 2,
title: '更改信息',
area: ['800px', '600px'],
maxmin: true,
shadeClose: true,
content: '',
})
break;
}
})
// 侧边工具栏事件
table.on(('tool(formFilter)'), function(obj){ // 监听侧边工具栏事件
var data = obj.data; // 获取当前行的数据
var layEvent = obj.event; // 获取事件类型
var tr = obj.tr; // 获取当前行的DOM对象
switch(layEvent){ // 根据事件类型执行不同的操作
case 'edit': // 如果事件类型是edit
layer.open({ // 打开更改信息的弹出层
type: 2, // 弹出层类型为iframe
title: '更改信息', // 弹出层标题
area: ['800px', '600px'], // 弹出层大小
maxmin: true, // 允许最大化和最小化
shadeClose: true, // 点击遮罩层是否允许关闭
content: '', // 这里需要填写实际的内容页面路径
});
break;
}
})
});
</script>
</script>
</body>
</html>

216
WebContent/reader/06borrow.jsp
Unescape View File

@ -1,130 +1,116 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- 定义文档类型为HTML 4.01 Transitional -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-table.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap-table.js"></script>
<script src="../bootstrap-table-zh-CN.js"></script>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 设置页面内容类型和字符编码 -->
<title>Insert title here</title> <!-- 页面标题 -->
<link href="../css/bootstrap.min.css" rel="stylesheet"> <!-- 引入Bootstrap CSS文件 -->
<link href="../css/bootstrap-table.css" rel="stylesheet"> <!-- 引入Bootstrap Table CSS文件 -->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> <!-- 引入Layui CSS文件 -->
<style>
.layui-table,.layui-table-view{
margin: 0 0px;
margin: 0 0px; /* 设置表格的外边距为0 */
}
</style>
</head>
<body>
<script src="../public/layui/layui.js" charset="utf-8"></script>
<!-- 表单 -->
<% if(session.getAttribute("reader")==null){%>
<script>
location.href = "../loginReader.html";
</script>
<%
}
%>
<table class="layui-hide" id="cardTable" lay-filter="formFilter"></table>
<!-- 头部工具栏 -->
<script type="text/html" id="headBar">
条件搜索：
<div class="layui-inline">
<select id="condition" name="condition" lay-verify="required">
<option value=""></option>
<option value="book_id">图书编号</option>
<option value="borrow_date">借阅日期</option>
<option value="end_date">截止日期</option>
<option value="return_date">归还日期</option>
<!-- 表单 -->
<% if(session.getAttribute("reader")==null){%> <!-- 检查用户是否登录 -->
location.href = "../loginReader.html"; <!-- 如果未登录，重定向到登录页面 -->
<% } %>
<table class="layui-hide" id="cardTable" lay-filter="formFilter"></table> <!-- 隐藏的表格元素，用于后续渲染 -->
</select>
</div>
<div class="layui-inline">
<input class="layui-input" id="conditionValue" name="conditionValue" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" name="condition" data-type="reload" lay-event="search">搜索</button>
</script>
<!-- 头部工具栏 -->
条件搜索：
<div class="layui-inline">
<select id="condition" name="condition" lay-verify="required"> <!-- 下拉选择框，用于选择查询条件 -->
<option value=""></option>
<option value="book_id">图书编号</option>
<option value="borrow_date">借阅日期</option>
<option value="end_date">截止日期</option>
<option value="return_date">归还日期</option>
</select>
</div>
<div class="layui-inline">
<input class="layui-input" id="conditionValue" name="conditionValue" id="demoReload" autocomplete="off"> <!-- 输入框，用于输入查询条件值 -->
</div>
<button class="layui-btn" name="condition" data-type="reload" lay-event="search">搜索</button> <!-- 搜索按钮 -->
<script src="../js/jquery-3.2.1.min.js"></script> <!-- 引入jQuery库 -->
<script src="../js/bootstrap.min.js"></script> <!-- 引入Bootstrap JavaScript文件 -->
<script src="../js/bootstrap-table.min.js"></script> <!-- 引入Bootstrap Table JavaScript文件 -->
<script src="../public/layui/layui.js"></script> <!-- 引入Layui JavaScript文件 -->
<script>
layui.use(['table','jquery'], function(){ <!-- 使用Layui的table和jQuery模块 -->
$ = layui.jquery; <!-- 获取jQuery对象 -->
var table = layui.table; <!-- 获取table对象 -->
// 进行渲染
var tableIns = table.render({
elem: '#cardTable' <!-- 绑定表格元素 -->
,url:'./borrow' <!-- 数据接口地址 -->
,toolbar: '#headBar' <!-- 绑定工具栏元素 -->
,cols: [[
{field:'card_id', width:180, title: '借阅证号', sort: true}, <!-- 定义表格列 -->
{field:'book_id', width:130, title: '图书编号', sort: true},
{field:'borrow_date', width:250, title: '借阅日期', sort: true},
{field:'end_date', title: '截止日期', width: 250, sort: true},
{field:'return_date', width:250, title: '归还时间', sort: true}
]]
,page: true <!-- 启用分页 -->
});
<script>
layui.use(['table','jquery'], function(){
$ = layui.jquery;
var table = layui.table;
// 进行渲染
var tableIns = table.render({
elem: '#cardTable'
,url:'./borrow'
,toolbar: '#headBar'
,cols: [[
{field:'card_id', width:180, title: '借阅证号', sort: true}
,{field:'book_id', width:130, title: '图书编号', sort: true}
,{field:'borrow_date', width:250, title: '借阅日期', sort: true}
,{field:'end_date', title: '截止日期', width: 250, sort: true}
,{field:'return_date', width:250, title: '归还时间', sort: true}
]]
,page: true
});
// 头部工具栏事件
table.on('toolbar(formFilter)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
// 条件查找借阅记录
case 'search':
var conditionValue = $('#conditionValue');
var condition = $('#condition');
// 进行搜索，重新渲染
tableIns.reload({
where: { //设定异步数据接口的额外参数，任意设
"condition": condition.val(),
"conditionValue": conditionValue.val()
}
,page: {
curr: 1 //重新从第 1 页开始
}
});
break;
case 'add':
var addCardLayer = layer.open({
type: 2,
title: '添加借书证',
area: ['800px', '500px'],
maxmin: true,
shadeClose: true,
content: 'cardadd.jsp',
});
//layer.full(addCardLayer);
};
// 头部工具栏事件
table.on('toolbar(formFilter)', function(obj){
var checkStatus = table.checkStatus(obj.config.id); <!-- 获取选中状态 -->
switch(obj.event){
case 'search': <!-- 处理搜索事件 -->
var conditionValue = $('#conditionValue'); <!-- 获取条件值输入框 -->
var condition = $('#condition'); <!-- 获取条件选择框 -->
// 进行搜索，重新渲染
tableIns.reload({
where: { //设定异步数据接口的额外参数，任意设
"condition": condition.val(),
"conditionValue": conditionValue.val()
}
,page: {
curr: 1 //重新从第 1 页开始
}
});
break;
case 'add': <!-- 处理添加事件 -->
var addCardLayer = layer.open({
type: 2,
title: '添加借书证',
area: ['800px', '500px'],
maxmin: true,
shadeClose: true,
content: 'cardadd.jsp',
});
//layer.full(addCardLayer);
};
});
// 侧边工具栏事件
table.on(('tool(formFilter)'), function(obj){
var data = obj.data;
var layEvent = obj.event;
var tr = obj.tr;
switch(obj.event){
case 'edit':
layer.open({
type: 2,
title: '更改信息',
area: ['800px', '600px'],
maxmin: true,
shadeClose: true,
content: '',
})
break;
}
})
// 侧边工具栏事件
table.on(('tool(formFilter)'), function(obj){
var data = obj.data; <!-- 获取当前行的数据 -->
var layEvent = obj.event; <!-- 获取触发的事件类型 -->
var tr = obj.tr; <!-- 获取当前行的DOM对象 -->
switch(obj.event){
case 'edit': <!-- 处理编辑事件 -->
layer.open({
type: 2,
title: '更改信息',
area: ['800px', '600px'],
maxmin: true,
shadeClose: true,
content: '',
})
break;
}
})
});
</script>
</script>
</body>
</html>
</html>

75
WebContent/reader/07announcement.jsp
Unescape View File

@ -1,57 +1,58 @@
<%@ page import="java.sql.*" %>
<%@ page import="java.sql.*" %> <!-- 导入Java SQL包，用于数据库操作 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
pageEncoding="UTF-8"%> <!-- 设置页面语言为Java，内容类型为HTML，字符编码为UTF-8 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- 定义文档类型为HTML 4.01 Transitional -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<style>
body{
font-family:YouYuan;
}
</style>
<meta charset="utf-8"> <!-- 设置字符编码为UTF-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 设置IE浏览器的兼容模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 设置视口宽度和初始缩放比例 -->
<title></title> <!-- 页面标题 -->
<!-- Bootstrap CSS文件 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<style>
body{
font-family:YouYuan; /* 设置页面字体为YouYuan */
}
</style>
</head>
<body>
<div style="background: steelblue;height: 30px;;color:#fff;border-radius: 8px;width: 90%;margin:auto auto;">
<marquee style="font-size:20px;font-family:YouYuan;" behavior="scroll" direction="left" hspace="0.1%" vspace="0.1%" loop="-1" scrollamount="20" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
❤图书馆公告栏，记得查收公告呀！❤
</marquee> 
<div style="background: steelblue;height: 30px;color:#fff;border-radius: 8px;width: 90%;margin:auto auto;">
<marquee style="font-size:20px;font-family:YouYuan;" behavior="scroll" direction="left" hspace="0.1%" vspace="0.1%" loop="-1" scrollamount="20" scrolldelay="100" "this.start()" "this.stop()">
&#10084;图书馆公告栏，记得查收公告呀！&#10084; <!-- 滚动公告栏 -->
</marquee>
</div>
<div class="a" align="center">
<h2>近期公告</h2>
<jsp:useBean id="check" scope="session" class="javabean.JDBCBean"></jsp:useBean>
<%
<h2>近期公告</h2> <!-- 显示“近期公告”标题 -->
<jsp:useBean id="check" scope="session" class="javabean.JDBCBean"></jsp:useBean> <!-- 使用JSP标签声明一个JavaBean对象，ID为check，作用域为session，类为javabean.JDBCBean -->
<!-- SQL查询语句，选择announcement表中的所有记录 -->
<!-- 执行SQL查询，并将结果存储在ResultSet对象rs中 -->
<%
String sql="select*from announcement";
ResultSet rs = check.executeQuery(sql);
while (rs.next()) {
%>
<div class="panel panel-info" style="margin-left:5%;width:80%;">
<div class="panel-heading" align="center">
<span><%=rs.getString("TITLE") %></span>
<span style="margin-right:1%;"><%=rs.getString("PUBLISH_DATE") %></span>
%>
<div class="panel panel-info" style="margin-left:5%;width:80%;"> <!-- 创建一个Bootstrap面板，样式为信息面板，左边距为5%，宽度为80% -->
<div class="panel-heading" align="center"> <!-- 面板头部，居中对齐 -->
<span><%=rs.getString("TITLE") %></span> <!-- 显示公告标题 -->
<span style="margin-right:1%;"><%=rs.getString("PUBLISH_DATE") %></span> <!-- 显示公告发布日期 -->
</div>
<div class="panel-body" >
<p style="word-wrap:break-word;"><%=rs.getString("DETAIL") %></p>
<div class="panel-body"> <!-- 面板主体部分 -->
<p style="word-wrap:break-word;"><%=rs.getString("DETAIL") %></p> <!-- 显示公告详情，自动换行 -->
</div>
</div>
<%
<%
}
%>
%>
</div>
</body>
</html>
</html>

240
WebContent/reader/08illegalInfo.jsp
Unescape View File

@ -4,136 +4,136 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<title>Insert title here</title> <!-- 设置网页标题 -->
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-table.css" rel="stylesheet">
<link href="../css/bootstrap.min.css" rel="stylesheet"> <!-- 引入Bootstrap CSS文件 -->
<link href="../css/bootstrap-table.css" rel="stylesheet"> <!-- 引入Bootstrap Table CSS文件 -->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap-table.js"></script>
<script src="../bootstrap-table-zh-CN.js"></script>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> <!-- 引入Layui CSS文件 -->
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> <!-- 重复引入Layui CSS文件，可能是冗余代码 -->
<style>
.layui-table,.layui-table-view{
margin: 0 0px;
margin: 0 0px; /* 设置表格的外边距为0 */
}
.layui-form-select dl dd.layui-this { background-color: #FF5722; }
.layui-form-select dl dd.layui-this { background-color: #FF5722; } /* 设置下拉选择框选中项的背景颜色 */
</style>
</head>
<body>
<%
if(session.getAttribute("reader") == null){
%>
<%
if(session.getAttribute("reader") == null){ // 如果会话中的reader属性为空
%>
location.href="../loginReader.html"; // 重定向到登录页面
<%
}
%>
<!-- 表单 -->
<table class="layui-hide" id="cardTable" lay-filter="formFilter"></table> <!-- 定义一个隐藏的表格元素，用于后续渲染 -->
<!-- 头部工具栏 -->
条件搜索：
<div class="layui-inline">
<select id="condition" name="condition" lay-verify="required"> <!-- 创建一个下拉选择框，用于选择搜索条件 -->
<option value=""></option>
<option value="book_id">图书编号</option>
<option value="borrow_date">借阅日期</option>
<option value="end_date">截止日期</option>
<option value="return_date">归还日期</option>
<option value="illegal">违章信息</option>
<option value="manager_id">处理人</option>
</select>
</div>
<div class="layui-inline">
<input class="layui-input" id="conditionValue" name="conditionValue" id="demoReload" autocomplete="off"> <!-- 创建一个输入框，用于输入搜索条件值 -->
</div>
<button class="layui-btn layui-btn-danger" name="condition" data-type="reload" lay-event="search">搜索</button> <!-- 创建一个按钮，用于触发搜索操作 -->
<script>
location.href="../loginReader.html";
</script>
<%
}
%>
<script src="../public/layui/layui.js" charset="utf-8"></script>
<!-- 表单 -->
<table class="layui-hide" id="cardTable" lay-filter="formFilter"></table>
<!-- 头部工具栏 -->
<script type="text/html" id="headBar">
条件搜索：
<div class="layui-inline">
<select id="condition" name="condition" lay-verify="required">
<option value=""></option>
<option value="book_id">图书编号</option>
<option value="borrow_date">借阅日期</option>
<option value="end_date">截止日期</option>
<option value="return_date">归还日期</option>
<option value="illegal">违章信息</option>
<option value="manager_id">处理人</option>
</select>
</div>
<div class="layui-inline">
<input class="layui-input" id="conditionValue" name="conditionValue" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn layui-btn-danger" name="condition" data-type="reload" lay-event="search">搜索</button>
</script>
<script>
layui.use(['table','jquery'], function(){
$ = layui.jquery;
var table = layui.table;
// 进行渲染
var tableIns = table.render({
elem: '#cardTable'
,url:'./illegal'
,toolbar: '#headBar'
,cols: [[
{field:'card_id', width:180, title: '借阅证号', sort: true}
,{field:'book_id', minwidth:80, title: '图书编号', sort: true}
,{field:'borrow_date', width:250, title: '借阅日期', sort: true}
,{field:'end_date', title: '截止日期', width: 250, sort: true}
,{field:'return_date', width:250, title: '归还时间', sort: true}
,{field:'illegal', width:180, title: '违章信息', sort: true,style:'color: red;'}
,{field:'manager_id', width:90, title: '处理人', sort: true}
]]
,page: true
,page: {theme: '#FF5722'},
});
// 头部工具栏事件
table.on('toolbar(formFilter)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
// 条件查找图书证
case 'search':
var conditionValue = $('#conditionValue');
var condition = $('#condition');
// 进行搜索，重新渲染
tableIns.reload({
where: { //设定异步数据接口的额外参数，任意设
"condition": condition.val(),
"conditionValue": conditionValue.val()
}
,page: {
curr: 1 //重新从第 1 页开始
}
});
break;
case 'add':
var addCardLayer = layer.open({
type: 2,
title: '添加借书证',
area: ['800px', '500px'],
maxmin: true,
shadeClose: true,
content: 'cardadd.jsp',
});
//layer.full(addCardLayer);
};
layui.use(['table','jquery'], function(){ // 使用Layui的table和jQuery模块
$ = layui.jquery; // 获取jQuery对象
var table = layui.table; // 获取table对象
// 进行渲染
var tableIns = table.render({
elem: '#cardTable' // 指定渲染的表格元素ID
,url:'./illegal' // 数据接口地址
,toolbar: '#headBar' // 指定工具栏模板的选择器或DOM元素
,cols: [[ // 定义表格列配置
{field:'card_id', width:180, title: '借阅证号', sort: true} // 借阅证号列配置
,{field:'book_id', minwidth:80, title: '图书编号', sort: true} // 图书编号列配置
,{field:'borrow_date', width:250, title: '借阅日期', sort: true} // 借阅日期列配置
,{field:'end_date', title: '截止日期', width: 250, sort: true} // 截止日期列配置
,{field:'return_date', width:250, title: '归还时间', sort: true} // 归还时间列配置
,{field:'illegal', width:180, title: '违章信息', sort: true,style:'color: red;'} // 违章信息列配置，文字颜色为红色
,{field:'manager_id', width:90, title: '处理人', sort: true} // 处理人列配置
]]
,page: true // 开启分页功能
,page: {theme: '#FF5722'}, // 设置分页组件的主题颜色为橙色
});
// 头部工具栏事件
table.on('toolbar(formFilter)', function(obj){ // 监听头部工具栏事件
var checkStatus = table.checkStatus(obj.config.id); // 获取当前表格的选中状态
switch(obj.event){ // 根据事件类型进行处理
// 条件查找图书证
case 'search': // 如果事件类型是搜索
var conditionValue = $('#conditionValue'); // 获取条件值输入框的jQuery对象
var condition = $('#condition'); // 获取条件选择框的jQuery对象
// 进行搜索，重新渲染
tableIns.reload({
where: { //设定异步数据接口的额外参数，任意设
"condition": condition.val(), // 设置查询条件字段名
"conditionValue": conditionValue.val() // 设置查询条件值
},
page: {
curr: 1 //重新从第 1 页开始
}
});
break;
case 'add': // 如果事件类型是添加
var addCardLayer = layer.open({ // 打开一个新的弹出层
type: 2, // 弹出层类型为iframe层
title: '添加借书证', // 弹出层标题
area: ['800px', '500px'], // 弹出层大小
maxmin: true, // 允许最大化和最小化
shadeClose: true, // 点击遮罩关闭弹出层
content: 'cardAdd.jsp', // 弹出层内容为cardAdd.jsp页面
});
//layer.full(addCardLayer); // 注释掉的代码，用于全屏显示弹出层
};
});
// 侧边工具栏事件
table.on(('tool(formFilter)'), function(obj){ // 监听侧边工具栏事件
var data = obj.data; // 获取当前行的数据
var layEvent = obj.event; // 获取事件类型
var tr = obj.tr; // 获取当前行的DOM对象
switch(layEvent){ // 根据事件类型进行处理
//更多操作按钮的事件处理可以在这里添加
case 'edit': // 如果事件类型是编辑
layer.open({ // 打开一个新的弹出层
type: 2, // 弹出层类型为iframe层
title: '更改信息', // 弹出层标题
area: ['800px', '600px'], // 弹出层大小
maxmin: true, // 允许最大化和最小化
shadeClose: true, // 点击遮罩关闭弹出层
content: '', // 弹出层内容为空，需要根据实际需求填写
});
break;
};
});
});
// 侧边工具栏事件
table.on(('tool(formFilter)'), function(obj){
var data = obj.data;
var layEvent = obj.event;
var tr = obj.tr;
switch(obj.event){
case 'edit':
layer.open({
type: 2,
title: '更改信息',
area: ['800px', '600px'],
maxmin: true,
shadeClose: true,
content: '',
})
break;
}
})
});
</script>
</body>
</html>

102
WebContent/reader/11updatePswSus.jsp
Unescape View File

@ -1,64 +1,62 @@
<%@ page import="java.sql.*"%>
<%@ page import="java.util.*"%>
<%@ page import="java.sql.*"%> <!-- 导入Java SQL包 -->
<%@ page import="java.util.*"%> <!-- 导入Java Util包 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
pageEncoding="UTF-8"%> <!-- 设置页面语言为Java，内容类型和字符编码为UTF-8 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- 定义HTML文档类型 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改密码</title>
<script src="${ctx}/toastr/toastr.min.js"></script>
<link rel="stylesheet" href="${ctx}/toastr/toastr.min.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 设置内容类型和字符编码 -->
<title>修改密码</title> <!-- 设置页面标题 -->
<link rel="stylesheet" href="${ctx}/toastr/toastr.min.css"> <!-- 引入外部CSS样式表 -->
</head>
<body>
<jsp:useBean id="check" scope="session" class="javabean.JDBCBean"></jsp:useBean>
<%
String psw1 = request.getParameter("psw1");
String psw2 = request.getParameter("psw2");
<jsp:useBean id="check" scope="session" class="javabean.JDBCBean"></jsp:useBean> <!-- 使用JSP的useBean标签来实例化一个名为check的JavaBean对象 -->
<%
String psw1 = request.getParameter("psw1"); <!-- 获取请求参数psw1的值 -->
String psw2 = request.getParameter("psw2"); <!-- 获取请求参数psw2的值 -->
//out.println(psw1 + " " + psw2); <!-- 注释掉的代码，用于输出psw1和psw2的值 -->
String id = session.getAttribute("reader").toString(); <!-- 从会话中获取reader属性并转换为字符串 -->
if (psw1.equals(psw2) && psw1 != null && psw2 != null && !psw1.trim().equals("")
&& !psw2.trim().equals("")) { <!-- 检查两个密码是否相同且不为空 -->
String sql = "update borrow_card set PASSWORD ='" + psw1 + "' where ID=" + id; <!-- 构建SQL更新语句 -->
try {
int i = check.executeUpdate(sql); <!-- 执行SQL更新操作 -->
if (i == 1) { <!-- 如果更新成功 -->
%>
('修改成功！'); <!-- 弹出提示信息 -->
window.location.href = "index.jsp"; <!-- 重定向到index.jsp页面 -->
<%
} else { <!-- 如果更新不成功 -->
%>
('修改未成功！'); <!-- 弹出提示信息 -->
window.location.href = "index.jsp"; <!-- 重定向到index.jsp页面 -->
//out.println(psw1 + " " + psw2);
String id = session.getAttribute("reader").toString();
<%
}
} catch (Exception e) { <!-- 捕获异常 -->
%>
if (psw1.equals(psw2) && psw1 != null && psw2 != null && !psw1.trim().equals("")
&& !psw2.trim().equals("")) {
String sql = "update borrow_card set PASSWORD ='" + psw1 + "' where ID=" + id;
try {
int i = check.executeUpdate(sql);
if (i == 1) {
%>
<script>
alert('修改成功！');
window.location.href = "index.jsp";
</script>
('修改未成功！'); <!-- 弹出提示信息 -->
window.location.href = "index.jsp"; <!-- 重定向到index.jsp页面 -->
<%
} else {
%>
<script>
alert('修改未成功！');
window.location.href = "index.jsp";
</script>
<%
}
} catch (Exception e) {
%>
<script>
alert('修改未成功！');
window.location.href = "index.jsp";
</script>
<%
}
} else {
%>
<script>
alert('修改未成功！');
window.location.href = "index.jsp";
</script>
<%
}
%>
<%
}
} else { <!-- 如果密码验证失败 -->
%>
('修改未成功！'); <!-- 弹出提示信息 -->
window.location.href = "index.jsp"; <!-- 重定向到index.jsp页面 -->
<%
}
%>
</body>
</html>
</html>

111
WebContent/reader/12rules.jsp
Unescape View File

@ -1,68 +1,79 @@
<%@ page import="java.sql.*" %>
<%@ page import="java.util.*" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- 以上三行为JSP页面指令，用于设置页面属性和导入所需的Java包 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" id="templatecss" type="text/css" href="../public/css/message.css">
<style>
body{
background-color:#fff;
color:black;
}
</style>
<meta charset="utf-8">
<!-- 设置页面字符编码为UTF-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 兼容IE浏览器 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 响应式布局的视口设置 -->
<title></title>
<!-- 页面标题为空 -->
<!-- 引入Bootstrap CSS和JS文件 -->
<!-- Bootstrap是一个前端框架，用于快速布局和样式设计 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- 引入自定义CSS -->
<link rel="stylesheet" id="templatecss" type="text/css" href="../public/css/message.css">
<!-- 内联样式，设置body的背景色和文字颜色 -->
<style>
body{
background-color:#fff;
color:black;
}
</style>
</head>
<body>
<!-- jQuery代码，用于初始化Bootstrap的popover插件 -->
<script>
$(function () {
$("[data-toggle='popover']").popover();
});
$(function () {
$("[data-toggle='popover']").popover();
});
</script>
<!-- 使用JSP标签引入JavaBean，用于数据库操作 -->
<jsp:useBean id="msg" scope="session" class="javabean.JDBCBean"></jsp:useBean>
<!-- 页面居中显示标题 -->
<div align="center"><h1 style="color:steelblue;font-family:YouYuan;font-weight:900;">读者规则信息查看</h1></div>
<!-- 设置内容上边距，居中显示按钮 -->
<div style="margin-top:5%;" align="center">
<%
<!-- 以下为JSP脚本，用于从数据库查询并展示读者规则信息 -->
<%
String sql = "select * from rules";
ResultSet rs = msg.executeQuery(sql);
while (rs.next()) {
if(Integer.parseInt(rs.getString("ID")) % 2== 1){
%>
<button type="button" class="btn btn-lg btn-info" title="可借阅数量：<%=rs.getString("BORROW_NUM") %>" data-html="true"
data-container="body" data-trigger="focus" data-toggle="popover" data-placement="left"
// 执行SQL查询
ResultSet rs = msg.executeQuery(sql);
// 遍历查询结果集
while (rs.next()) {
if(Integer.parseInt(rs.getString("ID")) % 2== 1){
%>
<!-- 如果ID为奇数，使用蓝色按钮展示规则信息，并设置popover提示 -->
<button type="button" class="btn btn-lg btn-info" title="可借阅数量：<%=rs.getString("BORROW_NUM") %>" data-html="true"
data-container="body" data-trigger="focus" data-toggle="popover" data-placement="left"
data-content="可借阅天数：<%=rs.getString("LIMIT_DAY") %><br>可借阅图书馆：<%=rs.getString("BORROW_LIBRARY") %><br>过期扣费/天：<%=rs.getString("OVERTIME_FEE") %>" style="width:40%;height:100%;font-size:17px;margin-top:4%;">
借阅证规则编号：<%=rs.getString("ID")%>
借阅证规则编号：<%=rs.getString("ID")%> //设置借阅证规则编号
</button><br><br>
<%
}else{
%>
<button type="button" class="btn btn-lg btn-primary" title="可借阅数量：<%=rs.getString("BORROW_NUM") %>" data-html="true"
data-container="body" data-trigger="focus" data-toggle="popover" data-placement="right"
data-content="可借阅天数：<%=rs.getString("LIMIT_DAY") %><br>可借阅图书馆：<%=rs.getString("BORROW_LIBRARY") %><br>过期扣费/天：<%=rs.getString("OVERTIME_FEE") %>" style="width:40%;height:100%;font-size:17px;margin-top:4%;">
借阅证规则编号：<%=rs.getString("ID")%>
</button><br><br>
<%
}
<%
}else{
%>
<!-- 如果ID为偶数，使用蓝色按钮展示规则信息，并设置popover提示 -->
<button type="button" class="btn btn-lg btn-primary" title="可借阅数量：<%=rs.getString("BORROW_NUM") %>" data-html="true"
data-container="body" data-trigger="focus" data-toggle="popover" data-placement="right"
data-content="可借阅天数：<%=rs.getString("LIMIT_DAY") %><br>可借阅图书馆：<%=rs.getString("BORROW_LIBRARY") %><br>过期扣费/天：<%=rs.getString("OVERTIME_FEE") %>" style="width:40%;height:100%;font-size:17px;margin-top:4%;">
借阅证规则编号：<%=rs.getString("ID")%>
</button><br><br>
<%
}
}
%>
</div>
%>
<!-- 结束JSP脚本 -->
</div>
</body>
</html>

81
WebContent/reader/13message.jsp
Unescape View File

@ -1,46 +1,53 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" id="templatecss" type="text/css" href="../public/css/message.css">
<!-- 引入Bootstrap CSS文件 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery.min.js"></script>
<!-- 引入自定义CSS文件 -->
<link rel="stylesheet" id="templatecss" type="text/css" href="../public/css/message.css">
</head>
<body id="home">
<script>
//$(document).ready(function () {
// var date = new Date(+new Date()+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');
// alert(date);//2017-01-22 11:08:46
// $('#date_info').val(today);
//})
</script>
<div class="rain">
<div class="border start">
<form action="14messageSub.jsp" method="post">
<label for="mes" style="margin-left:36%;">留言板</label>
<textarea id="mes" name="msg" placeholder="请输入您的留言" style="height:50%;width:90%"></textarea>
<!-- <label for="date">日期</label>-->
<!-- <input id="date" type="text" name="time" placeholder="请输入时间" style="width:90%"/><br> -->
<!-- <input type="datetime_local" id="date_info" placeholder="请输入时间"/> -->
<br><br>
<div align="center">
<button type="submit" class="btn btn-warning" style="margin-left:0">提交</button>&emsp;&emsp;&emsp;
<button type="reset" class="btn btn-danger" style="margin-right:0">重置</button>&emsp;&emsp;&emsp;
<button type="reset" class="btn btn-info" style="margin-right:0" onClick="location.href='15checkMessage.jsp'">查看留言</button>
</div>
</form>
<!-- 以下JavaScript代码被注释掉了，用于在页面加载时设置当前日期和时间 -->
<!-- $(document).ready(function () {
var date = new Date(+new Date()+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');
(date);//2017-01-22 11:08:46
$('#date_info').val(today);
}) -->
<div class="rain">
<div class="border start">
<!-- 表单提交到14messageSub.jsp，使用POST方法 -->
<form action="14messageSub.jsp" method="post">
<!-- 留言板标题 -->
<label for="mes" style="margin-left:36%;">留言板</label>
<!-- 多行文本输入框，用于用户输入留言 -->
<textarea id="mes" name="msg" placeholder="请输入您的留言" style="height:50%;width:90%"></textarea>
<!-- 日期输入框被注释掉 -->
<!-- <label for="date">日期</label>-->
<!-- <input id="date" type="text" name="time" placeholder="请输入时间" style="width:90%"/><br> -->
<!-- <input type="datetime_local" id="date_info" placeholder="请输入时间"/> -->
<br><br>
<div align="center">
<!-- 提交按钮 -->
<button type="submit" class="btn btn-warning" style="margin-left:0">提交</button>&emsp;&emsp;&emsp;
<!-- 重置按钮 -->
<button type="reset" class="btn btn-danger" style="margin-right:0">重置</button>&emsp;&emsp;&emsp;
<!-- 查看留言按钮，点击后跳转到15checkMessage.jsp页面 -->
<button type="reset" class="btn btn-info" style="margin-right:0" onclick="location.href='15checkMessage.jsp'">查看留言</button>
</div>
</div>
</body>
</form>
</div>
</div>
</body>
</body>
</html>
</html>

70
WebContent/reader/14messageSub.jsp
Unescape View File

@ -1,47 +1,53 @@
<%@ page import="java.sql.*" %>
<%@ page import="java.util.*" %>
<%@ page import="javabean.DateTime"%>
<%@ page import="java.sql.*" %> <!-- 导入Java SQL包，用于数据库操作 -->
<%@ page import="java.util.*" %> <!-- 导入Java工具包，包含日期时间类等 -->
<%@ page import="javabean.DateTime"%> <!-- 导入自定义的DateTime类 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
pageEncoding="UTF-8"%> <!-- 设置页面语言为Java，内容类型和字符编码为UTF-8 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- 定义HTML文档类型 -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<meta charset="utf-8"> <!-- 设置字符编码为UTF-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 设置IE浏览器兼容模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 设置视口宽度和初始缩放比例 -->
<title></title> <!-- 页面标题 -->
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- Bootstrap CSS文件 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery库，Bootstrap的所有JavaScript插件都依赖jQuery，所以必须放在前边 -->
<link rel="stylesheet" id="templatecss" type="text/css"
href="../public/css/message.css">
<!-- 自定义CSS文件 -->
<link rel="stylesheet" id="templatecss" type="text/css" href="../public/css/message.css">
</head>
<body>
<jsp:useBean id="msg" scope="session" class="javabean.JDBCBean"></jsp:useBean>
<%
DateTime date=new DateTime();
//out.println(date.show());
String time = date.show();
String mes = request.getParameter("msg");
try{
String card = session.getAttribute("reader").toString();
<!-- 使用JSP标签声明一个JavaBean对象msg，作用域为session，类为javabean.JDBCBean -->
<jsp:useBean id="msg" scope="session" class="javabean.JDBCBean"></jsp:useBean>
<%
// 创建DateTime对象实例
DateTime date = new DateTime();
// 获取当前时间字符串
String time = date.show();
// 从请求中获取参数msg的值
String mes = request.getParameter("msg");
try {
// 从session中获取reader属性并转换为字符串
String card = session.getAttribute("reader").toString();
// 构建SQL插入语句
String sql = "insert into message(card_id,detail,public_date)values('" + card + "','" + mes + "','" + time + "');";
if (card!=null&&mes!=null&& !mes.trim().equals("")) {
// 检查card和mes是否不为空且mes不为空白字符串
if (card != null && mes != null && !mes.trim().equals("")) {
// 执行SQL插入操作
int i = msg.executeUpdate(sql);
// 根据插入结果进行跳转
if (i == 1) {
%>
// 这是用户提交留言后的处理逻辑
<script>
alert('留言成功！');
window.location.href = "15checkMessage.jsp";
window.location.href = "15checkMessage.jsp";//将当前浏览器窗口重定向到指定的jsp
</script>
<%
}
@ -53,7 +59,7 @@
</script>
<%
}
} else {
%>
<script>

87
WebContent/reader/15checkMessage.jsp
Unescape View File

@ -1,54 +1,53 @@
<%@ page import="java.sql.*" %>
<%@ page import="java.util.*" %>
<%@ page import="javabean.DateTime"%>
<%@ page import="java.sql.*" %> <!-- 导入Java SQL包，用于数据库操作 -->
<%@ page import="java.util.*" %> <!-- 导入Java工具包，包含日期时间类等 -->
<%@ page import="javabean.DateTime"%> <!-- 导入自定义的DateTime类 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
pageEncoding="UTF-8"%> <!-- 设置页面语言为Java，内容类型和字符编码为UTF-8 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- 定义HTML文档类型 -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<meta charset="utf-8"> <!-- 设置字符编码为UTF-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 设置IE浏览器兼容模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 设置视口宽度和初始缩放比例 -->
<title></title> <!-- 页面标题 -->
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- Bootstrap CSS文件 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery库，Bootstrap的所有JavaScript插件都依赖jQuery，所以必须放在前边 -->
<link rel="stylesheet" id="templatecss" type="text/css" href="../public/css/message.css">
<style type="text/css">
.text-dark{
color:black;
font-family:YouYuan;
}
body{
background-color:#fff;
font-size:16px;
}
</style>
<!-- 自定义CSS文件 -->
<link rel="stylesheet" id="templatecss" type="text/css" href="../public/css/message.css">
<style type="text/css">
.text-dark{
color:black; <!-- 设置文本颜色为黑色 -->
font-family:YouYuan; <!-- 设置字体为YouYuan -->
}
body{
background-color:#fff; <!-- 设置背景颜色为白色 -->
font-size:16px; <!-- 设置字体大小为16px -->
}
</style>
</head>
<body>
<jsp:useBean id="msg" scope="session" class="javabean.JDBCBean"></jsp:useBean>
<div align="center"><h3 style="color:#F08080;">☆★留言板★☆</h3></div>
<%
String sql = "select CARD_ID,DETAIL,PUBLIC_DATE from message order by PUBLIC_DATE desc";
ResultSet rs = msg.executeQuery(sql);
while (rs.next()) {
%>
<div class="panel panel-default" style="width:60%;height:80%; margin-left:20%;">
<div class="panel-body" align="center">
<p class="bg-info text-dark"><%=rs.getString("CARD_ID")%></p>
<div style="word-wrap:break-word;"><p class="bg-warning text-dark"><%=rs.getString("DETAIL")%></p></div>
<p class="bg-danger text-dark"><%=rs.getString("PUBLIC_DATE")%></p>
</div>
<jsp:useBean id="msg" scope="session" class="javabean.JDBCBean"></jsp:useBean> <!-- 使用JSP标签声明一个JavaBean对象，ID为msg，作用域为session，类为javabean.JDBCBean -->
<div align="center"><h3 style="color:#F08080;">☆★留言板★☆</h3></div> <!-- 居中显示标题，标题颜色为粉红色 -->
<%
String sql = "select CARD_ID,DETAIL,PUBLIC_DATE from message order by PUBLIC_DATE desc"; //<!-- SQL查询语句，选择CARD_ID、DETAIL和PUBLIC_DATE字段，按PUBLIC_DATE降序排列 -->
ResultSet rs = msg.executeQuery(sql); //<!-- 执行SQL查询，返回结果集 -->
while (rs.next()) { //<!-- 遍历结果集 -->
%>
<div class="panel panel-default" style="width:60%;height:80%; margin-left:20%;"> <!-- 创建一个面板，宽度60%，高度80%，左边距20% -->
<div class="panel-body" align="center"> <!-- 面板主体部分，内容居中 -->
<p class="bg-info text-dark"><%=rs.getString("CARD_ID")%></p> <!-- 显示CARD_ID字段的值，背景色为蓝色，文本颜色为黑色 -->
<div style="word-wrap:break-word;"><p class="bg-warning text-dark"><%=rs.getString("DETAIL")%></p></div> <!-- 显示DETAIL字段的值，自动换行，背景色为黄色，文本颜色为黑色 -->
<p class="bg-danger text-dark"><%=rs.getString("PUBLIC_DATE")%></p> <!-- 显示PUBLIC_DATE字段的值，背景色为红色，文本颜色为黑色 -->
</div>
<hr>
</div>
<hr> <!-- 水平线分隔符 -->
<%
}
%>
}
%>
</body>
</html>
</html>

215
WebContent/reader/index.jsp
Unescape View File

@ -1,141 +1,122 @@
<%@ page import="java.sql.*"%>
<%@ page import="java.sql.*"%> <!-- 导入Java SQL包，用于数据库操作 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
pageEncoding="UTF-8"%> <!-- 设置页面语言为Java，内容类型为HTML，字符编码为UTF-8 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- 定义文档类型为HTML 4.01 Transitional -->
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nifty Modal Window Effects</title>
<meta name="description"
content="Nifty Modal Window Effects with CSS Transitions and Animations" />
<meta name="keywords"
content="modal, window, overlay, modern, box, css transition, css animation, effect, 3d, perspective" />
<meta name="author" content="Codrops" />
<meta charset="UTF-8" /> <!-- 设置字符编码为UTF-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 设置浏览器兼容模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口宽度和初始缩放比例 -->
<title>Nifty Modal Window Effects</title> <!-- 设置网页标题 -->
<meta name="description"
content="Nifty Modal Window Effects with CSS Transitions and Animations" /> <!-- 设置网页描述 -->
<meta name="keywords"
content="modal, window, overlay, modern, box, css transition, css animation, effect, 3d, perspective" /> <!-- 设置网页关键词 -->
<meta name="author" content="Codrops" /> <!-- 设置作者信息 -->
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet"> <!-- 引入Bootstrap样式表 -->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<link rel="stylesheet" type="text/css" href="../public/css/default.css" />
<link rel="stylesheet" type="text/css"
href="../public/css/component.css" />
<script src="../public/js/modernizr.custom.js"></script>
<link rel="stylesheet" type="text/css" href="../public/css/default.css" /> <!-- 引入默认样式表 -->
<link rel="stylesheet" type="text/css"
href="../public/css/component.css" /> <!-- 引入组件样式表 -->
</head>
<body>
<%
if (session.getAttribute("reader") == null) {
%>
<script>
location.href = "../loginReader.html";
</script>
<%
}
%>
<jsp:useBean id="check" scope="session" class="javabean.JDBCBean"></jsp:useBean>
<!-- All modals added here for the demo. You would of course just have one, dynamically created -->
<%
if (session.getAttribute("reader") == null) { //<!-- 如果会话中的reader属性为空 -->
%>
location.href = "../loginReader.html"; <!-- 重定向到登录页面 -->
<%
}
%>
<jsp:useBean id="check" scope="session" class="javabean.JDBCBean"></jsp:useBean> <!-- 使用JSP标签创建JDBCBean对象 -->
<!-- All modals added here for the demo. You would of course just have one, dynamically created -->
<div class="md-modal md-effect-13" id="modal-13">
<div class="md-content">
<h3>修改密码</h3>
<form action="11updatePswSus.jsp" method="post"
class="form-horizontal">
<div class="form-group" align="center">
<br>
<label for="psw1" class="col-sm-2 control-label">新密码</label>
<div class="col-sm-10" align="center">
<input type="password" class="form-control" name="psw1" id="password1" placeholder="请输入新密码" style="width:70%;"/>
</div>
</div>
<div class="md-modal md-effect-13" id="modal-13"> <!-- 模态框容器 -->
<div class="md-content"> <!-- 模态框内容 -->
<h3>修改密码</h3> <!-- 模态框标题 -->
<form action="11updatePswSus.jsp" method="post"
class="form-horizontal"> <!-- 表单提交到11updatePswSus.jsp，使用POST方法，水平排列表单元素 -->
<div class="form-group" align="center"> <!-- 表单组 -->
<br>
<div class="form-group" align="center">
<label for="psw2" class="col-sm-2 control-label">新密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="psw2" id="password2" placeholder="请再次输入密码进行确认" style="width:70%;"/>
</div>
<label for="psw1" class="col-sm-2 control-label">新密码</label> <!-- 新密码标签 -->
<div class="col-sm-10" align="center"> <!-- 输入框容器 -->
<input type="password" class="form-control" name="psw1" id="password1" placeholder="请输入新密码" style="width:70%;"/> <!-- 新密码输入框 -->
</div>
<div align="center">
<input type="submit" class="btn btn-primary" value="确认">
</div>
<br>
<div class="form-group" align="center"> <!-- 表单组 -->
<label for="psw2" class="col-sm-2 control-label">新密码</label> <!-- 确认新密码标签 -->
<div class="col-sm-10"> <!-- 输入框容器 -->
<input type="password" class="form-control" name="psw2" id="password2" placeholder="请再次输入密码进行确认" style="width:70%;"/> <!-- 确认新密码输入框 -->
</div>
</div>
<div align="center"> <!-- 提交按钮容器 -->
<input type="submit" class="btn btn-primary" value="确认"> <!-- 提交按钮 -->
<br>
</form>
<button class="md-close btn-primary">取消</button>
<br>
</div>
</div>
</form>
<button class="md-close btn-primary">取消</button> <!-- 取消按钮 -->
<br>
</div>
</div>
<div class="container">
<!-- Top Navigation -->
<header style="backgorund-color:lightblue;height:20%;font-align:center;width:100%;font-family:YouYuan;">
<div class="container"> <!-- 主容器 -->
<!-- Top Navigation -->
<header style="backgorund-color:lightblue;height:20%;width:100%;font-family:YouYuan;"> <!-- 顶部导航栏 -->
<h1>个人信息
<span class="glyphicon glyphicon-bookmark" aria-hidden="true" style="font-size:17px;">&nbsp;Success is waking up in the morning,so excited about what you have to do.</span>
<span class="glyphicon glyphicon-bookmark" aria-hidden="true" style="font-size:17px">&nbsp;&nbsp;Success is waking up in the morning, excited about what you have to do.</span>
</h1>
</header>
<div class="main clearfix" style="font-size:10px;margin-top:5%;font-family:YouYuan;">
<div class="column">
<%
try{
String cardId=session.getAttribute("reader").toString();
String sql="select*from borrow_card where ID = '"+ cardId +"';";
ResultSet rs = check.executeQuery(sql);
while (rs.next()) {
%>
<% int id = rs.getInt(1);%>
<p><span class="glyphicon glyphicon-tags">&nbsp;借阅证编号：<%=rs.getString("ID")%></span></p><br>
<p><span class="glyphicon glyphicon-user">&nbsp;借阅证姓名：<%=rs.getString("READER")%></span></p><br>
<p><span class="glyphicon glyphicon-tag">&nbsp;规则编号：<%=rs.getString("RULE_ID")%></span></p><br>
<p><span class="glyphicon glyphicon-star-empty">&nbsp;状态：
<%
if(rs.getString("STATUS").equals("1")){
out.println("可用");
}
else{
out.println("挂失");
}
%>
</span></p>
<%
}
}catch(Exception e){
}
%>
</div>
<div class="column" align="center" style="font-size:15px">
<button class="md-trigger" data-modal="modal-13" style="margin-top:20%;">修改密码</button>
</header>
</div>
<div class="main clearfix" style="font-size:10px;margin-top:5%;font-family:YouYuan;"> <!-- 主要内容区域 -->
<div class="column"> <!-- 左侧列 -->
<%
try{
String cardId = session.getAttribute("reader").toString(); // 获取会话中的reader属性并转换为字符串
String sql = "select * from borrow_card where ID = '" + cardId + "';"; // SQL查询语句，根据reader ID查询借阅卡信息
ResultSet rs = check.executeQuery(sql); // 执行SQL查询，返回结果集
while(rs.next()){ // 遍历结果集
%>
<% int id =rs.getInt("ID"); %> <%-- 获取ID字段的值 --%>
<p><span class="glyphicon glyphicon-tags">&nbsp;借阅卡编号：<%=rs.getString("ID")%></span></p> <%-- 显示借阅卡编号 --%>
<p><span class="glyphicon glyphicon-user">&nbsp;借阅人：<%=rs.getString("READER")%></span></p> <%-- 显示借阅人 --%>
<p><span class="glyphicon glyphicon-tag">&nbsp;规则编号：<%=rs.getString("RULE_ID")%></span></p> <%-- 显示规则编号 --%>
<p><span class="glyphicon glyphicon-star-empty">&nbsp;状态：
<%
if(rs.getString("STATUS").equals("1")){ // 根据状态值判断状态
out.println("可用"); // 如果状态值为1，显示“可用”
}else{
out.println("挂失"); // 如果状态值不为1，显示“挂失”
}
%>
</span></p>
<%}
}catch(Exception e){ // 捕获异常
}
%>
</div>
<div class="column" align="center" style="font-size:15px;"> <!-- 右侧列 -->
<button class="md-trigger btn-primary" data-modal="modal-13" style="margin-top:20%;">修改密码</button> <!-- 修改密码按钮 -->
</div>
</div>
<!-- /container -->
<div class="md-overlay"></div>
<!-- the overlay element -->
<!-- classie.js by @desandro: https://github.com/desandro/classie -->
<script src="../public/js/classie.js"></script>
<script src="../public/js/modalEffects.js"></script>
</div>
<!-- for the blur effect -->
<!-- by @derSchepp https://github.com/Schepp/CSS-Filters-Polyfill -->
<script>
// this is important for IEs
var polyfilter_scriptpath = '/js/';
</script>
<script src="../public/js/cssParser.js"></script>
<script src="../public/js/css-filters-polyfill.js"></script>
<div class="md-overlay"></div> <!-- 模态框覆盖层 -->
<!-- classie by @desandro https://github.com/desandro/classie -->
<!-- classie.js - class helper functions by desandro -->
<script src="js/classie.js"></script>
<!-- for the blur effect -->
<!-- by @derekdrees https://github.com/ded/SpinKit -->
<script src="js/spinkit.js"></script>
<script>
// this is important for the blur effect
var polyfillscriptpath = 'polyfill/'; // polyfill脚本路径
</script>
</body>
</html>

98
src/javabean/Common.java
Unescape View File

@ -1,67 +1,71 @@
package javabean;
package javabean; // 定义包名，用于组织类和接口
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.TreeMap;
import java.sql.Connection; // 导入Connection类，用于数据库连接
import java.sql.PreparedStatement; // 导入PreparedStatement类，用于执行预编译的SQL语句
import java.sql.ResultSet; // 导入ResultSet类，用于存储查询结果
import java.sql.SQLException; // 导入SQLException类，用于处理SQL异常
import java.util.HashMap; // 导入HashMap类，用于存储键值对
import java.util.TreeMap; // 导入TreeMap类，用于存储有序的键值对
public class Common {
public class Common { // 定义公共类Common
/**
* 获取行总数
* @return
* @throws SQLException
* @throws ClassNotFoundException
* @param table 表名
* @return 返回表中的行数
* @throws SQLException 如果数据库访问出错或此方法被关闭时抛出
* @throws ClassNotFoundException 如果找不到数据库驱动类时抛出
*/
public static int getCount(String table) throws SQLException, ClassNotFoundException {
if(table == null || table.equals("")) {
return 0;
if(table == null || table.equals("")) { // 检查表名是否为空
return 0; // 如果为空，返回0
}
Connection connection = null;
PreparedStatement pstmt = null;
ResultSet resultSet = null;
connection = Base.getConnection();
Connection connection = null; // 初始化数据库连接对象
PreparedStatement pstmt = null; // 初始化预编译语句对象
ResultSet resultSet = null; // 初始化结果集对象
connection = Base.getConnection(); // 获取数据库连接
try {
pstmt = connection.prepareStatement("select count(*) as count from " +table);
resultSet = pstmt.executeQuery();
resultSet.next();
return resultSet.getInt("count");
}catch(Exception e) {
return 0;
pstmt = connection.prepareStatement("select count(*) as count from " +table); // 准备SQL查询语句
resultSet = pstmt.executeQuery(); // 执行查询并获取结果集
resultSet.next(); // 移动到结果集的第一行
return resultSet.getInt("count"); // 返回计数结果
}catch(Exception e) { // 捕获所有异常
return 0; // 发生异常时返回0
}finally {
Base.closeResource(connection, pstmt, resultSet);
Base.closeResource(connection, pstmt, resultSet); // 关闭资源
}
}
/**
* 获取图书馆信息映射
* @return 返回包含图书馆ID和名称的有序映射
* @throws SQLException 如果数据库访问出错或此方法被关闭时抛出
*/
public static TreeMap<String, String> getLibraryMap() throws SQLException {
Connection connection = null;
PreparedStatement libraryPstmt = null;
ResultSet librarySet = null;
String librarySql = "select id,name from library";
TreeMap<String, String> map = new TreeMap<String, String>();
Connection connection = null; // 初始化数据库连接对象
PreparedStatement libraryPstmt = null; // 初始化预编译语句对象
ResultSet librarySet = null; // 初始化结果集对象
String librarySql = "select id,name from library"; // SQL查询语句
TreeMap<String, String> map = new TreeMap<String, String>(); // 创建有序映射对象
// 获取图书馆
try {
connection = (Connection) Base.getConnection();
libraryPstmt = connection.prepareStatement(librarySql);
librarySet = libraryPstmt.executeQuery();
while(librarySet.next()) {
map.put(librarySet.getString("id"), librarySet.getString("name"));
connection = (Connection) Base.getConnection(); // 获取数据库连接
libraryPstmt = connection.prepareStatement(librarySql); // 准备SQL查询语句
librarySet = libraryPstmt.executeQuery(); // 执行查询并获取结果集
while(librarySet.next()) { // 遍历结果集
map.put(librarySet.getString("id"), librarySet.getString("name")); // 将结果添加到映射中
}
} catch (ClassNotFoundException e) {
return null;
} catch (SQLException e) {
return null;
} catch (ClassNotFoundException e) { // 捕获类未找到异常
return null; // 返回null
} catch (SQLException e) { // 捕获SQL异常
return null; // 返回null
} finally {
Base.closeResource(connection, libraryPstmt, librarySet);
Base.closeResource(connection, libraryPstmt, librarySet); // 关闭资源
}
return map;
return map; // 返回映射对象
}
public static void main(String[] args) throws SQLException {
System.out.println(Common.getLibraryMap());
public static void main(String[] args) throws SQLException { // 主方法，程序入口点
System.out.println(Common.getLibraryMap()); // 打印图书馆映射信息
}
}

28
src/javabean/Reader.java
Unescape View File

@ -8,24 +8,26 @@ import java.sql.SQLException;
public class Reader {
@SuppressWarnings("null")
public String login(String user, String psw) throws ClassNotFoundException, SQLException {
//检查用户名是否为空
if (user == null || user.trim().equals("")) {
return "账号不能为空";
} else if (psw == null || psw.trim().equals("")) {
} else if (psw == null || psw.trim().equals("")) {//检查密码是否为空
return "密码不能为空";
}
Connection connection = null;
PreparedStatement pstmt = null;
ResultSet resultSet = null;
String sql = "select * from borrow_card where ID=? and PASSWORD=?";
connection = Base.getConnection();
pstmt = (PreparedStatement) connection.prepareStatement(sql);
pstmt.setString(1, user);
pstmt.setString(2, psw);
resultSet = pstmt.executeQuery();
if (resultSet.next()) {
Connection connection = null; // 数据库连接对象
PreparedStatement pstmt = null; // 预编译的SQL语句对象
ResultSet resultSet = null; // 查询结果集对象
String sql = "select * from borrow_card where ID=? and PASSWORD=?"; // SQL查询语句
connection = Base.getConnection(); // 获取数据库连接
pstmt = (PreparedStatement) connection.prepareStatement(sql); // 创建PreparedStatement对象
pstmt.setString(1, user); // 设置第一个参数（用户名）
pstmt.setString(2, psw); // 设置第二个参数（密码）
resultSet = pstmt.executeQuery(); // 执行查询
if (resultSet.next()) { // 如果查询有结果，说明账号密码正确
return "1";
}
return "账号或密码错误";
return "账号或密码错误"; // 如果没有查询到结果，返回错误信息
}
}

109
src/javabean/Util.java
Unescape View File

@ -1,88 +1,89 @@
package javabean;
package javabean; // 定义包名，用于组织类和接口
import java.math.BigInteger;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.text.SimpleDateFormat;
import java.math.BigInteger; // 导入BigInteger类，用于处理大整数
import java.security.MessageDigest; // 导入MessageDigest类，用于生成MD5摘要
import java.security.NoSuchAlgorithmException; // 导入NoSuchAlgorithmException异常类，用于处理没有指定算法的情况
import java.text.SimpleDateFormat; // 导入SimpleDateFormat类，用于格式化日期
import net.sf.json.JSONObject;
import net.sf.json.JSONObject; // 导入JSONObject类，用于处理JSON数据
public class Util {
public class Util { // 定义一个公共类Util
/**
* 主要用来计算json字符串中对象的个数
* @param str
* @param contain
* @return
* @param str 输入的json字符串
* @param contain 要计算的对象标识符
* @return 返回对象的数量
*/
public static int getCountString(String str, String contain) {
int count = ( str.length()-str.replace(contain, "").length() ) / contain.length();
return count;
int count = ( str.length()-str.replace(contain, "").length() ) / contain.length(); // 计算包含特定字符串的次数
return count; // 返回计数结果
}
/**
* 数据库取出来的datetime有 .0 ,用来去掉
* @param dateTime
* @return
* @param dateTime 输入的日期时间字符串
* @return 返回去除.0后的日期时间字符串
*/
public static String getFormatDateTime(String dateTime) {
if(dateTime != null && dateTime.indexOf(".0") != -1) {
return dateTime.substring(0, dateTime.length()-2);
}else if(dateTime != null) {
return dateTime;
if(dateTime != null && dateTime.indexOf(".0") != -1) { // 如果字符串不为空且包含".0"
return dateTime.substring(0, dateTime.length()-2); // 去除最后两个字符（即".0"）
}else if(dateTime != null) { // 如果字符串不为空但不包含".0"
return dateTime; // 直接返回原字符串
}
return null;
return null; // 如果字符串为空，返回null
}
/**
* 获取当前时间
* @return
* @return 返回格式化后的当前时间字符串
*/
public static String getCurrentTimeString() {
java.util.Date date = new java.util.Date();
SimpleDateFormat dateFormat= new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
return dateFormat.format(date);
java.util.Date date = new java.util.Date(); // 创建当前日期对象
SimpleDateFormat dateFormat= new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); // 定义日期格式
return dateFormat.format(date); // 返回格式化后的日期字符串
}
/*
* 返回json数据
*/
public static String jsonResponse(int code, String msg, String data) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("code", code);
jsonObject.put("msg", msg);
if( data!=null ) {
jsonObject.put("data", data);
JSONObject jsonObject = new JSONObject(); // 创建JSON对象
jsonObject.put("code", code); // 添加code字段
jsonObject.put("msg", msg); // 添加msg字段
if( data!=null ) { // 如果data不为空
jsonObject.put("data", data); // 添加data字段
}
return jsonObject.toString();
return jsonObject.toString(); // 返回JSON字符串
}
/*
* md5加密
*/
public static String stringToMD5(String plainText) {
byte[] secretBytes = null;
try {
secretBytes = MessageDigest.getInstance("md5").digest(
plainText.getBytes());
} catch (NoSuchAlgorithmException e) {
throw new RuntimeException("没有这个md5算法！");
}
String md5code = new BigInteger(1, secretBytes).toString(16);
for (int i = 0; i < 32 - md5code.length(); i++) {
md5code = "0" + md5code;
}
return md5code;
}
byte[] secretBytes = null; // 定义字节数组用于存储MD5摘要
try {
secretBytes = MessageDigest.getInstance("md5").digest(
plainText.getBytes()); // 生成MD5摘要
} catch (NoSuchAlgorithmException e) { // 捕获没有该算法的异常
throw new RuntimeException("没有这个md5算法！"); // 抛出运行时异常
}
String md5code = new BigInteger(1, secretBytes).toString(16); // 将字节数组转换为16进制字符串
for (int i = 0; i < 32 - md5code.length(); i++) { // 如果长度不足32位，前面补0
md5code = "0" + md5code;
}
return md5code; // 返回MD5字符串
}
public static String passMd5(String password) {
String salt = "ew!.E";
return Util.stringToMD5(password +salt);
String salt = "ew!.E"; // 定义盐值
return Util.stringToMD5(password +salt); // 返回加盐后的MD5字符串
}
public static void main(String[] args) {
System.out.println(Util.passMd5("admin"));
//java.util.Date date = new java.util.Date();
//SimpleDateFormat dateFormat= new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
//System.out.println(dateFormat.format(date));
System.out.println(Util.passMd5("admin")); // 测试MD5加密函数，输出加密后的字符串
//java.util.Date date = new java.util.Date(); // 注释掉的代码：创建当前日期对象
//SimpleDateFormat dateFormat= new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); // 注释掉的代码：定义日期格式
//System.out.println(dateFormat.format(date)); // 注释掉的代码：输出格式化后的日期字符串
}
}

81
src/servlet/reader/Book.java
Unescape View File

@ -24,20 +24,25 @@ import net.sf.json.JSONObject;
public class Book extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 设置响应内容类型为JSON，字符编码为UTF-8
resp.setContentType("application/json; charset=utf8");
// 接收参数
String limit = req.getParameter("limit");
String page = req.getParameter("page");
String condition = (String) req.getParameter("condition");
String conditionValue = (String) req.getParameter("conditionValue");
String where = ""; // 无限制条件
// 接收请求参数
String limit = req.getParameter("limit"); // 每页显示的记录数
String page = req.getParameter("page"); // 当前页码
String condition = (String) req.getParameter("condition"); // 查询条件字段
String conditionValue = (String) req.getParameter("conditionValue"); // 查询条件值
String where = ""; // SQL查询条件字符串
// 默认分页参数
if (page == null) {
page = "1";
}
if (limit == null) {
limit = "10";
}
// 准备查询
// 数据库连接和SQL语句准备
Connection connection = null;
PreparedStatement pstmt = null;
PreparedStatement countPstmt = null;
@ -45,30 +50,44 @@ public class Book extends HttpServlet {
ResultSet countSet = null;
String sql = "";
String countSql = "";
// 准备返回参数
int code = 1;
String msg = "无数据";
int count = 0;
JSONObject jsonData = new JSONObject();
JSONArray jsonArray = new JSONArray();
JSONObject jsonResult = new JSONObject();
// 进行查询
// 返回数据结构初始化
int code = 1; // 状态码，1表示失败，0表示成功
String msg = "无数据"; // 消息提示
int count = 0; // 总记录数
JSONObject jsonData = new JSONObject(); // 单条记录的JSON对象
JSONArray jsonArray = new JSONArray(); // 所有记录的JSON数组
JSONObject jsonResult = new JSONObject(); // 最终返回的JSON对象
try {
// 获取数据库连接
connection = (Connection) Base.getConnection();
sql = "select * from books ";
// 根据条件拼接SQL查询语句
if (condition != null && conditionValue != null && !condition.equals("") && !conditionValue.equals("")) {
where = " where " + condition + " like '%" + conditionValue + "%' ";
sql += where;
}
sql += " limit ?,?";// 1 10 (1-1)*10
// 分页查询
sql += " limit ?,?"; // 计算偏移量和限制数量
pstmt = connection.prepareStatement(sql);
pstmt.setInt(1, (Integer.parseInt(page) - 1) * Integer.parseInt(limit));
pstmt.setInt(2, Integer.parseInt(limit));
resultSet = pstmt.executeQuery();
while (resultSet.next()) {
// 处理查询结果集
while (resultSet.next()) {
// 获取图书信息
String library = resultSet.getString("library_id");
String sortid = resultSet.getString("sort_id");
jsonData.put("id", resultSet.getString("id"));
jsonData.put("name", resultSet.getString("name"));
jsonData.put("author", resultSet.getString("author"));
jsonData.put("position", resultSet.getString("position"));
jsonData.put("status", resultSet.getString("status"));
jsonData.put("description", resultSet.getString("description"));
// 获取图书馆名称
String sql1 = "select * from library where ID =" + library;
PreparedStatement pstmt1 = connection.prepareStatement(sql1);
ResultSet rs1 = pstmt1.executeQuery();
@ -76,8 +95,9 @@ public class Book extends HttpServlet {
while (rs1.next()) {
lib = rs1.getString("name");
}
jsonData.put("library_id", lib);
String sortid = resultSet.getString("sort_id");
// 获取分类名称
String sql2 = "select * from book_sort where ID =" + sortid;
PreparedStatement pstmt2 = connection.prepareStatement(sql2);
ResultSet rs2 = pstmt2.executeQuery();
@ -85,17 +105,12 @@ public class Book extends HttpServlet {
while (rs2.next()) {
sort = rs2.getString("name");
}
jsonData.put("id", resultSet.getString("id"));
jsonData.put("name", resultSet.getString("name"));
jsonData.put("author", resultSet.getString("author"));
jsonData.put("library_id", lib);
jsonData.put("sort_id", sort);
jsonData.put("position", resultSet.getString("position"));
jsonData.put("status", resultSet.getString("status"));
jsonData.put("description", resultSet.getString("description"));
// 将单条记录添加到JSON数组中
jsonArray.add(jsonData);
}
// 统计总记录数
countSql = "select count(*) as count from books ";
countSql += where;
countPstmt = connection.prepareStatement(countSql);
@ -104,28 +119,28 @@ public class Book extends HttpServlet {
count = countSet.getInt("count");
}
if (!jsonArray.isEmpty()) {
code = 0;
code = 0; // 查询成功
msg = "查询成功";
}
} catch (ClassNotFoundException e) {
msg = "class没找到";
msg = "class没找到"; // 类未找到异常处理
} catch (SQLException e) {
msg = "sql错误";
msg = "sql错误"; // SQL异常处理
} finally {
// 关闭资源
try {
Base.closeResource(null, pstmt, resultSet);
Base.closeResource(connection, countPstmt, countSet);
} catch (SQLException e) {
msg = "关闭资源失败";
msg = "关闭资源失败"; // 关闭资源异常处理
}
}
// 返回数据
// 构建返回的JSON对象
jsonResult.put("code", code);
jsonResult.put("count", count);
jsonResult.put("msg", msg);
jsonResult.put("data", jsonArray.toArray());
// 输出JSON响应
PrintWriter out = resp.getWriter();
out.print(jsonResult.toString());
}

124
src/servlet/reader/Borrow.java
Unescape View File

@ -25,93 +25,93 @@ import net.sf.json.JSONObject;
public class Borrow extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置响应内容类型为JSON，编码格式为UTF-8
resp.setContentType("application/json; charset=utf8");
// 接收参数
String limit = req.getParameter("limit");
String page = req.getParameter("page");
String condition = (String) req.getParameter("condition");
String conditionValue = (String) req.getParameter("conditionValue");
String where = ""; // 无限制条件
// 接收分页参数
String limit = req.getParameter("limit"); // 每页显示记录数
String page = req.getParameter("page"); // 当前页码
String condition = (String) req.getParameter("condition"); // 查询条件字段名
String conditionValue = (String) req.getParameter("conditionValue"); // 查询条件值
String where = ""; // 初始化查询条件字符串
if (page == null) {
page = "1";
page = "1"; // 默认第一页
}
if (limit == null) {
limit = "10";
limit = "10"; // 默认每页显示10条记录
}
// 准备查询
// 准备数据库连接和查询对象
Connection connection = null;
PreparedStatement pstmt = null;
PreparedStatement countPstmt = null;
ResultSet resultSet = null;
ResultSet countSet = null;
String sql = "";
String countSql = "";
// 准备返回参数
int code = 1;
String msg = "无数据";
int count = 0;
String sql = ""; // SQL查询语句
String countSql = ""; // 统计总数SQL查询语句
// 返回结果的参数
int code = 1; // 状态码，1表示失败，0表示成功
String msg = "无数据"; // 返回消息
int count = 0; // 总记录数
HttpSession session = req.getSession();
HttpSession session = req.getSession(); // 获取用户会话
JSONObject jsonData = new JSONObject();
JSONArray jsonArray = new JSONArray();
JSONObject jsonResult = new JSONObject();
// 进行查询
JSONObject jsonData = new JSONObject(); // JSON对象，存储单条记录数据
JSONArray jsonArray = new JSONArray(); // JSON数组，存储多条记录数据
JSONObject jsonResult = new JSONObject(); // JSON对象，存储最终返回结果
// 执行查询操作
try {
connection = (Connection) Base.getConnection();
sql = "select * from borrow_books where card_id = " + session.getAttribute("reader");
connection = (Connection) Base.getConnection(); // 获取数据库连接
sql = "select * from borrow_books where card_id = " + session.getAttribute("reader"); // 构建基本查询语句
if (condition != null && conditionValue != null && !condition.equals("") && !conditionValue.equals("")) {
where = " and " + condition + " like '%" + conditionValue + "%' ";
sql += where;
where = " and " + condition + " like '%" + conditionValue + "%' "; // 添加查询条件
sql += where; // 拼接完整查询语句
}
sql += " limit ?,?";// 1 10 (1-1)*10
System.out.println("???" + sql);
pstmt = connection.prepareStatement(sql);
pstmt.setInt(1, (Integer.parseInt(page) - 1) * Integer.parseInt(limit));
pstmt.setInt(2, Integer.parseInt(limit));
resultSet = pstmt.executeQuery();
sql += " limit ?,?"; // 添加分页限制
System.out.println("???" + sql); // 打印SQL查询语句（调试用）
pstmt = connection.prepareStatement(sql); // 预编译SQL查询语句
pstmt.setInt(1, (Integer.parseInt(page) - 1) * Integer.parseInt(limit)); // 设置第一个参数：起始位置
pstmt.setInt(2, Integer.parseInt(limit)); // 设置第二个参数：每页显示记录数
resultSet = pstmt.executeQuery(); // 执行查询，获取结果集
while (resultSet.next()) {
jsonData.put("id", resultSet.getString("id"));
jsonData.put("card_id", resultSet.getString("card_id"));
jsonData.put("book_id", resultSet.getString("book_id"));
jsonData.put("borrow_date", resultSet.getString("borrow_date"));
jsonData.put("end_date", resultSet.getString("end_date"));
jsonData.put("return_date", resultSet.getString("return_date"));
jsonArray.add(jsonData);
jsonData.put("id", resultSet.getString("id")); // 获取并存储记录ID
jsonData.put("card_id", resultSet.getString("card_id")); // 获取并存储读者ID
jsonData.put("book_id", resultSet.getString("book_id")); // 获取并存储书籍ID
jsonData.put("borrow_date", resultSet.getString("borrow_date")); // 获取并存储借阅日期
jsonData.put("end_date", resultSet.getString("end_date")); // 获取并存储到期日期
jsonData.put("return_date", resultSet.getString("return_date")); // 获取并存储归还日期
jsonArray.add(jsonData); // 将记录添加到JSON数组中
}
countSql = "select count(*) as count from borrow_books where card_id = "
+ req.getSession().getAttribute("reader");
countSql += where;
countPstmt = connection.prepareStatement(countSql);
countSet = countPstmt.executeQuery();
countSql = "select count(*) as count from borrow_books where card_id = " + req.getSession().getAttribute("reader"); // 构建统计总数SQL查询语句
countSql += where; // 拼接查询条件
countPstmt = connection.prepareStatement(countSql); // 预编译统计总数SQL查询语句
countSet = countPstmt.executeQuery(); // 执行查询，获取结果集
if (countSet.next()) {
count = countSet.getInt("count");
count = countSet.getInt("count"); // 获取总记录数
}
if (!jsonArray.isEmpty()) {
code = 0;
msg = "查询成功";
if (!jsonArray.isEmpty()) { // 如果JSON数组不为空，表示有数据
code = 0; // 设置状态码为0，表示成功
msg = "查询成功"; // 设置返回消息为“查询成功”
}
} catch (ClassNotFoundException e) {
msg = "class没找到";
} catch (SQLException e) {
msg = "sql错误";
} finally {
} catch (ClassNotFoundException e) { // 捕获类未找到异常
msg = "class没找到"; // 设置返回消息为“class没找到”
} catch (SQLException e) { // 捕获SQL异常
msg = "sql错误"; // 设置返回消息为“sql错误”
} finally { // 最终块，用于关闭资源
try {
Base.closeResource(null, pstmt, resultSet);
Base.closeResource(connection, countPstmt, countSet);
} catch (SQLException e) {
msg = "关闭资源失败";
Base.closeResource(null, pstmt, resultSet); // 关闭查询语句和结果集
Base.closeResource(connection, countPstmt, countSet); // 关闭数据库连接和统计结果集
} catch (SQLException e) { // 捕获SQL异常
msg = "关闭资源失败"; // 设置返回消息为“关闭资源失败”
}
}
// 返回数据
jsonResult.put("code", code);
jsonResult.put("count", count);
jsonResult.put("msg", msg);
jsonResult.put("data", jsonArray.toArray());
PrintWriter out = resp.getWriter();
out.print(jsonResult.toString());
// 将结果封装成JSON对象并输出到响应中
jsonResult.put("code", code); // 添加状态码到JSON对象中
jsonResult.put("count", count); // 添加总记录数到JSON对象中
jsonResult.put("msg", msg); // 添加返回消息到JSON对象中
jsonResult.put("data", jsonArray.toArray()); // 添加数据数组到JSON对象中
PrintWriter out = resp.getWriter(); // 获取响应输出流
out.print(jsonResult.toString()); // 输出JSON结果到响应中
}
}

5
src/servlet/reader/Exit.java
Unescape View File

@ -19,11 +19,14 @@ public class Exit extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
// 获取当前请求的会话对象。如果会话不存在，则创建一个新的会话。
HttpSession session = req.getSession();
// 检查会话中是否存在名为 "reader" 的属性。
if (session.getAttribute("reader") != null) {
// 如果存在，则移除该属性。
session.removeAttribute("reader");
}
// 重定向到指定的 JSP 页面。
resp.sendRedirect(req.getContextPath() + "/reader/04readerFrame.jsp");
}
}

88
src/servlet/reader/Illegal.java
Unescape View File

@ -25,52 +25,66 @@ import net.sf.json.JSONObject;
public class Illegal extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 设置响应内容类型为 JSON，并指定字符编码为 UTF-8
resp.setContentType("application/json; charset=utf8");
// 接收参数
String limit = req.getParameter("limit");
String page = req.getParameter("page");
String condition = (String) req.getParameter("condition");
String conditionValue = (String) req.getParameter("conditionValue");
String where = ""; // 无限制条件
// 接收请求参数
String limit = req.getParameter("limit"); // 每页显示记录数
String page = req.getParameter("page"); // 当前页码
String condition = (String) req.getParameter("condition"); // 查询条件字段
String conditionValue = (String) req.getParameter("conditionValue"); // 查询条件值
String where = ""; // 初始化查询条件字符串
// 如果未提供分页参数，则使用默认值
if (page == null) {
page = "1";
page = "1"; // 默认第一页
}
if (limit == null) {
limit = "10";
limit = "10"; // 默认每页显示10条记录
}
// 准备查询
// 准备数据库连接和查询对象
Connection connection = null;
PreparedStatement pstmt = null;
PreparedStatement countPstmt = null;
ResultSet resultSet = null;
ResultSet countSet = null;
String sql = "";
String countSql = "";
// 准备返回参数
int code = 1;
String msg = "无数据";
int count = 0;
HttpSession session = req.getSession();
String sql = ""; // SQL 查询语句
String countSql = ""; // 统计总记录数的 SQL 查询语句
// 准备返回结果的参数
int code = 1; // 状态码，1表示失败，0表示成功
String msg = "无数据"; // 返回消息
int count = 0; // 总记录数
HttpSession session = req.getSession(); // 获取会话对象
// 用于存储查询结果的 JSON 对象和数组
JSONObject jsonData = new JSONObject();
JSONArray jsonArray = new JSONArray();
JSONObject jsonResult = new JSONObject();
// 进行查询
// 进行数据库查询操作
try {
// 获取数据库连接
connection = (Connection) Base.getConnection();
sql = "select * from borrow_books where ILLEGAL is not null and length(trim(illegal))>0 AND CARD_ID = "
+ session.getAttribute("reader");
// 构建 SQL 查询语句，查询借阅记录中存在违规信息的记录
sql = "select * from borrow_books where ILLEGAL is not null and length(trim(illegal))>0 AND CARD_ID = " + session.getAttribute("reader");
// 如果提供了查询条件，则添加到 SQL 查询语句中
if (condition != null && conditionValue != null && !condition.equals("") && !conditionValue.equals("")) {
where = " and " + condition + " like '%" + conditionValue + "%' ";
sql += where;
}
sql += " limit ?,?";// 1 10 (1-1)*10
System.out.println("???" + sql);
// 添加分页限制条件
sql += " limit ?,?"; // 例如：limit 1,10 (1-1)*10
System.out.println("???" + sql); // 打印 SQL 查询语句（调试用）
pstmt = connection.prepareStatement(sql);
// 设置分页参数，计算起始位置和每页记录数
pstmt.setInt(1, (Integer.parseInt(page) - 1) * Integer.parseInt(limit));
pstmt.setInt(2, Integer.parseInt(limit));
// 执行查询并处理结果集
resultSet = pstmt.executeQuery();
while (resultSet.next()) {
// 将查询结果集中的每一行数据存入 JSON 对象中，并添加到 JSON 数组中
jsonData.put("id", resultSet.getString("id"));
jsonData.put("card_id", resultSet.getString("card_id"));
jsonData.put("book_id", resultSet.getString("book_id"));
@ -81,39 +95,39 @@ public class Illegal extends HttpServlet {
jsonData.put("manager_id", resultSet.getString("manager_id"));
jsonArray.add(jsonData);
}
countSql = "select count(*) as count from borrow_books where ILLEGAL is not null and length(trim(illegal))>0 AND CARD_ID = "
+ session.getAttribute("reader");
// 构建统计总记录数的 SQL 查询语句，并执行查询以获取总记录数
countSql = "select count(*) as count from borrow_books where ILLEGAL is not null and length(trim(illegal))>0 AND CARD_ID = " + session.getAttribute("reader");
countSql += where;
countPstmt = connection.prepareStatement(countSql);
countSet = countPstmt.executeQuery();
if (countSet.next()) {
count = countSet.getInt("count");
count = countSet.getInt("count"); // 获取总记录数
}
// 如果查询结果不为空，则更新状态码和消息
if (!jsonArray.isEmpty()) {
code = 0;
code = 0; // 查询成功
msg = "查询成功";
}
} catch (ClassNotFoundException e) {
msg = "class没找到";
msg = "class没找到"; // 捕获类未找到异常并设置错误消息
} catch (SQLException e) {
msg = "sql错误";
msg = "sql错误"; // 捕获 SQL 异常并设置错误消息
} finally {
// 关闭数据库资源
try {
Base.closeResource(null, pstmt, resultSet);
Base.closeResource(connection, countPstmt, countSet);
} catch (SQLException e) {
msg = "关闭资源失败";
msg = "关闭资源失败"; // 捕获关闭资源时的异常并设置错误消息
}
}
// 返回数据
jsonResult.put("code", code);
jsonResult.put("count", count);
jsonResult.put("msg", msg);
jsonResult.put("data", jsonArray.toArray());
PrintWriter out = resp.getWriter();
out.print(jsonResult.toString());
// 将查询结果封装到 JSON 对象中并返回给客户端
jsonResult.put("code", code); // 状态码
jsonResult.put("count", count); // 总记录数
jsonResult.put("msg", msg); // 返回消息
jsonResult.put("data", jsonArray.toArray()); // 查询结果数据
PrintWriter out = resp.getWriter(); // 获取输出流对象
out.print(jsonResult.toString()); // 输出 JSON 字符串作为响应
}
}

28
src/servlet/reader/ReaderLogin.java
Unescape View File

@ -25,15 +25,18 @@ public class ReaderLogin extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 设置头文件
// 设置响应内容类型和字符编码
response.setContentType("application/json; charset=utf8");
PrintWriter out = response.getWriter();
// 获取账号密码
// 获取请求参数中的账号和密码
String user = request.getParameter("user");
String psw = request.getParameter("psw");
// 设置响应map
// 创建一个HashMap用于存储响应数据
HashMap<String, Object> hashMap = new HashMap<String, Object>();
// 创建Reader对象并调用其login方法进行登录验证
Reader reader = new Reader();
String result = null;
try {
@ -41,18 +44,23 @@ public class ReaderLogin extends HttpServlet {
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
}
// 根据登录结果设置响应数据
if (result != null && result.equals("1")) {
// 登录成功，创建会话并设置相关属性
HttpSession session = request.getSession();
session.setAttribute("reader", user);
session.setAttribute("reader_first", "1"); // 登录
hashMap.put("code", 0);
hashMap.put("msg", "登录成功");
hashMap.put("url", request.getContextPath() + "/reader/01main.jsp");
session.setAttribute("reader_first", "1"); // 标记为首次登录
hashMap.put("code", 0); // 状态码0表示成功
hashMap.put("msg", "登录成功"); // 提示信息
hashMap.put("url", request.getContextPath() + "/reader/01main.jsp"); // 跳转页面
} else {
hashMap.put("code", 1);
hashMap.put("msg", result);
// 登录失败，设置错误信息
hashMap.put("code", 1); // 状态码1表示失败
hashMap.put("msg", result); // 错误信息
}
// response.sendRedirect(request.getContextPath() +"/test.jsp");
// 将响应数据转换为JSON格式并输出
JSONObject json = JSONObject.fromObject(hashMap);
out.write(json.toString());

Write Preview
Loading…
Cancel
Save