用户管理系统（MVC）
主要功能
- 登录注册
- 在线人数的显示
- 用户信息的增、删、改、查
- 用户在线状态的显示
- 使用图表（柱状图、饼状图、折线图）显示数据
项目运行效果
1、登录界面：
2、主页：
表格：
图标分析：
用到的技术
页面部分：jsp
前后端链接：注解
数据处理：
数据库部分：c3p0链接池 + mysql数据库
部分功能的实现：
（1）在线人数显示功能
在filter文件下写
@WebListener
public class SessionOnline implements HttpSessionListener {
@Override
public void sessionCreated(HttpSessionEvent httpSessionEvent) {
ServletContext servletContext = httpSessionEvent.getSession().getServletContext();
String id = httpSessionEvent.getSession().getId();
System.out.println(id);
Integer online = (Integer) servletContext.getAttribute("Online");
/* 用一个if判断 */
if(online==null){//如果这个键对应的值不存在的时候 就是这个Session不存在的时候 我们创建为这个键创建一个值
online=1;
}else{//如果网站中存在了用户Session不为空
int count =online.intValue();//创建一个变量保存Session
online=count+1;//如果存在了使这个Session加一
}
servletContext.setAttribute("Online",online);//将键值对赋值
}
@Override
public void sessionDestroyed(HttpSessionEvent httpSessionEvent) {
}
}
在页面（jsp页面）需要显示的位置放：
<%=this.getServletConfig().getServletContext().getAttribute("Online")%>
（2）表格的增、删、该、查功能：
jsp 代码
<%
List<Custum> info = (List<Custum>) request.getAttribute("info");// servlet request.setAttribute("info");
%>
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-table"></i> 用户信息 </div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>// 表头部分
<tr>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>密码</th>
<th>最近一次修改时间</th>
<th>登录次数</th>
<th>登录状态</th>
<th>编辑</th>
</tr>
</thead>
<tfoot>// 表尾部分（最后一行）
<tr>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>密码</th>
<th>最近一次修改时间</th>
<th>登录次数</th>
<th>登录状态</th>
<th><button class="btn btn-default btn-sm" style="width: 100px"><a data-toggle="modal" data-target="#add">添加</a></button></th>
</tr>
</tfoot>
<tbody>// 表格数据部分
<%for (int i=0; i< info.size(); i++) {%>
<%Custum c = info.get(i);%>
<tr>
<input type="hidden" id="ssno<%=i%>" value="<%=c.getSno()%>">
<td><%=i+1%></td>
<td id="name<%=i%>"><%=c.getSname()%></td>
<td id="email<%=i%>"><%=c.getEmail()%></td>
<td id="password<%=i%>"><%=c.getPassword()%></td>
<td><%=c.getRedate()%></td>
<td><%=c.getLoginT()%></td>
<td><%=c.getStatus()%></td>
<td><button class="btn btn-default btn-sm"><a data-toggle="modal" data-target="#edit" onclick="edit(<%=i%>)">修改</a></button>||<button class="btn btn-default btn-sm"><a href="delete?id=<%=c.getSno()%>">删除</a></button></td>
</tr>
<%}%>
</tbody>
</table>
</div>
</div>
<div class="card-footer small text-muted">Updated at <%=df.format(new Date())%></div>// 更新时间 表格下面的角标
</div>
添加和修改功能：
点击按钮后
添加效果：
修改效果：
使用boostrap模态框实现：
数据的回显功能使用servlet传值+js实现：
<script>
function edit(id) {
document.getElementById("editName").value = document.getElementById("name"+id).innerText
document.getElementById("editEmail").value = document.getElementById("email"+id).innerText
document.getElementById("editPassword").value = document.getElementById("password"+id).innerText
document.getElementById("eid").value = document.getElementById("ssno"+id).value
}
</script>
一开始想使用java代码获取要修改的id 但是始终不能获取正确的id值后来了解到，在jsp页面中可以用java代码给别的变量赋值，不能反向赋值（js可以实现给java赋值通过表单提交的方式给java赋值）。
<!--添加用户信息-->
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">添加用户信息</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="addCustum" name="loginForm" method="get">
<div class="form-group">
<label for="recipient-name" class="control-label">用户名:</label>
<input type="text" name="sname" class="form-control" >
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">邮箱:</label>
<input type="text" name="email" class="form-control" >
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">密码:</label>
<input type="password" name="password" class="form-control" >
</div>
<div class="form-group">
<input class="btn btn-default" type="reset" value="重置">
<div style="width: 10px; display: inline"></div>
<input class="btn btn-primary" type="submit" value="提交" >
</div>
</form>
</div>
</div>
</div>
</div>
<!--修改-->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">修改用户信息</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="updateEdit" name="loginForm" method="get">
<input type="hidden" id="eid" name="eid">
<div class="form-group">
<label for="recipient-name" class="control-label">用户名:</label>
<input type="text" id="editName" name="sname" class="form-control" >
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">邮箱:</label>
<input type="text" id="editEmail" name="email" class="form-control">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">密码:</label>
<input type="text" id="editPassword" name="password" class="form-control">
</div>
<div class="form-group">
<input class="btn btn-default" type="reset" value="重置">
<div style="width: 10px; display: inline"></div>
<input class="btn btn-primary" type="submit" value="提交" >
</div>
</form>
</div>
</div>
</div>
</div>
查找和删除
查找功能datatables 表格默认带有该功能；
删除就直接穿id在数据库中修改就行（最好使用伪删除）
css 引入：
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/dataTables.bootstrap4.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>// 左上角图标
js 引入：
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/dataTables.bootstrap4.js'></script>
<script>
$.extend( $.fn.dataTable.defaults, {
"ordering": false,// 关闭排序功能
} );
$(document).ready(function() {
// 初始化datatable
$('#dataTable').dataTable();
}
</script>
datatables的详细使用请到：Datatables官网 或 Datatables中文网
（3）图表功能：
使用servlet给前端传值js接收：
柱状图
<%
List<Analys> analys1 =(List<Analys>) request.getAttribute("analys1");// servlet传数据
SimpleDateFormat df = new SimpleDateFormat();// 更新时间
%>
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-bar-chart"></i> 不同月份使用人数数量的曲线</div>
<div class="card-body">
<div class="row">
<div class="col-sm-8 my-auto">
<canvas id="myBarChart" width="100" height="50"></canvas>// 柱状图展示
</div>
<div class="col-sm-4 text-center my-auto">
<div class="h4 mb-0 text-primary">First</div>
<div class="small text-muted">Mar <%=analys1.get(0).getMonth()%></div>
<hr>
<div class="h4 mb-0 text-warning">Second</div>
<div class="small text-muted">Mar <%=analys1.get(1).getMonth()%></div>
<hr>
<div class="h4 mb-0 text-success">Third</div>
<div class="small text-muted">Mar <%=analys1.get(2).getMonth()%></div>
</div>
</div>
</div>
<div class="card-footer small text-muted">Updated at <%=df.format(new Date())%></div>
</div>
<script>
<%
List<Analys> analys =(List<Analys>) request.getAttribute("analys");
%>
var ctx = document.getElementById("myBarChart");
var myLineChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Mar 1", "Mar 2", "Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12"],
datasets: [{
label: "次数",
backgroundColor: "rgba(2,117,216,1)",
borderColor: "rgba(2,117,216,1)",
data: [
<% for (int i=0; i< analys.size(); i++) {%>
<%if (i!=11) {%>
<%=analys.get(i).getCounts()%>,
<%} else {%>
<%=analys.get(i).getCounts()%>
<%}%>
<%}%>
],
}],
},
options: {
scales: {
xAxes: [{
time: {
unit: 'month'
},
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 12
}
}],
yAxes: [{
ticks: {
min: 0,
max: 50,
maxTicksLimit: 5
},
gridLines: {
display: true
}
}],
},
legend: {
display: false
}
}
});
</script>
饼状图
<%
List<Analys> analys =(List<Analys>) request.getAttribute("analys");
SimpleDateFormat df = new SimpleDateFormat();// 更新时间
%>
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-pie-chart"></i>分类</div>
<div class="card-body">
<canvas id="myPieChart" width="100%" height="100"></canvas>
</div>
<div class="card-footer small text-muted">Updated at <%=df.format(new Date())%></div>
</div>
<script>
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [
<% for (int i=0; i< analys.size(); i++) {%>
<%if (i!=11) {%>
<%=analys.get(i).getMonth()%>,
<%} else {%>
<%=analys.get(i).getMonth()%>
<%}%>
<%}%>
],
datasets: [{
data: [<% for (int i=0; i< analys.size(); i++) {%>
<%if (i!=11) {%>
<%=analys.get(i).getCounts()%>,
<%} else {%>
<%=analys.get(i).getCounts()%>
<%}%>
<%}%>],
backgroundColor: ['#ffff00', '#ffcc00', '#ff9900', '#ff6600','#ff3300','#ff0000','#ccff00', '#cccc00', '#cc9900', '#cc6600','#cc3300','#cc0000'],
}],
},
});
</script>
曲线图
<%
List<Quarter> quarters = (List<Quarter>) request.getAttribute("allDay");
SimpleDateFormat df = new SimpleDateFormat();
%>
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-area-chart"></i>至今每天访问的用户数</div>
<div class="card-body">
<canvas id="myAreaChart" width="100%" height="30"></canvas>
</div>
<div class="card-footer small text-muted">Updated at <%=df.format(new Date())%></div>
</div>
<script>
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: [
<% for (int i=0; i< quarters.size(); i++) {%>
<%if (i!= quarters.size()-1) {%>
<%=i%>,
<%} else {%>
<%=i%>
<%}%>
<%}%>
],
datasets: [{
label: "数量",
lineTension: 0.3,
backgroundColor: "rgba(2,117,216,0.2)",
borderColor: "rgba(2,117,216,1)",
pointRadius: 5,
pointBackgroundColor: "rgba(2,117,216,1)",
pointBorderColor: "rgba(255,255,255,0.8)",
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(2,117,216,1)",
pointHitRadius: 20,
pointBorderWidth: 2,
data: [<% for (int i=0; i< quarters.size(); i++) {%>
<%if (i!= quarters.size()-1) {%>
<%=quarters.get(i).getCounts()%>,
<%} else {%>
<%=quarters.get(i).getCounts()%>
<%}%>
<%}%>]
}],
},
options: {
scales: {
xAxes: [{
time: {
unit: 'date'
},
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 7
}
}],
yAxes: [{
ticks: {
min: 0,
max: 30,
maxTicksLimit: 5
},
gridLines: {
color: "rgba(0, 0, 0, .125)",
}
}],
},
legend: {
display: false
}
}
});
</script>
c3p0连接池的配置
MySQL 查询当天、本周，本月、上一个月的数据
源码下载
0积分/C币
网盘链接：（https://pan.baidu.com/s/1pqm3trUZNmhwtEL_DjIYkg?pwd=1234）
使用到的数据仅为测试使用
3235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
