关于SpringBoot和PageHelper，前篇博客已经介绍过Spring boot入门（二）：Spring boot集成MySql,Mybatis和PageHelper插件，前篇博客大致讲述了SpringBoot如何集成Mybatis和Pagehelper,但是没有做出实际的范例，本篇博客是连接上一篇写的。通过AdminLTE前端框架，利用DataTable和PageHelper进行分页显示，通过对用户列表的增删改查操作，演示DataTable和PageHelper的使用。
（1）AdminLTE介绍
AdminLTE是一个完全响应管理模板。基于Bootstrap3框架，易定制模板。适合多种屏幕分辨率，从小型移动设备到大型台式机。内置了多个页面，包括仪表盘、邮箱、日历、锁屏、登录及注册、404错误、500错误等页面。具体介绍见官方网站：https://adminlte.io/，我们可以直接从此网站下载该模板，其外观如下：
（2）SpringBoot后台集成AdminLTE
首先在官网下载AdminLTE模板，然后将此模板的全部文件拷贝到项目下：
拷贝后，将AdminLTE文件进行了拆分，其中base里面是AdminLTE自带的所有js包和css文件，main中是AdminLTE主页面渲染页面，index是入口。这么做的目的：直接将base通过FreeMarker中宏的形式引入到index入口页面中，那么所有的js文件将一直曾在最底层的页面下，在后期的其它页面的开发中，不需要再次引入js包，避免js包混乱。
启动项目：
（3）配置generate
generate的介绍比较多，此处直接介绍配置的步骤及代码
增加依赖jar包，在build下增加
<plugin>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-maven-plugin</artifactId>
<version>1.3.7</version>
<dependencies>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql-connector-java.version}</version>
</dependency>
<dependency>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-core</artifactId>
<version>1.3.7</version>
</dependency>
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper</artifactId>
<version>${mapper.version}</version>
</dependency>
</dependencies>
<executions>
<execution>
<id>Generate MyBatis Artifacts</id>
<phase>package</phase>
<goals>
<goal>generate</goal>
</goals>
</execution>
</executions>
<configuration>
<!--允许移动生成的文件 -->
<verbose>true</verbose>
<!-- 是否覆盖 -->
<overwrite>true</overwrite>
<!-- 自动生成的配置 -->
<!-- <configurationFile>generatorConfig.xml</configurationFile>-->
</configuration>
</plugin>
编写generatorConfig.xml文件，并放在templates根目录下，若放在其它目录中，则需要在pom.xml中配置路径，否则，编译的时候无法通过。具体错误：
[ERROR] Failed to execute goal org.mybatis.generator:mybatis-generator-maven-plugin:1.3.5:generate (default-cli) on project edu: configfile D:\8_Project\learn\edu\src\main\resources\generatorConfig.xml does not exist -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoExecutionException
generatorConfig.xml的脚本如下，其中targetProject的路径需要曾在，否则会报错，参考https://blog.csdn.net/hh680821/article/details/79051870
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
"http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd"> <generatorConfiguration>
<!-- <properties resource="application.properties"/>--> <context id="Mysql" targetRuntime="MyBatis3Simple" defaultModelType="flat">
<!--属性配置 -->
<property name="beginningDelimiter" value="`"/>
<property name="endingDelimiter" value="`"/>
<!--去除注释 -->
<commentGenerator>
<property name="suppressAllComments" value="true" />
</commentGenerator>
<!--如果mapper接口需要实现其它接口，那么需要配置MapperPlugin，value中是实现的接口或类名 -->
<plugin type="tk.mybatis.mapper.generator.MapperPlugin">
<property name="mappers" value="com.tswc.edu.utils.MyMapper"/>
</plugin>
<!--一定要放在plugin下面，否则报错 -->
<commentGenerator>
<property name="suppressAllComments" value="true" />
</commentGenerator>
<!--数据库连接池-->
<jdbcConnection driverClass="com.mysql.jdbc.Driver"
connectionURL="jdbc:mysql://localhost:3306/edu"
userId="root"
password="123456">
</jdbcConnection>
<!--自动生成实体类-->
<javaModelGenerator targetPackage="generator" targetProject="src/main/java"/>
<!--自动生成map接口-->
<sqlMapGenerator targetPackage="generator" targetProject="src/main/java"/>
<!--自动生成mybatis的xml文件-->
<javaClientGenerator targetPackage="generator" targetProject="src/main/java"
type="XMLMAPPER"/>
<!--数据库表名，此处如果需要去掉某个自带函数，需要添加参数-->
<!--1，schema：数据库的schema；
2，catalog：数据库的catalog；
3，alias：为数据表设置的别名，如果设置了alias，那么生成的所有的SELECT SQL语句中，列名会变成：alias_actualColumnName
4，domainObjectName：生成的domain类的名字，如果不设置，直接使用表名作为domain类的名字；可以设置为somepck.domainName，那么会自动把domainName类再放到somepck包里面；
5，enableInsert（默认true）：指定是否生成insert语句；
6，enableSelectByPrimaryKey（默认true）：指定是否生成按照主键查询对象的语句（就是getById或get）；
7，enableSelectByExample（默认true）：MyBatis3Simple为false，指定是否生成动态查询语句；
8，enableUpdateByPrimaryKey（默认true）：指定是否生成按照主键修改对象的语句（即update)；
9，enableDeleteByPrimaryKey（默认true）：指定是否生成按照主键删除对象的语句（即delete）；
10，enableDeleteByExample（默认true）：MyBatis3Simple为false，指定是否生成动态删除语句；
11，enableCountByExample（默认true）：MyBatis3Simple为false，指定是否生成动态查询总条数语句（用于分页的总条数查询）；
12，enableUpdateByExample（默认true）：MyBatis3Simple为false，指定是否生成动态修改语句（只修改对象中不为空的属性）；
13，modelType：参考context元素的defaultModelType，相当于覆盖；
14，delimitIdentifiers：参考tableName的解释，注意，默认的delimitIdentifiers是双引号，如果类似MYSQL这样的数据库，使用的是`（反引号，那么还需要设置context的beginningDelimiter和endingDelimiter属性）
15，delimitAllColumns：设置是否所有生成的SQL中的列名都使用标识符引起来。默认为false，delimitIdentifiers参考context的属性
注意，table里面很多参数都是对javaModelGenerator，context等元素的默认属性的一个复写；-->
<table tableName="t_user">
<generatedKey column="id" sqlStatement="Mysql" identity="true"/>
</table> </context>
</generatorConfiguration>
假设产生此错误：
[ERROR] Failed to execute goal org.mybatis.generator:mybatis-generator-maven-plugin:1.3.5:generate (default-cli) on project edu: XML Parser Error on line 60: 元素类型为 "context" 的内容必须匹配 "(property*,plugin*,commentGenerator?,(connectionFactory|jdbcConnection),javaTypeResolver?,javaModelGenerator,sqlMapGenerator?,javaClientGenerator?,table+)"。 -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoExecutionException
原因就是：generate中，标签都是有顺序的，此类错误就是标签的顺序存在问题
此时，xml文件以及配置结束，需要在idea中配置启动操作：mybatis-generator:generate，如图
（4）DataTable的使用
DataTable是一款简单易用的分页插件，基于JQuery写的，里面提供了丰富的分页参数，主要通过Ajax实现数据的前后端传输
首先引入js和css包：
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
其外，还需要格式化相关提示文字，一般命名为：language.json
{
"sEmptyTable": "没有相关数据",
"sInfo": "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条",
"sInfoEmpty": "记录数为0",
"sInfoFiltered": "(全部记录数 _MAX_ 条)",
"sInfoPostFix": "",
"sInfoThousands": ",",
"sLengthMenu": "显示 _MENU_ 条",
"sLoadingRecords": "正在加载...",
"sProcessing": "正在获取数据，请稍候...",
"sSearch": "搜索",
"sZeroRecords": "没有您要搜索的内容",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "尾页",
"sJump": "跳转"
},
"oAria": {
"sSortAscending": ": 以升序排序",
"sSortDescending": ": 以降序排序"
}
}
具体的实现方式如下代码：
var user_tab;
var user_list_param;
$(function () {
var url="/admin/user/listPage";
user_list_setParm();
user_tab = $('#user_tab').DataTable({
"fnDrawCallback": function () {
},
"dom": '<"top"i>rt<"bottom"flp><"clear">',
//"ordering":false,//是否排序
"processing": true,
"searching": false,
"serverSide": true, //启用服务器端分页
"order": [[ 5, "asc" ]],//默认排序字段
"bInfo": true,
"bAutoWidth": false,
"scrollX": true,
"scrollCollapse": false,
/*fixedColumns: {
leftColumns: 0,
rightColumns: 1
},*/
"language":{"url":"/plugins/datatables/language.json"},
"ajax":{"url":url,"data":user_list_param,"type":"post"},
"columns":[
{"data":"id"},
{"data":null},
{"data":"userName"},
{"data":"password"},
{"data":"trueName"},
{"data":"createTime"},
{"data":"id"}
],
"columnDefs" : [
{
targets: 0,
data: null,
orderable:false,
render: function (data) {
return '<input type="checkbox" class="userCheckbox" value="'+data+'"/>';
}
},
{
targets: 1,
data: null,
orderable:false,
render: function (data) {
No=No+1;
return No;
}
},
{
"targets" : -1,
"data" : null,
orderable:false,
"render" : function(data) {
var data = "'"+data+"'";
var btn1='<a class="btn btn-xs btn-warning" target="modal" modal="hg" href=""><i class="fa fa-edit"></i>修改</a> ';
var btn2 = '<a class="btn btn-xs btn-danger" target="modal" modal="hg" onclick="user_list_delete('+data+')"><i class="fa fa-remove"></i>删除</a> ';
return btn1+btn2;
}
}
]
}).on('preXhr.dt', function ( e, settings, data ) {
No=0;
}).on('xhr.dt', function(e, settings, json, xhr) {
});
});
这里面需要说明的：
a.如果开启排序，那么后端接受参数的方式：
@RequestParam(value = "order[0][column]", required = false) Integer orderIndex
@RequestParam(value = "order[0][dir]", required = false) String orderDir
其中orderIndex为排序的字段，而orderDir为排序的方式（升序或者降序）。orderIndex中是前端table中字段的列号，所以通畅，还需要在后台初始化一个数组，然后再数组中取实际需要排序的字段，例如：
String[] cols = {"", "", "user_name", "password", "true_name", "create_time"};
Result<Page<TUser>> result = userService.listPage((start / pageSize) + 1, pageSize, cols[orderIndex], orderDir);
b.一般在对列表进行了增删改查后，需要重新刷新列表，而此时，大多数情况下，想列表保持当前页面刷新，那么需要使用函数
user_tab.draw(false);
其中user_tab为table的JQuery对象,如果不需要保持此页面，去掉false即可。
c.需要冻结某列的时候，需要使用到fixedColumns函数，可以使用on进行函数回调，使用dom，进行页面统计文字的显示位置"dom": '<"top"i>rt<"bottom"flp><"clear">',
（5）PageHelper后台分页的编写
public Result<Page<TUser>> listPage(int pageCurrent, int pageSize, String userName, String trueName, String cols, String orderDir) {
Example example = new Example(TUser.class);
Criteria criteria = example.createCriteria();
ExampleUtils.getLikeExample(criteria, "userName", userName);
ExampleUtils.getLikeExample(criteria, "trueName", trueName);
example.setOrderByClause(cols + " " + orderDir);
//example.orderBy(cols+" "+orderDir);
Result<Page<TUser>> result = new Result<Page<TUser>>();
PageHelper.startPage(pageCurrent, pageSize);
List<TUser> tUsers = userMapper.selectByExample(example);
PageInfo<TUser> pageInfo = new PageInfo<TUser>(tUsers, pageSize);
Page<TUser> resultData = new Page<TUser>((int) pageInfo.getTotal(), pageInfo.getPages(), pageCurrent, pageSize, tUsers);
result.setResultData(resultData);
result.setErrCode(0);
result.setStatus(true);
return result;
}
由于，需要配个DataTable,所以需要重新编写page类，保证字段的一致性，这里就放弃了PageHelper自带的PageInfo，实际上，这2个类中，字段类型基本一致，区别不大。
（6）.其它具体的代码
前端ftl:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
</head>
<body>
<div class="box-body">
<div class="clearfix">
<form class="form-horizontal">
<input id="user_list_repeatApply" name="user_list_repeatApply" type="reset" style="display:none;"/>
<div class="form-group clearfix">
<label class="col-md-1 control-label">登录名称</label>
<div class="col-md-2">
<input type="text" class="input-sm form-control" id="user_list_user_name" name="user_list_user_name" placeholder="请输入登录名称...">
</div>
<label class="col-md-1 control-label">用户名</label>
<div class="col-md-2">
<input type="text" class="input-sm form-control" id="user_list_true_name" name="user_list_true_name" placeholder="请输入用户名...">
</div>
<button type="button" onclick="user_list_query();" class="btn btn-sm btn-primary" ><i class="fa fa-search"></i>搜索</button>
<button type="button" onclick="user_list_add();" class="btn btn-sm btn-success" ><i class="fa fa-square-o"></i>增加</button>
<button type="button" onclick="user_list_delete('1');" class="btn btn-sm btn-danger" ><i class="fa fa-remove"></i>删除</button>
<button type="button" onclick="user_list_reset();" class="btn btn-sm btn-default">重置</button>
</div>
</form>
</div>
<table id="user_tab" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th><input type="checkbox" title="全选" /></th>
<th>序号</th>
<th>登录名称</th>
<th>登录密码</th>
<th>用户名</th>
<th>加入时间</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript">
var user_tab;
var user_list_param;
$(function () {
var url="/admin/user/listPage";
user_list_setParm();
user_tab = $('#user_tab').DataTable({
"fnDrawCallback": function () {
},
"dom": '<"top"i>rt<"bottom"flp><"clear">',
//"ordering":false,//是否排序
"processing": true,
"searching": false,
"serverSide": true, //启用服务器端分页
"order": [[ 5, "asc" ]],//默认排序字段
"bInfo": true,
"bAutoWidth": false,
"scrollX": true,
"scrollCollapse": false,
/*fixedColumns: {
leftColumns: 0,
rightColumns: 1
},*/
"language":{"url":"/plugins/datatables/language.json"},
"ajax":{"url":url,"data":user_list_param,"type":"post"},
"columns":[
{"data":"id"},
{"data":null},
{"data":"userName"},
{"data":"password"},
{"data":"trueName"},
{"data":"createTime"},
{"data":"id"}
],
"columnDefs" : [
{
targets: 0,
data: null,
orderable:false,
render: function (data) {
return '<input type="checkbox" class="userCheckbox" value="'+data+'"/>';
}
},
{
targets: 1,
data: null,
orderable:false,
render: function (data) {
No=No+1;
return No;
}
},
{
"targets" : -1,
"data" : null,
orderable:false,
"render" : function(data) {
var data = "'"+data+"'";
var btn1='<a class="btn btn-xs btn-warning" target="modal" modal="hg" href=""><i class="fa fa-edit"></i>修改</a> ';
var btn2 = '<a class="btn btn-xs btn-danger" target="modal" modal="hg" onclick="user_list_delete('+data+')"><i class="fa fa-remove"></i>删除</a> ';
return btn1+btn2;
}
}
]
}).on('preXhr.dt', function ( e, settings, data ) {
No=0;
}).on('xhr.dt', function(e, settings, json, xhr) {
});
});
//搜索框内容重置
function user_list_reset() {
$("input[name='user_list_repeatApply']").click();
}
//增加
function user_list_add() { }
//删除
function user_list_delete(param) {
var href = "/";
var title = "<p>警告！ 所选取的数据将会被删除！</p>";
var cb;
if(param=="1") {
var checkNum = $('input:checkbox[class="userCheckbox"]:checked').length;
var checkVal =[];
if(checkNum==0) {
alertMsg("<p>请选择数据</p>","warning");
return;
}
$.each($('input:checkbox[class="userCheckbox"]:checked'),function(){
checkVal.push($(this).val());
});
cb = "user_list_delete_data('"+checkVal+"');";
} else {
cb = "user_list_delete_one_data('"+param+"');";
}
$("#smModal").attr("action",href).attr("callback", cb).find(".modal-body").html(title).end().modal("show");
//$("#smModal").modal("show");
}
function user_list_delete_data(checkVal) { var options = {
url: '/admin/user/delete?checkVal='+checkVal,
type: 'get',
dataType: 'text',
success: function (data) {
if(data>0) {
user_tab.draw(false);
alertMsg("<p>成功删除"+data+"条记录</p>","success");
} else {
alertMsg("<p>删除失败</p>","danger");
}
}
};
$.ajax(options);
}
function user_list_delete_one_data(id) {
var options = {
url: '/admin/user/deleteOne?id='+id,
type: 'get',
dataType: 'text',
success: function (data) {
user_tab.draw(false);
alertMsg("<p>删除成功</p>","success");
}
};
$.ajax(options);
}
//搜索
function user_list_query() {
user_list_setParm();
user_tab.settings()[0].ajax.data = user_list_param;
user_tab.ajax.reload();
}
//动态拼接参数
function user_list_setParm() {
var user_list_user_name = $("#user_list_user_name").val();
var user_list_true_name = $("#user_list_true_name").val();
user_list_param = {
"user_list_user_name" : user_list_user_name,
"user_list_true_name" : user_list_true_name
};
}
</script>
</body>
</html>
后台类：
控制层
package com.tswc.edu.controller;
/**
* @ProjectName: edu
* @Package: com.tswc.edu.controller
* @ClassName: UserContraller
* @Author: DengZeng
* @Description: ${description}
* @Date: 2018/12/15 15:37
* @Version: 1.0
*/ import com.tswc.edu.entity.TUser;
import com.tswc.edu.service.UserService;
import com.tswc.edu.utils.Page;
import com.tswc.edu.utils.PageBean;
import com.tswc.edu.utils.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody; /**
* 用户管理
*
* @author UserContraller
* @create 2018-12-15 15:37
**/
@RequestMapping(value = "/admin/user")
@Controller
class UserContraller {
@Autowired
private UserService userService; @RequestMapping(value = "/list")
public void list() {
} //用户列表
@ResponseBody
@RequestMapping(value = "/listPage", method = RequestMethod.POST)
public PageBean<TUser> listPage(@RequestParam(value = "start", defaultValue = "1") int start,
@RequestParam(value = "length", defaultValue = "10") int pageSize,
@RequestParam(value = "user_list_user_name") String userName,
@RequestParam(value = "user_list_true_name") String trueName,
@RequestParam(value = "order[0][column]", required = false) Integer orderIndex,
@RequestParam(value = "order[0][dir]", required = false) String orderDir) {
String[] cols = {"", "", "user_name", "password", "true_name", "create_time"};
Result<Page<TUser>> result = userService.listPage((start / pageSize) + 1, pageSize, userName, trueName, cols[orderIndex], orderDir);
if (result.isStatus()) {
return new PageBean<TUser>(result.getResultData());
}
return new PageBean<TUser>();
} //删除所选择的的数据
@ResponseBody
@RequestMapping(value = "/delete", method = RequestMethod.GET)
public int delete(@RequestParam(value = "checkVal") String[] ids) {
int result = 0;
result = userService.delete(ids);
return result;
} //删除一条数据
@ResponseBody
@RequestMapping(value = "/deleteOne", method = RequestMethod.GET)
public void deleteOne(@RequestParam(value = "id") String id) {
userService.deleteOne(id);
} }
服务层
package com.tswc.edu.service;
/**
* @ProjectName: edu
* @Package: com.tswc.edu.service
* @ClassName: UserService
* @Author: DengZeng
* @Description: ${description}
* @Date: 2018/12/15 21:25
* @Version: 1.0
*/ import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.tswc.edu.entity.TUser;
import com.tswc.edu.mapper.UserMapper;
import com.tswc.edu.utils.ExampleUtils;
import com.tswc.edu.utils.Page;
import com.tswc.edu.utils.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import tk.mybatis.mapper.entity.Example;
import tk.mybatis.mapper.entity.Example.Criteria; import java.util.Arrays;
import java.util.List; /**
* 用户管理服务层
*
* @author UserService
* @create 2018-12-15 21:25
**/
@Service
public class UserService {
@Autowired
private UserMapper userMapper; public Result<Page<TUser>> listPage(int pageCurrent, int pageSize, String userName, String trueName, String cols, String orderDir) {
Example example = new Example(TUser.class);
Criteria criteria = example.createCriteria();
ExampleUtils.getLikeExample(criteria, "userName", userName);
ExampleUtils.getLikeExample(criteria, "trueName", trueName);
example.setOrderByClause(cols + " " + orderDir);
//example.orderBy(cols+" "+orderDir);
Result<Page<TUser>> result = new Result<Page<TUser>>();
PageHelper.startPage(pageCurrent, pageSize);
List<TUser> tUsers = userMapper.selectByExample(example);
PageInfo<TUser> pageInfo = new PageInfo<TUser>(tUsers, pageSize);
Page<TUser> resultData = new Page<TUser>((int) pageInfo.getTotal(), pageInfo.getPages(), pageCurrent, pageSize, tUsers);
result.setResultData(resultData);
result.setErrCode(0);
result.setStatus(true);
return result;
} public int delete(String[] ids) {
List<String> idList = Arrays.asList(ids);
Example example = new Example(TUser.class);
Criteria criteria = example.createCriteria();
criteria.andIn("id", idList);
return userMapper.deleteByExample(example);
} public void deleteOne(String id) {
userMapper.deleteByPrimaryKey(id);
}
}
Mapper接口
package com.tswc.edu.mapper; import com.tswc.edu.entity.TUser;
import com.tswc.edu.utils.MyMapper; public interface UserMapper extends MyMapper<TUser> {
}
（7）.最终效果