本文介绍了一款使用Java语言开发的B/S模式大学生校园图书角管理系统。系统采用MySQL作为数据库，包括用户管理、图书信息管理等多个功能模块，遵循软件开发流程进行设计和实现，并进行了功能、单元和性能测试，证明系统功能完善，运行稳定。
💗博主介绍：✌全网粉丝30W+,CSDN全栈领域优质创作者，博客之星、掘金/华为云/阿里云等平台优质作者,计算机毕设实战导师。目前专注于大学生项目实战开发,讲解,毕业答疑辅导✌
💗主要服务内容：选题定题、开题报告、任务书、程序开发、文档编写和辅导、文档降重、程序讲解、答辩辅导等，欢迎咨询~
🌟文末获取源码+数据库+文档🌟 感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及文档编写等相关问题都可以给我沟通，希望帮助更多的人
前言
任何系统都要遵循系统设计的基本流程，本系统也不例外，同样需要经过市场调研，需求分析，概要设计，详细设计，编码，测试这些步骤，基于java语言设计并实现了大学生校园图书角管理系统。该系统基于B/S即所谓浏览器/服务器模式，应用java技术，选择MySQL作为后台数据库。系统主要包括系统主页、个人中心、用户管理、图书信息管理、图书分类管理、图书购买管理、图书借阅管理、图书续借管理、图书归还管理、留言板管理、系统管理等功能模块。
开发环境
开发语言：Java
框架：ssm
技术：JSP
JDK版本：JDK1.8
服务器：tomcat7
数据库：mysql 5.7（一定要5.7版本）
数据库工具：Navicat11
开发软件：eclipse/myeclipse/idea
Maven包：Maven3.3.9
浏览器：谷歌浏览器
后台路径地址：localhost:8080/项目名称/jsp/login.jsp
前台路径地址：localhost:8080/项目名称/front/index.jsp （无前台不需要输入）
管理员账号：abo
管理员密码：abo
开发技术简介
2.1 JSP技术介绍
JSP技术本身是一种脚本语言，但它的功能是十分强大的，因为它可以使用所有的JAVA类。当它与JavaBeans 类进行结合时，它可以使显示逻辑和内容分开，这就极大的方便了用户的需求。JavaBeans 可以对JSP技术的程序进行扩展，从而形成新的应用程序，而且JavaBeans的代码可以重复使用，所以就便于对程序进行维护。JavaBean 组件有内部的接口，可以帮助不同的人对系统进行访问。1999年，Sun微系统公司正式推出了JSP技术，这是一种动态技术，是基于整个JAVA体系和JavaServlet提出的，是具有普遍适用性的WEB技术，也是本系统设计的核心技术之一。JSP技术能够极大的提高WEB网页的运行速度。这些内容会与脚本结合，并且由JavaBean和Servlet组件封装。所有的脚本均在服务器端运行，JSP引擎会针对客户端所 提交的申请进行解释，然后生成脚本程序和JSP标识，然后通过HTML/XML页面将结果反馈给浏览器。因此，开发人员亲自设计最终页面的格式和HTML/XML标识时，完全可以使用JSP技术。
所以结合星空游戏购买下载平台的需求及功能模块的实现，使用JSP技术是最合适的，而且JSP的拓展性比较好，对于系统在后期使用过程中可以不断对系统功能进行拓展，是系统更完成，更方便的满足用户管理。
2.2 JAVA简介
Java主要采用CORBA技术和安全模型，可以在互联网应用的数据保护。它还提供了对EJB（Enterprise JavaBeans）的全面支持，java servlet API，JSP（java server pages），和XML技术。JAVA语言是一种面向对象的语言，它通过提供最基本的方法来完成指定的任务，开发者只需要知道一些概念就能够编写出一些应用程序。Java程序相对较小，其代码能够在小机器上运行。Java是一种计算机编程语言，具有封装、继承和多态性三个主要特性，广泛应用于企业Web应用程序开发和移动应用程序开发。
Java语言和一般编译器以及直译的区别在于，Java首先将源代码转换为字节码，然后将其转换为JVM的可执行文件，JVM可以在各种不同的JVM上运行。因此，实现了它的跨平台特性。虽然这使得Java在早期非常缓慢，但是随着Java的开发，它已经得到了改进。
2.3 Tomcat服务器
Tomcat属于一种轻型的服务器，当程序员需要开发或调试JSP 程序时，则通常会将该服务器作为首选。对于一个仅具有计算机基础知识的人来说，计算机系统具有一个好的Apache服务器，可以很好的对HTML 页面进行访问。Tomcat 虽然是Apache的扩展，但是它们都是可以独立运行的，二者是不互相干扰的。当配置正确的时候，Apache服务器为HTML 页面的运行提供技术支持，Tomcat 的任务则是运行Servle和JSP 页面。Tomca也具有一定的HTML页面处理功能。
2.4 MySQL数据库
数据库是系统开发过程中不可或缺的一部分。 在WEB应用方面，MySQL AB开发了一个具有很大优势的MySQL关系数据库管理系统。 MySQL可以将数据存储在不同的表中，这非常灵活，并且还可以提高系统在实际应用中的速度。 数据库访问最常用于标准SQL语言，MySQL用于SQL语言，因此它具有高度兼容性。数据库的操作是必不可少的，包括对数据库表的增加、删除、修改、查询等功能。现如今，数据库可以分为关系型数据库和非关系型数据库，Mysql属于关系性数据库，Mysql数据库是一款小型的关系型数据库，它以其自身特点：体积小、速度快、成本低等，Mysql数据库是目前最受欢迎的开源数据库。
在WEB应用技术中， Mysql数据库支持不同的操作系统平台，虽然在不同平台下的安装和配置都不相同，但是差别也不是很大，Mysql在Windows平台下两种安装方式，二进制版和免安装版。安装完Mysql数据库之后，需要启动服务进程，相应的客户端就可以连接数据库，客户端可通过命令行或者图形界面工具登录数据库。
2.5 SSM框架
当今流行的“SSM组合框架”是Spring + SpringMVC + MyBatis的缩写，受到很多的追捧，“组合SSM框架”是强强联手、各司其职、协调互补的团队精神。web项目的框架，通常更简单的数据源。Spring属于一个轻量级的反转控制框架(IoC)，但它也是一个面向表面的容器(AOP)。SpringMVC常常用于控制器的分类工作模式，与模型对象分开，程序对象的作用与自动取款机进行处理。这种解耦治疗使整个系统的个性化变得更加容易。MyBatis是一个良好的可持续性框架，支持普通SQL查询，同时允许对存储过程的高级映射进行数据的优化处理。大型Java Web应用程序的由于开发成本太高，开发后难以维护和开发过程中一些难以解决的问题，而采用“SSM组合框架”，它允许建立业务层次结构，并为这个问题提供良好的解决方案。
系统功能设计
系统功能需求分析是通过软件开发者在参与市场调研，与管理者及使用者交流后经过详细缜密的思考，再讨论研究后得出的初步系统开发所需实现功能。这是开发的第一步，也是至关重要的一步，如果不在这个阶段制定系统所需模块，日后会带来不必要的麻烦。因此，必须严肃认真，全身心投入去做好这个步骤。
本系统采用自上往下的方法开发，基本定位如下功能：
本课题要求实现一套大学生校园图书角管理系统，系统主要包括管理员模块和用户模块等功能模块。
（1）管理员用例图如下所示：
（2）用户用例图如下所示：
通过市场调研及咨询研究，了解了使用者及管理者的使用需求，于是制定了管理员和用户等模块。其功能结构图如下图所示：
系统功能效果
核心代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page isELIgnored="true" %>
<!-- 首页 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>首页</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<!-- 样式 -->
<link rel="stylesheet" href="./css/style.css" />
<!-- 主题（主要颜色设置） -->
<link rel="stylesheet" href="./css/theme.css" />
<!-- 通用的css -->
<link rel="stylesheet" href="./css/common.css" />
</head>
<style type="text/css">
html, body {
height: 100%;
}
#iframe {
width: 100%;
margin-top: 57px;
padding-top: 62px;
}
#header {
height: auto;
background: #fff;
border-bottom: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
#header .nav-top {
display: flex;
align-items: center;
padding: 0 20px;
font-size: 16px;
color: #2a8a15;
box-sizing: border-box;
height: 57px;
background: #f7f7f7;
box-shadow: 0 1px rgba(39, 90, 187, 1);
justify-content: center;
position: relative;
z-index: 1;
}
#header .nav-top-img {
width: 124px;
height: 40px;
padding: 0;
margin: 0;
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
box-shadow: 0 0 6px rgba(0,0,0,0);
}
#header .nav-top-title {
line-height: 40px;
font-size: 23px;
color: rgba(1, 10, 27, 1);
padding: 0 10px;
margin: 0 10px;
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
background-color: rgba(0,0,0,0);
box-shadow: 0 0 6px rgba(0,0,0,0);
}
#header .nav-top-tel {
line-height: 40px;
font-size: 16px;
color: #333;
padding: 0 10px;
margin: 0;
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
box-shadow: 0 0 6px rgba(0,0,0,0);
}
#header .navs {
display: flex;
padding: 0 20px;
align-items: center;
box-sizing: border-box;
height: 62px;
background: rgba(156,187,252, 1);
box-shadow: 0 1px rgba(39, 90, 187, 1);
justify-content: center;
}
#header .navs1 {
width: 200px;
height: 100vh;
background: darkgoldenrod;
position: absolute;
top: 0;
display: block;
padding: 0;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
#header .navs.navs1::-webkit-scrollbar {
display: none;
}
#header .navs1 .list {
display: flex;
flex-direction: column;
}
#header .navs .title {
width: 80px;
line-height: 30px;
font-size: 35px;
color: rgba(0, 0, 0, 1);
padding: 0 0px;
margin: 0px;
border-radius: 0px;
border-width: 0px;
border-style: solid;
border-color: rgba(29, 2, 2, 1);
background-color: rgba(0,0,0,0);
box-shadow: 0 0px rgba(255, 234, 0, 1);
}
#header .navs li {
display: inline-block;
width: 116px;
line-height: 36px;
padding: 3px;
margin: 17px 2px 1px 1px;
color: rgba(254, 254, 254, 1);
font-size: 16px;
border-radius: 50% 50% 1px 1px;
border-width: 4px 4px 0px 4px;
border-style: solid;
border-color: rgba(255, 255, 255, 1);
background-color: rgba(39, 90, 187, 1);
box-shadow: 0 0 0px rgba(0,0,0,1);
text-align: center;
box-sizing: border-box;
cursor: pointer;
}
#header .navs li a{
color: inherit;
}
#header .navs li.current a{
color: inherit;
}
#header .navs li a:hover{
color: inherit;
}
#header .navs li.current {
color: rgba(255, 255, 255, 1);
font-size: 16px;
border-radius: 50% 50% 1px 1px;
border-width: 4px 4px 0px 4px;
border-style: solid;
border-color: rgba(255, 255, 255, 1);
background-color: rgba(39, 90, 187, 1);
box-shadow: 0 0 0px rgba(0,0,0,1);
}
#header .navs li:hover {
color: #fff;
font-size: 16px;
border-radius: 50% 50% 1px 1px;
border-width: 4px 4px 0px 4px;
border-style: solid;
border-color: rgba(253, 253, 253, 1);
background-color: rgba(165, 196, 251, 1);
box-shadow: 0 0 0px rgba(0,0,0,0);
}
</style>
<body>
<!-- 顶部导航栏 -->
<!-- <header id="header">
<ul class="layui-nav nav">
<li class="layui-nav-item"><a href="javascript:navPage('./pages/home/home.jsp')">首页</a></li>
<li v-for="(item,index) in indexNav" v-bind:key="index" class="layui-nav-item"><a :href="'javascript:navPage(\''+item.url+'\')'">{{item.name}}</a></li>
<li class="layui-nav-item">
<a href="javascript:centerPage();">我的</a>
</li>
<li class="layui-nav-item"><a target="_blank" :href="adminurl">跳转到后台</a></li>
<li v-if="cartFlag" class="layui-nav-item">
<a href="javascript:navPage('./pages/shop-cart/list.jsp')">
<i class="layui-icon" style="font-size: 30px;"></i>
购物车
</a>
</li>
<li v-if="chatFlag" class="layui-nav-item">
<a href="javascript:chatTap()">
<i class="layui-icon" style="font-size: 30px;"></i>
客服
</a>
</li>
</ul>
</header> -->
<div id="header">
<div v-if='true' class="nav-top">
<img v-if='false' class="nav-top-img" src='http://codegen.caihongy.cn/20210225/e1e748927010494ca6dbe9032cf73b67.gif'>
<div v-if="true" class="nav-top-title">{{projectName}}</div>
<div class="nav-top-tel"></div>
</div>
<div class="navs">
<!-- <div class="logo" style="font-size: 20px;top: 32px;color: #fff;font-weight: bold;margin-left: -200px;width: 240px;" v-text="projectName"></div> -->
<div class="title" v-if="false" v-text="projectName"></div>
<div class="list">
<ul>
<li class='current'><a href="javascript:navPage('./pages/home/home.jsp')" class="menumain"><i v-if="false" class="layui-icon layui-icon-home"></i>首页</a></li>
<li v-for="(item,index) in indexNav" v-bind:key="index"><a :href="'javascript:navPage(\''+item.url+'\')'" class="menumain" style="cursor: pointer;"><i v-if="false" class="layui-icon" :class="iconArr[index]"></i>{{item.name}}</a></li>
<li><a href="javascript:centerPage();" class="menumain"><i v-if="false" class="layui-icon layui-icon-username"></i>个人中心</a></li>
<li><a :href="adminurl" target="_blank" class="menumain" style="cursor: pointer;"><i v-if="false" class="layui-icon layui-icon-link"></i>后台管理</a></li>
</ul>
</div>
</div>
</div>
<!-- 顶部导航栏 -->
<iframe src="./pages/home/home.jsp" id="iframe" frameborder="0" scrolling="no" width="100%" onload="changeFrameHeight()"></iframe>
<div id="tabbar" v-if="true" class="tabbar" :style='{"padding":"20px 0","boxShadow":"0 0 0px rgba(110,22,64,.8)","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(156, 187, 252, 1)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}' style="position: relative;">
<img v-if='false' :style='{"boxShadow":"0 0 6px rgba(110,22,64,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"100%","borderWidth":"1px","width":"44px","borderStyle":"solid","height":"44px"}' style='display: block;box-sizing: border-box;' src='http://codegen.caihongy.cn/20201024/ed5e326ca66f403aa3197b5fbb4ec733.jpg' />
<div style='box-sizing: border-box;' :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(110,22,64,.8)","margin":"10px auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#000","color":"#fff","textAlign":"center","borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"32px","fontSize":"14px","borderStyle":"solid"}' class="company"></div>
<div style='box-sizing: border-box;' :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"10px auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#000","color":"#fff","textAlign":"center","borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"32px","fontSize":"14px","borderStyle":"solid"}' class="record"></div>
<div style='box-sizing: border-box;' :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"10px auto 30px auto","borderColor":"rgba(255,255,255,1)","backgroundColor":"rgba(0, 86, 170, 1)","color":"#fff","textAlign":"center","borderRadius":"0","borderWidth":"1px 0","width":"40%","lineHeight":"32px","fontSize":"14px","borderStyle":"solid"}' class="desc"></div>
</div>
<!-- footer -->
<!--
<footer class="footer" id="footer">
<div class="footer-item">
地址：公司地址 电话：+86-0000-00000 传真：+86-0000-00000
</div>
<div class="footer-item">
Copyright © 版权所有 Power by XXXXXX
</div>
</footer>
-->
<!-- footer -->
<script src="./js/jquery.js"></script>
<!-- layui -->
<script src="./layui/layui.js"></script>
<!-- vue.js -->
<script src="./js/vue.js"></script>
<!-- 组件配置信息 -->
<script src="./js/config.js"></script>
<script>
var vue1 = new Vue({el: '#tabbar'})
var vue = new Vue({
el: '#header',
data: {
iconArr: ['layui-icon-gift','layui-icon-email','layui-icon-logout','layui-icon-transfer','layui-icon-slider','layui-icon-print','layui-icon-cols','layui-icon-snowflake','layui-icon-note','layui-icon-flag','layui-icon-theme','layui-icon-website','layui-icon-console','layui-icon-face-surprised','layui-icon-template-1','layui-icon-app','layui-icon-read','layui-icon-component','layui-icon-file-b','layui-icon-unlink','layui-icon-tabs','layui-icon-form','layui-icon-chat'],
indexNav: indexNav,
cartFlag: cartFlag,
adminurl: adminurl,
chatFlag: chatFlag,
projectName: projectName,
},
mounted: function() {
this.bindClickOnLi();
},
created() {
this.iconArr.sort(()=>{
return (0.5-Math.random())
})
},
methods: {
jump(url) {
jump(url)
},
bindClickOnLi() {
let list = document.getElementsByTagName("li");
for(var i = 0;i<list.length;i++){
list[i].onclick = function(){
$(this).addClass("current").siblings().removeClass("current");
localStorage.setItem("checkedLiIndex",$(this).index());
}
}
}
}
});
layui.use(['element','layer'], function() {
var element = layui.element;
var layer = layui.layer;
});
function chatTap(){
var userTable = localStorage.getItem('userTable');
if (userTable) {
layui.layer.open({
type: 2,
title: '客服',
area: ['600px', '600px'],
content: './pages/chat/chat.jsp'
});
} else {
window.location.href = './pages/login/login.jsp'
}
}
// 导航栏跳转
function navPage(url) {
localStorage.setItem('iframeUrl', url);
document.getElementById('iframe').src = url;
}
// 跳转到个人中心也
function centerPage() {
var userTable = localStorage.getItem('userTable');
if (userTable) {
localStorage.setItem('iframeUrl', './pages/' + userTable + '/center.jsp');
document.getElementById('iframe').src = './pages/' + userTable + '/center.jsp';
} else {
window.location.href = './pages/login/login.jsp'
}
}
var iframeUrl = localStorage.getItem('iframeUrl');
document.getElementById('iframe').src = iframeUrl || './pages/home/home.jsp';
let list = document.getElementsByTagName("li");
for(var i = 0;i<list.length;i++){
if(i==localStorage.getItem("checkedLiIndex")) {
$(list[i]).addClass("current").siblings().removeClass("current");
}
}
// alert(iframeUrl)
setInterval(function(){
// i++;
// if(i<50) changeFrameHeight();
changeFrameHeight();
},200)
function changeFrameHeight() {
var iframe = document.getElementById('iframe');
// iframe.height = 'auto';
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.body.scrollHeight;
}
}
};
// 窗口变化时候iframe自适应
// function changeFrameHeight() {
// var header = document.getElementById('header').scrollHeight;
// // var swiper = document.getElementById('swiper').scrollHeight;
// var ifm = document.getElementById("iframe");
// ifm.height = document.documentElement.clientHeight - header;
// ifm.width = document.documentElement.clientWidth;
// console.log(ifm.height)
// }
// reasize 事件 窗口大小变化后执行的方法
window.onresize = function() {
changeFrameHeight();
}
</script>
</body>
</html>
<%@ 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/20210316/abd39bf010fc400ba40e4ac5f3355ff5.jpeg) !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: 480px;
width: 400px;
margin: 0;
padding: 65px 0 20px 0;
border-radius: 88px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
background-color: rgba(255, 255, 255, 0.49);
box-shadow: 0 0 0px rgba(30, 144, 255, .8);
}
#login-wrapper h1 {
line-height: 60px;
width: 320px;
color: rgba(0, 0, 0, 1);
font-size: 16px;
margin: -30px auto 30px;
padding: 0 10px;
border-radius: 50px;
border-width: 10px;
border-style: double;
border-color: rgba(30, 144, 255, 1);
background-color: rgba(204, 51, 51, 0);
box-shadow: 0 0 6px rgba(30, 144, 255, 0);
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: 54px;
width: 270px;
margin: 0 auto;
padding: 0 0 10px 0;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,1);
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 0 6px rgba(255,0,0,0);
}
#loginForm .form-group .label {
width: 70px;
line-height: 44px;
margin: 20px 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: 200px;
height: 44px;
margin: 20px 0 0 0;
color: rgba(0, 0, 0, 1);
font-size: 14px;
padding: 0 10px;
border-radius: 20px;
border-width: 1px;
border-style: solid;
border-color: rgba(30, 144, 255, 1);
background-color: rgba(255, 255, 255, 0.57);
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: 320px;
height: 40px;
margin: 15px 0 0px 70px;
padding: 0;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,1);
background-color: rgba(199, 21, 133, 0);
box-shadow: 0 0 6px rgba(255,0,0,0);
}
#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: 180px;
height: 40px;
margin: 10px 0 5px 110px;
color: #fff;
font-size: 14px;
padding: 0 10px;
border-radius: 50px;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(30, 144, 255, 1);
box-shadow: none;
}
#loginForm a.btn-register {
display: inline-block;
width: 90px;
height: 25px;
margin: 0 0 0 155px;
color: rgba(0, 0, 0, 1);
font-size: 12px;
padding: 0 0px;
border-radius: 0;
border-width: 0;
border-style: solid;
border-color: #ccc;
background-color: rgba(255, 255, 255, 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: 42px;
margin: 20px 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: 42px;
margin: 20px 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" onclick="login()">登 录</button>
</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');
var menuNum = 0;
for (var i = 0; i < menus.length; i++) {
if(menus[i].hasBackLogin=='是') {
if(menuNum==0) {
role = menus[i].roleName;
$('#loginForm').attr('action', baseUrl + menus[i].tableName + '/login');
accountTableName = menus[i].tableName;
}
menuNum++;
}
}
if(menuNum>1) {
role = '';
$('#loginForm').attr('action', '');
accountTableName = '';
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>
系统功能测试
进行软件的测试是为了知道在开发过程中的错误，并不是去看程序中有什么问题。进行软件测试的重要意义是提醒人们发现错误，并且对其中的错误进行修改，并不是为了显示程序有多正确。在测试过程中发现了错误，可以对其软件的问题进行分析研究，找到解决问题的办法。此文主要是为了增强管理员的针对性工作，增强其检测效率，找到减少错误的方法，这才是完成产品检测的真实目的。
结论
这次的课题设计是我们毕业的最后一个关卡，通过指导老师的帮助然后上网还有书籍查阅相关资料终于将这个系统完成。当然也缺不了同学的帮助。刚和老师商量课题的时候还非常高兴是一个之前自己接触过的题材，要求的内容也比较显而易见。
这次的课题设计真的算是一个大融合，它基本上运用到了我们所学习的关键技术，我们可能之前学过的知识早已忘记但是这次的毕设课题是一次非常好的机会让我们重温之前的专业知识，相当于自己又重新学习了一遍，感觉自己的自我学习能力得到了很大的提升。同时又锻炼了自己的实际动手能力。通过对本系统的开发和探索，我对软件的开发过程有了更加深刻的了解，特别是通过对毕业生生活用品出售网站的开发，使我对面向对象技术有了较为深入了解和认知。
这次的课题设计让我对独自做一个系统开发有了一个非常深刻的认知，真的是很难，从我自己的角度来讲，首先系统搭建平台的构造就花费了很长时间，在安装这些运行软件的过程中，总会有各种各样的插件问题出现，这个很考验人的耐心，因为在之后的运用过程中我就受此困扰很久。然后之后的开题报告，中期检查中也是有各种描述不明确出现。核心代码部分经常会出现jar包的错误跳转的失败，都需要花很多时间去调试。在这个过程中，出来只是的升高最多的还有自己耐心越来越好了。所以此刻认识还不算太晚，今后一定要努力提高自己的知识水平，同时还是要不断学习，尽可能多的阅览一些专业书籍，从而丰富自己的知识层面。答辩时间迫在眉睫，时间真的有限，这个报告所解决问题的方法还没有很好，希望接下来还有机会将这个报告加工完善。
扫一扫
985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
