1.开发环境
eclipse/IDEA mysql Tomact jdk
2.技术架构
java+struts+spring+hibernate+jsp+mysql+js+css
3.主要核心功能
该系统主要分为三个角色
普通用户:(演示地址和源码见最底部)
登录、个人信息查看和修改、课程查询、我的课程、打卡、今日课程、我的请假、我的余额、充值记录、礼品列表、我的礼品兑换等功能
教练:
登录、个人信息查看和修改、我的课程、今日课程、打卡等功能
管理员
登录、个人信息查看和修改、数据分析(会员增长量分析、充值增长量分析、充值增长率分析)、课程报名查询、请假记录、充值记录、教练管理、课程管理、每日课程、会员管理、会员等级管理、礼品管理、礼品兑换查询等功能
4.部分代码
注册页面
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="./common/head.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册 ${appTitle }</title>
<script src="BJUI/js/jquery-1.7.2.min.js"></script>
<script src="BJUI/js/jquery.cookie.js"></script>
<script src="js/sha256.js"></script>
<link href="BJUI/themes/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
* {
font-family: "Verdana", "Tahoma", "Lucida Grande", "Microsoft YaHei",
"Hiragino Sans GB", sans-serif;
}
body {
background: url(images/loginbg_01.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
a:link {
color: #285e8e;
}
.main_box {
position: absolute;
top: 50%;
left: 50%;
margin-top: -260px;
margin-left: -300px;
padding: 30px;
width: 600px;
height: 460px;
background: #FAFAFA;
background: rgba(255, 255, 255, 0.5);
border: 1px #DDD solid;
border-radius: 5px;
-webkit-box-shadow: 1px 5px 8px #888888;
-moz-box-shadow: 1px 5px 8px #888888;
box-shadow: 1px 5px 8px #888888;
}
.main_box .setting {
position: absolute;
top: 5px;
right: 10px;
width: 10px;
height: 10px;
}
.main_box .setting a {
color: #FF6600;
}
.main_box .setting a:hover {
color: #555;
}
.login_logo {
margin-bottom: 20px;
height: 45px;
text-align: center;
}
.login_logo img {
height: 45px;
}
.login_msg {
text-align: center;
font-size: 16px;
}
.login_form {
padding-top: 20px;
font-size: 16px;
}
.login_box .form-control {
display: inline-block;
*display: inline;
zoom: 1;
width: auto;
font-size: 18px;
}
.login_box .form-control.x319 {
width: 319px;
}
.login_box .form-control.x164 {
width: 164px;
}
.login_box .form-group {
margin-bottom: 20px;
}
.login_box .form-group label.t {
width: 120px;
text-align: right;
cursor: pointer;
}
.login_box .form-group.space {
padding-top: 15px;
border-top: 1px #FFF dotted;
}
.login_box .form-group img {
margin-top: 1px;
height: 32px;
vertical-align: top;
}
.login_box .m {
cursor: pointer;
}
.bottom {
text-align: center;
font-size: 12px;
}
</style>
<script type="text/javascript">
var COOKIE_NAME = 'sys__username';
$(function() {
choose_bg();
//changeCode();
if ($.cookie(COOKIE_NAME)) {
$("#j_username").val($.cookie(COOKIE_NAME));
$("#j_password").focus();
$("#j_remember").attr('checked', true);
} else {
$("#j_username").focus();
}
/*$("#captcha_img").click(function(){
changeCode();
});*/
$("#login_form").submit(function() {
var issubmit = true;
var i_index = 0;
$(this).find('.in').each(function(i) {
if ($.trim($(this).val()).length == 0) {
$(this).css('border', '1px #ff0000 solid');
issubmit = false;
if (i_index == 0)
i_index = i;
}
});
if (!issubmit) {
$(this).find('.in').eq(i_index).focus();
return false;
}
var $remember = $("#j_remember");
if ($remember.attr('checked')) {
$.cookie(COOKIE_NAME, $("#j_username").val(), {
path : '/',
expires : 15
});
} else {
$.cookie(COOKIE_NAME, null, {
path : '/'
}); //删除cookie
}
$("#login_ok").attr("disabled", true).val('注册中..');
//var password = HMAC_SHA256_MAC($("#j_username").val(), $("#j_password").val());
//$("#j_password").val(HMAC_SHA256_MAC($("#j_randomKey").val(), password));
return true;
});
});
function genTimestamp() {
var time = new Date();
return time.getTime();
}
function changeCode() {
//$("#captcha_img").attr("src", "/captcha.jpeg?t="+genTimestamp());
}
function choose_bg() {
var bg = Math.floor(Math.random() * 9 + 1);
$('body').css('background-image', 'url(images/loginbg_0' + bg + '.jpg)');
}
</script>
</head>
<body>
<!--[if lte IE 7]>
<style type="text/css">
#errorie {position: fixed; top: 0; z-index: 100000; height: 30px; background: #FCF8E3;}
#errorie div {width: 900px; margin: 0 auto; line-height: 30px; color: orange; font-size: 14px; text-align: center;}
#errorie div a {color: #459f79;font-size: 14px;}
#errorie div a:hover {text-decoration: underline;}
</style>
<div id="errorie"><div>您还在使用老掉牙的IE,请升级您的浏览器到 IE8以上版本 <a target="_blank" href="http://windows.microsoft.com/zh-cn/internet-explorer/ie-8-worldwide-languages">点击升级</a> 强烈建议您更改换浏览器:<a href="http://down.tech.sina.com.cn/content/40975.html" target="_blank">谷歌 Chrome</a></div></div>
<![endif]-->
<div class="main_box">
<div class="setting">
<a href="javascript:;" οnclick="choose_bg();" title="更换背景"><span class="glyphicon glyphicon-th-large"></span></a>
</div>
<div class="login_box">
<!-- <div class="login_logo"> -->
<!-- <img src="images/logo.png" > -->
<!-- </div> -->
<c:if test="${not empty regErrorMessage }">
<div class="login_msg">
<font color="red">${regErrorMessage }</font>
</div>
<%session.removeAttribute("regErrorMessage"); %>
</c:if>
<div class="login_form">
<input type="hidden" value="${randomKey }" id="j_randomKey" />
<form action="${pageContext.request.contextPath }/com/reg.action" id="login_form" method="post">
<input type="hidden" name="jfinal_token" value="${jfinal_token }" />
<div class="form-group">
<label for="j_username" class="t">用户名:</label> <input id="j_username" value="" name="regbean.user.uname"
type="text" class="form-control x319 in" autocomplete="off">
</div>
<div class="form-group">
<label for="j_password" class="t">密 码:</label> <input id="j_password" value=""
name="regbean.user.userPassword" type="password" class="form-control x319 in">
</div>
<div class="form-group">
<label for="j_password" class="t">姓 名:</label> <input id="j_password1" value="" name="regbean.user.userName"
type="text" class="form-control x319 in">
</div>
<div class="form-group">
<label for="j_password" class="t">性 别:</label> <select name="regbean.user.userGender">
<option value="1">男</option>
<option value="0">女</option>
</select>
</div>
<div class="form-group space">
<label class="t"></label> <input type="submit" id="login_ok" value=" 注 册 "
class="btn btn-primary btn-lg"> <input type="reset" value=" 重 置 "
class="btn btn-default btn-lg">
</div>
</form>
</div>
</div>
<div class="bottom">
Copyright © 2018 ${appTitle }</a> <a style="margin-left: 20px; font-weight: bold"
href="${pageContext.request.contextPath}/index.jsp">返回登录</a>
</div>
</div>
</div>
</body>
</html>
主页面
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="./common/head.jsp"%>
<c:if test="${empty SESSION_BEAN }">
<script type="text/javascript" language="javascript">
top.location.href='${pageContext.request.contextPath}/exit.jsp';
</script>
</c:if>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-store, must-revalidate"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>${appTitle }</title>
<meta name="Keywords" content="${appTitle }"/>
<meta name="Description" content="${appTitle }"/>
<%@ include file="./common/js.jsp"%>
</head>
<body>
<!--[if lte IE 7]>
<div id="errorie"><div>您还在使用老掉牙的IE,正常使用系统前请升级您的浏览器到 IE8以上版本 <a target="_blank" href="http://windows.microsoft.com/zh-cn/internet-explorer/ie-8-worldwide-languages">点击升级</a> 强烈建议您更改换浏览器:<a href="http://down.tech.sina.com.cn/content/40975.html" target="_blank">谷歌 Chrome</a></div></div>
<![endif]-->
<div id="bjui-window">
<header id="bjui-header">
<div class="bjui-navbar-header">
<button type="button" class="bjui-navbar-toggle btn-default" data-toggle="collapse" data-target="#bjui-navbar-collapse">
</button>
<a class="bjui-navbar-logo" href="#" style="font-size: 20px;margin-top: 10px;margin-left: 20px;color:white">${appTitle }</a>
</div>
<nav id="bjui-navbar-collapse">
<ul class="bjui-navbar-right">
<li class="datetime"><div><span id="bjui-date"></span> <span id="bjui-clock"></span></div></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">我的账户 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="${ctx}/com/toSelfPassword.action" data-toggle="dialog" data-id="changepwd_page" data-mask="true" data-width="500" data-height="260"> <span class="glyphicon glyphicon-lock"></span> 修改密码 </a></li>
<li><a href="${ctx}/com/toSelf.action" data-toggle="dialog" data-id="changepwd_page" data-mask="true" data-width="700" data-height="460"> <span class="glyphicon glyphicon-user"></span> 个人资料 </a></li>
<li class="divider"></li>
<li><a href="${ctx}/com/logout.action" class="red"> <span class="glyphicon glyphicon-off"></span> 注销登陆</a></li>
</ul>
</li>
</ul>
</nav>
<div id="bjui-hnav">
<button type="button" class="btn-default bjui-hnav-more-left" title="导航菜单左移"><i class="fa fa-angle-double-left"></i></button>
<div id="bjui-hnav-navbar-box">
<ul id="bjui-hnav-navbar">
<c:if test="${SESSION_BEAN.role=='Teacher' }">
<li class=""><a href="javascript:;" data-toggle="slidebar"><i class="fa fa-cog"></i> 操作菜单</a>
<div class="items hide" data-noinit="true">
<ul class="menu-items" data-faicon="table">
<li><a href="${ctx}/sys/queryCourseOfTeacher.action" data-options="{id:'mainqueryUserCourse', faicon:'table','fresh':true}">我的课程</a></li>
<li><a href="${ctx}/sys/queryCourseDay.action" data-options="{id:'mainqueryCourseDay', faicon:'table','fresh':true}">今日课程</a></li>
<li><a href="${ctx}/sys/queryTeacherClock.action" data-options="{id:'mainqueryTeacherClock', faicon:'table','fresh':true}">打卡</a></li>
</ul>
</div>
</li>
</c:if>
<c:if test="${SESSION_BEAN.role=='SimpleUser' }">
<li class=""><a href="javascript:;" data-toggle="slidebar"><i class="fa fa-cog"></i> 操作菜单</a>
<div class="items hide" data-noinit="true">
<ul class="menu-items" data-faicon="table">
<li><a href="${ctx}/sys/queryCourseAll.action" data-options="{id:'mainqueryCourseAll', faicon:'table','fresh':true}">课程查询</a></li>
<li><a href="${ctx}/sys/queryUserCourse.action" data-options="{id:'mainqueryUserCourse', faicon:'table','fresh':true}">我的课程</a></li>
<li><a href="${ctx}/sys/queryUserClock.action" data-options="{id:'mainqueryUserClock', faicon:'table','fresh':true}">打卡</a></li>
<li><a href="${ctx}/sys/queryCourseDay.action" data-options="{id:'mainqueryCourseDay', faicon:'table','fresh':true}">今日课程</a></li>
<li><a href="${ctx}/sys/queryJia.action" data-options="{id:'mainqueryJia', faicon:'table','fresh':true}">我的请假</a></li>
<li><a href="${ctx}/sys/chognzhi2.action" data-options="{id:'chognzhi', faicon:'table','fresh':true}">我的余额</a></li>
<li><a href="${ctx}/sys/queryMoneyLog.action" data-options="{id:'mainqueryMoneyLog', faicon:'table','fresh':true}">充值记录</a></li>
<li><a href="${ctx}/sys/queryGiftAll.action" data-options="{id:'mainqueryGift', faicon:'table','fresh':true}">礼品列表</a></li>
<li><a href="${ctx}/sys/queryGiftUser.action" data-options="{id:'mainqueryGiftUser', faicon:'table','fresh':true}">我的礼品兑换</a></li>
</ul>
</div>
</li>
</c:if>
<c:if test="${SESSION_BEAN.role=='SysUser' }">
<li class=""><a href="javascript:;" data-toggle="slidebar"><i class="fa fa-cog"></i> 数据分析</a>
<div class="items hide" data-noinit="true">
<ul class="menu-items" data-faicon="table">
<li><a href="${ctx}/sys/zengzhang.action" data-options="{id:'zengzhang', faicon:'table','fresh':true}">会员增长量分析</a></li>
<li><a href="${ctx}/sys/zengzhangchong.action" data-options="{id:'zengzhang1', faicon:'table','fresh':true}">充值增长量分析</a></li>
<li><a href="${ctx}/sys/zengzhanglv.action" data-options="{id:'zengzhang2', faicon:'table','fresh':true}">充值增长率分析</a></li>
</ul>
</div>
</li>
<li class=""><a href="javascript:;" data-toggle="slidebar"><i class="fa fa-cog"></i> 系统管理</a>
<div class="items hide" data-noinit="true">
<ul class="menu-items" data-faicon="table">
<li><a href="${ctx}/sys/queryUserCourseAll.action" data-options="{id:'mainqueryUserCourse', faicon:'table','fresh':true}">课程报名查询</a></li>
<li><a href="${ctx}/sys/queryJiaAll.action" data-options="{id:'mainqueryJia', faicon:'table','fresh':true}">请假记录</a></li>
<li><a href="${ctx}/sys/queryMoneyLogAll.action" data-options="{id:'mainqueryMoneyLog', faicon:'table','fresh':true}">充值记录</a></li>
<li><a href="${ctx}/sys/queryTeacher.action" data-options="{id:'mainqueryTeacher', faicon:'table','fresh':true}">教练管理</a></li>
<li><a href="${ctx}/sys/queryCourse.action" data-options="{id:'mainqueryCourse', faicon:'table','fresh':true}">课程管理</a></li>
<li><a href="${ctx}/sys/queryCourseDay.action" data-options="{id:'mainqueryCourseDay', faicon:'table','fresh':true}">每日课程</a></li>
<li><a href="${ctx}/sys/querySimpleUser.action" data-options="{id:'mainquerySimpleUser', faicon:'table','fresh':true}">会员管理</a></li>
<li><a href="${ctx}/sys/queryUserType.action" data-options="{id:'mainqueryUserType', faicon:'table','fresh':true}">会员等级管理</a></li>
<li><a href="${ctx}/sys/queryGift.action" data-options="{id:'mainqueryGift', faicon:'table','fresh':true}">礼品管理</a></li>
<li><a href="${ctx}/sys/queryGiftUserAll.action" data-options="{id:'mainqueryGiftUser', faicon:'table','fresh':true}">礼品兑换查询</a></li>
</ul>
</div>
</li>
</c:if>
<li class="active"><a href="javascript:;" data-toggle="slidebar"><i class="fa fa-user"></i> 个人信息</a>
<div class="items hide" data-noinit="true">
<ul class="menu-items" data-faicon="table">
<li><a href="${ctx}/com/toSelf.action" data-options="{id:'toSelf', faicon:'user','fresh':true}">个人资料</a></li>
</ul>
</div>
</li>
</ul>
</div>
<button type="button" class="btn-default bjui-hnav-more-right" title="导航菜单右移"><i class="fa fa-angle-double-right"></i></button>
</div>
</header>
<div id="bjui-container">
<div id="bjui-leftside">
<div id="bjui-sidebar-s">
<div class="collapse"></div>
</div>
<div id="bjui-sidebar">
<div class="toggleCollapse"><h2><i class="fa fa-bars"></i> 导航栏 <i class="fa fa-bars"></i></h2><a href="javascript:;" class="lock"><i class="fa fa-lock"></i></a></div>
<div class="panel-group panel-main" data-toggle="accordion" id="bjui-accordionmenu" data-heightbox="#bjui-sidebar" data-offsety="26">
</div>
</div>
</div>
<div id="bjui-navtab" class="tabsPage">
<div class="tabsPageHeader">
<div class="tabsPageHeaderContent">
<ul class="navtab-tab nav nav-tabs">
<li data-url="content.jsp"><a href="javascript:;"><span><i class="fa fa-home"></i> #maintab#</span></a></li>
</ul>
</div>
<div class="tabsLeft"><i class="fa fa-angle-double-left"></i></div>
<div class="tabsRight"><i class="fa fa-angle-double-right"></i></div>
<div class="tabsMore"><i class="fa fa-angle-double-down"></i></div>
</div>
<ul class="tabsMoreList">
<li><a href="javascript:;">#maintab#</a></li>
</ul>
<div class="navtab-panel tabsPageContent">
<div class="navtabPage unitBox">
<div class="bjui-pageContent" style="background:#FFF;">
Loading...
</div>
</div>
</div>
</div>
</div>
<footer id="bjui-footer">Copyright © 2020 ${appTitle } <a href="${ctx}/">返回首页</a></a>
</footer>
</div>
</body>
</html>
项目演示地址:
演示地址:
链接:https://pan.baidu.com/s/1HxR2at8NNEcguV7TAZqqDw
提取码:d3qe
、