【SSM整合篇】五. SSM整合+layui分页 基于【SSM整合篇】四

github源码(day57-cascade) https://github.com/1196557363/ideaMavenProject

项目准备

1. 本项目基于 【SSM整合篇】四
   SSM整合篇】四. SSM整合 级联查询 基于【SSM整合篇】三 https://blog.csdn.net/TheNew_One/article/details/103904387
   
2. 下载layui包 https://www.layui.com/
3. 参考demo https://www.layui.com/demo
4. 原项目不变

1. 分页

1.1 定义Page分页对象

package com.wpj.bean;import java.util.*;/*** ClassName: Page* Description:** @author JieKaMi* @version 1.0* @date: 2020\1\9 0009 19:14* @since JDK 1.8*/
public class Page<T> {private Integer pageSize = 3;   //每页显示private Integer currentPage = 1;    // 当前页private Integer totalCount;     // 总数private Integer totalPage;      // 总页数private List<T> list;       // 存放查出来的数据public Page() { }public Page(Integer pageSize, Integer currentPage, Integer totalCount, Integer totalPage, List<T> list) {this.pageSize = pageSize;this.currentPage = currentPage;this.totalCount = totalCount;this.totalPage = totalPage;this.list = list;}public Integer getPageSize() { return pageSize; }public void setPageSize(Integer pageSize) { this.pageSize = pageSize; }public Integer getCurrentPage() { return currentPage; }public void setCurrentPage(Integer currentPage) { this.currentPage = currentPage; }public Integer getTotalCount() { return totalCount; }public void setTotalCount(Integer totalCount) { this.totalCount = totalCount; }public Integer getTotalPage() { return totalPage; }public void setTotalPage(Integer totalPage) { this.totalPage = totalPage; }public List<T> getList() { return list; }public void setList(List<T> list) { this.list = list; }@Overridepublic String toString() {return "Page{" +"pageSize=" + pageSize +", currentPage=" + currentPage +", totalCount=" + totalCount +", totalPage=" + totalPage +", list=" + list +'}';}
}

1.2 写dao，mapper，service及其impl

1.2.1 service (没错这次先写service和impl)

package com.wpj.service;import com.wpj.bean.*;
import org.apache.ibatis.annotations.*;import java.util.*;/*** ClassName: IEmpService* Description:** @author JieKaMi* @version 1.0* @date: 2020\1\8 0008 19:47* @since JDK 1.8*/
public interface IEmpService {.../*** 分页显示Emp* @return*/void getPageEmp(Page<Emp> page);
}

12.2 serviceImpl

package com.wpj.service.impl;import com.wpj.bean.*;
import com.wpj.dao.*;
import com.wpj.service.*;
import org.springframework.beans.factory.annotation.*;
import org.springframework.stereotype.*;import java.util.*;/*** ClassName: EmpServiceImpl* Description:** @author JieKaMi* @version 1.0* @date: 2020\1\8 0008 20:03* @since JDK 1.8*/
@Service
public class EmpServiceImpl implements IEmpService {@Autowiredprivate IEmpDao iEmpDao;...public void getPageEmp(Page<Emp> page) {Integer pageSize = page.getPageSize();Integer currentPage = page.getCurrentPage();Integer totalCount = iEmpDao.getEmpCount();Integer totalPage = 0;if(totalCount % pageSize == 0) {totalPage = totalCount / pageSize;} else {totalPage = totalCount / pageSize + 1;}page.setTotalCount(totalCount);page.setTotalPage(totalPage);Integer index = (currentPage - 1) * pageSize;page.setList(iEmpDao.getPageEmp(index, pageSize));}
}

1.2.3 根据serviceImpl定义的方法开始生成方法

package com.wpj.dao;import com.wpj.bean.*;
import org.apache.ibatis.annotations.*;import java.util.*;/*** ClassName: IEmpDao* Description:** @author JieKaMi* @version 1.0* @date: 2020\1\8 0008 19:11* @since JDK 1.8*/
public interface IEmpDao {.../*** 分页显示Emp* @return*/List<Emp> getPageEmp(@Param("index") Integer index, @Param("pageSize") Integer pageSize);/*** 查询Emp总数* @return*/Integer getEmpCount();
}

