Student achievement management system-SSM implementation (using json for front-end and back-end interaction to realize paging display data)
Using maven to manage the project, using json to transfer data is fast, and easy to operate in js, so as to realize the asynchronous display data of web pages
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 -->The configuration required by the spring configuration file
<!-- 实体 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;
}control layer code
//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);
}Front-end data processing (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 to dynamically display table data and pagination bar
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)
}