目 录
第1章 绪论 1
1.1 选题背景及意义 1
1.1.1选题背景 1
1.1.2选题意义 1
1.2 国内外研究现状及发展趋势 2
1.2.1国内研究现状 2
1.2.2国外研究现状 2
1.2.3发展趋势 3
1.3 研究主要内容 3
1.4 本文的组织结构 4
第2章 开发技术与环境配置 6
2.1 SSM框架 6
2.2 Java简介 6
2.3 B/S结构 7
2.4访问数据库实现方法 8
2.5 MySQL数据库 9
2.6系统对MySQL数据库的两种连接方式 10
第3章 系统分析与设计 13
3.1 可行性分析 13
3.1.1 技术可行性 13
3.1.2 操作可行性 14
3.1.3经济可行性 14
3.2 需求分析 15
3.2.1 功能需求分析 16
3.2.2 性能需求分析 17
3.2.3 接口需求分析 17
3.2.4 约束条件分析 17
3.3 总体设计 18
3.4 数据库设计 18
3.4.1 数据库概念结构设计 19
3.4.2 数据库具体设计 20
第4章 系统功能的具体实现 28
4.1登录主页 28
4.2管理员功能模块 28
4.2.1用户管理 29
4.2.2借阅证件管理 29
4.2.3挂失信息管理 30
4.2.4图书信息管理 30
4.2.5借书信息管理 31
4.2.6归还信息管理 31
4.2.7续借信息管理 32
4.2.8图书挂失管理 32
4.2.9催还信息管理 33
4.3用户功能模块 33
4.3.1用户注册 34
4.3.2借阅证件管理 34
4.3.3挂失信息管理 35
4.3.4图书信息管理 35
4.3.5借书信息管理 36
4.3.6归还信息管理 36
4.3.7续借信息管理 37
4.3.8图书挂失管理 37
第5章 系统测试 38
5.1系统测试的目的 38
5.2系统测试方法 38
5.3 测试结果 39
结 论 41
参考文献 42
致 谢 44
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<script type="text/javascript"
src="${pageContext.request.contextPath}/resources/assets2/js/jquery.min.js"></script>
<!-- <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/assets2/css/style.css"> -->
<link rel="stylesheet"
href="${pageContext.request.contextPath}/resources/assets2/css/loader-style.css">
<link rel="stylesheet"
href="${pageContext.request.contextPath}/resources/assets2/css/bootstrap.css">
<link rel="stylesheet"
href="${pageContext.request.contextPath}/resources/assets2/css/signin.css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon"
href="${pageContext.request.contextPath}/resources/assets2/ico/minus.png">
</head>
<style>
html {
width: 100%;
height: 100%;
}
body {
height: 100vh;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden !important;
width: 100%;
height: 100%;
background-image: url(http://codegen.caihongy.cn/20210828/c3ff9927150840d9a487855eda3e2c8d.jpg) !important;
}
.container {
padding: 0;
margin: 0;
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
}
#login-wrapper {
display: flex;
flex-direction: column;
position: inherit;
height: 460px;
width: 400px;
margin: 0 0 0 400px;
padding: 0;
border-radius: 20px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
background-color: rgba(194, 168, 161, 0.9);
box-shadow: -400px 0 1px rgba(162,81,38, 0.9);
}
#login-wrapper h1 {
line-height: 60px;
width: 400px;
color: #fff;
font-size: 18px;
margin: 20px 0 0px -400px;
padding: 0;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
background-color: rgba(30, 144, 255, 0);
box-shadow: 0 0 0px 0px rgba(213,190,148, 1);
text-align: center;
}
#loginForm .form-group-l-r {
display: flex;
flex-wrap: wrap;
}
#loginForm .form-group {
display: flex;
align-items: center;
flex-wrap: wrap;
height: 50px;
width: 260px;
margin: 0px 0 0 -160px;
padding: 0 0 0px 0;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,1);
background-color: rgba(255, 140, 0, 0);
box-shadow: 0 0 6px rgba(255,0,0,0);
}
#loginForm .form-group .label {
width: 70px;
line-height: 44px;
margin: 60px 0 0 0;
color: rgba(0, 0, 0, 1);
font-size: 16px;
padding: 0;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,0);
background-color: transparent;
box-shadow: 0 0 6px rgba(255,0,0,0);
text-align: center;
}
#loginForm .form-group .form-control-i {
width: 190px;
height: 44px;
margin: 60px 0 0 0;
color: rgba(0, 0, 0, 1);
font-size: 14px;
padding: 0;
border-radius: 8px;
border-width: 1px;
border-style: solid;
border-color: rgba(58, 68, 88, 1);
background-color: #fff;
box-shadow: 0 0 6px rgba(30, 144, 255, 0);
text-align: center;
}
#loginForm .form-group .form-control-i:focus {
outline: 0 none;
}
#loginForm .form-group-r {
display: flex;
align-items: center;
width: 340px;
height: 220px;
margin: -100px 0 0 -170px;
padding: 140px 0 0 20px;
border-radius: 20px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 70px 0px 0px rgba(255, 255, 255, 1);
}
#loginForm .form-group-r .checkbox {
margin: 0 10px 0 0;
padding: 0;
display: flex;
align-items: center;
}
#loginForm .form-group-r .checkbox label {
color: #606266;
font-size: 14px;
margin: 0;
margin-top: -1px;
}
#loginForm .form-group-r .checkbox.active label {
color: #1e90ff;
font-size: 14px;
}
#loginForm .form-group-r .checkbox input {
margin: 0;
margin-right: 4px;
}
#loginForm button.pull-right {
outline: none;
width: 120px;
height: 40px;
margin: 5px 0 0 -60px;
color: #fff;
font-size: 14px;
padding: 0 10px;
border-radius: 50px;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(46, 38, 34, 1);
box-shadow: 0 0 6px rgba(255, 0, 0, 0);
}
#loginForm a.btn-register {
display: inline-block;
width: 90px;
height: 25px;
margin: 100px 0 0 0;
color: rgba(0, 0, 0, 1);
font-size: 12px;
padding: 0;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(255, 0, 0, 0);
box-shadow: 0 0 6px rgba(30, 144, 255, 0);
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
#loginForm .codes {
}
#loginForm .codes input {
width: calc(100% - 84px);
height: 44px;
margin: 60px 0 0 0;
color: #1e90ff;
font-size: 14px;
padding: 0 10px;
border-radius: 0;
border-width: 1px;
border-style: solid;
border-color: #1e90ff;
background-color: #fff;
box-shadow: 0 0 6px rgba(30, 144, 255, 0);
outline: none;
}
#loginForm .codes .nums {
width: 84px;
height: 44px;
margin: 60px 0 0 0;
color: $template2.back.login.code.nums.color;
font-size: $template2.back.login.code.nums.fontSize;
padding: 0;
border-radius: 0;
border-width: 1px 1px 1px 0;
border-style: solid;
border-color: #1e90ff;
background-color: #f5f5f5;
box-shadow: 0 0 6px rgba(30, 144, 255, 0);
outline: none;
}
</style>
<body>
<!-- Preloader -->
<!-- <div id="preloader">
<div id="status"> </div>
</div> -->
<div class="container" style="position: relative;">
<div class="" id="login-wrapper">
<h1>图书借阅系统</h1>
<form id="loginForm" action="" method="post">
<div class="form-group">
<label class="label">用户名</label> <input type="text" id="username" name="username" placeholder="用户名"
class="form-control-i" required>
</div>
<div class="form-group">
<label class="label">密码</label> <input type="password" name="password" placeholder="密码"
class="form-control-i" required>
</div>
<div class="form-group-l-r">
<button class="btn btn btn-primary pull-right" type="submit" οnclick="login()">登 录</button>
<a class="btn-register" href="modules/yonghu/register.jsp">用户注册</a>
</div>
</form>
<!-- <div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="account-box">
</div>
</div>
</div> -->
</div>
</div>
<!-- END OF PAPER WRAP -->
<!-- MAIN EFFECT -->
<!--<script type="text/javascript" src="${pageContext.request.contextPath}/resources/assets2/js/preloader.js"></script>-->
<script type="text/javascript"
src="${pageContext.request.contextPath}/resources/assets2/js/bootstrap.js"></script>
<!--<script type="text/javascript" src="${pageContext.request.contextPath}/resources/assets2/js/app.js"></script>-->
<!--<script type="text/javascript" src="${pageContext.request.contextPath}/resources/assets2/js/load.js"></script>-->
<!--<script type="text/javascript" src="${pageContext.request.contextPath}/resources/assets2/js/main.js"></script>-->
<script type="text/javascript"
src="${pageContext.request.contextPath}/resources/js/jquery.form.js"></script>
<!--<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script> -->
<!--<script type="text/javascript" src="${pageContext.request.contextPath}/resources/assets2/js/map/gmap3.js"></script> -->
<script type="text/javascript">
<%@ include file="utils/menu.jsp"%>
<%@ include file="utils/baseUrl.jsp"%>
var role = "";
var accountTableName = "";
var codes = [{
num: 1,
color: '#000',
rotate: '10deg',
size: '16px'
}, {
num: 2,
color: '#000',
rotate: '10deg',
size: '16px'
}, {
num: 3,
color: '#000',
rotate: '10deg',
size: '16px'
}, {
num: 4,
color: '#000',
rotate: '10deg',
size: '16px'
}]
//渲染角色选择
function setRoleOption() {
var box = document.createElement('div');
box.setAttribute('class', 'form-group-r');
for (var i = 0; i < menus.length; i++) {
if(menus[i].hasBackLogin=='是') {
//console.log(menu[i].roleName)
var div = document.createElement('div');
div.setAttribute('class', 'checkbox');
var label = document.createElement('label');
//label.innerHTML = menus[i].roleName;
var checkbox = document.createElement('input');
checkbox.setAttribute('type', 'radio');
checkbox.setAttribute('name', 'chk');
checkbox.setAttribute('value', menus[i].roleName);
var attr = "checkRole(" + "\'" + menus[i].roleName + "\',\'"
+ menus[i].tableName + "\')";
checkbox.setAttribute('onclick', attr);
//label.setAttribute('class','checkbox inline');
label.innerHTML = menus[i].roleName;
div.appendChild(checkbox);
div.appendChild(label);
box.appendChild(div);
}
}
$('form .form-group-l-r').before(box);
}
function checkRole(roleName, tableName) {
role = roleName;
$('#loginForm').attr('action', baseUrl + tableName + '/login');
accountTableName = tableName;
}
$('#login-wrapper').on('change', 'input[type=radio]', function () {
$('#login-wrapper .form-group-r .checkbox').removeClass('active');
$(this).parent().addClass('active');
});
function login() {
$("#loginForm")
.ajaxForm(
function(res) {
if (role == "" || role == null) {
alert("请选择角色后再登录");
} else {
if (res.code == 0) {
alert("登录成功");
var username = $('#username').val();
window.sessionStorage.setItem('accountTableName',accountTableName)
window.sessionStorage.setItem('username',username);
window.sessionStorage.setItem('token',
res.token);
window.sessionStorage.setItem('role',
role);
http(accountTableName+'/session','GET',{},(res2)=>{
if(res2.code == 0){
window.sessionStorage.setItem('userid',res2.data.id);
window.location.href = "${pageContext.request.contextPath}/index.jsp";
}
});
} else {
alert(res.msg);
}
}
});
}
function ready() {
setRoleOption();
//$('form').attr('action',baseUrl + 'users/login');
}
document.addEventListener("DOMContentLoaded", ready);
function randomString() {
var len = 4;
var chars = [
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',
'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2',
'3', '4', '5', '6', '7', '8', '9'
]
var colors = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
var sizes = ['14', '15', '16', '17', '18']
var output = []
for (var i = 0; i < len; i++) {
// 随机验证码
var key = Math.floor(Math.random() * chars.length)
codes[i].num = chars[key]
// 随机验证码颜色
var code = '#'
for (var j = 0; j < 6; j++) {
var key = Math.floor(Math.random() * colors.length)
code += colors[key]
}
codes[i].color = code
// 随机验证码方向
var rotate = Math.floor(Math.random() * 30)
var plus = Math.floor(Math.random() * 2)
if (plus == 1) rotate = '-' + rotate
codes[i].rotate = 'rotate(' + rotate + 'deg)'
// 随机验证码字体大小
var size = Math.floor(Math.random() * sizes.length)
codes[i].size = sizes[size] + 'px'
}
var str = ''
for(var i = 0;i<codes.length;i++) {
str += '<span style="color:' + codes[i].color + ';transform:' + codes[i].rotate + ';fontSize:' + codes[i].size + ';padding: 0 3px;display:inline-block">'+codes[i].num+'</span>'
}
$('#nums').html('').append(str);
}
randomString();
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
