登录界面:
<title>登录|图书管理系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="static/css/bootstrap-admin-theme.css">
<link rel="stylesheet" href="static/css/bootstrap-admin-theme.css">
<script src="static/js/bootstrap.min.js"></script>
<script src="static/jQuery/jquery-3.1.1.min.js"></script>
<script src="static/ajax-lib/ajaxutils.js"></script>
<script src="static/js/login.js"></script>
<style type="text/css">
body {
background: url(static/img/nopass.png);
}
</style>
</head>
<style type="text/css">
.alert {
margin: 0 auto 20px;
text-align: center;
}
</style>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<body class="bootstrap-admin-without-padding">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="alert alert-info">
<a class="close" data-dismiss="alert" href="#">×</a>
欢迎登录图书馆管理系统
</div>
<form class="bootstrap-admin-login-form" method="post"
action="/books/LoginServlet">
<%
String state = (String) session.getAttribute("state");
session.removeAttribute("state");
if (state != null) {
%>
<script type="text/javascript" language="javascript">
alert("密码错误");
window.location='index.jsp';
</script>
<%
}
%>
<div class="form-group">
<label class="control-label" for="username">账 号</label> <input
type="text" class="form-control" id="username" name="username"
required="required" placeholder="学号" /> <label
class="control-label" for="username" style="display: none;"></label>
</div>
<div class="form-group">
<label class="control-label" for="password">密 码</label> <input
type="password" class="form-control" id="password"
name="password" required="required" placeholder="密码" /> <label
class="control-label" for="username" style="display: none;"></label>
</div>
<div>
管理员登陆之后的图书管理界面代码:
```java
```java
<nav class="navbar navbar-inverse navbar-fixed-top bootstrap-admin-navbar bootstrap-admin-navbar-under-small" role="navigation">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="collapse navbar-collapse main-navbar-collapse">
<a class="navbar-brand" href="/books/admin.jsp"><strong>欢迎使用图书馆管理系统</strong></a>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" role="button" class="dropdown-toggle" data-hover="dropdown"> <i class="glyphicon glyphicon-user"></i> 欢迎您:
<span><% out.write(admin.getName());%></span> <i class="caret"></i></a>
<ul class="dropdown-menu">
<li><a href="#updateinfo" data-toggle="modal">个人资料</a></li>
<li role="presentation" class="divider"></li>
<li><a href="#updatepwd" data-toggle="modal">修改密码</a></li>
<li role="presentation" class="divider"></li>
<li><a href="/books/index.jsp">退出</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container">
<!-- left, vertical navbar & content -->
<div class="row">
<!-- left, vertical navbar -->
<div class="col-md-2 bootstrap-admin-col-left">
<ul class="nav navbar-collapse collapse bootstrap-admin-navbar-side">
<li>
<a href="/books/admin_book.jsp"><i class="glyphicon glyphicon-chevron-right"></i> 图书管理</a>
</li>
<li>
<a href="/books/admin_user.jsp"><i class="glyphicon glyphicon-chevron-right"></i> 读者管理</a>
</li>
<li>
<a href="/books/admin_booktype.jsp"><i class="glyphicon glyphicon-chevron-right"></i> 图书分类管理</a>
</li>
<li>
<a href="/books/admin_borrow.jsp"><i class="glyphicon glyphicon-chevron-right"></i> 图书借阅信息</a>
</li>
<li>
<a href="/books/admin_history.jsp"><i class="glyphicon glyphicon-chevron-right"></i> 图书归还信息</a>
</li>
</ul>
</div>
<!-- content -->
<div class="col-md-10">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default bootstrap-admin-no-table-panel">
<div class="panel-heading">
<div class="text-muted bootstrap-admin-box-title">查询</div>
</div>
<div class="bootstrap-admin-no-table-panel-content bootstrap-admin-panel-content collapse in">
<form class="form-horizontal" action="/books/selectServlet" method="post">
<input type="hidden" name="tip" value="1">
<div class="col-lg-7 form-group">
<label class="col-lg-4 control-label" for="query_bname">图书名称</label>
<div class="col-lg-8">
<input class="form-control" id="bookName" name="name" type="text" value="">
<label class="control-label" for="query_bname" style="display: none;"></label>
</div>
</div>
<div class="col-lg-3 form-group">
<button type="submit" class="btn btn-primary" id="btn_query" onclick="">查询</button>
</div>
<div class="col-lg-3 form-group">
<button type="button" class="btn btn-primary" id="btn_add" data-toggle="modal" data-target="#addModal">添加图书</button>
</div>
管理员登录的读者管理界面代码:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default bootstrap-admin-no-table-panel">
<div class="panel-heading">
<div class="text-muted bootstrap-admin-box-title">读者管理</div>
</div>
<div class="bootstrap-admin-no-table-panel-content bootstrap-admin-panel-content collapse in">
<form class="form-horizontal" action="/books/selectServlet" method="post">
<div class="col-lg-3 form-group">
<button type="button" class="btn btn-primary" id="btn_add" data-toggle="modal" data-target="#addModal">添加读者</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table id="data_list" class="table table-hover table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>账号</th>
<th>姓名</th>
<th>邮箱</th>
<th>手机号</th>
<th>当前借阅数</th>
<th>历史借阅数</th>
<th>可借阅天数</th>
<th>最大可借数</th>
<th>操作</th>
</tr>
</thead>
图书分类管理界面代码:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default bootstrap-admin-no-table-panel">
<div class="panel-heading">
<div class="text-muted bootstrap-admin-box-title">图书分类管理</div>
</div>
<div class="bootstrap-admin-no-table-panel-content bootstrap-admin-panel-content collapse in">
<form class="form-horizontal" action="/books/selectServlet" method="post">
<div class="col-lg-3 form-group">
<button type="button" class="btn btn-primary" id="btn_add" data-toggle="modal" data-target="#addModal">添加分类</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table id="data_list" class="table table-hover table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>图书分类名称</th>
<th>操作</th>
</tr>
</thead>
图书借阅信息界面代码:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default bootstrap-admin-no-table-panel">
<div class="panel-heading">
<div class="text-muted bootstrap-admin-box-title">图书借阅信息</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table id="data_list" class="table table-hover table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>图书号</th>
<th>图书名称</th>
<th>读者账号</th>
<th>读者名称</th>
<th>借阅日期</th>
<th>截止还书日期</th>
<th>操作</th>
</tr>
</thead>
图书归还信息界面代码:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default bootstrap-admin-no-table-panel">
<div class="panel-heading">
<div class="text-muted bootstrap-admin-box-title">图书归还信息</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table id="data_list" class="table table-hover table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>图书号</th>
<th>图书名称</th>
<th>读者账号</th>
<th>读者名称</th>
<th>借阅日期</th>
<th>还书日期</th>
</tr>
</thead>
用户登录之后的界面代码:
<div class="row">
<!-- left, vertical navbar -->
<div class="col-md-2 bootstrap-admin-col-left">
<ul class="nav navbar-collapse collapse bootstrap-admin-navbar-side">
<li>
<a href="/books/select.jsp"><i class="glyphicon glyphicon-chevron-right"></i> 图书查询</a>
</li>
<li>
<a href="/books/borrow.jsp"><i class="glyphicon glyphicon-chevron-right"></i> 借阅信息</a>
</li>
<li>
<a href="/books/history.jsp"><i class="glyphicon glyphicon-chevron-right"></i> 借阅历史</a>
</li>
</ul>
</div>
<!-- content -->
<div class="col-md-10">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="text-muted bootstrap-admin-box-title">图书查询</div>
</div>
<div class="bootstrap-admin-panel-content">
<ul>
<li>根据图书编号、图书名称查询图书信息</li>
<li>可查询图书的编号、名称、分类、作者、价格、在馆数量等</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 判断用户是否登录 -->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="text-muted bootstrap-admin-box-title">借阅信息</div>
</div>
<div class="bootstrap-admin-panel-content">
<ul>
<li>可查询除图书的基本信息、借阅日期、截止还书日期、超期天数等</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="text-muted bootstrap-admin-box-title">借阅历史</div>
</div>
<div class="bootstrap-admin-panel-content">
<ul>
<li>查询自己以往的借阅历史,包括哪些图书等具体信息</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
图书查询界面代码:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default bootstrap-admin-no-table-panel">
<div class="panel-heading">
<div class="text-muted bootstrap-admin-box-title">查询</div>
</div>
<div class="bootstrap-admin-no-table-panel-content bootstrap-admin-panel-content collapse in">
<form class="form-horizontal" action="/books/selectServlet" method="post">
<input type="hidden" name="tip" value="2">
<div class="col-lg-8 form-group">
<label class="col-lg-4 control-label" for="query_bname">图书名称</label>
<div class="col-lg-8">
<input class="form-control" id="bookName" name="name" type="text" value="">
<label class="control-label" for="query_bname" style="display: none;"></label>
</div>
</div>
<div class="col-lg-4 form-group">
<button type="submit" class="btn btn-primary" id="btn_query" >查询</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table id="data_list" class="table table-hover table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>图书号</th>
<th>图书类型</th>
<th>图书名称</th>
<th>作者名称</th>
<th>出版社</th>
<th>库存</th>
<th>操作</th>
</tr>
</thead>
用户借阅信息界面代码:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default bootstrap-admin-no-table-panel">
<div class="panel-heading">
<div class="text-muted bootstrap-admin-box-title">当前借阅信息</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table id="data_list" class="table table-hover table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>图书号</th>
<th>图书名称</th>
<th>读者账号</th>
<th>读者名称</th>
<th>借阅日期</th>
<th>截止还书日期</th>
<th>操作</th>
</tr>
</thead>
用户借阅记录代码:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default bootstrap-admin-no-table-panel">
<div class="panel-heading">
<div class="text-muted bootstrap-admin-box-title">借阅记录</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table id="data_list" class="table table-hover table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>图书号</th>
<th>图书名称</th>
<th>读者账号</th>
<th>读者名称</th>
<th>借阅日期</th>
<th>还书日期</th>
</tr>
</thead>
用户注册界面代码:
<div class="tpl-login">
<div class="tpl-login-content">
<div class="tpl-login-title">注册用户</div>
<span class="tpl-login-content-info">
创建一个新的用户
</span>
<form class="am-form tpl-form-line-form" method="post" action="/books/RegisterServlet">
<div class="am-form-group">
<input type="text" class="tpl-form-input" id="user-name" name="username" required="required" placeholder="请输入账号">
</div>
<div class="am-form-group">
<input type="text" class="tpl-form-input" id="user-name" name="aid" required="required" placeholder="请输入编号">
</div>
<div class="am-form-group">
<input type="password" class="tpl-form-input" id="user-name" name="password" required="required" placeholder="请输入密码">
</div>
<div class="am-form-group">
<input type="text" class="tpl-form-input" id="user-name" name="name" required="required" placeholder="请输入姓名">
</div>
<div class="am-form-group">
<input type="text" class="tpl-form-input" id="user-name" name="email" required="required" placeholder="请输入邮箱">
</div>
<div class="am-form-group">
<input type="text" class="tpl-form-input" id="user-name" name="phone" required="required" placeholder="请输入手机号">
</div>
<div class="am-form-group">
<button type="submit" class="am-btn am-btn-primary am-btn-block tpl-btn-bg-color-success tpl-login-btn">提交</button>
</div>
<div class="am-form-group">
<button type="button" onclick="location.href='/books/index.jsp';" class="am-btn am-btn-primary am-btn-block tpl-btn-bg-color-success tpl-login-btn">返回登录</button>
</div>
</form>
</div>
</div>
</div>
<script src="http://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.min.js"></script>
<script src="static/assets/js/app.js"></script>