爱阅图书信息管理系统web实现，期末工程实践
前端：jsp、servlet、html、javascript、css、bootstrap、chart.js
后端：java
数据库：mysql
工具：eclipse、mysql navicat、tomcat10
部分源码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ request.getContextPath() + "/";
%>
<html lang="zh-CN" class="bootstrap-admin-vertical-centered">
<head>
<base href="<%=basePath%>" />
<meta charset="UTF-8">
<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="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
<script src="bootstrap/jQuery/jquery-3.5.1.min.js"></script>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
body {
background-image: url("images/01.png");
} #all {
transform: translateY(50%); /*向下移动自身的一半*/
background-color: rgb(232,232,232) ;
height: 390px;
}
</style>
</head>
<style type="text/css">
.alert {
margin: 0 auto 20px;
text-align: center;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-sm-6" id="all">
<div class="alert alert-info">
欢迎登录爱阅图书管理系统
</div>
<form class="form-horizontal" method="post" action="/AiYue/LoginServlet">
<%
String state = (String) session.getAttribute("state");
session.removeAttribute("state");
if (state != null) {
%>
<div class="alert alert-success">
<strong><%=state %></strong>
</div>
<%}%>
<div class="container">
<div class="form-group">
<label for="userName" class="col-sm-1 control-label col-md-offset-1">用户名：</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="userName" name="username" required placeholder="请输入用户名">
<label class="control-label" for="username" style="display: none;"></label>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-1 control-label col-md-offset-1">密码：</label>
<div class="col-sm-3">
<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>
<div class="form-group">
<label class="col-sm-1 control-label col-md-offset-1" for="code">验 证 码</label>
<div class="row">
<div class="col-sm-2">
<input type="text" class="form-control" id="checkcodeId" name="checkcode"
required="required" placeholder="验证码(点击图片更换)" />
</div>
<div class="col-sm-2">
<a href="javascript:reloadCheckImg();" > <img src="/AiYue/view/checkcode.jsp"/></a>
<span id="tip"> </span>
</div>
<label class="control-label" for="username"
style="display: none;"></label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-12">
<label class="control-label" for="password">没有账号请<a href="/AiYue/view/register.jsp" style="color: blue;">注册</a></label><br>
<input type="submit" class="btn btn-lg btn-primary" value="登 录" />
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" >
function reloadCheckImg()
{
$("img").attr("src", "/AiYue/view/checkcode.jsp?t="+(new Date().getTime())); //<img src="...">
}
$(document).ready(function(){
$("#checkcodeId").blur(function(){
var $checkcode = $("#checkcodeId").val();
//校验 :文本框中输入的值 发送到服务端。
//服务端： 获取文本框输入的值 ，和真实验证码图片中的值对比 ，并返回验证结果
$.post(
"/AiYue/checkCodeServlet",//服务端地址
"checkcode="+$checkcode ,
function(result){//图片地址（imgs/right.jpg imgs/wrong.jpg）
//result: imgs/right.jpg
var resultHtml = $("<img src='"+result+"' height='30' width='30px' />") ;
$("#tip").html(resultHtml);
}
);
});
});
</script>
</body>
</html>
代码太多，已经打包到压缩包，需要的自取：
链接: https://pan.baidu.com/s/1pp29vNUtigAhnRwYkYJ1hg?pwd=8b2f 提取码: 8b2f
浙公网安备 33010602011771号