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

代码注释_zhang #8

Closed
pscmholb5 wants to merge 1 commits from branch_zhang into develop
Conversation 0 Commits 1 Files Changed 23
23 changed files with 2207 additions and 2237 deletions
Show Stats Download Patch File Download Diff File

184
WebContent/admin/bookadd.jsp
Unescape View File

@ -1,149 +1,141 @@
<%@page import="java.sql.ResultSet"%>
<%@page import="javabean.JDBCBean"%>
<%@page import="java.sql.ResultSet"%> <!-- 导入Java SQL包中的ResultSet类 -->
<%@page import="javabean.JDBCBean"%> <!-- 导入自定义的JDBCBean类 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
pageEncoding="UTF-8"%> <!-- 设置页面语言为Java，内容类型和字符编码为UTF-8 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bookadd</title>
<meta charset="UTF-8"> <!-- 设置HTML文档的字符编码为UTF-8 -->
<title>bookadd</title> <!-- 设置网页标题 -->
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css">
<script src="../public/layui/layui.js"></script>
<link rel="stylesheet" href="../public/layui/css/layui.css"> <!-- 引入layui样式表 -->
<style>
.layui-form{
margin: 10px 20px;
margin: 10px 20px; /* 设置表单的外边距 */
}
</style>
</style>
</head>
<body>
<%
ResultSet librarySet = null;
ResultSet bookSortSet = null;
// 获取图书馆列表
JDBCBean db2 = new JDBCBean();
String librarySql = "select * from library";
librarySet = db2.executeQuery( librarySql );
// 获取书籍分类
JDBCBean db3 = new JDBCBean();
String bookSortSql = "select * from book_sort";
bookSortSet = db3.executeQuery( bookSortSql );
%>
<form class="layui-form layui-form-pane" action="">
<input type="id" name="id" value="3" class="layui-hide">
<%
ResultSet librarySet = null; //声明一个ResultSet对象用于存储图书馆数据
ResultSet bookSortSet = null; // 声明一个ResultSet对象用于存储书籍分类数据
// 获取图书馆列表
JDBCBean db2 = new JDBCBean(); // 创建JDBCBean对象db2
String librarySql = "select * from library"; // SQL查询语句，选择所有图书馆记录
librarySet = db2.executeQuery( librarySql ); // 执行SQL查询并将结果存储在librarySet中
// 获取书籍分类
JDBCBean db3 = new JDBCBean(); // 创建JDBCBean对象db3
String bookSortSql = "select * from book_sort"; // SQL查询语句，选择所有书籍分类记录
bookSortSet = db3.executeQuery( bookSortSql ); // 执行SQL查询并将结果存储在bookSortSet中
%>
<form class="layui-form layui-form-pane" action=""> <!-- 创建一个layui表单 -->
<input type="id" name="id" value="3" class="layui-hide"> <!-- 隐藏输入框，值为3 -->
<div class="layui-form-item">
<label class="layui-form-label">书名</label>
<label class="layui-form-label">书名</label> <!-- 书名标签 -->
<div class="layui-input-block">
<input type="text" name="name" required="" lay-verify="required" placeholder="请输入书名" autocomplete="off" class="layui-input">
<input type="text" name="name" required="" lay-verify="required" placeholder="请输入书名" autocomplete="off" class="layui-input"> <!-- 书名输入框 -->
</div>
</div>
<!-- 作者 -->
<div class="layui-form-item">
<label class="layui-form-label">作者</label>
<label class="layui-form-label">作者</label> <!-- 作者标签 -->
<div class="layui-input-block">
<input type="text" name="author" required lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input">
<input type="text" name="author" required lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input"> <!-- 作者输入框 -->
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">图书馆</label>
<label class="layui-form-label">图书馆</label> <!-- 图书馆标签 -->
<div class="layui-input-block">
<select name="library_id" lay-verify="required">
<option value=""></option>
<% while( librarySet.next() ){ %>
<option value=<%=librarySet.getString("id") %> ><%=librarySet.getString("name") %></option>
<select name="library_id" lay-verify="required"> <!-- 图书馆下拉选择框 -->
<option value=""></option> <!-- 空选项 -->
<% while( librarySet.next() ){ %> <!-- 遍历图书馆数据集 -->
<option value=<%=librarySet.getString("id") %> ><%=librarySet.getString("name") %></option> <!-- 生成每个图书馆选项 -->
<%} %>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">分类</label>
<div class="layui-form-item">
<label class="layui-form-label">分类</label> <!-- 分类标签 -->
<div class="layui-input-block">
<select name="sort_id" lay-verify="required">
<option value=""></option>
<% while(bookSortSet.next()){ %>
<option value=<%=bookSortSet.getInt("id") %> ><%=bookSortSet.getString("name") %></option>
<select name="sort_id" lay-verify="required"> <!-- 分类下拉选择框 -->
<option value=""></option> <!-- 空选项 -->
<% while(bookSortSet.next()){ %> <!-- 遍历书籍分类数据集 -->
<option value=<%=bookSortSet.getInt("id") %>><%=bookSortSet.getString("name") %></option> <!-- 生成每个分类选项 -->
<%} %>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">位置</label>
<label class="layui-form-label">位置</label> <!-- 位置标签 -->
<div class="layui-input-block">
<input type="text" name="position" required="" lay-verify="required" placeholder="请输入位置编号" autocomplete="off" class="layui-input">
<input type="text" name="position" required="" lay-verify="required" placeholder="请输入位置编号" autocomplete="off" class="layui-input"> <!-- 位置输入框 -->
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<label class="layui-form-label">状态</label> <!-- 状态标签 -->
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="可借" checked="checked"><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>可借</div></div>
<input type="radio" name="status" value="0" title="不可借"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>不可借</div></div>
<input type="radio" name="status" value="1" title="可借" checked="checked"><div class="layui-unselect layui-form-radio layui-form-radioed"><div>可借</div></div>
<input type="radio" name="status" value="0" title="不可借"><div class="layui-unselect layui-form-radio"><<div>不可借</div></div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">书籍简介</label>
<label class="layui-form-label">书籍简介</label> <!-- 书籍简介标签 -->
<div class="layui-input-block">
<textarea class="layui-textarea layui-hide" name="description" lay-verify="content" id="LAY_demo_editor"></textarea>
<textarea class="layui-textarea" name="description" lay-verify="content" id="LAY_demo_editor"></textarea> <!-- 书籍简介文本域 -->
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="bookForm">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<button class="layui-btn" lay-submit="" lay-filter="bookForm">立即提交</button> <!-- 提交按钮 -->
<button type="reset" class="layui-btn layui-btn-primary">重置</button> <!-- 重置按钮 -->
</div>
</div>
</form>
<script>
layui.use(['form', 'layedit', 'jquery'], function(){
//layer.closeAll();
$ = layui.jquery;
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit;
var editIndex = layedit.build('LAY_demo_editor');
// 自定义验证规则
form.verify({
// 解决富文本异步传输问题
content: function(value){
return layedit.sync(editIndex);
}
})
//监听提交
form.on('submit(bookForm)', function(data){
$.ajax({
url: './bookAdd',
method: 'post',
data: data.field, //JSON.stringify(data.field),
dataType: 'JSON',
success: function(data){
if(data.code == "0"){
parent.layer.msg("添加成功",{
icon: 6,
time: 500
});
setTimeout(function(){
//parent.location.reload();
var index = parent.layer.getFrameIndex(window.name); //操作父页面
parent.layer.close(index);
}, 500);
}else{
leyer.msg("添加失败");
}
}
})
return false;
});
});
<script src="../public/layui/layui.js"></script> <!-- 引入layui脚本文件 -->
<script>
layui.use(['form', 'jquery', 'layedit'], function(){
//layer.closeAll(); //关闭所有层
var form = layui.form,
layer = layui.layer,
$ = layui.jquery;
var editIndex = layedit.build('LAY_demo_editor'); //建立编辑器
// 自定义验证规则
form.verify({
content: function(value){ //解决富文本异步传输问题
return layedit.sync(editIndex);
}
});
//监听提交
form.on('submit(bookForm)', function(data){
$.ajax({
url: './bookAdd', //请求地址
method: 'post', //请求方式
data: data.field, //JSON.stringify(data), //发送的数据
dataType: 'JSON', //返回的数据类型
success: function(data){ //成功回调函数
if(data.code == "0"){
layer.msg("添加成功", {
icon: 1, //图标
time: 500 //显示时间
});
setTimeout(function(){
//parent.location.reload(); //操作父页面
var index = parent.layer.getFrameIndex(window.name); //获取当前操作窗口的索引
parent.layer.close(index); //关闭操作窗口
}, 500);
}else{
layer.msg("添加失败"); //失败提示信息
}
}
})
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
</script>
</body>
</html>

145
WebContent/admin/bookborrowlist.jsp
Unescape View File

@ -1,83 +1,82 @@
<%@page import="javabean.Util"%>
<%@page import="javabean.Base"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@page import="javabean.Util"%> <!-- 导入自定义的Util类 -->
<%@page import="javabean.Base"%> <!-- 导入自定义的Base类 -->
<%@page import="java.sql.ResultSet"%> <!-- 导入ResultSet类，用于处理SQL查询结果 -->
<%@page import="java.sql.PreparedStatement"%> <!-- 导入PreparedStatement类，用于执行预编译的SQL语句 -->
<%@page import="java.sql.Connection"%> <!-- 导入Connection类，用于建立数据库连接 -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!-- 设置页面语言为Java，内容类型为HTML，字符编码为UTF-8 -->
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html>
<head>
<meta charset="UTF-8">
<title>书籍借阅历史</title>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<script src="../public/layui/layui.js" charset="utf-8"></script>
<style>
.layui-table, .layui-table-view{
margin-top: 0px;
}
</style>
<meta charset="UTF-8"> <!-- 设置HTML文档的字符编码为UTF-8 -->
<title>书籍借阅历史</title> <!-- 设置网页标题 -->
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> <!-- 引入Layui样式表 -->
<style>
.layui-table, .layui-table-view{
margin-top: 0px; /* 设置表格顶部边距为0 */
}
</style>
</head>
<body>
<%
String id = request.getParameter("id");
String name = request.getParameter("name");
Connection connection = null;
PreparedStatement pstmt = null;
ResultSet resultSet = null;
String sql = "select * from borrow_books,borrow_card where book_id=? and card_id=borrow_card.id order by borrow_books.id desc";
connection = (Connection)Base.getConnection();
pstmt = connection.prepareStatement(sql);
pstmt.setString(1,id);
resultSet = pstmt.executeQuery();
String id = request.getParameter("id"); // 获取请求参数中的id
String name = request.getParameter("name"); // 获取请求参数中的name
Connection connection = null; // 初始化数据库连接对象
PreparedStatement pstmt = null; // 初始化预编译SQL语句对象
ResultSet resultSet = null; // 初始化结果集对象
String sql = "select * from borrow_books,borrow_card where book_id=? and card_id=borrow_card.id order by borrow_books.id desc"; // SQL查询语句
connection = (Connection)Base.getConnection(); // 获取数据库连接
pstmt = connection.prepareStatement(sql); // 创建预编译SQL语句对象
pstmt.setString(1,id); // 设置SQL语句中的第一个参数为id
resultSet = pstmt.executeQuery(); // 执行查询并获取结果集
/* while(resultSet.next()){
out.print(resultSet.getString("id"));
out.print(resultSet.getString("id")); // 输出结果集中的id字段
}*/
%>
<div class="layui-form">
<table class="layui-table">
<colgroup>
<col width="150">
<col width="150">
<col width="200">
<col width="200">
<col width="200">
<col width="200">
<col width="220">
<col width="200">
<col width="200">
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>书籍ID</th>
<th>书籍名</th>
<th>借阅证</th>
<th>借阅者</th>
<th>借阅时间</th>
<th>归还时间</th>
<th>违规信息</th>
<th>处理人</th>
</tr>
<%while(resultSet.next()){ %>
<tr>
<td><%=resultSet.getString("id") %></td>
<td><%=id %></td>
<td><%=name %></td>
<td><%=resultSet.getString("borrow_card.id") %></td>
<td><%=resultSet.getString("reader") %></td>
<td><%=Util.getFormatDateTime(resultSet.getString("borrow_date")) %></td>
<td><%=resultSet.getString("return_date") != null? Util.getFormatDateTime(resultSet.getString("return_date")) : "" %></td>
<td><%=resultSet.getString("illegal") != null? resultSet.getString("illegal") : "" %></td>
<td><%=resultSet.getString("manager_id") != null? resultSet.getString("manager_id") : "" %></td>
</tr>
<%} %>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
<div class="layui-form"> <!-- Layui表单容器 -->
<table class="layui-table"> <!-- Layui表格 -->
<colgroup>
<col width="150"> <!-- 定义列宽为150px -->
<col width="150"> <!-- 定义列宽为150px -->
<col width="200"> <!-- 定义列宽为200px -->
<col width="200"> <!-- 定义列宽为200px -->
<col width="200"> <!-- 定义列宽为200px -->
<col width="200"> <!-- 定义列宽为200px -->
<col width="220"> <!-- 定义列宽为220px -->
<col width="200"> <!-- 定义列宽为200px -->
<col width="200"> <!-- 定义列宽为200px -->
</colgroup>
<thead>
<tr>
<th>ID</th> <!-- 表头单元格：ID -->
<th>书籍ID</th> <!-- 表头单元格：书籍ID -->
<th>书籍名</th> <!-- 表头单元格：书籍名 -->
<th>借阅证</th> <!-- 表头单元格：借阅证 -->
<th>借阅者</th> <!-- 表头单元格：借阅者 -->
<th>借阅时间</th> <!-- 表头单元格：借阅时间 -->
<th>归还时间</th> <!-- 表头单元格：归还时间 -->
<th>违规信息</th> <!-- 表头单元格：违规信息 -->
<th>处理人</th> <!-- 表头单元格：处理人 -->
</tr>
<%while(resultSet.next()){ %> <!-- 遍历结果集 -->
<tr>
<td><%=resultSet.getString("id") %></td> <!-- 显示借阅记录的ID -->
<td><%=id %></td> <!-- 显示书籍ID -->
<td><%=name %></td> <!-- 显示书籍名 -->
<td><%=resultSet.getString("borrow_card.id") %></td> <!-- 显示借阅证ID -->
<td><%=resultSet.getString("reader") %></td> <!-- 显示借阅者 -->
<td><%=Util.getFormatDateTime(resultSet.getString("borrow_date")) %></td> <!-- 显示格式化后的借阅日期 -->
<td><%=resultSet.getString("return_date") != null? Util.getFormatDateTime(resultSet.getString("return_date")) : "" %></td> <!-- 显示格式化后的归还日期，如果为空则显示空字符串 -->
<td><%=resultSet.getString("illegal") != null? resultSet.getString("illegal") : "" %></td> <!-- 显示违规信息，如果为空则显示空字符串 -->
<td><%=resultSet.getString("manager_id") != null? resultSet.getString("manager_id") : "" %></td> <!-- 显示处理人ID，如果为空则显示空字符串 -->
</tr>
<%} %>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>
</html>

311
WebContent/admin/bookedit.jsp
Unescape View File

@ -1,180 +1,167 @@
<%@page import="javabean.JDBCBean"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="javabean.Admin"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="javabean.JDBCBean" %>
<%@ page import="java.sql.ResultSet" %>
<!DOCTYPE html>
<html lang="en">
<!-- 设置页面语言和编码 -->
<html lang="en" pageEncoding="UTF-8">
<head>
<meta charset="UTF-8">
<title>bookedit</title>
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css">
<script src="../public/layui/layui.js"></script>
<style>
.layui-form{
margin: 10px 20px;
}
</style>
<meta charset="UTF-8">
<title>bookedit</title>
<!-- layui样式 -->
<link rel="stylesheet" href="../public/layui/css/layui.css">
<style>
.layui-form{
margin: 10px 20px;
}
</style>
</head>
<body>
<%
JDBCBean db = new JDBCBean();
int id = Integer.parseInt(request.getParameter("id"));
ResultSet resultSet = null;
ResultSet librarySet = null;
ResultSet bookSortSet = null;
String sql = "select * from books where id=" +id ;
resultSet = db.executeQuery(sql);
resultSet.next();
String name = resultSet.getString("name");
String author = resultSet.getString("author");
int library_id = resultSet.getInt("library_id");
int sort_id = resultSet.getInt("sort_id");
String position = resultSet.getString("position");
int status = resultSet.getInt("status");
String description = resultSet.getString("description");
db.close();
// 获取图书馆列表
JDBCBean db2 = new JDBCBean();
String librarySql = "select * from library";
librarySet = db2.executeQuery( librarySql );
// 获取书籍分类
JDBCBean db3 = new JDBCBean();
String bookSortSql = "select * from book_sort";
bookSortSet = db3.executeQuery( bookSortSql );
%>
<form class="layui-form layui-form-pane" action="">
<%-- 隐藏id --%>
<input type="id" name="id" value=<%=id %> class="layui-hide">
<!-- 书名 -->
<div class="layui-form-item">
<label class="layui-form-label">书名</label>
<div class="layui-input-block">
<input type="text" name="name" value=<%=name %> required lay-verify="required" placeholder="请输入书名" autocomplete="off" class="layui-input">
<%
// 创建数据库操作对象
JDBCBean db = new JDBCBean();
// 获取请求参数中的id值，并转换为整数类型
int id = Integer.parseInt(request.getParameter("id"));
ResultSet resultSet = null;
ResultSet librarySet = null;
ResultSet bookSortSet = null;
// SQL查询语句，根据id查询书籍信息
String sql = "select * from books where id=" + id;
// 执行查询操作
resultSet = db.executeQuery(sql);
// 移动到结果集的第一行数据
resultSet.next();
// 获取书籍的各项属性值
String name = resultSet.getString("name");
String author = resultSet.getString("author");
int library_id = resultSet.getInt("library_id");
int sort_id = resultSet.getInt("sort_id");
String position = resultSet.getString("position");
int status = resultSet.getInt("status");
String description = resultSet.getString("description");
// 关闭数据库连接
db.close();
// 获取图书馆列表
JDBCBean db2 = new JDBCBean();
String librarySql = "select * from library";
librarySet = db2.executeQuery(librarySql);
// 获取书籍分类列表
JDBCBean db3 = new JDBCBean();
String bookSortSql = "select * from book_sort";
bookSortSet = db3.executeQuery(bookSortSql);
%>
<!-- 表单开始 -->
<form class="layui-form layui-form-pane " action="">
<!-- 隐藏id -->
<input type="id" name="id" value=<%=id %> class="layui-hide">
<!-- 书名 -->
<div class="layui-form-item">
<label class="layui-form-label">书名</label>
<div class="layui-input-block">
<input type="text" name="name" value=<%=name %> required lay-verify="required" placeholder="请输入书名" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<!-- 作者 -->
<div class="layui-form-item">
<label class="layui-form-label">作者</label>
<div class="layui-input-block">
<input type="text" name="author" value=<%=author %> required lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input">
<!-- 作者 -->
<div class="layui-form-item">
<label class="layui-form-label">作者</label>
<div class="layui-input-block">
<input type="text" name="author" value=<%=author %> required lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<!-- 图书馆 -->
<div class="layui-form-item">
<label class="layui-form-label">图书馆</label>
<div class="layui-input-block">
<select name="library_id" lay-verify="required">
<option value=""></option>
<% while( librarySet.next() ){ %>
<%-- 选中原来的 图书馆--%>
<option value=<%=librarySet.getString("id") %> <%if(Integer.parseInt(librarySet.getString("id")) == library_id){ out.print("selected"); } %> ><%=librarySet.getString("name") %></option>
<%} %>
</select>
<!-- 图书馆 -->
<div class="layui-form-item">
<label class="layui-form-label">图书馆</label>
<div class="layui-input-block">
<select name="library_id" lay-verify="required">
<option value=""></option>
<% while(librarySet.next()){ %>
<!-- 选中原来的图书馆 -->
<option value=<%=librarySet.getString("id") %> <%if(Integer.parseInt(librarySet.getString("id")) == library_id){ out.print("selected"); } %>><%=librarySet.getString("name") %></option>
<%} %>
</select>
</div>
</div>
</div>
<!-- 分类 -->
<div class="layui-form-item">
<label class="layui-form-label">分类</label>
<div class="layui-input-block">
<select name="sort_id" lay-verify="required">
<option value=""></option>
<% while(bookSortSet.next()){ %>
<option value=<%=bookSortSet.getInt("id") %> <% if(bookSortSet.getInt("id") == sort_id) out.print("selected"); %>><%=bookSortSet.getString("name") %></option>
<%} %>
</select>
<!-- 分类 -->
<div class="layui-form-item">
<label class="layui-form-label">分类</label>
<div class="layui-input-block">
<select name="sort_id" lay-verify="required">
<option value=""></option>
<% while(bookSortSet.next()){ %>
<!-- 选中原来的分类 -->
<option value=<%=bookSortSet.getInt("id") %> <% if(bookSortSet.getInt("id") == sort_id) out.print("selected"); %>><%=bookSortSet.getString("name") %></option>
<%} %>
</select>
</div>
</div>
</div>
<!-- 位置 -->
<div class="layui-form-item">
<label class="layui-form-label">位置</label>
<div class="layui-input-block">
<input type="text" name="position" value=<%=position %> required lay-verify="required" placeholder="请输入位置编号" autocomplete="off" class="layui-input">
<!-- 位置 -->
<div class="layui-form-item">
<label class="layui-form-label">位置</label>
<div class="layui-input-block">
<input type="text" name="position" value=<%=position %> required lay-verify="required" placeholder="请输入位置编号" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<!-- 位置 -->
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="可借" <%if(status==1) out.print("checked"); %>>
<input type="radio" name="status" value="0" title="不可借" <%if(status==0) out.print("checked"); %> >
<!-- 状态 -->
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="可借" <%if(status==1) out.print("checked"); %>>
<input type="radio" name="status" value="0" title="不可借" <%if(status==0) out.print("checked"); %> >
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">书籍简介</label>
<div class="layui-input-block">
<textarea class="layui-textarea layui-hide" name="description" lay-verify="content" id="LAY_demo_editor"><%=description %></textarea>
<!-- 书籍简介 -->
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">书籍简介</label>
<div class="layui-input-block">
<textarea class="layui-textarea" name="description" id="LAY_demo_editor"><%=description %></textarea>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
</form>
<script>
<!-- layui脚本 -->
layui.use(['form', 'jquery', 'layedit'], function(){
var $ = layui.jquery, form = layui.form, layer = layui.layer, layedit = layui.layedit;
var editIndex = layedit.build('LAY_demo_editor'); //建立编辑器
// 自定义验证规则
form.verify({
content: function(value){ //解决异步传输问题
return layedit.sync(editIndex);
}
})
//监听提交
form.on('submit(formDemo)', function(data){
$.ajax({
url: './bookEdit', //请求地址
method: 'post', //请求方式
data: data.field, //JSON.stringify(data.field), //请求数据
dataType: 'json', //返回数据类型
success: function(data){ //成功回调函数
if(data.code == "0"){ //判断修改是否成功
parent.layer.msg("修改成功", {icon: 6, time: 500}); //提示消息
setTimeout(function(){ //延时跳转页面
var index = parent.layer.getFrameIndex(window.name); //操作父页面
parent.layer.close(index); //关闭当前页面
}, 500);
}else{ //失败提示
layer.msg("修改失败"); //提示消息
}
layui.use(['form', 'layedit', 'jquery'], function(){
//layer.closeAll();
$ = layui.jquery;
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit;
var editIndex = layedit.build('LAY_demo_editor');
// 自定义验证规则
form.verify({
// 解决异步传输问题
content: function(value){
return layedit.sync(editIndex);
}
})
//监听提交
form.on('submit(formDemo)', function(data){
$.ajax({
url: './bookEdit',
method: 'post',
data: data.field, //JSON.stringify(data.field),
dataType: 'json',
success: function(data){
if(data.code == "0"){
parent.layer.msg("修改成功",{
icon: 6,
time: 500
});
setTimeout(function(){
var index = parent.layer.getFrameIndex(window.name); //操作父页面
parent.layer.close(index);
}, 500);
}else{
leyer.msg("修改失败");
}
}
})
return false;
});
}
})
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
</script>
<%
// 关闭资源
bookSortSet.close();
librarySet.close();
resultSet.close();
db.close();
// 关闭资源
bookSortSet.close(); //关闭书籍分类结果集
librarySet.close(); //关闭图书馆结果集
resultSet.close(); //关闭书籍信息结果集
db.close(); //关闭数据库连接
%>
</body>
</html>
</html>

452
WebContent/admin/booklist.jsp
Unescape View File

@ -1,244 +1,226 @@
<%@page import="net.sf.json.JSONObject"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="javabean.JDBCBean"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@page import="net.sf.json.JSONObject"%> // 导入JSON库
<%@page import="java.sql.ResultSet"%> // 导入SQL查询结果类
<%@page import="javabean.JDBCBean"%> // 导入自定义数据库连接类
<%@page import="java.util.Map"%> // 导入Map接口
<%@page import="java.util.HashMap"%> // 导入HashMap类
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
pageEncoding="UTF-8"%> // 设置页面编码为UTF-8
<!DOCTYPE html> <!-- HTML5文档类型声明 -->
<html lang="en"> <!-- 设置页面语言为英文 -->
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css">
<script src="../public/layui/layui.js"></script>
<style>
.layui-table, .layui-table-view{
margin-top: 0px;
}
</style>
<meta charset="UTF-8"> <!-- 设置页面字符集为UTF-8 -->
<title>test</title> <!-- 页面标题 -->
<!-- layui 样式文件 -->
<link rel="stylesheet" href="../public/layui/css/layui.css">
<script src="../public/layui/layui.js"></script> <!-- layui JavaScript文件 -->
<style>
.layui-table, .layui-table-view{
margin-top: 0px; <!-- 设置表格上方的外边距为0 -->
}
</style>
</head>
<body>
<%
JDBCBean libraryDb = new JDBCBean();
JDBCBean bookSortDb = new JDBCBean();
ResultSet librarySet = null;
ResultSet bookSortSet = null;
// 准备sql
String librarySql = "select * from library";
String bookSortSql = "select * from book_sort";
// 进行查询
librarySet = libraryDb.executeQuery( librarySql );
bookSortSet = bookSortDb.executeQuery( bookSortSql );
// 准备json
JSONObject libraryJson = new JSONObject();
JSONObject bookSortJson = new JSONObject();
// 遍历set
// 获取图书馆json
while( librarySet.next() ){
libraryJson.put(librarySet.getString("id") , librarySet.getString("name"));
}
// 获取分类json
while( bookSortSet.next() ){
bookSortJson.put(bookSortSet.getString("id") , bookSortSet.getString("name"));
}
librarySet.close();
libraryDb.close();
%>
<!-- 搜索框 -->
<script type="text/html" id="search">
<div class="demoTable">
<%
JDBCBean libraryDb = new JDBCBean(); // 创建JDBCBean对象用于连接数据库
JDBCBean bookSortDb = new JDBCBean(); // 创建JDBCBean对象用于连接数据库
ResultSet librarySet = null; // 定义ResultSet变量，用于存放查询结果
ResultSet bookSortSet = null; // 定义ResultSet变量，用于存放查询结果
// 准备sql查询语句
String librarySql = "select * from library"; // 查询所有图书馆信息
String bookSortSql = "select * from book_sort"; // 查询所有书籍分类信息
// 执行查询
librarySet = libraryDb.executeQuery(librarySql); // 执行查询图书馆
bookSortSet = bookSortDb.executeQuery(bookSortSql); // 执行查询书籍分类
// 创建JSON对象
JSONObject libraryJson = new JSONObject(); // 用于存放图书馆数据的JSON对象
JSONObject bookSortJson = new JSONObject(); // 用于存放书籍分类数据的JSON对象
// 遍历查询结果集并将数据加入到JSON对象
// 获取图书馆信息并存入JSON对象
while( librarySet.next() ){
libraryJson.put(librarySet.getString("id"), librarySet.getString("name")); // 将图书馆的id和name加入到JSON对象
}
// 获取书籍分类信息并存入JSON对象
while( bookSortSet.next() ){
bookSortJson.put(bookSortSet.getString("id"), bookSortSet.getString("name")); // 将分类的id和name加入到JSON对象
}
librarySet.close(); // 关闭图书馆查询结果集
libraryDb.close(); // 关闭数据库连接
%>
<!-- 搜索框模板 -->
<script type="text/html" id="search">
<div class="demoTable">
条件搜索：
<div class="layui-inline">
<select id="condition" name="condition" lay-verify="required">
<option value=""></option>
<option value="id">ID</option>
<option value="name">书名</option>
<option value="author">作者</option>
<option value="library_id">图书馆</option>
<option value="position">位置</option>
<option value="status">状态</option>
<option value="description">描述</option>
</select>
</div>
<div class="layui-inline">
<input class="layui-input" name="conditionValue" id="conditionValue" autocomplete="off" placeholder="请输入搜索内容">
</div>
<button class="layui-btn" data-type="reload" lay-event="search">搜索</button>
<button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">添加书籍</i></button>
<div class="layui-inline">
<select id="condition" name="condition" lay-verify="required"> <!-- 条件选择下拉框 -->
<option value=""></option>
<option value="id">ID</option>
<option value="name">书名</option>
<option value="author">作者</option>
<option value="library_id">图书馆</option>
<option value="position">位置</option>
<option value="status">状态</option>
<option value="description">描述</option>
</select>
</div>
<div class="layui-inline">
<input class="layui-input" name="conditionValue" id="conditionValue" autocomplete="off" placeholder="请输入搜索内容"> <!-- 搜索内容输入框 -->
</div>
<button class="layui-btn" data-type="reload" lay-event="search">搜索</button> <!-- 搜索按钮 -->
<button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">添加书籍</i></button> <!-- 添加书籍按钮 -->
</div>
</script>
<!-- 表单 -->
<table id="demo" lay-filter="form">
</table>
<!-- 行操作 -->
<script type="text/html" id="operateBar">
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="bookBorrowList">查看借阅</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
// 图书馆json
var libraryJson = <%=libraryJson %>
// 图书分类json
var bookSortJson = <%=bookSortJson %>
</script>
<!-- 状态模板 -->
<script type="text/html" id="statusTpl">
{{# if(d.status == 1){ }}
<span style="color:#5FB878;">可借</span>
{{# } else { }}
借出
{{# } }}
</script>
<script>
layui.use(['table', 'jquery'],function(){
$ = layui.jquery;
var table = layui.table;
var tableIns = table.render({
elem: '#demo'
,height: 600
,url: './bookList'
,title: '数据表单'
,toolbar: '#search'
,page: true
,cols: [[
{type: 'numbers', width:50, fixed:'left'}
,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'name', title: '书名', width:170, sort: true}
,{field: 'author', title: '作者', width: 140, sort: true}
,{field: 'library_id', title: '图书馆†', width:80, edit: true //,templet: '#libraryTemp'}
,templet: function(d){
return libraryJson[d.library_id];
}}
,{field: 'sort_id', title: '分类', width: 80, sort: true, edit:true
,templet: function(d){
return bookSortJson[d.sort_id];
}}
,{field: 'position', title: '位置', width: 110, sort: true}
,{field: 'status', title: '状态', width: 60, templet:'#statusTpl'}
,{field: 'description', title: '描述', width: 340}
,{fixed: 'right', title:'操作', width: 200, align:'center', toolbar: '#operateBar'} //这里的toolbar值是模板元素的选择器
]]
});
// 直接编辑
table.on('edit(form)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
console.log(obj.value); //得到修改后的值
console.log(obj.field); //当前编辑的字段名
console.log(obj.data); //所在行的所有相关数据
});
// 监听侧边工具条 编辑，删除
table.on('tool(form)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
var id = data.id;
var name = data.name;
if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
layer.close(index);
//向服务端发送删除指令
$.ajax({
url: './bookDel',
method: 'get',
dataType: 'JSON',
data: "id=" +id,
success: function(data){
if(data.code == 0){
layer.msg(data.msg);
$('.layui-laypage-btn').click();
}else{
layer.msg(data.msg);
}
}
})
});
} else if(layEvent === 'edit'){ //编辑
// 页面编辑
layer.open({
type: 2,
title: "更改信息",
area: ['800px', '600px'],
maxmin: true, //开启最大化最小化按钮
shadeClose: true,
content: "bookedit.jsp?id="+ id,
end: function(){
$(".layui-laypage-btn").click();
}
</script>
<!-- 表单 -->
<table id="demo" lay-filter="form"> <!-- 表格渲染容器 -->
</table>
<!-- 操作栏模板 -->
<script type="text/html" id="operateBar">
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="bookBorrowList">查看借阅</a> <!-- 查看借阅历史 -->
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <!-- 编辑书籍信息 -->
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> <!-- 删除书籍 -->
</script>
<script>
// 图书馆数据转为JSON格式
var libraryJson = <%=libraryJson %> // 获取服务器端传来的图书馆JSON数据
// 书籍分类数据转为JSON格式
var bookSortJson = <%=bookSortJson %> // 获取服务器端传来的书籍分类JSON数据
</script>
<!-- 状态模板 -->
<script type="text/html" id="statusTpl">
{{# if(d.status == 1){ }}
<span style="color:#5FB878;">可借</span> <!-- 状态为1，显示可借 -->
{{# } else { }}
借出 <!-- 状态为其他，显示借出 -->
{{# } }}
</script>
<script>
layui.use(['table', 'jquery'],function(){
$ = layui.jquery; // 引入jquery库
var table = layui.table; // 引入layui表格组件
var tableIns = table.render({
elem: '#demo' // 表格容器id
,height: 600 // 表格高度
,url: './bookList' // 数据请求接口
,title: '数据表单' // 表格标题
,toolbar: '#search' // 顶部工具栏
,page: true // 开启分页功能
,cols: [[
{type: 'numbers', width:50, fixed:'left'} // 序号列
,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} // ID列
,{field: 'name', title: '书名', width:170, sort: true} // 书名列
,{field: 'author', title: '作者', width: 140, sort: true} // 作者列
,{field: 'library_id', title: '图书馆', width:80, edit: true // 图书馆列，可编辑
,templet: function(d){
return libraryJson[d.library_id]; // 根据图书馆ID从JSON中取出名称
}}
,{field: 'sort_id', title: '分类', width: 80, sort: true, edit:true // 分类列，可编辑
,templet: function(d){
return bookSortJson[d.sort_id]; // 根据分类ID从JSON中取出名称
}}
,{field: 'position', title: '位置', width: 110, sort: true} // 位置列
,{field: 'status', title: '状态', width: 60, templet:'#statusTpl'} // 状态列，使用模板
,{field: 'description', title: '描述', width: 340} // 描述列
,{fixed: 'right', title:'操作', width: 200, align:'center', toolbar: '#operateBar'} // 操作列，使用工具栏模板
]],
});
// 监听表格的编辑事件
table.on('edit(form)', function(obj){ // 表格编辑事件
console.log(obj.value); // 打印修改后的值
console.log(obj.field); // 打印编辑字段名
console.log(obj.data); // 打印所在行数据
});
// 监听操作栏的事件（编辑、删除、查看借阅）
table.on('tool(form)', function(obj){ // 表格工具栏事件
var data = obj.data; // 获取当前行数据
var layEvent = obj.event; // 获取事件名
var tr = obj.tr; // 获取当前行的DOM对象
var id = data.id; // 获取书籍ID
var name = data.name; // 获取书籍名称
if(layEvent === 'del'){ // 删除事件
layer.confirm('真的删除行么', function(index){
layer.close(index); // 关闭确认框
// 向服务器发送删除请求
$.ajax({
url: './bookDel',
method: 'get',
dataType: 'JSON',
data: "id=" +id,
success: function(data){
if(data.code == 0){
layer.msg(data.msg); // 显示删除成功消息
$('.layui-laypage-btn').click(); // 刷新分页
}else{
layer.msg(data.msg); // 显示错误消息
}
}
})
});
} else if(layEvent === 'edit'){ // 编辑事件
// 打开编辑页面
layer.open({
type: 2,
title: "更改信息",
area: ['800px', '600px'],
maxmin: true, // 开启最大化最小化按钮
shadeClose: true,
content: "bookedit.jsp?id="+ id, // 编辑页面
end: function(){
$(".layui-laypage-btn").click(); // 关闭后刷新页面
}
});
}else if(layEvent === 'bookBorrowList') { //查看该书籍借阅历史
layer.open({
title: '书籍借阅历史',
type: 2,
area: ['800px', '600px'],
maxmin: true,
shadeClose: true,
content: "bookborrowlist.jsp?id=" +id +"&name="+name
})
}
});
// 顶部工具栏事件
table.on('toolbar(form)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
var data = obj.data;
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 addBookLayer = layer.open({
type: 2,
title: "添加书籍",
area: ['800px', '600px'],
maxmin: true, //开启最大化最小化按钮
shadeClose: true,
content: "bookadd.jsp",
end: function () {
console.log("finish add");
$(".layui-laypage-btn").click();
}
});
layer.full(addBookLayer);
break;
};
});
}else if(layEvent === 'bookBorrowList') { // 查看借阅历史
// 打开借阅历史页面
layer.open({
title: '书籍借阅历史',
type: 2,
area: ['800px', '600px'],
maxmin: true,
shadeClose: true,
content: "bookborrowlist.jsp?id=" +id +"&name="+name // 借阅历史页面
})
}
});
// 顶部工具栏的事件（搜索、添加书籍）
table.on('toolbar(form)', function(obj){
var checkStatus = table.checkStatus(obj.config.id); // 获取选中的行
var data = obj.data;
switch(obj.event){
// 搜索
case 'search':
var conditionValue = $('#conditionValue'); // 获取搜索框的值
var condition = $('#condition'); // 获取搜索条件
// 重新加载表格数据
tableIns.reload({
where: { // 设置异步请求参数
"condition": condition.val(),
"conditionValue": conditionValue.val()
}
,page: {
curr: 1 // 从第一页开始加载
}
});
break;
// 添加书籍
case 'add':
// 打开添加书籍页面
var addBookLayer = layer.open({
type: 2,
title: "添加书籍",
area: ['800px', '600px'],
maxmin: true, // 开启最大化最小化按钮
shadeClose: true,
content: "bookadd.jsp", // 添加页面
end: function () {
$(".layui-laypage-btn").click(); // 关闭后刷新分页
}
});
layer.full(addBookLayer); // 最大化页面
break;
};
});
</script>
});
</script>
</body>
</html>
</html>

87
WebContent/admin/booklist_1.jsp
Unescape View File

@ -1,54 +1,51 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
pageEncoding="UTF-8"%> // 设置页面的语言为Java，字符编码为UTF-8,设置页面的编码为UTF-8
<!DOCTYPE html> <!-- 声明HTML文档类型为HTML5 -->
<html lang="en"> <!-- 设置网页的语言为英语 -->
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css">
<script src="../public/layui/layui.js"></script>
<style>
.layui-table{
margin-top: 0px;
}
</style>
<meta charset="UTF-8"> <!-- 设置字符集为UTF-8，确保正确显示中文等字符 -->
<title>test</title> <!-- 设置网页的标题为“test” -->
<!-- 引入layui样式 -->
<link rel="stylesheet" href="../public/layui/css/layui.css"> <!-- 引入layui的CSS文件 -->
<script src="../public/layui/layui.js"></script> <!-- 引入layui的JavaScript文件 -->
<style>
.layui-table{ // 自定义样式，设置layui表格的外边距
margin-top: 0px; // 设置表格的上外边距为0
}
</style>
</head>
<body>
<table id="demo" lay-filter="test">
</table>
<script type="text/html" id="operate">
<button type="button" class="layui-btn layui-btn-warm">修改</button>
<button type="button" class="layui-btn layui-btn-danger">删除</button>
<table id="demo" lay-filter="test"> <!-- 创建一个表格，id为demo，lay-filter属性指定表格的过滤器 -->
</table>
<script type="text/html" id="operate"> <!-- 定义一个操作模板，用于在表格的每行展示操作按钮 -->
<button type="button" class="layui-btn layui-btn-warm">修改</button> <!-- 修改按钮 -->
<button type="button" class="layui-btn layui-btn-danger">删除</button> <!-- 删除按钮 -->
</script>
<script>
layui.use('table', function(){
var table = layui.table;‹
table.render({
elem: '#demo'
,height: 600
//,url: './data.json'
,url: './bookList'
,title: '数据表单'
,toolbar: true
,page: true
,size: 'lg'
,cols: [[
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'name', title: '姓名', width:120}
,{field: 'library_name', title: '图书馆†', width:80}
,{field: 'sort_id', title: '分类', width: 177}
,{field: 'position_id', title: '位置', width: 80, sort: true}
,{field: 'state', title: '状态', width: 80, sort: true}
,{field: 'descript', title: '描述', width: 80}
,{field: 'operate', title: '操作', width: 200, templet: '#operate'}
]]
});
});
layui.use('table', function(){ // 使用layui的table组件
var table = layui.table; // 获取table组件实例
table.render({ // 渲染表格
elem: '#demo' // 表格容器的选择器
,height: 600 // 设置表格的高度为600px
//,url: './data.json' // 这里是一个注释掉的代码，表示数据源可以是JSON文件
,url: './bookList' // 设置表格数据的接口地址
,title: '数据表单' // 设置表格的标题为“数据表单”
,toolbar: true // 启用表格的工具栏
,page: true // 启用分页功能
,size: 'lg' // 设置表格的尺寸为“大”
,cols: [[ // 定义表格的列
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} // ID列，宽度为80，支持排序，固定在左侧
,{field: 'name', title: '姓名', width:120} // 姓名列，宽度为120
,{field: 'library_name', title: '图书馆†', width:80} // 图书馆列，宽度为80
,{field: 'sort_id', title: '分类', width: 177} // 分类列，宽度为177
,{field: 'position_id', title: '位置', width: 80, sort: true} // 位置列，宽度为80，支持排序
,{field: 'state', title: '状态', width: 80, sort: true} // 状态列，宽度为80，支持排序
,{field: 'descript', title: '描述', width: 80} // 描述列，宽度为80
,{field: 'operate', title: '操作', width: 200, templet: '#operate'} // 操作列，宽度为200，使用之前定义的操作模板
]]
});
});
</script>
</table>
</body>
</html>
</html>

161
WebContent/admin/borrowlist.jsp
Unescape View File

@ -1,92 +1,89 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
pageEncoding="UTF-8"%> // 设置页面的语言为Java，字符编码为UTF-8,设置页面的编码为UTF-8
<!DOCTYPE html> <!-- 声明HTML文档类型为HTML5 -->
<html lang="en"> <!-- 设置网页的语言为英语 -->
<head>
<meta charset="UTF-8">
<title>借阅记录</title>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<meta charset="UTF-8"> <!-- 设置字符集为UTF-8，确保中文字符正确显示 -->
<title>借阅记录</title> <!-- 设置网页的标题为“借阅记录” -->
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> <!-- 引入layui的CSS文件 -->
<style>
.layui-table,.layui-table-view{
margin: 0 0px;
.layui-table,.layui-table-view{ // 自定义样式，设置layui表格的外边距
margin: 0 0px; // 设置表格的上下外边距为0
}
</style>
</head>
<body>
<script src="../public/layui/layui.js" charset="utf-8"></script>
<!-- 表单 -->
<table class="layui-hide" id="history" 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="other">超期未还</option>
<option value="id">ID</option>
<option value="card_id">借阅证号</option>
<option value="book_id">书籍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" 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: '#history'
,url:'./borrowList'
,toolbar: '#headBar'
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'card_id', width:180, title: '借阅证号'}
,{field:'book_id', width:100, title: '书籍ID', sort: true}
,{field:'borrow_date', width:180, title: '借阅时间'}
,{field:'end_date', title: '限定时间', width: 180}
,{field:'return_date', width:180, title: '归还时间', sort: true}
,{field:'illegal', minWidth:280, title: '违章信息', sort: true}
,{field:'manager_id', width:80, title: '处理人'}
]]
,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;
};
<script src="../public/layui/layui.js" charset="utf-8"></script> <!-- 引入layui的JavaScript文件 -->
<!-- 表单 -->
<table class="layui-hide" id="history" lay-filter="formFilter"></table> <!-- 创建一个表格，id为history，lay-filter属性指定表格的过滤器 -->
<!-- 头部工具栏 -->
<script type="text/html" id="headBar"> <!-- 定义一个条件搜索的工具栏模板 -->
条件搜索：
<div class="layui-inline"> <!-- 条件选择框 -->
<select id="condition" name="condition" lay-verify="required"> <!-- 下拉选择框，要求选择条件 -->
<option value=""></option> <!-- 默认空值选项 -->
<option value="other">超期未还</option> <!-- 超期未还选项 -->
<option value="id">ID</option> <!-- ID选项 -->
<option value="card_id">借阅证号</option> <!-- 借阅证号选项 -->
<option value="book_id">书籍ID</option> <!-- 书籍ID选项 -->
<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" name="condition" data-type="reload" lay-event="search">搜索</button> <!-- 搜索按钮 -->
</script>
<script>
layui.use(['table','jquery'], function(){ // 使用layui的table和jquery模块
$ = layui.jquery; // 获取jQuery对象
var table = layui.table; // 获取table组件实例
// 进行渲染
var tableIns = table.render({
elem: '#history' // 表格容器的选择器
,url:'./borrowList' // 设置表格数据的接口地址
,toolbar: '#headBar' // 设置表格的工具栏，使用之前定义的headBar模板
,cols: [[ // 定义表格的列
{field:'id', width:80, title: 'ID', sort: true} // ID列，宽度为80，支持排序
,{field:'card_id', width:180, title: '借阅证号'} // 借阅证号列，宽度为180
,{field:'book_id', width:100, title: '书籍ID', sort: true} // 书籍ID列，宽度为100，支持排序
,{field:'borrow_date', width:180, title: '借阅时间'} // 借阅时间列，宽度为180
,{field:'end_date', title: '限定时间', width: 180} // 限定时间列，宽度为180
,{field:'return_date', width:180, title: '归还时间', sort: true} // 归还时间列，宽度为180，支持排序
,{field:'illegal', minWidth:280, title: '违章信息', sort: true} // 违章信息列，最小宽度为280，支持排序
,{field:'manager_id', width:80, title: '处理人'} // 处理人列，宽度为80
]]
,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;
};
});
});
</script>
</script>
</body>
</html>
</html>

180
WebContent/admin/cardadd.jsp
Unescape View File

@ -1,117 +1,115 @@
<%@page import="javabean.Base"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%@page import="javabean.Admin"%>
<%@page import="javabean.Base"%> <!-- 导入javabean.Base类 -->
<%@page import="java.sql.ResultSet"%> <!-- 导入ResultSet类，处理SQL查询结果 -->
<%@page import="java.sql.PreparedStatement"%> <!-- 导入PreparedStatement类，用于执行SQL语句 -->
<%@page import="java.sql.Connection"%> <!-- 导入Connection类，表示数据库连接 -->
<%@page import="net.sf.json.JSONObject"%> <!-- 导入JSONObject类，用于处理JSON对象 -->
<%@page import="net.sf.json.JSONArray"%> <!-- 导入JSONArray类，用于处理JSON数组 -->
<%@page import="javabean.Admin"%> <!-- 导入javabean.Admin类 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
pageEncoding="UTF-8"%> <!-- 设置页面的语言为Java，字符编码为UTF-8,设置页面的编码为UTF-8 -->
<!DOCTYPE html> <!-- 声明HTML5文档类型 -->
<html> <!-- 开始HTML文档 -->
<head>
<meta charset="UTF-8">
<title>图书证修改</title>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<script src="../public/layui/layui.js" charset="utf-8"></script>
<style>
.layui-form{
margin: 10px 20px;
}
</style>
<meta charset="UTF-8"> <!-- 设置页面字符编码为UTF-8 -->
<title>图书证修改</title> <!-- 设置页面标题为“图书证修改” -->
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> <!-- 引入layui的CSS文件 -->
<script src="../public/layui/layui.js" charset="utf-8"></script> <!-- 引入layui的JS文件 -->
<style>
.layui-form{ <!-- 定义layui表单样式 -->
margin: 10px 20px; <!-- 设置表单的外边距为10px 20px -->
}
</style>
</head>
<body>
<%
Connection connection = null;
PreparedStatement pstmt = null;
ResultSet ruleSet = null;
String sql = "select * from rules";
String result = "";
connection = (Connection)Base.getConnection();
pstmt = connection.prepareStatement(sql);
ruleSet = pstmt.executeQuery();
Connection connection = null; // 声明数据库连接对象
PreparedStatement pstmt = null; // 声明PreparedStatement对象
ResultSet ruleSet = null; // 声明ResultSet对象，用于存储查询结果
String sql = "select * from rules"; // 定义SQL查询语句
String result = ""; // 定义结果字符串
connection = (Connection)Base.getConnection(); // 获取数据库连接
pstmt = connection.prepareStatement(sql); // 创建PreparedStatement对象并执行SQL查询
ruleSet = pstmt.executeQuery(); // 执行查询并返回结果集
%>
<form class="layui-form layui-form-pane" action="" lay-filter="cardFilter">
<form class="layui-form layui-form-pane" action="" lay-filter="cardFilter"> <!-- 定义表单，layui样式 -->
<!-- 姓名 -->
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="reader" lay-verify="required" autocomplete="off" placeholder="请输入姓名" class="layui-input">
<div class="layui-form-item"> <!-- 表单项 -->
<label class="layui-form-label">姓名</label> <!-- 表单标签 -->
<div class="layui-input-block"> <!-- 表单输入框 -->
<input type="text" name="reader" lay-verify="required" autocomplete="off" placeholder="请输入姓名" class="layui-input"> <!-- 输入框，必须填写 -->
</div>
</div>
<!-- 密码 -->
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input" lay-verify="required">
<div class="layui-form-item"> <!-- 表单项 -->
<label class="layui-form-label">密码</label> <!-- 表单标签 -->
<div class="layui-input-block"> <!-- 表单输入框 -->
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input" lay-verify="required"> <!-- 输入框，密码字段，必须填写 -->
</div>
</div>
<!-- 借阅规则 -->
<div class="layui-form-item">
<label class="layui-form-label">规则</label>
<div class="layui-input-block">
<select name="rule_id" lay-filter="rule_id" lay-verify="required">
<% while(ruleSet.next()){ %>
<option value=<%=ruleSet.getString("id") %>><%=ruleSet.getString("id") %></option>
<div class="layui-form-item"> <!-- 表单项 -->
<label class="layui-form-label">规则</label> <!-- 表单标签 -->
<div class="layui-input-block"> <!-- 表单输入框 -->
<select name="rule_id" lay-filter="rule_id" lay-verify="required"> <!-- 下拉框，规则选择，必须选择 -->
<% while(ruleSet.next()){ %> <!-- 循环遍历查询结果 -->
<option value=<%=ruleSet.getString("id") %>><%=ruleSet.getString("id") %></option> <!-- 为每个规则生成一个选项 -->
<%} %>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="可用" checked="">
<input type="radio" name="status" value="0" title="挂失">
<div class="layui-form-item"> <!-- 表单项 -->
<label class="layui-form-label">状态</label> <!-- 表单标签 -->
<div class="layui-input-block"> <!-- 表单输入框 -->
<input type="radio" name="status" value="1" title="可用" checked=""> <!-- 单选按钮，表示“可用”状态 -->
<input type="radio" name="status" value="0" title="挂失"> <!-- 单选按钮，表示“挂失”状态 -->
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="submitForm">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<div class="layui-form-item"> <!-- 表单项 -->
<div class="layui-input-block"> <!-- 表单输入框 -->
<button class="layui-btn" lay-submit="" lay-filter="submitForm">立即提交</button> <!-- 提交按钮，点击时触发submitForm事件 -->
<button type="reset" class="layui-btn layui-btn-primary">重置</button> <!-- 重置按钮，清空表单内容 -->
</div>
</div>
</form>
<script>
layui.use(['form', 'jquery'], function(){
var form = layui.form
,layer = layui.layer;
$ = layui.jquery;
// 提交表单
form.on('submit(submitForm)', function(data){
$.ajax({
url: './cardAdd',
method: 'post',
data: data.field,
dataType: 'json',
success: function(data){
if(data.code == "0"){
parent.layer.open({
title: '注册账号为',
content: data.data['id'],
end: function(){
//parent.location.reload();
var index = parent.layer.getFrameIndex(window.name); //操作父页面
parent.layer.close(index);
}
});
/*setTimeout(function(){
}, 500);*/
}else{
leyer.msg("添加失败");
}
}
});
return false;
})
});
layui.use(['form', 'jquery'], function(){ // 使用layui的form和jquery模块
var form = layui.form // 获取form模块实例
,layer = layui.layer; // 获取layer模块实例
$ = layui.jquery; // 获取jQuery对象
// 提交表单
form.on('submit(submitForm)', function(data){ // 当提交表单时，触发submitForm事件
$.ajax({ // 发送AJAX请求
url: './cardAdd', // 请求的URL地址
method: 'post', // 请求方法为POST
data: data.field, // 提交表单数据
dataType: 'json', // 返回数据的格式为JSON
success: function(data){ // 请求成功后的回调函数
if(data.code == "0"){ // 如果返回的状态码为“0”
parent.layer.open({ // 打开父窗口的弹出层
title: '注册账号为', // 弹出层的标题
content: data.data['id'], // 弹出层显示返回的数据（图书证的ID）
end: function(){ // 弹出层关闭时触发
//parent.location.reload(); // 刷新父页面（已注释掉）
var index = parent.layer.getFrameIndex(window.name); // 获取当前iframe的索引
parent.layer.close(index); // 关闭当前iframe
}
});
}else{
leyer.msg("添加失败"); // 如果状态码不是“0”，显示失败消息（有拼写错误，应为"layer.msg"）
}
}
});
return false; // 阻止表单默认提交
})
});
</script>
</body>
</html>
</html>

155
WebContent/admin/cardborrow.jsp
Unescape View File

@ -1,83 +1,90 @@
<%@page import="javabean.Util"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="javabean.Base"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="javabean.JDBCBean"%>
<%@page import="javabean.Util"%> <!-- 导入Util类，用于处理日期等工具类 -->
<%@page import="java.sql.PreparedStatement"%> <!-- 导入PreparedStatement类，用于执行SQL语句 -->
<%@page import="java.sql.Connection"%> <!-- 导入Connection类，用于建立数据库连接 -->
<%@page import="javabean.Base"%> <!-- 导入Base类，可能包含数据库连接的获取方法 -->
<%@page import="java.sql.ResultSet"%> <!-- 导入ResultSet类，用于存储查询结果 -->
<%@page import="javabean.JDBCBean"%> <!-- 导入JDBCBean类，用于数据库操作（未使用，可能是冗余） -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
pageEncoding="UTF-8"%> <!-- 设置页面语言为Java，字符编码为UTF-8,设置页面的字符编码为UTF-8 -->
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html> <!-- 开始HTML文档 -->
<head>
<meta charset="UTF-8">
<title>借阅证借阅记录</title>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<script src="../public/layui/layui.js" charset="utf-8"></script>
<style>
.layui-table,.layui-table-view{
margin: 0 0px;
}
</style>
<meta charset="UTF-8"> <!-- 设置页面字符编码为UTF-8 -->
<title>借阅证借阅记录</title> <!-- 设置页面标题为“借阅证借阅记录” -->
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> <!-- 引入layui的CSS文件 -->
<script src="../public/layui/layui.js" charset="utf-8"></script> <!-- 引入layui的JS文件 -->
<style>
.layui-table,.layui-table-view{ <!-- 定义表格样式 -->
margin: 0 0px; <!-- 设置表格的外边距为0 -->
}
</style>
</head>
<body>
<%
String id = request.getParameter("id");
Connection connection = (Connection)Base.getConnection();
String sql = "select * from borrow_books,books where card_id=? and borrow_books.book_id = books.id";
PreparedStatement pstmt = connection.prepareStatement(sql);
pstmt.setString(1, id);
ResultSet resultSet = null;
resultSet = pstmt.executeQuery();
// 获取请求参数"id"（即借阅证号）
String id = request.getParameter("id");
// 获取数据库连接
Connection connection = (Connection)Base.getConnection();
// 定义SQL查询语句，查询借阅记录和对应书籍信息
String sql = "select * from borrow_books,books where card_id=? and borrow_books.book_id = books.id";
// 创建PreparedStatement对象，准备执行查询语句
PreparedStatement pstmt = connection.prepareStatement(sql);
// 设置SQL语句中的占位符参数
pstmt.setString(1, id);
// 执行查询，获取结果集
ResultSet resultSet = null;
resultSet = pstmt.executeQuery();
%>
<div class="layui-form">
<table class="layui-table">
<colgroup>
<col width="150">
<col width="150">
<col width="200">
<col width="200">
<col width="200">
<col width="200">
<col width="220">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>书籍ID</th>
<th>书籍名</th>
<th>借阅时间</th>
<th>截止时间</th>
<th>归还时间</th>
<th>违规信息</th>
<th>处理人</th>
</tr>
</thead>
<tbody>
<%
System.out.println(Util.getCurrentTimeString());
%>
<% while(resultSet.next()){ %>
<%-- 图书超期 --%>
<%if(Util.getFormatDateTime(resultSet.getString("end_date")).compareTo(Util.getCurrentTimeString()) < 0 && resultSet.getString("return_date") == null){ %>
<tr style="color:#FF5722;">
<%} else{ %>
<tr>
<%} %>
<td><%=resultSet.getString("card_id") %></td>
<td><%=resultSet.getString("book_id") %></td>
<td><%=resultSet.getString("books.name") %></td>
<td><%=Util.getFormatDateTime(resultSet.getString("borrow_date")) %></td>
<td><%=Util.getFormatDateTime(resultSet.getString("end_date"))%></td>
<td><%=resultSet.getString("return_date")!=null?Util.getFormatDateTime(resultSet.getString("return_date")) : "未归还" %></td>
<td><%=resultSet.getString("illegal")!=null?resultSet.getString("illegal"):""%></td>
<td><%=resultSet.getString("manager_id")!=null?resultSet.getString("manager_id"):"" %></td>
</tr>
<%} %>
</tbody>
</table>
<table class="layui-table"> <!-- 创建layui样式的表格 -->
<colgroup> <!-- 设置列宽 -->
<col width="150">
<col width="150">
<col width="200">
<col width="200">
<col width="200">
<col width="200">
<col width="220">
<col width="200">
<col> <!-- 最后一列自动调整宽度 -->
</colgroup>
<thead>
<tr>
<th>ID</th> <!-- 列标题：ID -->
<th>书籍ID</th> <!-- 列标题：书籍ID -->
<th>书籍名</th> <!-- 列标题：书籍名 -->
<th>借阅时间</th> <!-- 列标题：借阅时间 -->
<th>截止时间</th> <!-- 列标题：截止时间 -->
<th>归还时间</th> <!-- 列标题：归还时间 -->
<th>违规信息</th> <!-- 列标题：违规信息 -->
<th>处理人</th> <!-- 列标题：处理人 -->
</tr>
</thead>
<tbody>
<%
// 输出当前时间，用于调试
System.out.println(Util.getCurrentTimeString());
%>
<% while(resultSet.next()){ %> <!-- 循环遍历查询结果集 -->
<%-- 判断借阅书籍是否超期，且未归还 --%>
<%if(Util.getFormatDateTime(resultSet.getString("end_date")).compareTo(Util.getCurrentTimeString()) < 0 && resultSet.getString("return_date") == null){ %> <!-- 如果借阅截止时间早于当前时间且未归还 -->
<tr style="color:#FF5722;"> <!-- 高亮显示，设置行文字颜色为橙色 -->
<%} else{ %>
<tr> <!-- 正常显示，不做样式修改 -->
<%} %>
<td><%=resultSet.getString("card_id") %></td> <!-- 显示借阅证ID -->
<td><%=resultSet.getString("book_id") %></td> <!-- 显示书籍ID -->
<td><%=resultSet.getString("books.name") %></td> <!-- 显示书籍名称 -->
<td><%=Util.getFormatDateTime(resultSet.getString("borrow_date")) %></td> <!-- 显示借阅日期 -->
<td><%=Util.getFormatDateTime(resultSet.getString("end_date"))%></td> <!-- 显示借阅截止日期 -->
<td><%=resultSet.getString("return_date")!=null?Util.getFormatDateTime(resultSet.getString("return_date")) : "未归还" %></td> <!-- 如果归还日期不为空，则显示归还日期，否则显示“未归还” -->
<td><%=resultSet.getString("illegal")!=null?resultSet.getString("illegal"):""%></td> <!-- 显示违规信息，如果为空则显示空字符串 -->
<td><%=resultSet.getString("manager_id")!=null?resultSet.getString("manager_id"):"" %></td> <!-- 显示处理人ID，如果为空则显示空字符串 -->
</tr>
<%} %> <!-- 循环结束 -->
</tbody>
</table>
</div>
</body>
</html>
</html>

251
WebContent/admin/cardedit.jsp
Unescape View File

@ -1,144 +1,145 @@
<%@page import="javabean.Base"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%@page import="javabean.Admin"%>
<%@page import="javabean.Base"%> <!-- 导入Base类，用于数据库连接等操作 -->
<%@page import="java.sql.ResultSet"%> <!-- 导入ResultSet类，用于存储查询的结果 -->
<%@page import="java.sql.PreparedStatement"%> <!-- 导入PreparedStatement类，用于执行预编译SQL语句 -->
<%@page import="java.sql.Connection"%> <!-- 导入Connection类，用于管理数据库连接 -->
<%@page import="net.sf.json.JSONObject"%> <!-- 导入JSONObject类，用于处理JSON对象 -->
<%@page import="net.sf.json.JSONArray"%> <!-- 导入JSONArray类，用于处理JSON数组 -->
<%@page import="javabean.Admin"%> <!-- 导入Admin类，用于管理员相关操作 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
pageEncoding="UTF-8"%> <!-- 设置页面的语言为Java，字符编码为UTF-8,设置页面的字符编码为UTF-8 -->
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html> <!-- 开始HTML文档 -->
<head>
<meta charset="UTF-8">
<title>图书证修改</title>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<script src="../public/layui/layui.js" charset="utf-8"></script>
<style>
.layui-form{
margin: 10px 20px;
}
</style>
<meta charset="UTF-8"> <!-- 设置页面字符编码为UTF-8 -->
<title>图书证修改</title> <!-- 页面标题设置为“图书证修改” -->
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> <!-- 引入layui CSS样式 -->
<script src="../public/layui/layui.js" charset="utf-8"></script> <!-- 引入layui JavaScript库 -->
<style>
.layui-form{ <!-- 样式设置 -->
margin: 10px 20px; <!-- 设置表单的外边距 -->
}
</style>
</head>
<body>
<%
// 获取借阅证信息
String id = request.getParameter("id");
// 获取rule
Connection connection = null;
PreparedStatement pstmt = null;
PreparedStatement infoPstmt = null;
ResultSet ruleSet = null;
ResultSet infoSet = null;
String sql = "select * from rules";
String infoSql = "select * from borrow_card where id=?";
String result = "";
// 公用连接
connection = (Connection)Base.getConnection();
pstmt = connection.prepareStatement(sql);
infoPstmt = connection.prepareStatement(infoSql);
infoPstmt.setString(1,id);
infoSet = infoPstmt.executeQuery();
infoSet.next();
ruleSet = pstmt.executeQuery();
// 获取借阅证ID参数
String id = request.getParameter("id"); // 获取通过URL传递的“id”参数
// 初始化数据库连接及SQL语句
Connection connection = null; // 声明数据库连接对象
PreparedStatement pstmt = null; // 声明PreparedStatement对象，用于查询规则
PreparedStatement infoPstmt = null; // 声明PreparedStatement对象，用于查询借阅证信息
ResultSet ruleSet = null; // 声明ResultSet对象，用于存放规则查询结果
ResultSet infoSet = null; // 声明ResultSet对象，用于存放借阅证信息查询结果
String sql = "select * from rules"; // 查询规则的SQL语句
String infoSql = "select * from borrow_card where id=?"; // 查询借阅证信息的SQL语句，使用占位符“?”
String result = ""; // 初始化字符串变量result，用于存储结果
// 获取数据库连接
connection = (Connection)Base.getConnection(); // 调用Base类中的getConnection方法获取数据库连接
pstmt = connection.prepareStatement(sql); // 准备执行规则查询SQL语句
infoPstmt = connection.prepareStatement(infoSql); // 准备执行借阅证信息查询SQL语句
infoPstmt.setString(1, id); // 设置查询借阅证信息SQL语句中的ID参数
infoSet = infoPstmt.executeQuery(); // 执行查询并获取结果集
infoSet.next(); // 将结果集指针移动到查询的第一行
ruleSet = pstmt.executeQuery(); // 执行规则查询并获取结果集
%>
<form class="layui-form layui-form-pane" action="" lay-filter="cardFilter">
<!-- 账号 -->
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-block">
<input type="text" name="id" value=<%=id %> class="layui-input" disabled>
<form class="layui-form layui-form-pane" action="" lay-filter="cardFilter"> <!-- 创建layui表单，添加lay-filter属性用于过滤表单 -->
<!-- 账号 -->
<div class="layui-form-item"> <!-- 表单项 -->
<label class="layui-form-label">账号</label> <!-- 标签显示为“账号” -->
<div class="layui-input-block"> <!-- 输入框容器 -->
<input type="text" name="id" value=<%=id %> class="layui-input" disabled> <!-- 显示账号，值为Java中传递的id参数，且设置为不可编辑 -->
</div>
</div>
</div>
<!-- 姓名 -->
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="reader" value=<%=infoSet.getString("reader") %> lay-verify="required" autocomplete="off" placeholder="请输入姓名" class="layui-input">
<!-- 姓名 -->
<div class="layui-form-item"> <!-- 表单项 -->
<label class="layui-form-label">姓名</label> <!-- 标签显示为“姓名” -->
<div class="layui-input-block"> <!-- 输入框容器 -->
<input type="text" name="reader" value=<%=infoSet.getString("reader") %> lay-verify="required" autocomplete="off" placeholder="请输入姓名" class="layui-input"> <!-- 姓名输入框，默认值为数据库查询到的reader字段值，且设置为必填 -->
</div>
</div>
</div>
<!-- 密码 -->
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" value=<%=infoSet.getString("password") %> placeholder="请输入密码" autocomplete="off" class="layui-input" lay-verify="required">
<!-- 密码 -->
<div class="layui-form-item"> <!-- 表单项 -->
<label class="layui-form-label">密码</label> <!-- 标签显示为“密码” -->
<div class="layui-input-block"> <!-- 输入框容器 -->
<input type="password" name="password" value=<%=infoSet.getString("password") %> placeholder="请输入密码" autocomplete="off" class="layui-input" lay-verify="required"> <!-- 密码输入框，默认值为数据库查询到的password字段值，且设置为必填 -->
</div>
</div>
</div>
<!-- 借阅规则 -->
<div class="layui-form-item">
<label class="layui-form-label">规则</label>
<div class="layui-input-block">
<select name="rule_id" lay-filter="rule_id" lay-verify="required">
<% while(ruleSet.next()){ %>
<option value=<%=ruleSet.getString("id") %> <%if(ruleSet.getString("id").equals(infoSet.getString("rule_id"))) out.print("selected"); %>><%=ruleSet.getString("id") %></option>
<%} %>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="可用" <%if(infoSet.getString("status").equals("1")) out.print("checked"); %>>
<input type="radio" name="status" value="0" title="挂失" <%if(infoSet.getString("status").equals("0")) out.print("checked"); %>>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="submitForm">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<!-- 借阅规则 -->
<div class="layui-form-item"> <!-- 表单项 -->
<label class="layui-form-label">规则</label> <!-- 标签显示为“规则” -->
<div class="layui-input-block"> <!-- 输入框容器 -->
<select name="rule_id" lay-filter="rule_id" lay-verify="required"> <!-- 下拉框，显示借阅规则 -->
<% while(ruleSet.next()){ %> <!-- 遍历所有查询到的规则 -->
<option value=<%=ruleSet.getString("id") %> <%if(ruleSet.getString("id").equals(infoSet.getString("rule_id"))) out.print("selected"); %>><%=ruleSet.getString("id") %></option> <!-- 显示规则ID，如果当前规则ID和借阅证规则ID一致，则选中此项 -->
<%} %>
</select>
</div>
</div>
<div class="layui-form-item"> <!-- 表单项 -->
<label class="layui-form-label">状态</label> <!-- 标签显示为“状态” -->
<div class="layui-input-block"> <!-- 输入框容器 -->
<input type="radio" name="status" value="1" title="可用" <%if(infoSet.getString("status").equals("1")) out.print("checked"); %>> <!-- 如果借阅证状态为“可用”，则选中该项 -->
<input type="radio" name="status" value="0" title="挂失" <%if(infoSet.getString("status").equals("0")) out.print("checked"); %>> <!-- 如果借阅证状态为“挂失”，则选中该项 -->
</div>
</div>
<div class="layui-form-item"> <!-- 表单项 -->
<div class="layui-input-block"> <!-- 按钮容器 -->
<button class="layui-btn" lay-submit="" lay-filter="submitForm">立即提交</button> <!-- 提交按钮 -->
<button type="reset" class="layui-btn layui-btn-primary">重置</button> <!-- 重置按钮 -->
</div>
</div>
</div>
</form>
<script>
layui.use(['form', 'jquery'], function(){
var form = layui.form
,layer = layui.layer;
$ = layui.jquery;
// 提交表单
form.on('submit(submitForm)', function(data){
$.ajax({
url: './cardEdit',
type: 'post',
data: data.field,
dataType: 'json',
timeout : 3000,
success: function(data){
if(data.code == "0"){
layer.msg("修改成功", {
icon: 6,
anim: 5,
time: 500,
});
setTimeout(function(){
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
}, 500)
}else{
leyer.msg("修改失败");
}
},
error: function(){
layer.msg("获取超时");
}
layui.use(['form', 'jquery'], function(){ <!-- 使用layui的form和jquery模块 -->
var form = layui.form <!-- 获取form模块 -->
,layer = layui.layer; <!-- 获取layer模块 -->
$ = layui.jquery; <!-- 获取jQuery对象 -->
// 提交表单
form.on('submit(submitForm)', function(data){ <!-- 监听提交按钮的点击事件 -->
$.ajax({ <!-- 发送AJAX请求 -->
url: './cardEdit', <!-- 请求的URL -->
type: 'post', <!-- 请求方式为POST -->
data: data.field, <!-- 提交的数据为表单数据 -->
dataType: 'json', <!-- 返回的数据格式为JSON -->
timeout : 3000, <!-- 设置请求的超时时间为3000毫秒 -->
success: function(data){ <!-- 请求成功时的回调函数 -->
if(data.code == "0"){ <!-- 如果返回的数据中的code为0，表示操作成功 -->
layer.msg("修改成功", { <!-- 弹出提示框，提示修改成功 -->
icon: 6,
anim: 5,
time: 500, <!-- 设置提示框显示时间为500毫秒 -->
});
setTimeout(function(){ <!-- 延时关闭当前窗口 -->
var index = parent.layer.getFrameIndex(window.name); <!-- 获取当前iframe层的索引 -->
parent.layer.close(index); <!-- 关闭当前iframe层 -->
}, 500) <!-- 延时500毫秒后执行关闭操作 -->
}else{ <!-- 如果返回的数据中的code不为0，表示操作失败 -->
leyer.msg("修改失败"); <!-- 弹出提示框，提示修改失败 -->
}
},
error: function(){ <!-- 请求失败时的回调函数 -->
layer.msg("获取超时"); <!-- 弹出提示框，提示请求超时 -->
}
});
return false; <!-- 阻止表单的默认提交行为 -->
})
});
return false;
})
});
</script>
<%
Base.closeResource(connection, pstmt, ruleSet);
Base.closeResource(connection, pstmt, ruleSet); // 关闭数据库资源
%>
</body>
</html>
</html>

339
WebContent/admin/cardlist.jsp
Unescape View File

@ -1,181 +1,180 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
pageEncoding="UTF-8"%> <!-- 设置页面的语言为Java，字符编码为UTF-8,设置页面的字符编码为UTF-8 -->
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html lang="en"> <!-- 定义页面的语言为英文 -->
<head>
<meta charset="UTF-8">
<title>借阅卡</title>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<meta charset="UTF-8"> <!-- 设置页面字符编码为UTF-8 -->
<title>借阅卡</title> <!-- 设置页面的标题为“借阅卡” -->
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> <!-- 引入layui的CSS文件 -->
<style>
.layui-table,.layui-table-view{
margin: 0 0px;
.layui-table,.layui-table-view{ <!-- 自定义表格样式 -->
margin: 0 0px; <!-- 设置表格的外边距为0 -->
}
</style>
</head>
<body>
<!-- 表单 -->
<table class="layui-hide" id="cardTable" lay-filter="formFilter"></table>
<script src="../public/layui/layui.js" charset="utf-8"></script>
<!-- 头部工具栏 -->
<script type="text/html" id="headBar">
条件搜索：
<div class="layui-inline">
<select id="condition" name="condition" lay-verify="required">
<option value=""></option>
<option value="id">ID</option>
<option value="reader">姓名</option>
<option value="rule_id">借阅规则</option>
<option value="status">状态</option>
</select>
</div>
<div class="layui-inline">
<input class="layui-input" id="conditionValue" name="conditionValue" id="demoReload" autocomplete="off" placeholder="请输入搜索内容">
</div>
<button class="layui-btn" name="condition" data-type="reload" lay-event="search">搜索</button>
<button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">添加借阅证</i></button>
</script>
<!-- 表格侧边栏的操作 -->
<script type="text/html" id="operateBar">
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="cardBorrow">查看借阅</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 状态模板 -->
<script type="text/html" id="statusTpl">
{{# if(d.status == 0){ }}
<span style="color:red">挂失<span>
{{# } else { }}
可用
<!-- 表单 -->
<table class="layui-hide" id="cardTable" lay-filter="formFilter"></table> <!-- 设置一个隐藏的表格元素，表格的ID为"cardTable" -->
<script src="../public/layui/layui.js" charset="utf-8"></script> <!-- 引入layui的JS文件 -->
<!-- 头部工具栏 -->
<script type="text/html" id="headBar">
条件搜索： <!-- 搜索框的标签 -->
<div class="layui-inline"> <!-- 表单项 -->
<select id="condition" name="condition" lay-verify="required"> <!-- 条件选择框，用于选择搜索字段 -->
<option value=""></option> <!-- 默认选项 -->
<option value="id">ID</option> <!-- 搜索条件：ID -->
<option value="reader">姓名</option> <!-- 搜索条件：姓名 -->
<option value="rule_id">借阅规则</option> <!-- 搜索条件：借阅规则 -->
<option value="status">状态</option> <!-- 搜索条件：状态 -->
</select>
</div>
<div class="layui-inline"> <!-- 表单项 -->
<input class="layui-input" id="conditionValue" name="conditionValue" id="demoReload" autocomplete="off" placeholder="请输入搜索内容"> <!-- 输入框，用于输入搜索的内容 -->
</div>
<button class="layui-btn" name="condition" data-type="reload" lay-event="search">搜索</button> <!-- 搜索按钮 -->
<button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">添加借阅证</i></button> <!-- 添加借阅证按钮 -->
</script>
<!-- 表格侧边栏的操作 -->
<script type="text/html" id="operateBar">
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="cardBorrow">查看借阅</a> <!-- 查看借阅历史按钮 -->
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <!-- 编辑借阅证按钮 -->
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> <!-- 删除借阅证按钮 -->
</script>
<!-- 状态模板 -->
<script type="text/html" id="statusTpl">
{{# if(d.status == 0){ }} <!-- 如果借阅证状态为0（挂失） -->
<span style="color:red">挂失<span> <!-- 显示“挂失”文本，颜色为红色 -->
{{# } else { }} <!-- 否则 -->
可用 <!-- 显示“可用”状态 -->
{{# } }}
</script>
<script>
layui.use(['table','jquery'], function(){
$ = layui.jquery;
var table = layui.table;
// 进行渲染
var tableIns = table.render({
elem: '#cardTable'
,url:'./cardList'
,toolbar: '#headBar'
,height: 600
,cols: [[
{field:'id', width:180, title: 'ID', sort: true}
,{field:'reader', width:180, title: '用户名', sort: true}
,{field:'rule_id', width:180, title: '借阅规则', sort: true}
,{field:'status', width:180, title: '状态', templet: '#statusTpl'}
,{fixed: 'right', title:'操作', toolbar: '#operateBar', align: 'center', width:250}
]]
,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',
end: function(){
$('.layui-laypage-btn').click();
}
});
//layer.full(addCardLayer);
};
</script>
<script>
layui.use(['table','jquery'], function(){ <!-- 引入layui的表格和jquery模块 -->
$ = layui.jquery; <!-- 使用jQuery -->
var table = layui.table; <!-- 获取layui的表格模块 -->
// 进行渲染
var tableIns = table.render({
elem: '#cardTable' <!-- 表格的元素ID -->
,url:'./cardList' <!-- 请求数据的URL -->
,toolbar: '#headBar' <!-- 设置表格的头部工具栏 -->
,height: 600 <!-- 设置表格的高度为600px -->
,cols: [[ <!-- 表格的列设置 -->
{field:'id', width:180, title: 'ID', sort: true} <!-- 显示ID列，支持排序 -->
,{field:'reader', width:180, title: '用户名', sort: true} <!-- 显示用户名列，支持排序 -->
,{field:'rule_id', width:180, title: '借阅规则', sort: true} <!-- 显示借阅规则列，支持排序 -->
,{field:'status', width:180, title: '状态', templet: '#statusTpl'} <!-- 显示状态列，使用模板显示“挂失”或“可用” -->
,{fixed: 'right', title:'操作', toolbar: '#operateBar', align: 'center', width:250} <!-- 显示操作列，固定在右侧，使用自定义工具栏 -->
]]
,page: true <!-- 启用分页 -->
});
// 侧边工具栏事件
table.on(('tool(formFilter)'), function(obj){
var data = obj.data;
var layEvent = obj.event;
var tr = obj.tr;
var id = data.id;
switch(obj.event){
case 'edit':
layer.open({
type: 2,
title: '更改信息',
area: ['800px', '600px'],
maxmin: true,
shadeClose: true,
content: 'cardedit.jsp?id=' +id,
end: function(){
$(".layui-laypage-btn").click();
}
})
break;
case 'del':
layer.confirm('确认删除么?<br><span style="color:red;">这将删除该借阅证的所有记录</span>',function(index){
layer.close(index);
$.ajax({
url: './cardDel',
type: 'get',
data: 'id=' +id,
dataType: 'json',
timeout: 3000,
success: function(data){
if(data.code == 0){
console.log(data);
layer.msg(data.msg,{
icon: 6,
time: 1500
})
// 还是本页数据
$(".layui-laypage-btn").click();
}else{
layer.open({
title: '失败',
content: data.msg
})
}
},
error: function(){
layer.msg("连接超时");
}
})
})
break;
case 'cardBorrow':
layer.open({
type: 2,
title: '借阅历史',
area: ['800px', '600px'],
maxmin: true,
shadeClose: true,
content: 'cardborrow.jsp?id=' +id,
end: function(){
//$(".layui-laypage-btn").click();
}
})
}
})
// 头部工具栏事件
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', <!-- 加载添加借阅证页面 -->
end: function(){
$('.layui-laypage-btn').click(); <!-- 关闭窗口后刷新当前页 -->
}
});
//layer.full(addCardLayer); <!-- 注释掉的代码，可能是为了最大化窗口 -->
};
});
// 侧边工具栏事件
table.on(('tool(formFilter)'), function(obj){ <!-- 监听侧边工具栏操作 -->
var data = obj.data; <!-- 获取当前行的数据 -->
var layEvent = obj.event; <!-- 获取当前事件 -->
var tr = obj.tr; <!-- 获取当前行的tr元素 -->
var id = data.id; <!-- 获取当前行的ID -->
switch(obj.event){ <!-- 根据事件执行不同的操作 -->
case 'edit':
layer.open({ <!-- 打开编辑窗口 -->
type: 2,
title: '更改信息',
area: ['800px', '600px'],
maxmin: true,
shadeClose: true,
content: 'cardedit.jsp?id=' +id, <!-- 加载编辑借阅证页面，并传递ID -->
end: function(){
$(".layui-laypage-btn").click(); <!-- 刷新当前页 -->
}
})
break;
case 'del':
layer.confirm('确认删除么?<br><span style="color:red;">这将删除该借阅证的所有记录</span>',function(index){ <!-- 弹出删除确认框 -->
layer.close(index); <!-- 关闭确认框 -->
$.ajax({
url: './cardDel', <!-- 发送删除请求 -->
type: 'get',
data: 'id=' +id, <!-- 传递要删除的ID -->
dataType: 'json',
timeout: 3000, <!-- 设置超时时间为3000毫秒 -->
success: function(data){ <!-- 请求成功后的回调函数 -->
if(data.code == 0){ <!-- 如果删除成功 -->
console.log(data); <!-- 输出删除结果 -->
layer.msg(data.msg,{ <!-- 显示删除成功的消息 -->
icon: 6,
time: 1500
})
// 还是本页数据
$(".layui-laypage-btn").click(); <!-- 刷新当前页 -->
}else{ <!-- 如果删除失败 -->
layer.open({
title: '失败',
content: data.msg <!-- 显示错误信息 -->
})
}
},
error: function(){ <!-- 请求失败的回调函数 -->
layer.msg("连接超时"); <!-- 显示超时信息 -->
}
})
})
break;
case 'cardBorrow':
layer.open({ <!-- 打开借阅历史窗口 -->
type: 2,
title: '借阅历史',
area: ['800px', '600px'],
maxmin: true,
shadeClose: true,
content: 'cardborrow.jsp?id=' +id, <!-- 加载借阅历史页面，并传递ID -->
end: function(){
//$(".layui-laypage-btn").click(); <!-- 此处可能是未使用的代码 -->
}
})
}
})
});
</script>
</script>
</body>
</html>
</html>

129
WebContent/admin/index.jsp
Unescape View File

@ -1,95 +1,96 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
pageEncoding="UTF-8"%> // 页面编码为UTF-8，确保中文等字符显示正确
<!DOCTYPE html> // 定义文档类型为HTML5
<html lang="en"> // 开始HTML文档，指定语言为英语
<head>
<meta charset="UTF-8">
<title>系统管理员</title>
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css">
<script src="../public/layui/layui.js"></script>
<meta charset="UTF-8"> // 定义文档的字符编码为UTF-8
<title>系统管理员</title> // 页面标题，显示在浏览器标签上
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css"> // 引入layui的CSS文件，用于页面样式
<script src="../public/layui/layui.js"></script> // 引入layui的JavaScript文件
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">系统管理员</div>
<body class="layui-layout-body"> // 定义页面主体部分，应用layui的布局样式
<div class="layui-layout layui-layout-admin"> // layui框架的布局容器，管理后台使用
<div class="layui-header"> // 头部区域
<div class="layui-logo">系统管理员</div> // 左侧logo，显示为“系统管理员”
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">首页</a></li>
<li class="layui-nav-item">
<ul class="layui-nav layui-layout-left"> // 头部导航栏（左侧）
<li class="layui-nav-item"><a href="">首页</a></li> // 首页导航项
<li class="layui-nav-item"> // 其他系统菜单
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="../reader/04readerFrame.jsp">图书馆首页</a></dd>
<dd><a href="../loginManager.html">图书管理员</a></dd>
<dl class="layui-nav-child"> // 下拉菜单
<dd><a href="../reader/04readerFrame.jsp">图书馆首页</a></dd> // 图书馆首页
<dd><a href="../loginManager.html">图书管理员</a></dd> // 图书管理员链接
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<ul class="layui-nav layui-layout-right"> // 头部导航栏（右侧）
<li class="layui-nav-item"> // 右侧用户信息菜单
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
系统管理员
<img src="http://t.cn/RCzsdCq" class="layui-nav-img"> // 用户头像
系统管理员 // 用户名
</a>
<dl class="layui-nav-child">
<dd id="updatePassword"><a href="javascript:;">修改密码</a></dd>
<dl class="layui-nav-child"> // 下拉菜单
<dd id="updatePassword"><a href="javascript:;">修改密码</a></dd> // 修改密码项
</dl>
</li>
<li class="layui-nav-item"><a href="./logOut">退出</a></li>
<li class="layui-nav-item"><a href="./logOut">退出</a></li> // 退出按钮，跳转到退出页面
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<div class="layui-side layui-bg-black"> // 左侧导航栏区域，背景色为黑色
<div class="layui-side-scroll"> // 左侧导航区域的滚动部分
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="./booklist.jsp" target="content"><i class="layui-icon layui-icon-read" style="font-size: 16px; color: #1E9FFF;"></i> 书籍管理</a>
<ul class="layui-nav layui-nav-tree" lay-filter="test"> // 使用layui的树形导航
<li class="layui-nav-item layui-nav-itemed"> // 书籍管理菜单项，已选中
<a class="" href="./booklist.jsp" target="content"><i class="layui-icon layui-icon-read" style="font-size: 16px; color: #1E9FFF;"></i> 书籍管理</a> // 书籍管理菜单项
</li>
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="./sortlist.jsp" target="content"><i class="layui-icon layui-icon-tabs" style="font-size: 16px; color: #1E9FFF;"></i> 书籍类型</a>
<li class="layui-nav-item layui-nav-itemed"> // 书籍类型管理菜单项，已选中
<a class="" href="./sortlist.jsp" target="content"><i class="layui-icon layui-icon-tabs" style="font-size: 16px; color: #1E9FFF;"></i> 书籍类型</a> // 书籍类型菜单项
</li>
<li class="layui-nav-item">
<a href="./cardlist.jsp" target="content"><i class="layui-icon layui-icon-template-1" style="font-size: 16px; color: #1E9FFF;"> </i>借阅证管理</a>
<li class="layui-nav-item"> // 借阅证管理菜单项
<a href="./cardlist.jsp" target="content"><i class="layui-icon layui-icon-template-1" style="font-size: 16px; color: #1E9FFF;"> </i>借阅证管理</a> // 借阅证管理菜单项
</li>
<li class="layui-nav-item"><a href="./borrowlist.jsp" target="content"><i class="layui-icon layui-icon-chart-screen" style="font-size: 16px; color: #1E9FFF;"></i> 借阅信息查询</a></li>
<li class="layui-nav-item"><a href="./rulelist.jsp" target="content"><i class="layui-icon layui-icon-file-b" style="font-size: 16px; color: #1E9FFF;"> </i>借阅规则管理</a></li>
<li class="layui-nav-item"><a href="./managerlist.jsp" target="content"><i class="layui-icon layui-icon-group" style="font-size: 16px; color: #1E9FFF;"></i>图书管理员管理</a></li>
<li class="layui-nav-item"><a href="./librarydata.jsp" target="content"><i class="layui-icon layui-icon-windows" style="font-size: 16px; color: #1E9FFF;"> </i>系统管理</a></li>
<li class="layui-nav-item"><a href="./borrowlist.jsp" target="content"><i class="layui-icon layui-icon-chart-screen" style="font-size: 16px; color: #1E9FFF;"></i> 借阅信息查询</a></li> // 借阅信息查询菜单项
<li class="layui-nav-item"><a href="./rulelist.jsp" target="content"><i class="layui-icon layui-icon-file-b" style="font-size: 16px; color: #1E9FFF;"> </i>借阅规则管理</a></li> // 借阅规则管理菜单项
<li class="layui-nav-item"><a href="./managerlist.jsp" target="content"><i class="layui-icon layui-icon-group" style="font-size: 16px; color: #1E9FFF;"></i>图书管理员管理</a></li> // 图书管理员管理菜单项
<li class="layui-nav-item"><a href="./librarydata.jsp" target="content"><i class="layui-icon layui-icon-windows" style="font-size: 16px; color: #1E9FFF;"> </i>系统管理</a></li> // 系统管理菜单项
</ul>
</div>
</div>
<div class="layui-body">
<div class="layui-body"> // 页面内容区域
<!-- 内容主体区域 -->
<iframe src="librarydata.jsp" name="content" height="100%" width="100%" frameborder="0" scrolling="no"></iframe>
<iframe src="librarydata.jsp" name="content" height="100%" width="100%" frameborder="0" scrolling="no"></iframe> // 嵌套iframe，加载系统管理页面内容
</div>
<div class="layui-footer">
<div class="layui-footer"> // 底部区域
<!-- 底部固定区域 -->
© 图书管理系统
© 图书管理系统 // 底部版权声明
</div>
</div>
<script>
//JavaScript代码区域
layui.use(['element', 'jquery', 'layer'], function(){
$ = layui.jquery;
var element = layui.element
$ = layui.jquery;
var form = layui.form
,layer = layui.layer;
// JavaScript代码区域
layui.use(['element', 'jquery', 'layer'], function(){ // 使用layui的模块，包括element（元素模块）、jquery和layer（弹层模块）
$ = layui.jquery; // 引入jQuery
var element = layui.element // 获取layui的element模块，用于操作元素
$ = layui.jquery; // 重新声明jQuery，防止覆盖
var form = layui.form // 获取layui的form模块，用于表单操作
,layer = layui.layer; // 获取layui的layer模块，用于弹层操作
$("#updatePassword").click(function(){
layer.open({
title: '修改密码',
type: 2,
area: ['300px', '300px'],
maxmin: true,
shadeClose: true,
content: 'updatePassword.jsp'
})
})
});
$("#updatePassword").click(function(){ // 点击“修改密码”时触发
layer.open({ // 打开一个新的层
title: '修改密码', // 层的标题
type: 2, // 类型为iframe嵌入页面
area: ['300px', '300px'], // 层的宽高
maxmin: true, // 可以最大化和最小化
shadeClose: true, // 点击遮罩关闭
content: 'updatePassword.jsp' // 层内加载的内容页面
})
})
});
</script>
</body>
</html>
</html>

111
WebContent/admin/librarydata.jsp
Unescape View File

@ -1,62 +1,63 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
pageEncoding="UTF-8"%> // 页面编码为UTF-8，确保中文等字符显示正确
<!DOCTYPE html> // 定义文档类型为HTML5
<html> // 开始HTML文档
<head>
<meta charset="utf-8">
<title>ECharts</title>
<meta charset="utf-8"> // 定义文档的字符编码为UTF-8
<title>ECharts</title> // 页面标题，显示在浏览器标签上
<!-- 引入 echarts.js -->
<script src="../public/js/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="../public/js/echarts.min.js"></script> // 引入本地的echarts.js文件，用于图表渲染
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> // 引入远程的jQuery库，提供AJAX等功能
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:1200px;height:500px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:1200px;height:500px;"></div> // 为ECharts图表提供一个容器，并设置其宽高
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); // 使用ID为'main'的DOM元素初始化ECharts实例
// 指定图表的配置项和数据
myChart.setOption({
title: {
text: '借书情况' // 设置图表标题为“借书情况”
},
tooltip: {}, // 配置工具提示，默认启用
legend: {
data:['借书量'] // 设置图例，显示“借书量”
},
xAxis: {
data: [] // 设置x轴的数据，初始为空
},
yAxis: {}, // 配置y轴
series: [{
name: '借书量', // 设置系列的名称为“借书量”
type: 'line', // 设置图表类型为折线图
data: [] // 设置折线图的数据，初始为空
}]
});
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option); // 注释掉的原始代码，用于设置配置项
// 指定图表的配置项和数据
myChart.setOption({
title: {
text: '借书情况'
},
tooltip: {},
legend: {
data:['借书量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '借书量',
type: 'line',
data: []
}]
});
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
// 异步加载数据
$.get('./libraryData').done(function (data) {
if(data.code == 0){
// 填入数据
myChart.setOption({
xAxis: {
data: data.data.days
},
series: [{
// 根据名字对应到相应的系列
name: '借书量',
data: data.data.data,
type: 'line'
}]
});
}else{
$('body').append($("<div style='color:red;'>调用接口失败</div>"));
}
});
</script>
// 异步加载数据
$.get('./libraryData').done(function (data) { // 使用jQuery的get方法从'./libraryData'接口异步请求数据
if(data.code == 0){ // 判断返回的数据是否成功（code == 0）
// 填入数据
myChart.setOption({
xAxis: {
data: data.data.days // 设置x轴的数据为接口返回的days数组
},
series: [{
// 根据名字对应到相应的系列
name: '借书量', // 设置系列的名称为“借书量”
data: data.data.data, // 设置折线图的数据为接口返回的data数组
type: 'line' // 设置图表类型为折线图
}]
});
}else{
$('body').append($("<div style='color:red;'>调用接口失败</div>")); // 如果接口调用失败，显示错误信息
}
});
</script>
</body>
</html>
</html>

133
WebContent/admin/manageradd.jsp
Unescape View File

@ -1,90 +1,87 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理员添加</title>
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css">
<script src="../public/layui/layui.js"></script>
<style>
.layui-form{
margin: 10px 20px;
}
pageEncoding="UTF-8"%> // 设置页面编码为UTF-8，确保支持中文字符
</style>
<!DOCTYPE html> // 定义文档类型为HTML5
<html> // 开始HTML文档
<head>
<meta charset="UTF-8"> // 定义文档的字符集为UTF-8
<title>管理员添加</title> // 页面标题，显示在浏览器标签页上
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css"> // 引入layui的CSS样式文件
<script src="../public/layui/layui.js"></script> // 引入layui的JS文件，提供UI交互功能
<style>
.layui-form{
margin: 10px 20px; // 设置表单的外边距
}
</style>
</head>
</head>
<body>
<form class="layui-form layui-form-pane" action="" lay-filter="formFilter">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" lay-verify="required" required autocomplete="off" placeholder="请输入姓名" class="layui-input">
<form class="layui-form layui-form-pane" action="" lay-filter="formFilter"> // 使用layui的表单样式，lay-filter用于表单过滤
<div class="layui-form-item"> // 表单项容器
<label class="layui-form-label">姓名</label> // 表单项标签，显示“姓名”
<div class="layui-input-block"> // 输入框容器
<input type="text" name="name" lay-verify="required" required autocomplete="off" placeholder="请输入姓名" class="layui-input"> // 姓名输入框，设置必填验证
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-block">
<input type="text" name="account" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
<div class="layui-form-item"> // 表单项容器
<label class="layui-form-label">账号</label> // 表单项标签，显示“账号”
<div class="layui-input-block"> // 输入框容器
<input type="text" name="account" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input"> // 账号输入框，设置必填验证
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
<div class="layui-form-item"> // 表单项容器
<label class="layui-form-label">密码</label> // 表单项标签，显示“密码”
<div class="layui-input-block"> // 输入框容器
<input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> // 密码输入框，设置必填验证
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
<div class="layui-form-item"> // 表单项容器
<label class="layui-form-label">邮箱</label> // 表单项标签，显示“邮箱”
<div class="layui-input-block"> // 输入框容器
<input type="text" name="email" lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input"> // 邮箱输入框，设置必填验证
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitButton">立即提交</button>
<div class="layui-form-item"> // 表单项容器
<div class="layui-input-block"> // 输入框容器
<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitButton">立即提交</button> // 提交按钮，触发表单提交
</div>
</div>
</form>
<script>
// 使用layui的表单、jquery、layer模块
layui.use(['form', 'jquery'], function(){
$ = layui.jquery; // 使用jQuery库
var form = layui.form, // 获取layui表单模块
layer = layui.layer; // 获取layui弹层模块
layui.use(['form', 'jquery'], function(){
$ = layui.jquery;
var form = layui.form
,layer = layui.layer
//监听提交
form.on('submit(submitButton)', function(data){
$.ajax({
url: './managerAdd',
method: 'post',
data: data.field,
dataType: 'json',
success: function(data){
if(data.code == "0"){
parent.layer.msg("添加成功",{
icon: 6,
time: 500
});
setTimeout(function(){
parent.location.reload();
}, 500);
}else{
layer.msg(data.msg);
}
}
})
return false;
});
});
// 监听提交按钮点击事件
form.on('submit(submitButton)', function(data){
$.ajax({ // 使用AJAX发送数据到后台
url: './managerAdd', // 请求的URL路径
method: 'post', // 使用POST请求方式
data: data.field, // 获取表单数据
dataType: 'json', // 设置响应数据格式为JSON
success: function(data){ // 成功回调
if(data.code == "0"){ // 判断返回数据的code是否为"0"表示成功
parent.layer.msg("添加成功",{ // 使用父窗口的layer弹出提示框
icon: 6, // 图标类型为“成功”
time: 500 // 显示500毫秒
});
setTimeout(function(){ // 延时操作
parent.location.reload(); // 刷新父窗口
}, 500);
}else{
layer.msg(data.msg); // 如果返回失败，弹出错误信息
}
}
})
return false; // 阻止表单默认提交
});
});
</script>
</body>
</html>
</html>

164
WebContent/admin/manageredit.jsp
Unescape View File

@ -1,103 +1,109 @@
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="javabean.Base"%>
<%@page import="java.sql.ResultSet"%> // 引入java.sql.ResultSet类，用于处理数据库查询结果集
<%@page import="java.sql.PreparedStatement"%> // 引入java.sql.PreparedStatement类，用于执行数据库的SQL查询
<%@page import="java.sql.Connection"%> // 引入java.sql.Connection类，用于连接数据库
<%@page import="javabean.Base"%> // 引入自定义的Base类，用于数据库连接管理
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
pageEncoding="UTF-8"%> // 设置页面编码为UTF-8，确保能够支持中文字符
<!DOCTYPE html> // 定义文档类型为HTML5
<html> // 开始HTML文档
<head>
<meta charset="UTF-8">
<title>管理员修改</title>
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css">
<script src="../public/layui/layui.js"></script>
<style>
.layui-form{
margin: 10px 20px;
}
</style>
<meta charset="UTF-8"> // 设置页面字符编码为UTF-8
<title>管理员修改</title> // 设置页面标题
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css"> // 引入layui的CSS文件，提供UI样式
<script src="../public/layui/layui.js"></script> // 引入layui的JS文件，提供UI交互功能
<style>
.layui-form{ // 定义layui表单的样式
margin: 10px 20px; // 设置表单外边距
}
</style>
</head>
</head>
<body>
<%
String id = request.getParameter("id");
Connection connection = (Connection)Base.getConnection();
String sql = "select * from manager where id=?";
PreparedStatement pstmt = connection.prepareCall(sql);
pstmt.setString(1,id);
ResultSet resultSet = pstmt.executeQuery();
resultSet.next();
// 获取页面传递的参数id
String id = request.getParameter("id");
// 获取数据库连接
Connection connection = (Connection)Base.getConnection();
// 编写SQL查询语句，获取管理员信息
String sql = "select * from manager where id=?";
// 创建PreparedStatement对象，防止SQL注入
PreparedStatement pstmt = connection.prepareCall(sql);
// 设置查询参数
pstmt.setString(1,id);
// 执行查询，获取结果集
ResultSet resultSet = pstmt.executeQuery();
// 移动结果集指针到第一行数据
resultSet.next();
%>
<form class="layui-form layui-form-pane" action="" lay-filter="formFilter">
<input type="text" name="id" value=<%=id %> lay-verify="required" required autocomplete="off" placeholder="请输入姓名" class="layui-input layui-hide">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" value=<%=resultSet.getString("name") %> lay-verify="required" required autocomplete="off" placeholder="请输入姓名" class="layui-input">
<form class="layui-form layui-form-pane" action="" lay-filter="formFilter"> // 创建layui表单，设置表单过滤器
<input type="text" name="id" value=<%=id %> lay-verify="required" required autocomplete="off" placeholder="请输入姓名" class="layui-input layui-hide"> // 隐藏id输入框，用于传递修改的管理员ID
<div class="layui-form-item"> // 表单项容器
<label class="layui-form-label">姓名</label> // 姓名标签
<div class="layui-input-block"> // 输入框容器
<input type="text" name="name" value=<%=resultSet.getString("name") %> lay-verify="required" required autocomplete="off" placeholder="请输入姓名" class="layui-input"> // 姓名输入框，填入从数据库中获取的管理员姓名
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-block">
<input type="text" name="account" value=<%=resultSet.getString("account") %> disabled lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
<div class="layui-form-item"> // 表单项容器
<label class="layui-form-label">账号</label> // 账号标签
<div class="layui-input-block"> // 输入框容器
<input type="text" name="account" value=<%=resultSet.getString("account") %> disabled lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input"> // 账号输入框，显示从数据库中获取的管理员账号，禁用（不可编辑）
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" value=<%=resultSet.getString("password") %> lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
<div class="layui-form-item"> // 表单项容器
<label class="layui-form-label">密码</label> // 密码标签
<div class="layui-input-block"> // 输入框容器
<input type="password" name="password" value=<%=resultSet.getString("password") %> lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> // 密码输入框，填入从数据库中获取的管理员密码
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" value=<%=resultSet.getString("email") %> lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
<div class="layui-form-item"> // 表单项容器
<label class="layui-form-label">邮箱</label> // 邮箱标签
<div class="layui-input-block"> // 输入框容器
<input type="text" name="email" value=<%=resultSet.getString("email") %> lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input"> // 邮箱输入框，填入从数据库中获取的管理员邮箱
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitButton">立即提交</button>
<div class="layui-form-item"> // 表单项容器
<div class="layui-input-block"> // 输入框容器
<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitButton">立即提交</button> // 提交按钮，点击后提交表单
</div>
</div>
</form>
<script>
// 使用layui模块
layui.use(['form', 'jquery'], function(){
$ = layui.jquery; // 使用jQuery库
var form = layui.form, // 获取layui的表单模块
layer = layui.layer; // 获取layui的弹层模块
// 监听表单提交
form.on('submit(submitButton)', function(data){
$.ajax({ // 使用AJAX请求提交数据
url: './managerEdit', // 提交到的URL路径
method: 'post', // 提交方式为POST
data: data.field, // 获取表单提交的数据
dataType: 'json', // 设置返回数据格式为JSON
success: function(data){ // 请求成功的回调函数
if(data.code == "0"){ // 如果返回的code是"0"，表示修改成功
parent.layer.msg("修改成功",{
icon: 6, // 成功图标
time: 500 // 显示500毫秒
});
setTimeout(function(){ // 延时操作
parent.location.reload(); // 刷新父页面
}, 500);
}else{
layer.msg(data.msg); // 否则显示错误信息
}
}
})
layui.use(['form', 'jquery'], function(){
$ = layui.jquery;
var form = layui.form
,layer = layui.layer
//监听提交
form.on('submit(submitButton)', function(data){
$.ajax({
url: './managerEdit',
method: 'post',
data: data.field,
dataType: 'json',
success: function(data){
if(data.code == "0"){
parent.layer.msg("添加成功",{
icon: 6,
time: 500
});
setTimeout(function(){
parent.location.reload();
}, 500);
}else{
layer.msg(data.msg);
}
}
})
return false;
});
});
return false; // 阻止表单默认提交
});
});
</script>
</body>
</html>
</html>

220
WebContent/admin/managerlist.jsp
Unescape View File

@ -1,118 +1,120 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
pageEncoding="UTF-8"%> // 设置页面的字符编码为UTF-8
<!DOCTYPE html> // 定义文档类型为HTML5
<html lang="en"> // 设置HTML文档的语言为英语
<head>
<meta charset="UTF-8">
<title>借阅卡</title>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<meta charset="UTF-8"> // 设置页面字符编码为UTF-8
<title>借阅卡</title> // 设置页面标题为“借阅卡”
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> // 引入layui的CSS文件，用于页面样式
<style>
.layui-table,.layui-table-view{
margin: 0 0px;
.layui-table,.layui-table-view{ // 自定义样式，调整layui表格和表格视图的外边距
margin: 0 0px;
}
</style>
</head>
<body>
<!-- 表单 -->
<table class="layui-hide" id="managerTable" lay-filter="formFilter"></table>
<script src="../public/layui/layui.js" charset="utf-8"></script>
<!-- 头部工具栏 -->
<script type="text/html" id="headBar">
<button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">添加管理员</i></button>
</script>
<!-- 表格侧边栏 -->
<script type="text/html" id="operateBar">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use(['table','jquery'], function(){
$ = layui.jquery;
var table = layui.table;
// 进行渲染
var tableIns = table.render({
elem: '#managerTable'
,url:'./managerList'
,toolbar: '#headBar'
,height: 600
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'account', width:80, title: '账号', sort: true}
,{field:'name', width:80, title: '姓名'}
,{field:'email', title: '邮箱', minWidth: 150}
,{fixed: 'right', title:'操作', toolbar: '#operateBar', align: 'center', width:150}
]]
});
// 头部工具栏事件
table.on('toolbar(formFilter)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
// 添加管理员
case 'add':
var addCardLayer = layer.open({
type: 2,
title: '添加管理员',
area: ['800px', '500px'],
maxmin: true,
shadeClose: true,
content: 'manageradd.jsp',
});
//layer.full(addCardLayer);
};
});
// 侧边工具栏事件
table.on(('tool(formFilter)'), function(obj){
var data = obj.data;
var layEvent = obj.event;
var id = data.id;
var tr = obj.tr;
switch(obj.event){
case 'edit':
layer.open({
type: 2,
title: '更改信息',
area: ['800px', '600px'],
maxmin: true,
shadeClose: true,
content: 'manageredit.jsp?id=' +id,
})
break;
case 'del':
layer.confirm('确定要删除么？',function(){
layer.msg("ok");
$.ajax({
url: './managerDel',
data: 'id=' +id,
type: 'get',
dataType: 'json',
timeout: 3000,
success: function(data){
layer.msg("???");
if(data.code == 0){
layer.msg(data.msg,{
icon: 6,
anim: 5,
time: 500
});
setTimeout(function(){
parent.location.reload();
},500);
}else{
layer.msg(data.code);
}
},
error: function(){
layer.msg("连接超时");
}
})
})
}
})
<!-- 表单 -->
<table class="layui-hide" id="managerTable" lay-filter="formFilter"></table> // 创建表格，指定id为“managerTable”，并设置过滤器为“formFilter”
<script src="../public/layui/layui.js" charset="utf-8"></script> // 引入layui的JavaScript文件，提供UI功能和交互
<!-- 头部工具栏 -->
<script type="text/html" id="headBar"> // 定义头部工具栏的HTML模板，id为“headBar”
<button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">添加管理员</i></button> // 按钮，点击触发“add”事件，用于添加管理员
</script>
<!-- 表格侧边栏 -->
<script type="text/html" id="operateBar"> // 定义操作栏的HTML模板，id为“operateBar”
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> // 编辑按钮，点击触发“edit”事件
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> // 删除按钮，点击触发“del”事件
</script>
<script> // 开始JavaScript代码块
layui.use(['table','jquery'], function(){ // 引入layui的表格和jQuery模块
$ = layui.jquery; // 使用jQuery库
var table = layui.table; // 获取layui表格模块
// 进行渲染表格
var tableIns = table.render({
elem: '#managerTable' // 表格的元素，指定为“managerTable”
,url:'./managerList' // 设置表格数据来源的URL
,toolbar: '#headBar' // 设置头部工具栏的模板ID
,height: 600 // 设置表格的高度
,cols: [[ // 设置表格的列
{field:'id', width:80, title: 'ID', sort: true} // 列ID，宽度80，标题为“ID”，支持排序
,{field:'account', width:80, title: '账号', sort: true} // 列账号，宽度80，标题为“账号”，支持排序
,{field:'name', width:80, title: '姓名'} // 列姓名，宽度80，标题为“姓名”
,{field:'email', title: '邮箱', minWidth: 150} // 列邮箱，最小宽度150，标题为“邮箱”
,{fixed: 'right', title:'操作', toolbar: '#operateBar', align: 'center', width:150} // 操作列，固定在右侧，宽度150，使用“operateBar”模板
]]
});
</script>
// 头部工具栏事件
table.on('toolbar(formFilter)', function(obj){ // 监听头部工具栏的事件
var checkStatus = table.checkStatus(obj.config.id); // 获取选中行的数据
switch(obj.event){ // 根据事件类型进行处理
case 'add': // 添加管理员
var addCardLayer = layer.open({ // 打开一个弹出层
type: 2, // 弹出层类型为iframe
title: '添加管理员', // 弹出层标题
area: ['800px', '500px'], // 弹出层的宽度和高度
maxmin: true, // 允许最大化和最小化
shadeClose: true, // 点击遮罩层关闭
content: 'manageradd.jsp', // 弹出层内容页面
});
//layer.full(addCardLayer); // 此行已注释，可以让弹出层最大化
};
});
// 侧边工具栏事件
table.on(('tool(formFilter)'), function(obj){ // 监听表格的工具栏事件
var data = obj.data; // 获取当前行的数据
var layEvent = obj.event; // 获取事件类型
var id = data.id; // 获取管理员的ID
var tr = obj.tr; // 获取当前行的tr元素
switch(obj.event){ // 根据事件类型进行处理
case 'edit': // 编辑管理员
layer.open({ // 打开一个弹出层
type: 2, // 弹出层类型为iframe
title: '更改信息', // 弹出层标题
area: ['800px', '600px'], // 弹出层的宽度和高度
maxmin: true, // 允许最大化和最小化
shadeClose: true, // 点击遮罩层关闭
content: 'manageredit.jsp?id=' +id, // 弹出层内容页面，传递管理员ID作为参数
})
break;
case 'del': // 删除管理员
layer.confirm('确定要删除么？',function(){ // 弹出确认框
layer.msg("ok"); // 显示消息
$.ajax({ // 使用AJAX发送删除请求
url: './managerDel', // 删除管理员的URL
data: 'id=' +id, // 发送管理员ID
type: 'get', // 使用GET请求
dataType: 'json', // 返回的数据格式为JSON
timeout: 3000, // 请求超时时间为3000毫秒
success: function(data){ // 请求成功的回调函数
layer.msg("???"); // 显示提示消息
if(data.code == 0){ // 如果删除成功
layer.msg(data.msg,{ // 显示成功消息
icon: 6, // 成功图标
anim: 5, // 动画效果
time: 500 // 消息显示500毫秒
});
setTimeout(function(){ // 延时操作
parent.location.reload(); // 刷新父页面
},500);
}else{ // 如果删除失败
layer.msg(data.code); // 显示错误消息
}
},
error: function(){ // 请求失败的回调函数
layer.msg("连接超时"); // 显示连接超时消息
}
})
})
}
})
});
</script>
</body>
</html>
</html>

202
WebContent/admin/ruleadd.jsp
Unescape View File

@ -1,119 +1,119 @@
<%@page import="javabean.Common"%>
<%@page import="java.util.TreeMap"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="javabean.Base"%>
<%@page import="javabean.Common"%> // 导入Common类，用于获取图书馆信息
<%@page import="java.util.TreeMap"%> // 导入TreeMap类，用于存储图书馆数据
<%@page import="java.util.HashMap"%> // 导入HashMap类，用于存储规则相关数据
<%@page import="java.util.Map"%> // 导入Map接口，用于定义数据结构
<%@page import="java.util.ArrayList"%> // 导入ArrayList类，用于存储列表数据
<%@page import="java.sql.ResultSet"%> // 导入ResultSet类，用于处理数据库查询结果
<%@page import="java.sql.PreparedStatement"%> // 导入PreparedStatement类，用于执行SQL查询
<%@page import="java.sql.Connection"%> // 导入Connection类，用于数据库连接
<%@page import="javabean.Base"%> // 导入Base类，可能是数据库连接工具类
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
pageEncoding="UTF-8"%> // 设置页面编码为UTF-8
<!DOCTYPE html> // 声明文档类型为HTML5
<html> // 开始HTML文档
<head>
<meta charset="UTF-8">
<title>规则添加</title>
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css">
<script src="../public/layui/layui.js"></script>
<style>
.layui-form{
margin: 10px 20px;
}
.layui-form-pane .layui-form-label{
width: 120px;
}
.layui-form-pane .layui-input-block{
margin-left: 120px;
}
</style>
<meta charset="UTF-8"> // 设置页面字符集为UTF-8
<title>规则添加</title> // 页面标题设置为“规则添加”
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css"> // 引入layui框架的CSS文件，提供样式支持
<script src="../public/layui/layui.js"></script> // 引入layui框架的JavaScript文件，提供组件和交互功能
<style>
.layui-form{ // 自定义layui表单样式
margin: 10px 20px; // 设置表单的外边距
}
.layui-form-pane .layui-form-label{ // 自定义表单标签样式
width: 120px; // 设置表单标签的宽度
}
.layui-form-pane .layui-input-block{ // 自定义输入框块的样式
margin-left: 120px; // 设置输入框块的左边距
}
</style>
</head>
<body>
<%
// 获取图书馆map
Map<String, String> libraryMap = Common.getLibraryMap();
// 获取图书馆map
Map<String, String> libraryMap = Common.getLibraryMap(); // 调用Common类的getLibraryMap方法，获取图书馆信息Map
%>
<form class="layui-form layui-form-pane" action="">
<input type="id" name="id" value="3" class="layui-hide">
<div class="layui-form-item">
<label class="layui-form-label">限制天数</label>
<div class="layui-input-block">
<input type="text" name="limit_day" required lay-verify="required" placeholder="请输入限制天数" autocomplete="off" class="layui-input">
<form class="layui-form layui-form-pane" action=""> // 定义一个layui表单，使用layui样式
<input type="id" name="id" value="3" class="layui-hide"> // 隐藏的输入框，用于传递id，值为3
<div class="layui-form-item"> // 表单项
<label class="layui-form-label">限制天数</label> // 表单标签“限制天数”
<div class="layui-input-block"> // 输入框块
<input type="text" name="limit_day" required lay-verify="required" placeholder="请输入限制天数" autocomplete="off" class="layui-input"> // 输入框，要求输入限制天数
</div>
</div>
</div>
<!-- 作者 -->
<div class="layui-form-item">
<label class="layui-form-label">限制数量</label>
<div class="layui-input-block">
<input type="text" name="borrow_num" required lay-verify="required" placeholder="请输入限制数量" autocomplete="off" class="layui-input">
<!-- 作者 -->
<div class="layui-form-item"> // 表单项
<label class="layui-form-label">限制数量</label> // 表单标签“限制数量”
<div class="layui-input-block"> // 输入框块
<input type="text" name="borrow_num" required lay-verify="required" placeholder="请输入限制数量" autocomplete="off" class="layui-input"> // 输入框，要求输入限制数量
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">限制图书馆</label>
<div class="layui-input-block" >
<%
for(String key : libraryMap.keySet()){
%>
<input type="checkbox" name=<%="borrow_library[" +key +"]" %> title=<%=libraryMap.get(key) %> checked>
<%
}
%>
<div class="layui-form-item"> // 表单项
<label class="layui-form-label">限制图书馆</label> // 表单标签“限制图书馆”
<div class="layui-input-block" > // 输入框块
<%
// 遍历获取的libraryMap，生成多个checkbox
for(String key : libraryMap.keySet()){ // 遍历图书馆map的每一项
%>
<input type="checkbox" name=<%="borrow_library[" +key +"]" %> title=<%=libraryMap.get(key) %> checked> // 动态生成checkbox，checked表示默认选中
<%
}
%>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">逾期每天费用</label>
<div class="layui-input-block">
<input type="text" name="overtime_fee" required lay-verify="required" placeholder="请输入逾期每天费用" autocomplete="off" class="layui-input">
<div class="layui-form-item"> // 表单项
<label class="layui-form-label">逾期每天费用</label> // 表单标签“逾期每天费用”
<div class="layui-input-block"> // 输入框块
<input type="text" name="overtime_fee" required lay-verify="required" placeholder="请输入逾期每天费用" autocomplete="off" class="layui-input"> // 输入框，要求输入逾期每天费用
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="submitButton">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<div class="layui-form-item"> // 表单项
<div class="layui-input-block"> // 输入框块
<button class="layui-btn" lay-submit="" lay-filter="submitButton">立即提交</button> // 提交按钮，点击提交表单
<button type="reset" class="layui-btn layui-btn-primary">重置</button> // 重置按钮，重置表单内容
</div>
</div>
</div>
</form>
<script>
<script> // 开始JavaScript代码块
layui.use(['form', 'jquery'], function(){ // 使用layui的form和jquery模块
$ = layui.jquery; // 使用jQuery库
var form = layui.form // 获取layui的form模块
,layer = layui.layer // 获取layui的layer模块，用于弹出层
// 监听提交事件
form.on('submit(submitButton)', function(data){ // 监听表单提交事件
$.ajax({ // 使用AJAX发送请求
url: './ruleAdd', // 请求的URL地址
method: 'post', // 使用POST请求
data: data.field, // 传递表单数据
dataType: 'json', // 请求返回的数据类型为JSON
success: function(data){ // 请求成功的回调函数
if(data.code == "0"){ // 如果返回的code为0，表示成功
parent.layer.msg("添加成功",{ // 弹出成功消息
icon: 6, // 图标类型为成功
time: 500 // 消息显示500毫秒后消失
});
setTimeout(function(){ // 延时操作
parent.location.reload(); // 刷新父页面
}, 500);
}else{ // 如果返回的code不是0，表示失败
leyer.msg("添加失败"); // 弹出失败消息
}
//parent.layer.msg('您将标记 [ sdf ] 成功传送给了父窗口');
}
})
layui.use(['form', 'jquery'], function(){
$ = layui.jquery;
var form = layui.form
,layer = layui.layer
//监听提交
form.on('submit(submitButton)', function(data){
$.ajax({
url: './ruleAdd',
method: 'post',
data: data.field,
dataType: 'json',
success: function(data){
if(data.code == "0"){
parent.layer.msg("添加成功",{
icon: 6,
time: 500
});
setTimeout(function(){
parent.location.reload();
}, 500);
}else{
leyer.msg("添加失败");
}
//parent.layer.msg('您将标记 [ sdf ] 成功传送给了父窗口');
}
})
return false;
});
});
return false; // 阻止表单的默认提交行为
});
});
</script>
</body>
</html>
</html>

261
WebContent/admin/ruleedit.jsp
Unescape View File

@ -1,148 +1,157 @@
<%@page import="javabean.Common"%>
<%@page import="java.util.TreeMap"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="javabean.Base"%>
<%@page import="javabean.Common"%> // 导入Common类，提供图书馆映射等功能
<%@page import="java.util.TreeMap"%> // 导入TreeMap类，可能用于存储图书馆数据
<%@page import="java.util.HashMap"%> // 导入HashMap类，用于存储规则数据
<%@page import="java.util.Map"%> // 导入Map接口，用于定义存储数据的映射
<%@page import="java.util.ArrayList"%> // 导入ArrayList类，可能用于存储多个对象
<%@page import="java.sql.ResultSet"%> // 导入ResultSet类，用于处理SQL查询的结果集
<%@page import="java.sql.PreparedStatement"%> // 导入PreparedStatement类，用于执行SQL语句
<%@page import="java.sql.Connection"%> // 导入Connection类，用于数据库连接
<%@page import="javabean.Base"%> // 导入Base类，可能用于数据库连接和资源管理
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
pageEncoding="UTF-8"%> // 设置页面的字符编码为UTF-8
<!DOCTYPE html> // 声明文档类型为HTML5
<html> // 开始HTML文档
<head>
<meta charset="UTF-8">
<title>规则添加</title>
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css">
<script src="../public/layui/layui.js"></script>
<style>
.layui-form{
margin: 10px 20px;
}
.layui-form-pane .layui-form-label{
width: 120px;
}
.layui-form-pane .layui-input-block{
margin-left: 120px;
}
</style>
<meta charset="UTF-8"> // 设置页面字符集为UTF-8
<title>规则添加</title> // 页面标题设置为“规则添加”
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css"> // 引入layui框架的CSS文件，提供样式支持
<script src="../public/layui/layui.js"></script> // 引入layui框架的JavaScript文件，提供组件和交互功能
<style>
.layui-form{ // 自定义layui表单样式
margin: 10px 20px; // 设置表单的外边距
}
.layui-form-pane .layui-form-label{ // 自定义表单标签样式
width: 120px; // 设置表单标签的宽度
}
.layui-form-pane .layui-input-block{ // 自定义输入框块的样式
margin-left: 120px; // 设置输入框块的左边距
}
</style>
</head>
<body>
<%
// 获取请求参数id
String id = request.getParameter("id");
Connection connection = null;
PreparedStatement pstmt = null;
ResultSet resultSet = null;
String sql = "";
connection = (Connection)Base.getConnection();
sql = "select * from rules where id = ?";
pstmt = connection.prepareStatement(sql);
pstmt.setString(1, id);
resultSet = pstmt.executeQuery();
resultSet.next();
String[] libraryList = resultSet.getString("borrow_library").split("、");
// 获取图书馆map
Map<String, String> libraryMap = Common.getLibraryMap();
Connection connection = null; // 定义数据库连接对象
PreparedStatement pstmt = null; // 定义PreparedStatement对象
ResultSet resultSet = null; // 定义查询结果集对象
String sql = ""; // 初始化SQL查询语句
// 获取数据库连接
connection = (Connection)Base.getConnection();
// 设置查询规则的SQL语句
sql = "select * from rules where id = ?";
// 创建PreparedStatement对象，执行SQL查询
pstmt = connection.prepareStatement(sql);
pstmt.setString(1, id); // 设置查询条件（id）
// 执行查询，获取结果集
resultSet = pstmt.executeQuery();
resultSet.next(); // 移动到结果集的第一行
// 获取借书限制图书馆信息，并分割成数组
String[] libraryList = resultSet.getString("borrow_library").split("、");
// 获取图书馆信息映射
Map<String, String> libraryMap = Common.getLibraryMap();
%>
<form class="layui-form layui-form-pane" action="">
<input type="text" name="id" value=<%=id %> class="layui-hide">
<div class="layui-form-item">
<label class="layui-form-label">限制天数</label>
<div class="layui-input-block">
<input type="text" name="limit_day" value=<%=resultSet.getString("limit_day") %> required lay-verify="required" placeholder="请输入限制天数" autocomplete="off" class="layui-input">
<form class="layui-form layui-form-pane" action=""> // 定义一个layui表单，使用layui样式
<input type="text" name="id" value=<%=id %> class="layui-hide"> // 隐藏的输入框，用于传递规则的id
<div class="layui-form-item"> // 表单项
<label class="layui-form-label">限制天数</label> // 表单标签“限制天数”
<div class="layui-input-block"> // 输入框块
<input type="text" name="limit_day" value=<%=resultSet.getString("limit_day") %> required lay-verify="required" placeholder="请输入限制天数" autocomplete="off" class="layui-input"> // 输入框，默认值为数据库中获取的限制天数
</div>
</div>
</div>
<!-- 作者 -->
<div class="layui-form-item">
<label class="layui-form-label">限制数量</label>
<div class="layui-input-block">
<input type="text" name="borrow_num" value=<%=resultSet.getString("borrow_num") %> required lay-verify="required" placeholder="请输入限制数量" autocomplete="off" class="layui-input">
<!-- 作者 -->
<div class="layui-form-item"> // 表单项
<label class="layui-form-label">限制数量</label> // 表单标签“限制数量”
<div class="layui-input-block"> // 输入框块
<input type="text" name="borrow_num" value=<%=resultSet.getString("borrow_num") %> required lay-verify="required" placeholder="请输入限制数量" autocomplete="off" class="layui-input"> // 输入框，默认值为数据库中获取的限制数量
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">限制图书馆</label>
<div class="layui-input-block" >
<%
for(String key : libraryMap.keySet()){
boolean flag = false;
%>
<input type="checkbox" name=<%="borrow_library[" +key +"]" %> title=<%=libraryMap.get(key) %>
<% for(String key0 : libraryList){
flag = false;
if(key0.equals(key)){
flag = true;
}
if(flag == true)
out.print("checked");
}
%>>
<%
}
%>
<div class="layui-form-item"> // 表单项
<label class="layui-form-label">限制图书馆</label> // 表单标签“限制图书馆”
<div class="layui-input-block" > // 输入框块
<%
// 遍历图书馆map，生成多个checkbox，表示用户选择的图书馆
for(String key : libraryMap.keySet()){ // 遍历图书馆map的每一项
boolean flag = false; // 定义一个标志，用于判断是否选中
%>
<input type="checkbox" name=<%="borrow_library[" +key +"]" %> title=<%=libraryMap.get(key) %> <!-- 动态生成checkbox -->
<%
// 遍历数据库中获取的已选图书馆列表，判断是否选中该图书馆
for(String key0 : libraryList){
flag = false;
if(key0.equals(key)){
flag = true; // 如果图书馆ID匹配，设置flag为true
}
if(flag == true)
out.print("checked"); // 如果选中该图书馆，则勾选checkbox
}
%>>
<%
}
%>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">逾期每天费用</label>
<div class="layui-input-block">
<input type="text" name="overtime_fee" value=<%=resultSet.getString("overtime_fee") %> required lay-verify="required" placeholder="请输入逾期每天费用" autocomplete="off" class="layui-input">
<div class="layui-form-item"> // 表单项
<label class="layui-form-label">逾期每天费用</label> // 表单标签“逾期每天费用”
<div class="layui-input-block"> // 输入框块
<input type="text" name="overtime_fee" value=<%=resultSet.getString("overtime_fee") %> required lay-verify="required" placeholder="请输入逾期每天费用" autocomplete="off" class="layui-input"> // 输入框，默认值为数据库中获取的逾期费用
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="bookForm">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<div class="layui-form-item"> // 表单项
<div class="layui-input-block"> // 输入框块
<button class="layui-btn" lay-submit="" lay-filter="bookForm">立即提交</button> // 提交按钮，点击后提交表单
<button type="reset" class="layui-btn layui-btn-primary">重置</button> // 重置按钮，点击后重置表单内容
</div>
</div>
</div>
</form>
<script>
<script> // 开始JavaScript代码块
layui.use(['form', 'jquery'], function(){ // 使用layui的form和jquery模块
//layer.closeAll(); // 可选的关闭所有弹出层
$ = layui.jquery; // 引入jQuery
var form = layui.form // 获取layui的form模块
,layer = layui.layer // 获取layui的layer模块，用于弹出层
// 监听提交事件
form.on('submit(bookForm)', function(data){ // 监听表单提交事件
$.ajax({ // 使用AJAX发送请求
url: './ruleEdit', // 请求的URL地址
method: 'post', // 使用POST请求
data: data.field, // 发送的表单数据
dataType: 'json', // 请求返回的数据类型为JSON
success: function(data){ // 请求成功的回调函数
if(data.code == "0"){ // 如果返回的code为0，表示成功
parent.layer.msg("修改成功",{ // 弹出修改成功的提示
icon: 6, // 图标类型为成功
time: 500 // 消息显示500毫秒后消失
});
setTimeout(function(){ // 延时操作
parent.location.reload(); // 刷新父页面
}, 500);
}else{ // 如果返回的code不是0，表示失败
leyer.msg("修改失败"); // 弹出修改失败的提示
}
//parent.layer.msg('您将标记 [ sdf ] 成功传送给了父窗口');
}
})
layui.use(['form', 'jquery'], function(){
//layer.closeAll();
$ = layui.jquery;
var form = layui.form
,layer = layui.layer
//监听提交
form.on('submit(bookForm)', function(data){
$.ajax({
url: './ruleEdit',
method: 'post',
data: data.field,
dataType: 'json',
success: function(data){
if(data.code == "0"){
parent.layer.msg("修改成功",{
icon: 6,
time: 500
});
setTimeout(function(){
parent.location.reload();
}, 500);
}else{
leyer.msg("修改失败");
}
//parent.layer.msg('您将标记 [ sdf ] 成功传送给了父窗口');
}
})
return false;
});
});
return false; // 阻止表单的默认提交行为
});
});
</script>
<%
Base.closeResource(connection, pstmt, resultSet);
// 关闭数据库连接和其他资源
Base.closeResource(connection, pstmt, resultSet); // 关闭数据库连接、PreparedStatement和ResultSet
%>
</body>
</html>
</html>

219
WebContent/admin/rulelist.jsp
Unescape View File

@ -1,119 +1,120 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
pageEncoding="UTF-8"%> // 设置页面的字符编码为UTF-8
<!DOCTYPE html> // 声明HTML5文档类型
<html lang="en"> // 开始HTML文档，指定语言为英语
<head>
<meta charset="UTF-8">
<title>规则列表</title>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<meta charset="UTF-8"> // 设置页面的字符编码为UTF-8
<title>规则列表</title> // 页面标题设置为“规则列表”
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> // 引入layui框架的CSS文件，用于样式支持
<style>
.layui-table,.layui-table-view{
margin: 0 0px;
.layui-table,.layui-table-view{ // 自定义layui表格和表格视图的样式
margin: 0 0px; // 设置表格的外边距为0
}
</style>
</head>
<body>
<!-- 表单 -->
<table class="layui-hide" id="ruleTable" lay-filter="formFilter"></table>
<script src="../public/layui/layui.js" charset="utf-8"></script>
<!-- 头部工具栏 -->
<script type="text/html" id="headBar">
<button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">添加</i></button>
</script>
<!-- 表格后面的操作 -->
<script type="text/html" id="operateBar">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use(['table','jquery'], function(){
$ = layui.jquery;
var table = layui.table;
// 进行渲染
var tableIns = table.render({
elem: '#ruleTable'
,url:'./ruleList'
,toolbar: '#headBar'
,height: '600'
,cols: [[
{fixed: 'left',field:'id', width:140, title: 'ID', sort: true}
,{field:'limit_day', width:180, title: '限制天数', sort: true}
,{field:'borrow_num', width:180, title: '限制本数', sort: true}
,{field:'borrow_library', width:180, title: '限制图书馆'}
,{field:'overtime_fee', title: '逾期每天费用', width: 150}
,{fixed: 'right', title:'操作', toolbar: '#operateBar', align: 'center', width:150}
]]
});
// 头部工具栏事件
table.on('toolbar(formFilter)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
// 添加规则
case 'add':
var addCardLayer = layer.open({
type: 2,
title: '添加规则',
area: ['800px', '500px'],
maxmin: true,
content: 'ruleadd.jsp',
});
};
<!-- 表单 -->
<table class="layui-hide" id="ruleTable" lay-filter="formFilter"></table> // 定义一个表格元素，使用layui样式，并指定ID为ruleTable，lay-filter用于表格过滤
<script src="../public/layui/layui.js" charset="utf-8"></script> // 引入layui框架的JavaScript文件，提供组件和交互功能
<!-- 头部工具栏 -->
<script type="text/html" id="headBar"> // 自定义头部工具栏模板
<button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">添加</i></button> // 添加按钮，点击时触发“add”事件
</script>
<!-- 表格后面的操作 -->
<script type="text/html" id="operateBar"> // 自定义操作栏模板
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> // 编辑按钮，点击时触发“edit”事件
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> // 删除按钮，点击时触发“del”事件
</script>
<script>
layui.use(['table','jquery'], function(){ // 使用layui的table和jquery模块
$ = layui.jquery; // 引入jQuery
var table = layui.table; // 获取layui的table模块，用于操作表格
// 进行渲染
var tableIns = table.render({ // 渲染表格
elem: '#ruleTable' // 表格的容器元素
,url:'./ruleList' // 表格数据源URL
,toolbar: '#headBar' // 使用自定义的头部工具栏
,height: '600' // 设置表格的高度为600px
,cols: [[ // 表格列配置
{fixed: 'left',field:'id', width:140, title: 'ID', sort: true} // ID列，宽度140px，可排序
,{field:'limit_day', width:180, title: '限制天数', sort: true} // 限制天数列，宽度180px，可排序
,{field:'borrow_num', width:180, title: '限制本数', sort: true} // 限制本数列，宽度180px，可排序
,{field:'borrow_library', width:180, title: '限制图书馆'} // 限制图书馆列，宽度180px
,{field:'overtime_fee', title: '逾期每天费用', width: 150} // 逾期费用列，宽度150px
,{fixed: 'right', title:'操作', toolbar: '#operateBar', align: 'center', width:150} // 操作列，宽度150px，包含自定义的操作按钮
]]
});
// 侧边工具栏事件
table.on(('tool(formFilter)'), function(obj){
var data = obj.data;
var layEvent = obj.event;
var tr = obj.tr;
var id = data.id;
switch(obj.event){
case 'edit':
layer.open({
type: 2,
title: '更改信息',
area: ['800px', '600px'],
maxmin: true,
shadeClose: true,
content: 'ruleedit.jsp?id=' +id,
})
break;
case 'del':
layer.confirm("确认要删除么，非必要请勿删除",function(){
$.ajax({
url: './ruleDel',
data: "id=" +id,
type: 'get',
dataType: 'json',
timout: 3000,
success: function(data){
if(data.code == 0){
layer.msg(data.msg,{
icon: 6,
anim: 5,
time: 500
})
setTimeout(function(){
parent.location.reload();
}, 500)
}else{
layer.msg(data.msg,{
icon:5,
anim:6
})
}
},
error: function(){
layer.msg("连接超时");
}
})
})
}
})
// 头部工具栏事件
table.on('toolbar(formFilter)', function(obj){ // 监听头部工具栏的事件
var checkStatus = table.checkStatus(obj.config.id); // 获取选中的表格行
switch(obj.event){ // 根据事件类型处理不同的操作
// 添加规则
case 'add':
var addCardLayer = layer.open({ // 打开添加规则的弹窗
type: 2, // 弹窗类型为iframe
title: '添加规则', // 弹窗标题
area: ['800px', '500px'], // 弹窗宽度800px，高度500px
maxmin: true, // 启用最大化和最小化按钮
content: 'ruleadd.jsp', // 弹窗内容来自ruleadd.jsp页面
});
};
});
// 侧边工具栏事件
table.on(('tool(formFilter)'), function(obj){ // 监听侧边操作栏的事件
var data = obj.data; // 获取当前操作行的数据
var layEvent = obj.event; // 获取事件类型
var tr = obj.tr; // 获取当前操作行的tr元素
var id = data.id; // 获取当前操作行的ID
switch(obj.event){ // 根据事件类型处理不同的操作
case 'edit': // 编辑操作
layer.open({ // 打开编辑规则的弹窗
type: 2, // 弹窗类型为iframe
title: '更改信息', // 弹窗标题
area: ['800px', '600px'], // 弹窗宽度800px，高度600px
maxmin: true, // 启用最大化和最小化按钮
shadeClose: true, // 点击遮罩层关闭弹窗
content: 'ruleedit.jsp?id=' +id, // 弹窗内容来自ruleedit.jsp，并传递ID作为参数
})
break;
case 'del': // 删除操作
layer.confirm("确认要删除么，非必要请勿删除",function(){ // 弹出确认删除的提示框
$.ajax({ // 使用AJAX请求删除数据
url: './ruleDel', // 请求的URL地址
data: "id=" +id, // 传递ID作为请求参数
type: 'get', // 使用GET请求
dataType: 'json', // 返回数据类型为JSON
timeout: 3000, // 请求超时设置为3000ms
success: function(data){ // 请求成功的回调函数
if(data.code == 0){ // 如果返回的code为0，表示删除成功
layer.msg(data.msg,{ // 弹出删除成功的提示
icon: 6, // 成功图标
anim: 5, // 动画效果
time: 500 // 显示时间500毫秒
})
setTimeout(function(){ // 延时操作
parent.location.reload(); // 刷新父页面
}, 500)
}else{ // 如果删除失败
layer.msg(data.msg,{ // 弹出删除失败的提示
icon:5, // 错误图标
anim:6 // 动画效果
})
}
},
error: function(){ // 请求失败的回调函数
layer.msg("连接超时"); // 弹出连接超时的提示
}
})
})
}
})
});
</script>
</script>
</body>
</html>
</html>

121
WebContent/admin/sortadd.jsp
Unescape View File

@ -1,79 +1,74 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分类添加</title>
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css">
<script src="../public/layui/layui.js"></script>
<style>
.layui-form{
margin: 10px 20px;
}
pageEncoding="UTF-8"%> // 设置页面的字符编码为UTF-8
</style>
</head>
<!DOCTYPE html> // 声明文档类型为HTML5
<html> // 开始HTML文档
<head>
<meta charset="UTF-8"> // 设置页面的字符编码为UTF-8
<title>分类添加</title> // 页面标题为“分类添加”
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css"> // 引入layui框架的CSS文件，用于页面样式
<script src="../public/layui/layui.js"></script> // 引入layui框架的JavaScript文件，用于实现页面交互
<style>
.layui-form{ // 自定义表单样式
margin: 10px 20px; // 设置表单的外边距
}
</style>
</head>
<body>
<form class="layui-form layui-form-pane" action="" lay-filter="formFilter">
<div class="layui-form-item">
<label class="layui-form-label">分类名</label>
<div class="layui-input-block">
<input type="text" name="name" lay-verify="required" required autocomplete="off" placeholder="请输入分类名" class="layui-input">
<form class="layui-form layui-form-pane" action="" lay-filter="formFilter"> // 创建一个layui表单，使用layui的样式，设置filter属性为"formFilter"
<div class="layui-form-item"> // 创建一个表单项
<label class="layui-form-label">分类名</label> // 标签显示为“分类名”
<div class="layui-input-block"> // 输入框的容器
<input type="text" name="name" lay-verify="required" required autocomplete="off" placeholder="请输入分类名" class="layui-input"> // 文本框输入，设置为必填，且有验证规则“required”
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">分类描述</label>
<div class="layui-input-block">
<textarea name="description" placeholder="请输入内容" class="layui-textarea" style="height:300px"></textarea>
<div class="layui-form-item layui-form-text"> // 创建一个文本区域
<label class="layui-form-label">分类描述</label> // 标签显示为“分类描述”
<div class="layui-input-block"> // 输入框容器
<textarea name="description" placeholder="请输入内容" class="layui-textarea" style="height:300px"></textarea> // 文本框区域，用于输入分类描述，设置高度为300px
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitButton">立即提交</button>
<div class="layui-form-item"> // 创建一个表单项
<div class="layui-input-block"> // 输入框容器
<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitButton">立即提交</button> // 提交按钮，设置lay-submit属性为提交表单，lay-filter为按钮的过滤标识
</div>
</div>
</form>
<script>
<script> // 开始JavaScript代码
layui.use(['form', 'jquery'], function(){ // 使用layui的form和jquery模块
$ = layui.jquery; // 引入jQuery库
var form = layui.form // 获取form模块
,layer = layui.layer // 获取layer模块，用于弹窗提示
//监听提交
form.on('submit(submitButton)', function(data){ // 监听提交按钮的点击事件，触发submitButton事件
$.ajax({ // 使用AJAX请求提交表单数据
url: './sortAdd', // 提交的URL地址
method: 'post', // 请求方法为POST
data: data.field, // 提交表单数据
dataType: 'json', // 返回的数据格式为JSON
success: function(data){ // 请求成功的回调函数
if(data.code == "0"){ // 如果返回的code为0，表示成功
parent.layer.msg("添加成功",{ // 弹出提示框，提示“添加成功”
icon: 6, // 成功图标
time: 500 // 显示时间为500毫秒
});
setTimeout(function(){ // 延时操作
parent.location.reload(); // 刷新父页面
}, 500);
}else{ // 如果返回的code不为0，表示失败
layer.msg(data.msg); // 弹出返回的错误信息
}
}
})
layui.use(['form', 'jquery'], function(){
$ = layui.jquery;
var form = layui.form
,layer = layui.layer
//监听提交
form.on('submit(submitButton)', function(data){
$.ajax({
url: './sortAdd',
method: 'post',
data: data.field,
dataType: 'json',
success: function(data){
if(data.code == "0"){
parent.layer.msg("添加成功",{
icon: 6,
time: 500
});
setTimeout(function(){
parent.location.reload();
}, 500);
}else{
layer.msg(data.msg);
}
}
})
return false;
});
});
return false; // 阻止表单默认提交行为
});
});
</script>
</body>
</html>
</html>

178
WebContent/admin/sortedit.jsp
Unescape View File

@ -1,101 +1,109 @@
<%@page import="javabean.Base"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="javabean.Base"%> // 导入Base类，用于数据库连接
<%@page import="java.sql.ResultSet"%> // 导入ResultSet类，用于处理查询结果
<%@page import="java.sql.PreparedStatement"%> // 导入PreparedStatement类，用于执行SQL语句
<%@page import="java.sql.Connection"%> // 导入Connection类，用于数据库连接管理
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分类编辑</title>
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css">
<script src="../public/layui/layui.js"></script>
<style>
.layui-form{
margin: 10px 20px;
}
pageEncoding="UTF-8"%> // 设置页面的字符编码为UTF-8
</style>
</head>
<!DOCTYPE html> // 声明文档类型为HTML5
<html> // 开始HTML文档
<head>
<meta charset="UTF-8"> // 设置页面的字符编码为UTF-8
<title>分类编辑</title> // 页面标题为“分类编辑”
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css"> // 引入layui框架的CSS文件，用于页面样式
<script src="../public/layui/layui.js"></script> // 引入layui框架的JavaScript文件，用于实现页面交互
<style>
.layui-form{ // 自定义表单样式
margin: 10px 20px; // 设置表单的外边距
}
</style>
</head>
<body>
<%
String id = request.getParameter("id");
Connection connection = null;
PreparedStatement pstmt = null;
ResultSet resultSet = null;
String sql = "";
connection = (Connection)Base.getConnection();
sql = "select * from book_sort where id = ?";
pstmt = connection.prepareStatement(sql);
pstmt.setString(1, id);
resultSet = pstmt.executeQuery();
resultSet.next();
// 获取请求参数中的id，表示要编辑的分类ID
String id = request.getParameter("id");
// 初始化数据库连接、PreparedStatement和ResultSet对象
Connection connection = null;
PreparedStatement pstmt = null;
ResultSet resultSet = null;
String sql = "";
// 获取数据库连接
connection = (Connection)Base.getConnection();
// 设置查询语句，查询指定ID的分类信息
sql = "select * from book_sort where id = ?";
// 创建PreparedStatement对象，并设置参数
pstmt = connection.prepareStatement(sql);
pstmt.setString(1, id);
// 执行查询，获取结果集
resultSet = pstmt.executeQuery();
// 移动游标到查询结果的第一行
resultSet.next();
%>
<body>
<form class="layui-form layui-form-pane" action="" lay-filter="formFilter">
<input type="text" name="id" value=<%=id %> lay-verify="required" required autocomplete="off" class="layui-input layui-hide">
<div class="layui-form-item">
<label class="layui-form-label">分类名</label>
<div class="layui-input-block">
<input type="text" name="name" value=<%=resultSet.getString("name") %> lay-verify="required" required autocomplete="off" placeholder="请输入分类名" class="layui-input">
<form class="layui-form layui-form-pane" action="" lay-filter="formFilter"> // 创建一个layui表单，设置过滤器为"formFilter"
<input type="text" name="id" value=<%=id %> lay-verify="required" required autocomplete="off" class="layui-input layui-hide"> // 隐藏字段，用于提交分类ID
<div class="layui-form-item"> // 创建一个表单项
<label class="layui-form-label">分类名</label> // 标签显示为“分类名”
<div class="layui-input-block"> // 输入框容器
<input type="text" name="name" value=<%=resultSet.getString("name") %> lay-verify="required" required autocomplete="off" placeholder="请输入分类名" class="layui-input"> // 文本框，显示从数据库中查询到的分类名，设置为必填
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">分类描述</label>
<div class="layui-input-block">
<textarea name="description" placeholder="请输入内容" class="layui-textarea" style="height:300px"><%=resultSet.getString("description") != null ? resultSet.getString("description") : "" %></textarea>
<div class="layui-form-item layui-form-text"> // 创建一个文本区域
<label class="layui-form-label">分类描述</label> // 标签显示为“分类描述”
<div class="layui-input-block"> // 输入框容器
<textarea name="description" placeholder="请输入内容" class="layui-textarea" style="height:300px"><%=resultSet.getString("description") != null ? resultSet.getString("description") : "" %></textarea> // 文本框区域，显示从数据库查询到的分类描述，若为空则显示空字符串
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitButton">立即提交</button>
<div class="layui-form-item"> // 创建一个表单项
<div class="layui-input-block"> // 输入框容器
<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitButton">立即提交</button> // 提交按钮，设置lay-submit属性为提交表单，lay-filter为按钮的过滤标识
</div>
</div>
</div>
</form>
<script>
<script> // 开始JavaScript代码
layui.use(['form', 'jquery'], function(){
$ = layui.jquery;
var form = layui.form
,layer = layui.layer
//监听提交
form.on('submit(submitButton)', function(data){
$.ajax({
url: './sortEdit',
method: 'post',
data: data.field,
dataType: 'json',
success: function(data){
if(data.code == "0"){
parent.layer.msg(data.msg,{
icon: 6,
time: 500
});
setTimeout(function(){
parent.location.reload();
}, 500);
}else{
layer.msg(data.msg);
}
}
})
return false;
});
});
layui.use(['form', 'jquery'], function(){ // 使用layui的form和jquery模块
$ = layui.jquery; // 引入jQuery库
var form = layui.form // 获取form模块
,layer = layui.layer // 获取layer模块，用于弹窗提示
//监听提交
form.on('submit(submitButton)', function(data){ // 监听提交按钮的点击事件，触发submitButton事件
$.ajax({ // 使用AJAX请求提交表单数据
url: './sortEdit', // 提交的URL地址
method: 'post', // 请求方法为POST
data: data.field, // 提交表单数据
dataType: 'json', // 返回的数据格式为JSON
success: function(data){ // 请求成功的回调函数
if(data.code == "0"){ // 如果返回的code为0，表示成功
parent.layer.msg(data.msg,{ // 弹出提示框，提示“添加成功”
icon: 6, // 成功图标
time: 500 // 显示时间为500毫秒
});
setTimeout(function(){ // 延时操作
parent.location.reload(); // 刷新父页面
}, 500);
}else{ // 如果返回的code不为0，表示失败
layer.msg(data.msg); // 弹出返回的错误信息
}
}
})
return false; // 阻止表单默认提交行为
});
});
</script>
<%
Base.closeResource(connection, pstmt, resultSet);
// 关闭数据库资源
Base.closeResource(connection, pstmt, resultSet);
%>
</body>
</html>
</html>

195
WebContent/admin/sortlist.jsp
Unescape View File

@ -1,108 +1,107 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
pageEncoding="UTF-8"%> // 设置页面的字符编码为UTF-8
<!DOCTYPE html> // 声明文档类型为HTML5
<html lang="en"> // 设置页面语言为英语
<head>
<meta charset="UTF-8">
<title>借阅卡</title>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<meta charset="UTF-8"> // 设置页面字符编码为UTF-8
<title>借阅卡</title> // 页面标题为“借阅卡”
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> // 引入layui的CSS文件，用于页面样式
<style>
.layui-table,.layui-table-view{
margin: 0 0px;
.layui-table,.layui-table-view{ // 定义表格样式
margin: 0 0px; // 设置表格的外边距
}
</style>
</head>
<body>
<!-- 表单 -->
<table class="layui-hide" id="cardTable" lay-filter="formFilter"></table>
<script src="../public/layui/layui.js" charset="utf-8"></script>
<!-- 头部工具栏 -->
<script type="text/html" id="headBar">
<button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">添加分类</i></button>
</script>
<!-- 表格后面的操作 -->
<script type="text/html" id="operateBar">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use(['table','jquery'], function(){
$ = layui.jquery;
var table = layui.table;
// 进行渲染
var tableIns = table.render({
elem: '#cardTable'
,url:'./sortList'
,toolbar: '#headBar'
,height: 600
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'name', width:180, title: '分类名', sort: true}
,{field:'description', width:480, title: '描述', sort: true}
,{fixed: 'right', title:'操作', toolbar: '#operateBar', align: 'center', width:150}
]]
});
// 头部工具栏事件
table.on('toolbar(formFilter)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
// 添加分类
case 'add':
var addCardLayer = layer.open({
type: 2,
title: '添加借书证',
area: ['800px', '500px'],
maxmin: true,
shadeClose: true,
content: 'sortadd.jsp',
});
};
<!-- 表单 -->
<table class="layui-hide" id="cardTable" lay-filter="formFilter"></table> // 创建一个layui表格，隐藏表格，设置ID为cardTable，lay-filter为formFilter
<script src="../public/layui/layui.js" charset="utf-8"></script> // 引入layui的JS文件，包含所有layui的功能
<!-- 头部工具栏 -->
<script type="text/html" id="headBar">
<button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">添加分类</i></button> // 定义一个添加分类的按钮，使用layui的图标
</script>
<!-- 表格后面的操作 -->
<script type="text/html" id="operateBar">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> // 编辑操作按钮
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> // 删除操作按钮
</script>
<script>
layui.use(['table','jquery'], function(){ // 使用layui的table和jquery模块
$ = layui.jquery; // 引入jquery库
var table = layui.table; // 获取layui的table模块
// 进行渲染
var tableIns = table.render({ // 渲染表格
elem: '#cardTable' // 选择表格元素
,url:'./sortList' // 数据请求URL
,toolbar: '#headBar' // 设置表格上方的工具栏
,height: 600 // 设置表格的高度为600px
,cols: [[ // 定义表格列
{field:'id', width:80, title: 'ID', sort: true} // ID列，排序功能开启
,{field:'name', width:180, title: '分类名', sort: true} // 分类名列，排序功能开启
,{field:'description', width:480, title: '描述', sort: true} // 描述列，排序功能开启
,{fixed: 'right', title:'操作', toolbar: '#operateBar', align: 'center', width:150} // 操作列，右侧固定，使用自定义工具栏（编辑和删除按钮）
]]
});
// 侧边工具栏事件
table.on(('tool(formFilter)'), function(obj){
var data = obj.data;
var layEvent = obj.event;
var tr = obj.tr;
var id = data.id;
switch(obj.event){
case 'edit':
layer.open({
type: 2,
title: '更改信息',
area: ['800px', '600px'],
maxmin: true,
shadeClose: true,
content: 'sortedit.jsp?id=' +id,
})
break;
case 'del':
layer.confirm('确认删除么？<br><span style="color:red;">这将会将该分类下的书籍归为未分类</span>', function(){
$.ajax({
url: './sortDel',
type: 'get',
data: 'id=' +id,
success: function(data){
if(data.code == 0){
parent.layer.msg(data.msg,{
icon: 6,
time: 500
});
setTimeout(function(){
parent.location.reload();
}, 500);
}else{
layer.msg(data.msg);
}
}
})
})
}
})
// 头部工具栏事件
table.on('toolbar(formFilter)', function(obj){ // 监听表格上方工具栏的事件
var checkStatus = table.checkStatus(obj.config.id); // 获取表格选中的行
switch(obj.event){ // 根据事件类型执行不同操作
// 添加分类
case 'add':
var addCardLayer = layer.open({ // 打开一个layer弹窗
type: 2, // 弹窗类型为iframe
title: '添加借书证', // 弹窗标题
area: ['800px', '500px'], // 弹窗大小
maxmin: true, // 允许最大化最小化
shadeClose: true, // 点击遮罩关闭弹窗
content: 'sortadd.jsp', // 弹窗内容为sortadd.jsp页面
});
};
});
// 侧边工具栏事件
table.on(('tool(formFilter)'), function(obj){ // 监听表格中操作列的事件（编辑和删除）
var data = obj.data; // 获取当前行的数据
var layEvent = obj.event; // 获取当前事件类型（edit或del）
var tr = obj.tr; // 获取当前行
var id = data.id; // 获取当前行的ID
switch(obj.event){ // 根据事件类型执行不同操作
case 'edit':
layer.open({ // 打开一个layer弹窗
type: 2, // 弹窗类型为iframe
title: '更改信息', // 弹窗标题
area: ['800px', '600px'], // 弹窗大小
maxmin: true, // 允许最大化最小化
shadeClose: true, // 点击遮罩关闭弹窗
content: 'sortedit.jsp?id=' + id, // 弹窗内容为sortedit.jsp页面，传递ID参数
})
break;
case 'del':
layer.confirm('确认删除么？<br><span style="color:red;">这将会将该分类下的书籍归为未分类</span>', function(){ // 弹出确认删除的提示框
$.ajax({ // 发送删除请求
url: './sortDel', // 删除操作的URL
type: 'get', // 请求方法为GET
data: 'id=' + id, // 请求数据，传递要删除的ID
success: function(data){ // 请求成功后的回调函数
if(data.code == 0){ // 如果删除成功
parent.layer.msg(data.msg,{ // 弹出成功提示
icon: 6, // 成功图标
time: 500 // 提示框显示时间为500毫秒
});
setTimeout(function(){ // 延时操作
parent.location.reload(); // 刷新父页面
}, 500);
}else{ // 如果删除失败
layer.msg(data.msg); // 弹出错误信息
}
}
})
})
}
})
});
</script>
</script>
</body>
</html>
</html>

131
WebContent/admin/updatePassword.jsp
Unescape View File

@ -1,89 +1,82 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
pageEncoding="UTF-8"%> // 设置页面的编码方式为UTF-8
<!DOCTYPE html> // 声明文档类型为HTML5
<html> // HTML文档开始
<head>
<meta charset="UTF-8">
<title>修改密码</title>
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css">
<script src="../public/layui/layui.js"></script>
<style>
.layui-form{
margin: 10px 20px;
}
</style>
</head>
<meta charset="UTF-8"> // 设置页面的字符编码为UTF-8
<title>修改密码</title> // 设置页面标题为“修改密码”
<!-- layui -->
<link rel="stylesheet" href="../public/layui/css/layui.css"> // 引入layui的CSS样式文件
<script src="../public/layui/layui.js"></script> // 引入layui的JavaScript文件
<style>
.layui-form{ // 设置layui表单的样式
margin: 10px 20px; // 设置表单的外边距
}
</style>
</head>
<body>
<form class="layui-form layui-form-pane" action="" lay-filter="formFilter">
<form class="layui-form layui-form-pane" action="" lay-filter="formFilter"> // 创建layui表单，设置formFilter作为表单过滤器
<div class="layui-form-item">
<label class="layui-form-label">旧密码</label>
<div class="layui-input-block">
<input type="password" name="oldPassword" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
<div class="layui-form-item"> // 定义表单项
<label class="layui-form-label">旧密码</label> // 设置标签为“旧密码”
<div class="layui-input-block"> // 输入框所在块
<input type="password" name="oldPassword" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> // 密码输入框，带有验证规则
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">新密码</label>
<div class="layui-input-block">
<input type="password" name="newPassword" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
<div class="layui-form-item"> // 定义表单项
<label class="layui-form-label">新密码</label> // 设置标签为“新密码”
<div class="layui-input-block"> // 输入框所在块
<input type="password" name="newPassword" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> // 新密码输入框，带有验证规则
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-block">
<input type="password" name="conPassword" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
<div class="layui-form-item"> // 定义表单项
<label class="layui-form-label">确认密码</label> // 设置标签为“确认密码”
<div class="layui-input-block"> // 输入框所在块
<input type="password" name="conPassword" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> // 确认密码输入框，带有验证规则
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitButton">确认修改</button>
<div class="layui-form-item"> // 定义表单项
<div class="layui-input-block"> // 输入框所在块
<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitButton">确认修改</button> // 提交按钮，点击提交表单
</div>
</div>
</form>
<script>
<script>
layui.use(['form', 'jquery'], function(){ // 使用layui的form和jquery模块
$ = layui.jquery; // 获取jquery库
var form = layui.form, // 获取layui的form模块
layer = layui.layer; // 获取layui的layer模块
layui.use(['form', 'jquery'], function(){
$ = layui.jquery;
var form = layui.form
,layer = layui.layer
//监听提交
form.on('submit(submitButton)', function(data){
$.ajax({
url: './updatePassword',
method: 'post',
data: data.field,
dataType: 'json',
success: function(data){
if(data.code == "0"){
parent.layer.msg("修改成功",{
icon: 6,
time: 500
});
setTimeout(function(){
var index = parent.layer.getFrameIndex(window.name); //操作父页面
parent.layer.close(index);
}, 500);
}else{
layer.msg(data.msg);
}
}
})
return false;
});
});
// 监听提交事件
form.on('submit(submitButton)', function(data){ // 监听“确认修改”按钮点击事件
$.ajax({
url: './updatePassword', // 提交的URL地址
method: 'post', // 提交方式为POST
data: data.field, // 提交的数据
dataType: 'json', // 预期返回的数据类型为JSON
success: function(data){ // 请求成功回调函数
if(data.code == "0"){ // 如果返回的代码是“0”，表示修改成功
parent.layer.msg("修改成功",{ // 在父页面显示成功消息
icon: 6, // 使用成功的图标
time: 500 // 500毫秒后关闭消息框
});
setTimeout(function(){ // 设置延迟操作
var index = parent.layer.getFrameIndex(window.name); // 获取当前iframe窗口的索引
parent.layer.close(index); // 关闭当前iframe窗口
}, 500);
}else{
layer.msg(data.msg); // 如果修改失败，弹出错误信息
}
}
})
return false; // 阻止表单默认提交
});
});
</script>
</body>
</html>
</html>

115
WebContent/adminLogin.html
Unescape View File

@ -1,67 +1,66 @@
<!DOCTYPE html>
<html>
<!DOCTYPE html> // 声明文档类型为HTML5
<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" />
<meta charset="UTF-8"> // 设置页面的字符编码为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> // 引入jQuery库（通过CDN）
<!-- 最新版本的 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的CSS样式文件
<!-- 最新的 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的JS文件
<!-- 可选的 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"> // 引入Bootstrap的主题样式文件
<link rel="stylesheet" href="./public/css/animate.css"> // 引入animate.css，提供CSS动画效果
<link rel="stylesheet" href="./public/css/login.css" /> // 引入自定义的登录页面样式文件
</head>
<body>
<div class="container main">
<div id="login" class="contain animated fadeInDown">
<h1>系统管理员登录</h1>
<form method="post">
<input type="text" name="username" class="form-control my_input" placeholder="请输入账号" required="required">
<input type="password" name="password" 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"> // 使用Bootstrap的container类，设置容器
<div id="login" class="contain animated fadeInDown"> // 设置登录框，包含动画效果（从上方渐入）
<h1>系统管理员登录</h1> // 显示标题“系统管理员登录”
<form method="post"> // 表单使用POST方法提交
<input type="text" name="username" class="form-control my_input" placeholder="请输入账号" required="required"> // 输入框，要求用户输入账号，使用form-control样式
<input type="password" name="password" class="form-control my_input" placeholder="请输入密码" required="required"> // 输入框，要求用户输入密码，使用form-control样式
<input type="submit" class="form-control" value="登录" onclick="javascript:void(0);"> // 提交按钮，点击时调用JS函数（不会刷新页面）
</form>
</div>
<div style="position:fixed; bottom:0; right:0;">
<a href="loginReader.html" target="_blank"><img src="public/image/reader.png" width="50px" height="50px"></a><br>
<a href="loginManager.html" target="_blank"><img src="public/image/manager.png" width="50px" height="50px"></a>
</div>
<script src="./public/js/layer/layer.js"></script>
<script>
$(function(){
//登录
$("input[type=submit]").click(function(){
$.ajax({
url: "./adminLogin",
type: "post",
data: $("form").serialize(),
dataType: "json",
success: function( data ){
if(data.code == 0){
layer.msg("登录成功", {
icon: 6,
time: 1000
}, function(){
location.href = data.url;
})
}else{
layer.open({
title: "登录失败",
content: data.msg,
icon: 5,
anim: 6
})
}
</div>
<div style="position:fixed; bottom:0; right:0;"> // 设置固定位置，位于页面底部右侧
<a href="loginReader.html" target="_blank"><img src="public/image/reader.png" width="50px" height="50px"></a><br> // 链接到“读者登录”页面，显示图片图标
<a href="loginManager.html" target="_blank"><img src="public/image/manager.png" width="50px" height="50px"></a> // 链接到“管理员登录”页面，显示图片图标
</div>
<script src="./public/js/layer/layer.js"></script> // 引入layer.js，用于弹窗提示
<script>
$(function(){ // 使用jQuery，等待DOM加载完成
//登录
$("input[type=submit]").click(function(){ // 监听提交按钮的点击事件
$.ajax({ // 使用AJAX发送请求
url: "./adminLogin", // 提交的URL地址为“adminLogin”
type: "post", // 请求方式为POST
data: $("form").serialize(), // 序列化表单数据，发送到后端
dataType: "json", // 设置返回的数据类型为JSON
success: function( data ){ // 请求成功时的回调函数
if(data.code == 0){ // 如果返回的code为0，表示登录成功
layer.msg("登录成功", { // 弹出登录成功提示
icon: 6, // 设置提示图标为“成功”图标
time: 1000 // 显示时间为1秒
}, function(){ // 在成功提示后，跳转到指定的URL
location.href = data.url;
})
}else{ // 如果登录失败
layer.open({ // 弹出登录失败提示
title: "登录失败", // 设置提示框标题
content: data.msg, // 显示返回的错误消息
icon: 5, // 设置提示图标为“错误”图标
anim: 6 // 设置提示框的动画效果
})
}
})
return false;
}
})
return false; // 阻止表单的默认提交行为
})
</script>
})
</script>
</body>
</html>
</html>

Write Preview
Loading…
Cancel
Save