本文介绍了一个班级学生管理系统的实现，包括使用JSP、Java和LayUI等技术搭建的前端界面和后端逻辑，实现了学生信息的增删查改等功能。
1.下载并引用插件
2.html代码
2.1main.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>主界面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<script src="layui/layui.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/main.js"></script>
<div id="loginUser" style="margin-left: 30px;margin-top: 20px;background-color: ">
</div>
<div style="width: 100%;height: 1400px;">
<div
style="float: left; margin-top: 50px; margin-left: 10px; height: 100%;background-color: #393D49;">
<ul id="menuTree" class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<!-- <li class="layui-nav-item layui-nav-itemed"><a -->
<!-- href="javascript:;">信息管理</a> -->
<!-- <dl class="layui-nav-child"> -->
<!-- <dd> -->
<!-- <a href="queryClass.do" target="contentPage">班级管理</a> -->
<!-- </dd> -->
<!-- <dd> -->
<!-- <a href="queryStudent.do" target="contentPage">学员管理</a> -->
<!-- </dd> -->
<!-- </dl> -->
<!-- </li> -->
</ul>
</div>
<div style="float:left;width: 80%;">
<!--主界面开始 -->
<iframe name="contentPage"
style="border: none; margin-top:50px; margin-left:5px; width: 100%; height: 100%;;" src="queryStudent.do"></iframe>
<!-- 主界面结束 -->
</div>
</div>
<script type="text/javascript">
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function() {
var element = layui.element;
//…
});
</script>
</body>
</html>
2.2 classManage.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>班级信息管理界面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="pages/manage.css">
</head>
<body>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/echarts-all.js"></script>
<script type="text/javascript" src="pages/classManage.js"></script>
<div class="div-table">
<button style="float: left;" type="button" class="layui-btn" onclick="turnToClassAdd()">
<i class="layui-icon"></i> 添加
</button>
<!-- <input type="text" id="condition" autocomplete="off" class="layui-input" style="float:left;width:230px;margin-left: 20px;"> -->
<!-- <button class="layui-btn" onclick="queryClassByString()">班级名称查询</button> -->
<div><table class="layui-table" lay-skin="line">
<colgroup>
<col width="150">
<col width="200">
<col width="200">
<col width="200">
<col width="200">
</colgroup>
<thead>
<tr>
<th>班级名称</th>
<th>上课时间</th>
<th>下课时间</th>
<th>学员数</th>
<th>操作</th>
</tr>
</thead>
<tbody id="classList">
<c:forEach items="${classList }" var="classBean">
<tr>
<td>${classBean.name }</td>
<td>
<fmt:formatDate value="${classBean.classTime }" pattern="yyyy-MM-dd HH:mm:ss"/>
</td>
<td>
<fmt:formatDate value="${classBean.classBreakTime }" pattern="yyyy-MM-dd HH:mm:ss"/>
</td>
<td><a href="javascript:;" onclick="show('${classBean.id}')"><span style="font-size: 20pt;color: black">${classBean.counts }</span>
<i class="layui-icon layui-icon-list" style="font-size: 30px; color: #1E9FFF;"></i></a>
</td>
<td><a href="turnToEdit.do?id=${classBean.id }"> <i class="layui-icon layui-icon-edit" style="font-size: 30px; color: #1E9FFF;"></i></a>
<a href="javascript:;" onclick="remove('${classBean.id}')"> <i class="layui-icon layui-icon-delete" style="font-size: 30px; color: #1E9FFF;"></i></a>
</td>
</tr>
</c:forEach>
</tbody>
</table></div>
<div id="page"></div>
</div>
<div id="pieChart" style="margin-left:100px;width: 80%;height: 400px;"></div>
<div id="barChart" style="margin-left:100px;width: 80%;height: 400px;"></div>
</body>
</html>
3.classManage.js
Date.prototype.toLocaleString = function() {
return this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate() + " " + this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds();
};
function queryClassByString() {
var className = $("#condition").val();
layui.use('laypage', function() {
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem : 'page', //注意，这里的 test1 是 ID，不用加 # 号
count : 10, //数据总数，从服务端得到
curr : 1,
jump : function(obj, first) {
//obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if (!first) {
}
}
});
});
$.ajax({
url : 'queryClassByClassName.do',
type : 'post',
data : 'className=' + className,
dataType : 'json',
async : false,
success : function(result) {
var strHtml = "";
strHtml += "<tr>";
strHtml += "<td>" + result.name + "</td>";
strHtml += "<td>" + new Date(result.classTime).toLocaleString() + "</td>";
strHtml += "<td>" + new Date(result.classBreakTime).toLocaleString() + "</td>";
strHtml += "<td><a href='javascript:;' onclick='show(" + result.id + ")'><span style='font-size: 20pt;color: black'>" + result.counts + "</span>"
+ "<i class='layui-icon layui-icon-list' style='font-size: 30px; color: #1E9FFF;'></i></a></td>";
strHtml += "<td><a href='turnToEdit.do?id=" + result.id + "'> <i class='layui-icon layui-icon-edit' style='font-size: 30px; color: #1E9FFF;'></i></a>" +
"<a href='javascript:;' onclick='remove(" + result.id + ")'> <i class='layui-icon layui-icon-delete' style='font-size: 30px; color: #1E9FFF;'></i></a></td>";
strHtml += "</tr>";
$("#classList").html(strHtml);
},
});
}
function show(id) {
$.ajax({
url : 'queryStudentByClassID.do',
type : 'post',
data : 'classId=' + id,
dataType : 'json',
async : false,
success : function(data) {
var students = "";
students += "<table class='layui-table' lay-skin='line'>" +
"<thead><tr><th>学号</th><th>姓名</th><th> </th><th>性别</th><th>电话</th></tr></thead><tbody>";
for (var i in data) {
students += "<tr>";
students += "<td>" + data[i].number + "</td>";
students += "<td>" + data[i].name + "</td>";
students += "<td></td>";
students += "<td>" + (data[i].sex == 1 ? '男' : '女') + "</td>";
students += "<td>" + data[i].phone + "</td>";
students += "</tr>";
}
students += "</tbody></table>";
layui.use('layer', function() {
var layer = layui.layer;
layer.open({
type : 0,
content : students,
offset : '100px',
anim : 1,
area : '600px'
})
});
},
});
}
;
function remove(id) {
//ajax判断该班级下是否有学员
$.ajax({
url : 'queryStudentByClassID.do',
type : 'post',
data : 'classId=' + id,
dataType : 'json',
async : false,
success : function(data) {
if (data == null) {
//没有学员，弹出确认提示框
if (confirm("确定删除该班级信息吗?")) {
location.href = "removeClassById.do?id=" + id;
}
} else {
alert("该班级下有学员,不能删除");
return;
}
},
});
}
;
function turnToClassAdd() {
location.href = "pages/classAdd.jsp";
}
;
function getCount() {
//初始化
var num = 0;
$.ajax({
url : 'queryClassCount.do',
type : 'post',
dataType : 'text',
async : false,
success : function(data) {
num = data;
},
});
return num;
}
;
layui.use('laypage', function() {
var laypage = layui.laypage;
//从服务端获取数据总数
var totalCounts = getCount();
//执行一个laypage实例
laypage.render({
elem : 'page', //注意，这里的 test1 是 ID，不用加 # 号
count : totalCounts, //数据总数，从服务端得到
jump : function(obj, first) {
//obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
var ignoreCount = (obj.curr - 1) * obj.limit;
//首次不执行
if (!first) {
$.ajax({
url : 'queryClassAjax.do',
type : 'post',
data : 'ignoreCount=' + ignoreCount + '&limitCount=' + obj.limit,
dataType : 'json',
async : false,
success : function(result) {
var strHtml = "";
for (var i in result) {
strHtml += "<tr>";
strHtml += "<td>" + result[i].name + "</td>";
strHtml += "<td>" + new Date(result[i].classTime).toLocaleString() + "</td>";
strHtml += "<td>" + new Date(result[i].classBreakTime).toLocaleString() + "</td>";
strHtml += "<td><a href='javascript:;' onclick='show(" + result[i].id + ")'><span style='font-size: 20pt;color: black'>" + result[i].counts + "</span>"
+ "<i class='layui-icon layui-icon-list' style='font-size: 30px; color: #1E9FFF;'></i></a></td>";
strHtml += "<td><a href='turnToEdit.do?id=" + result[i].id + "'> <i class='layui-icon layui-icon-edit' style='font-size: 30px; color: #1E9FFF;'></i></a>" +
"<a href='javascript:;' onclick='remove(" + result[i].id + ")'> <i class='layui-icon layui-icon-delete' style='font-size: 30px; color: #1E9FFF;'></i></a></td>";
strHtml += "</tr>";
}
$("#classList").html(strHtml);
},
});
}
}
});
});
function getPieChart(names,datas){
//基于准备好的dom，初始化echarts实例
var pieChart = echarts.init(document.getElementById("pieChart"));
//指定图表的配置项和数据
var option = {
title : {
text : '班级学员数量饼状图',
subtext : '',
x : 'center'
},
tooltip : { //图例组件，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
trigger : 'item',
formatter : "{a} <br/>{b} : {c} ({d}%)"
},
// color: colors,
legend : {
orient : 'vertical',
x : 'left',
data : names,
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'pie', 'funnel' ],
option : {
funnel : {
x : '25%',
width : '50%',
funnelAlign : 'left',
max : 1548
}
}
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
series : [
{
name : '访问来源',
type : 'pie',
radius : '55%',
center : [ '50%', '60%' ],
data : datas,
itemStyle :
{
normal:
{
label :
{
show: true,
formatter : '{b} : {c} ({d}%)'
}
}},
}
]
};
pieChart.setOption(option,false);
//定时器
// window.setInterval(function() {
// names = [];
// datas = [];
// $.ajax({
// url : 'queryChartData.do',
// type : 'post',
// dataType : 'json',
// async : false,
// success : function(data) {
// for (var i in data) {
// names.push(data[i].name);
// datas.push({
// name : data[i].name,
// value : data[i].counts
// });
// }
// },
// });
// pieChart.setOption({
// legend: {
// data: names
// },
// series: [
// {
// data: datas
// }
// ]
// });
// }, 3000);
}
function getBarChart(names,values){
//基于准备好的dom，初始化echarts实例
var barChart = echarts.init(document.getElementById("barChart"));
//指定图表的配置项和数据
option = {
title : {
text : '班级学员数量柱状图',
subtext : '',
},
tooltip : {
trigger : 'axis'
},
// color: colors,
legend : {
data : [ '' ],
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : names
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name : '学员数',
type : 'bar',
data : values,
itemStyle :
{
normal:
{
label :
{
show: true,
position: 'top',
textStyle: {
color: "#000000"
}
}
}},
markPoint : {
data : [
{
type : 'max',
name : '最大值'
},
{
type : 'min',
name : '最小值'
}
]
},
markLine : {
data : [
{
type : 'average',
name : '平均值'
}
]
}
},
]
};
barChart.setOption(option,false);
//定时器
// window.setInterval(function() {
// names = [];
// datas = [];
// $.ajax({
// url : 'queryChartData.do',
// type : 'post',
// dataType : 'json',
// async : false,
// success : function(data) {
// for (var i in data) {
// names.push(data[i].name);
// values.push(data[i].counts);
// }
// },
// });
// barChart.setOption({
// legend : {
// data : [ '' ],
// },
// xAxis: [
// {
// data: names
// }
// ],
// series: [
// {
// data: values
// }
// ]
// });
// }, 3000);
}
$(function() {
//ajax获取班级名称和学员数量
var datas = [];
var names = [];
var values = [];
var colors = [ '#990033', '#CC6699', '#9900CC', '#663366', '#000CC',
'#330033', '#006699', '#9999FF', '#FFCC00', '#663300', '#FF9933',
'#009966', '#66FF00', '#336666', '#00CC00', '#33CC99', '#669933',
'#CCCC00', '#FF33CC', '#663366', '#33FF66', '#99CC99', '#666600' ];
$.ajax({
url : 'queryChartData.do',
type : 'post',
dataType : 'json',
async : false,
success : function(data) {
for (var i in data) {
names.push(data[i].name);
values.push(data[i].counts);
datas.push({
name : data[i].name,
value : data[i].counts
});
}
},
});
//饼状图
getPieChart(names,datas);
//柱状图
getBarChart(names,values);
});
4.ClassContoller.java
package com.sg.xujun.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.sg.xujun.model.ClassBean;
import com.sg.xujun.model.StudentBean;
import com.sg.xujun.service.ClassService;
@Controller
public class ClassContoller {
private Logger log = Logger.getLogger(this.getClass());
@Autowired
private ClassService classService;
/**
* 获取班级信息
* @param modelMap
* @return
*/
@RequestMapping("/queryClass.do")
public String queryClass(Integer ignoreCount,Integer limitCount,ModelMap modelMap){
log.info("获取班级信息开始");
if (ignoreCount == null) {
ignoreCount = 0;
}
if (limitCount == null) {
limitCount = 10;
}
log.info("获取班级信息,跳过"+ignoreCount+"条数据,显示"+limitCount+"条数据");
Map<String, Object> map = new HashMap<String, Object>();
map.put("ignoreCount",ignoreCount);
map.put("limitCount",limitCount);
List<ClassBean> classList = classService.queryClass(map);
modelMap.addAttribute("classList",classList);
log.info("获取班级信息结束");
return "/pages/classManage.jsp";
}
/**
* 获取班级信息
* @param modelMap
* @return
*/
@RequestMapping("/queryClassAjax.do")
@ResponseBody
public List<ClassBean> queryClassAjax(Integer ignoreCount,Integer limitCount){
log.info("分页获取班级信息开始");
log.info("获取班级信息,跳过"+ignoreCount+"条数据,显示"+limitCount+"条数据");
Map<String, Object> map = new HashMap<String, Object>();
map.put("ignoreCount",ignoreCount);
map.put("limitCount",limitCount);
List<ClassBean> classList = classService.queryClass(map);
log.info("分页获取班级信息结束");
return classList;
}
/**
* 添加班级信息时判断班级名称是否存在
* @param modelMap
* @return
*/
@RequestMapping(value="/queryClassByName.do",produces="text/plain;charset=UTF-8")
@ResponseBody()
public String queryClassByName(String name){
log.info("添加班级信息开始");
log.info("判断班级"+ name +"名称是否存在");
ClassBean classBean = classService.queryClassByName(name);
String result = "error";
if (classBean == null) {
result = "success";
}
log.info("添加班级信息结束");
return result;
}
/**
* 修改班级信息时判断班级（id,名称）是否存在
* @param modelMap
* @return
*/
@RequestMapping(value="/queryClassByCondition.do",produces="text/plain;charset=UTF-8")
@ResponseBody()
public String queryClassByCondition(Integer id,String name){
log.info("判断班级信息是否存在开始");
log.info("判断班级id:"+ id + ",名称:" + name +"是否存在");
String result = "error";
Map<String, Object> map = new HashMap<String, Object>();
map.put("id",id);
map.put("name",name);
ClassBean classBean = classService.queryClassByCondition(map);
if (classBean == null) {
result = "success";
}
log.info("判断班级信息是否存在结束");
return result;
}
/**
* 添加班级信息
* @param classBean
* @return
*/
@RequestMapping("/addClass.do")
public String addClass(ClassBean classBean){
log.info("添加班级信息开始");
log.info("添加的班级信息：" + classBean.toString());
classService.addClass(classBean);
log.info("添加班级信息结束");
return "queryClass.do";
}
/**
* 根据ID获取信息，加载到classEdit.jsp页面上
* @param id
* @param modelMap
* @return
*/
@RequestMapping("turnToEdit.do")
public String turnToEdit(Integer id,ModelMap modelMap){
log.info("根据ID获取班级信息开始");
log.info("根据ID获取班级信息，加载到页面上，ID：" + id);
ClassBean classBean = classService.queryClassByID(id);
modelMap.addAttribute("classBean",classBean);
log.info("根据ID获取班级信息结束");
return "/pages/classEdit.jsp";
}
/**
* 修改班级信息
* @param classBean
* @return
*/
@RequestMapping("/editClass.do")
public String modifyClass(ClassBean classBean){
log.info("修改班级信息开始");
log.info("需要修改的班级信息:" + classBean.toString());
classService.modifyClass(classBean);
log.info("修改班级信息结束");
return "queryClass.do";
}
/**
* 根据班级ID查询该班级下的学员信息
* @param classId
* @return
*/
@RequestMapping(value="/queryStudentByClassID.do",produces ="application/json;charset=utf-8")
@ResponseBody
public List<StudentBean> queryStudentByClassID(Integer classId){
log.info("查询是否存在学员开始");
log.info("查询是否存在学员的班级ID：" + classId);
List<StudentBean> studentList = classService.queryStudentByClassId(classId);
log.info("查询是否存在学员结束");
if(studentList.size() > 0){
return studentList;
}else{
return null;
}
}
/**
* 根据班级ID删除该班级信息
* @param id
* @return
*/
@RequestMapping("/removeClassById.do")
public String removeClassById(Integer id){
log.info("删除班级信息开始");
log.info("需要删除的班级信息的ID：" + id);
classService.removeClass(id);
log.info("删除班级信息结束");
return "queryClass.do";
}
/**
* 获取班级信息总数
* @return
*/
@RequestMapping("/queryClassCount.do")
@ResponseBody
public Integer getClassCount(){
log.info("获取班级信息总数开始");
int num = classService.queryCount();
log.info("获取班级信息总数结束");
return num;
}
/**
* 获取所有的班级ID,名称
* @return
*/
@RequestMapping("/queryClassAll.do")
@ResponseBody
public List<ClassBean> queryClassAll(){
log.info("获取所有的班级ID，名称开始");
List<ClassBean> classList = classService.queryClassAll();
log.info(classList.toString());
log.info("获取所有的班级ID，名称结束");
return classList;
}
/**
* 根据班级名查询班级信息
* @return
*/
@RequestMapping("/queryClassByClassName.do")
@ResponseBody
public ClassBean queryClassByClassName(String className){
log.info("根据班级名查询班级信息开始");
log.info("根据班级名查询班级信息:" + className);
ClassBean classBean = classService.queryClassByName(className);
log.info("根据班级名查询班级信息结束");
return classBean;
}
/**
* 获取班级名称和班级学员数
* @return 班级列表容器
*/
@RequestMapping("/queryChartData.do")
@ResponseBody
public List<ClassBean> queryChartData(){
log.info("获取班级名称和班级学员数开始");
List<ClassBean> chartData = classService.queryChartData();
log.info("获取班级名称和班级学员数结束");
return chartData;
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
