目 录
一 概 述 5
1.1 系统说明 5
1.2 系统特点 5
1.3 系统功能简介 6
二 总体设计 7
2.1 开发背景 7
2.2 功能分析 8
2.3 数据流图 8
三 数据库设计 9
3.1 数据表的介绍 9
3.2 MyBatis框架的应用 9
四 详细设计 11
5.1 管理员登录主界面 11
5.2 管理员管理会员管理界面 12
5.3 管理员管理台球桌界面 12
五 总 结 13
致 谢 15
一 概 述
1.1 系统说明
目前,网络台球厅管理系统的设计可以分为传统的台球厅管理系统的设计与实现平台软件和网络版的台球厅管理系统的设计与实现软件两种。
第二类是2000年以后的开发语言开发的系统,这一类的系统一般在技术方面都比较先进一些。
从功能上讲,台球厅管理系统的设计与实现软件主要分为几个层次:
功能全面,系统界面条例清晰明了,方便管理。
(1)应用B/S架构的台球厅管理系统的设计与实现管理软件,这一类产品在台球厅管理系统的设计与实现管理软件行业比较少,因为台球厅管理系统的设计与实现行业不同于别的行业,他在管理的时候数据的浏览量相当大,运算量也比较大,并且客户的需求千变万化,个性话的设置比较多,因此,B/S的网页形式的台球厅管理系统的设计与实现管理软件在应用时有一定的局限性。
(2)应用html语言,所开发出来的系统支持互联网直连,并且由于开发语言比较先进,所做出来的系统界面比较美观,技术实力强的公司的产品功能也比较灵活,模块也比较丰富,这一类的产品的功能也比较深入细致,更加人性化。这样的集中式应用的系统能更好的满足大中高中学校的统一管控的管理模式,因为支持互联网直连,所以不受地域的限制,并且这一类的系统一般都是整体解决方案,功能涉及到网络企业,这一类产品也是台球厅管理系统的设计与实现的发展方向。
1.2 系统特点
(1)本系统完全基于Java web技术,只要有一台电脑并且能联网就可以浏览本网站。
(2)采用html技术和MYSQL数据库开发,具有代码易懂,可扩展性高,性能高、数据安全等特点
(3)可以完全通过网页登录管理系统,维护方便。
(4)各个功能模块独立性强,可以根据实际情况任意组合。
(5)具有清新简洁方便且易懂的界面,操作简单。
(6)支持所有的Windows系列操作系统以及移动终端网页访问。
1.3 系统功能简介
完成“台球厅管理系统的设计与实现”的设计,台球厅管理系统的设计与实现是一个适应于所有具有基本台球桌计费需求的企业的管理系统,本系统初步拟定由管理员模块组成。
管理员模块有会员管理,台球桌管理几大功能。
本台球桌计费要实现的是对台球桌计费所需要的基本功能,采用了较为简单的spring+springmvc+mybatis框架开发技术。Spring框架是由于软件开发的复杂性而创建的。Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情。然而,Spring的用途不仅仅限于服务器端的开发。本文转载自http://www.biyezuopin.vip/onews.asp?id=14522从简单性、可测试性和松耦合性角度而言,绝大部分Java应用都可以从Spring中受益。MyBatis 是一款优秀的持久层框架,它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息,将接口和 Java 的 POJOs(Plain Ordinary Java Object,普通的 Java对象)映射成数据库中的记录。
另外,本台球桌计费采用了免费开源的Java集成开发工具——Eclipse开发平台,免费开源的数据库——Mysql关系型数据库,免费开源的Web应用服务器——Tomcat服务器,由Eclipse、 Mysql 和Tomcat这三个软件组合并构建成一个相当优越的开发环境。
在开发技术和开发环境的确立以后,就要对本文档系统原型进行构建和对数据库进行设计,待系统原型和数据库这两方面的工作完成后,就根据需求对系统原型和数据库加以扩充和完善,直至本文档系统可以交付使用。 顾客客户端:操作系统windows98以上,浏览器IE5.0以上。
条件与限制:开发本系统所用到的软件有: Eclipse,Mysql。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>台球厅管理系统</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> -->
<script src="../assets/jquery.min.js"></script>
<!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> -->
<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>
<style>
*{margin: 0;padding: 0}
html,body,.login-box{
height: 100%;
}
.login-box{
background: #f1f1f1;
display: flex;
align-items: center;
justify-items: center;
}
.login-main{
width: 100%;
height: 60%;
text-align: center;
}
.login-box-header{
font-size: 38px;
font-family: KaiTi;
font-weight: 700;
}
.login-item{
margin: 10px auto;
border: 0.1rem solid #d4d2d2;
width: 25%;
height: 3rem;
line-height: 3rem;
overflow: hidden;
background: #fff;
}
.login-icon{
width: 10%;
font-size: 1.7rem;
float: left;
line-height: 3rem;
color: #dcdcdc;
}
.login-input{
width: 90%;
outline: none;
border: none;
}
.login-input::-webkit-input-placeholder {
color: #dcdcdc;
}
.login-input:-moz-placeholder {
color: #dcdcdc;
}
.login-input:-ms-input-placeholder {
color: #dcdcdc;
}
.login-btn{
background: #119C8F;
border: none;
color: #fff;
width: 25%;
margin: 1rem 0;
height: 3rem;
}
</style>
</head>
<body>
<div class="login-box">
<div class="login-main">
<h2 class="login-box-header">台球厅管理系统</h2>
<div class="login-form">
<div class="login-item">
<label class="login-icon glyphicon glyphicon-user"></label>
<input id="username" class="login-input" type="text" placeholder="用户名">
</div>
<div class="login-item">
<label class="login-icon glyphicon glyphicon-lock"></label>
<input id="pwd" class="login-input" type="password" placeholder="密码">
</div>
<button class="login-btn" id="login-btn">登录</button>
</div>
</div>
</div>
<script>
const BASEURL = "http://localhost:8080/Billiard/";
$(document).ready(function(){
// 登陆事件
$("#login-btn").click(function(){
var username = $("#username").val().trim();
var password = $("#pwd").val().trim();
alert(username);
newUser={
"name":username,
"pwd":password
};
$.ajax({
type: 'GET',
url: BASEURL+"login/doLogin",
data: newUser,
success: function(res){
console.log(res)
if(res.status==1){
// alert('登陆成功')
window.location.replace("./usermanage.html");
}else{
alert(res.message)
}
},
});
});
});
</script>
</body>
</html>