学生成绩管理系统-SSM实现(使用json进行前后端交互实现分页展示数据)
使用了maven管理项目,使用json传递数据速度很快,并且容易在js操作,从而实现网页的异步显示数据
pom.xml
<!-- json所需jar start -->
<jackson.version>1.9.13</jackson.version>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.7.5</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>${jackson.version}</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-core-asl</artifactId>
<version>${jackson.version}</version>
</dependency>
<!-- json所需jar end -->
spring的配置文件所需配置
<!-- 实体 json 自动映射转化 -->
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="messageConverters">
<list>
<ref bean="mappingJacksonHttpMessageConverter" />
</list>
</property>
</bean>
<bean id="mappingJacksonHttpMessageConverter"
class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
<value>text/json;charset=UTF-8</value>
</list>
</property>
</bean>
Page.java
public class Page<T> {
private int index;//mybatis在分页时所需的下标
private int pageNum;// 设置完页码后要设置总数据量才计算start和end
private int pageTotal;//总页数
public static final int pageMax = 15;//一页所显示的数据量
private long totalData;//总数据量
private int start;//分页栏的起始数
private int end;//分页栏的终止数
private List<T> list;//查询得到的数据
//搜索栏所需的字段
private String id;
private String name;
private char level;
private String scoreN;
private String sortType;
private String sort;
private double scoreU;// 左
private double scoreD;// 右
public Page() {
this.scoreU = 0;
this.scoreD = 100;
this.pageNum = 1;
}
//设置总数据量的同时计算分页时起始和终止量
public void setTotalDate(long totalData) {
int t = 1;
if ((int) totalData % pageMax == 0) {
t = 0;
}
this.pageTotal = (int) (totalData / pageMax + t);
this.totalData = totalData;
this.start = pageNum - 2;
if (this.start <= 0) {
this.start = 1;
}
this.end = this.start + 4;
if (this.end >= pageTotal) {
this.end = pageTotal;
}
}
// 设置页数时计算当前数据下标
public void setPageNum(int pageNum) {
this.pageNum = pageNum;
this.index = (this.pageNum - 1) * pageMax;
}
控制层的代码
//produces表明返回格式为json,consumes表明接收数据为json,实际上接收表单数据直接用spring自带的自动类型转化会更方便,用json需要额外的配置
@RequestMapping(value = "/searchStudentJson", method = RequestMethod.POST, produces = "application/json",consumes="application/json")
//表明返回json格式的数据
@ResponseBody
public Page<Student> searchStudentJson(@RequestBody Page<Student> pagebean, ModelMap model) {
//返回一个Page对象
return studentService.searchStudent(pagebean);
}
前端数据处理(jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="../css/main.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>查看成绩</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/resetForm.js"></script>
<script type="text/javascript" src="../js/ajaxSetViewData.js"></script>
<script type="text/javascript">
//为了使用el,只能将js写在外面
function search(number) {
var json = {};
//将表单数据转化为json数组
var data = $('#form').serializeArray();
//将json数组转化为json,否则控制层会报错,控制层的修改操作博主并没有找到,只能在js处解决
$.each(data, function() {
if (json[this.name]) {
if (!json[this.name].push) {
json[this.name] = [ json[this.name] ];
}
json[this.name].push(this.value || '');
} else {
json[this.name] = this.value || '';
}
})
json.pageNum = number
$.ajax({
type : "POST",
dataType : "json",
//contentType : "application/json",
url : "${pageContext.request.contextPath}/manager/searchStudentJson",
data : JSON.stringify(json),
//$('#form').serialize() 若不使用json,直接使用这个就行了
success : function(result) {
createTable(result)
initPage(result)
//resetForm(result)
$('#number').html(result.pagNum)
$('#numberMax').html(result.pageTotal)
},
error : function() {
alert("出错")
}
});
}
</script>
<script type="text/javascript" src="../js/CheckPage.js"></script>
</head>
<body onload="search(1)">
<%@include file="主页.jsp"%>
<div>
<form action="searchStudent" method="post" id="form">
<%@include file="searchBar.jsp"%>
<%@include file="ViewData(JSON).jsp"%>
<%@include file="page.jsp"%>
</form>
</div>
</body>
</html>
动态显示表格数据和分页栏的js
function checkdel(){
return confirm("真的要删除吗");
}
function createTable(result) {
$("#body").html("")
for (var i = 0; i < result.list.length; ++i) {
var s = "<tr><td>"
+ result.list[i].id
+ "</td>"
+ "<td>"
+ result.list[i].name
+ "</td>"
+ "<td>"
+ result.list[i].chinese
+ "</td>"
+ "<td>"
+ result.list[i].math
+ "</td>"
+ "<td>"
+ result.list[i].english
+ "</td>"
+ "<td>"
+ result.list[i].per
+ "</td>"
+ "<td>"
+ result.list[i].homework
+ "</td>"
+ "<td>"
+ result.list[i].level
+ "</td>"
+ "<td><a href='editStudent?id="+result.list[i].id+"'>编辑</a></td><td><a href='delStudent?id="+result.list[i].id+"' onclick='return checkdel()'>删除</a></td></tr>"
$("#body").append(s)
}
}
function initPage(result) {
var s = ""
$('#tip').html(s)
var t;
if (parseInt(result.pageNum) - 1 < 0) {
s += "<li><a>上一页</a>"
} else {
t = parseInt(result.pageNum) - 1
s += "<li><a href='javascript: search(" + t + ");'>" + "上一页" + "</a>"
}
for (t = parseInt(result.start); t <= parseInt(result.end); t++) {
if (t != parseInt(result.pageNum)) {
s += "<li><a href='javascript: search(" + t + ");'>[" + t + "]</a>"
} else {
s += "<li><a>[" + t + "]</a>"
}
}
if (parseInt(result.pageNum) + 1 > parseInt(result.pageTotal)) {
s += "<li><a>下一页</a>"
} else {
t = parseInt(result.pageNum) + 1
s += "<li><a href='javascript: search(" + t + ");'>" + "下一页" + "</a>"
}
s += "<li><a href='javascript: search(" + result.pageTotal + ");'>尾页</a>"
$('#tip').append(s)
}