1.2.4 dao对应xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.wpj.dao.IEmpDao"><resultMap id="empMap" type="emp"><id property="empId" column="emp_id"/><result property="empName" column="emp_name" /><result property="job" column="job" /><result property="superId" column="super_id" /><result property="deptNo" column="dept_no" /><association property="superEmp" javaType="emp"><result property="empName" column="superName" /></association><association property="dept" javaType="dept"><result property="deptName" column="deptName" /></association></resultMap>...<select id="getEmpCount" resultType="java.lang.Integer">select count(1) from emp</select><select id="getPageEmp" resultMap="empMap">SELECTe1.*, e2.emp_name AS superName,d.dept_name AS deptNameFROMemp e1LEFT JOIN emp e2 ON (e1.super_id = e2.emp_id)LEFT JOIN dept d ON (e1.dept_no = d.dept_id)LIMIT #{index} ,#{pageSize}</select>
</mapper>

1.3 TestPage

不着急写controller

package com.wpj.service.impl;import com.wpj.bean.*;
import com.wpj.service.*;
import org.junit.*;
import org.junit.runner.*;
import org.springframework.beans.factory.annotation.*;
import org.springframework.test.context.*;
import org.springframework.test.context.junit4.*;/*** ClassName: TestPage* Description:** @author JieKaMi* @version 1.0* @date: 2020\1\9 0009 19:31* @since JDK 1.8*/
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(value="classpath:spring-context.xml")
public class TestPage {@Autowiredprivate IEmpService iEmpService;@Testpublic void testGetEmpPage(){Page<Emp> page = new Page<Emp>();iEmpService.getPageEmp(page);System.out.println(page);}
}

1.3.1 结果

1.3 写controller

package com.wpj.web.controller;import com.wpj.bean.*;
import com.wpj.service.*;
import org.springframework.beans.factory.annotation.*;
import org.springframework.stereotype.*;
import org.springframework.ui.*;
import org.springframework.validation.annotation.*;
import org.springframework.web.bind.annotation.*;import java.util.*;/*** ClassName: Controller* Description:** @author JieKaMi* @version 1.0* @date: 2020\1\8 0008 21:55* @since JDK 1.8*/
@Controller
@RequestMapping("/emp")
public class EmpController {@Autowiredprivate IEmpService iEmpService;...@RequestMapping("/getEmpPage")public String getEmpPage(ModelMap map,Page<Emp> page){iEmpService.getPageEmp(page);map.put("page",page);return "empPage";}
}

1.4 新建empPage.html和分页模板Page.html

1.4.1 Page.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title><base th:href="${#request.getContextPath()+'/'}">
</head>
<body>
<!-- 初始化分页导航条 -->
<div th:fragment="pageDivShow"><!-- 这个div用来显示分页导航条的--><div id="pageDiv"></div><!-- 添加样式和js的文件--><link rel="stylesheet" href="layui/css/layui.css" media="all"><script src="layui/layui.js"></script><script th:inline="javascript">var count = [[${page.totalCount}]];var currentPage = [[${page.currentPage}]];var limit = [[${page.pageSize}]];</script><script>// 初始化分页导航条layui.use('laypage', function(){// laypage代表的前端分页对象var laypage = layui.laypage;//执行一个laypage实例laypage.render({elem: 'pageDiv' // 存放分页导航条的容器id,count: count // 条数,layout: [ 'prev', 'page', 'next', 'limit','count'] // 局部,limit: limit  // 每页显示的条数,curr:currentPage // 当前页,limits:[3,9,12,15],jump: function(obj, first){console.info(obj); // obj就点分页对象//首次不执行if(!first){//do something// 查询下一页的数据location.href ="emp/getEmpPage?currentPage="+obj.curr+"&pageSize="+obj.limit;}}});});</script>
</div>
</body>
</html>

1.4.2 empPage.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title><base th:href="${#request.getContextPath()+'/'}">
</head>
<table class="layui-table"><tr><td>id</td><td>name</td><td>job</td><td>superId</td><td>superName</td><td>deptNo</td><td>deptName</td><td>operation</td></tr><tr th:each="emp:${page.list}"><td th:text="${emp.empId}" /><td th:text="${emp.empName}" /><td th:text="${emp.job}" /><td th:text="${emp.superId}" /><!-- 如果该员工就是最上级 即没有领导就进行判断 --><td th:text="${emp.superEmp !=null?emp.superEmp.empName:''}" /><td th:text="${emp.deptNo}" /><td th:text="${emp.dept.deptName}" /><td><a href="#">编辑</a><a href="#">删除</a></td></tr>
</table>
<div th:include="page::pageDivShow"></div>
</body>
</html>

1.5 访问

http://localhost:8080/emp/getEmpPage

1.6 结果

有点基础才能看懂的代码。。。。

建议从【SSM整合篇】三 开始看。