1.访问index.jsp 页面
    2、idnex.jsp 页面发送查询员工列表请求
    3、EmployeeController来接受请求，查出emp数据
    4、来到list.jsp页面来展示

    URI: /emps

    1.导入mybatis的pageHalper

    1.         <!--引入pageHelper分页插件 -->
    2.         <dependency>
    3.             <groupId>com.github.pagehelper</groupId>
    4.             <artifactId>pagehelper</artifactId>
    5.             <version>5.0.0</version>
    6.         </dependency>

    2.配置插件

    1.     <plugins>
    2.         <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
    3.     </plugins>

    3.进行分页查询

    1.     /**
    2.      * 查询 emps （分页查询）
    3.      * @return
    4.      */
    5.     @RequestMapping("/emps")
    6.     public String getEmps(@RequestParam(value = "pn",defaultValue = "1") Integer pn,
    7.                           Model model){
    9.         // 这不是一个分页查询
    10.         // 引入 PageHalper 分页插件
    11.         // 在查询之前调用,传入页码，每页的大小
    12.         PageHelper.startPage(pn,5);
    13.         // startPage 后面紧跟着查询就是一个分页查询
    14.         List<Employee> emps = employeeService.getAll();
    16.         // 使用 pageInfo 包装查询后的结果，只需要将 pageInfo 交给页面就行
    17.         // 封装了详细的分页信息，包括查询出来的数据 传入连续显示的页面
    18.         PageInfo page = new PageInfo(emps,5);
    19.         model.addAttribute("pageInfo",page);
    20.         return "list";
    21.     }

    4.spring的单元测试

    1. package com.atguigu.crud.test;
    3. /**
    4.  * 使用 Spring 的单元测试，测试crud请求的准确性
    5.  * spring4 测试需要servlet3.0
    6.  * @author 温笙
    7.  * @date 2021/8/31
    8.  */
    9. @RunWith(SpringJUnit4ClassRunner.class)
    10. @WebAppConfiguration
    11. @ContextConfiguration(locations = {"classpath:applicationContext.xml","file:src/main/webapp/WEB-INF/dispatcherServlet-servlet.xml"})
    12. public class MVCTest {
    14.     //传入springmvc的ioc
    15.     @Autowired
    16.     WebApplicationContext context;
    18.     //虚假的mvc请求，获取处理结果
    19.     MockMvc mockMvc;
    21.     @Before
    22.     public void initMockMvc(){
    23.         mockMvc  = MockMvcBuilders.webAppContextSetup(context).build();
    24.     }
    26.     @Test
    27.     public void testPage() throws Exception {
    28.         // 模拟请求拿到返回值
    29.         MvcResult result = mockMvc.perform(MockMvcRequestBuilders.get("/emps").param("pn", "5"))
    30.                 .andReturn();
    32.         //    请求成功会在请求域中会有pageInfo，可以验证
    33.         MockHttpServletRequest request = result.getRequest();
    34.         PageInfo pageInfo = (PageInfo) request.getAttribute("pageInfo");
    35.         System.out.println("当前页码："+pageInfo.getPageNum());
    36.         System.out.println("总页码："+pageInfo.getPages());
    37.         System.out.println("总记录数："+pageInfo.getTotal());
    38.         System.out.println("在页面需要连续现实的页码："+pageInfo.getNavigatepageNums());
    40.     //    获取emp数据
    41.         List<Employee> list = pageInfo.getList();
    42.         for (Employee emp : list) {
    43.             System.out.println("id:"+emp.getdId()+" "+emp.getEmpName());
    44.         }
    45.     }
    46. }
    1. <%@ page import="org.apache.taglibs.standard.lang.jstl.test.PageContextImpl" %>
    2. <%@ page import="org.springframework.context.ApplicationContext" %>
    3. <%@ page import="com.github.pagehelper.PageInfo" %>
    4. <%@ page import="com.atguigu.crud.bean.Employee" %>
    5. <%@ page import="java.util.List" %><%--
    6.   Created by IntelliJ IDEA.
    7.   User: 温笙
    8.   Date: 2021/8/30
    9.   Time: 18:31
    10.   To change this template use File | Settings | File Templates.
    11. --%>
    12. <%@ page language="java" contentType="text/html; charset=UTF-8"
    13.          pageEncoding="UTF-8"%>
    14. <%@ page isELIgnored="false" %>
    15. <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    16. <html>
    17. <head>
    18.     <title>employees</title>
    19.     <%
    20.         application.setAttribute("PATH",request.getContextPath());
    21.     %>
    23. <%--    web 路径
    24.             不以/ 开头的相对路径，找资源，以当前资源的路径为基准，经常容易出问题
    25.             以/ 开头的相对路径：找资源，以服务器的路径为标准；
    26.                     http://1.117.141.225:3306/ssm(需要加上项目名才能找到)
    28. --%>
    31.     <%--引入jq--%>
    32.     <script type="text/javascript" src="${PATH}/static/js/jquery-1.12.4.min.js"></script>
    34.     <%--引入样式--%>
    35.     <link href="${PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    36.     <script src="${PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>
    37. </head>
    38. <body>
    40. <%
    41.     PageInfo<Employee> pageInfo = (PageInfo<Employee>) request.getAttribute("pageInfo");
    42.     List<Employee> list = pageInfo.getList();
    43.     for (Employee emp : list) {
    44.         System.out.println(emp.getDepartment());
    45.     }
    46. %>
    52.     <%--搭建显示页面--%>
    53.     <div class="container">
    54.         <%--标题行--%>
    55.         <div class="row">
    56.             <div class="col-md-12">
    57.                 <h1>SSM-CRUD</h1>
    58.             </div>
    59.         </div>
    61.         <%--两个按钮--%>
    62.         <div class="row">
    63.             <div class="col-md-4 col-md-offset-8">
    64.                 <button class="btn btn-primary">新增</button>
    65.                 <button class="btn btn-danger">删除</button>
    66.             </div>
    67.         </div>
    69.         <%--显示表格数据--%>
    70.         <div class="row">
    71.             <div class="col-md-12">
    72.                 <table class="table table-hover">
    73.                     <tr>
    74.                         <th>#</th>
    75.                         <th>empName</th>
    76.                         <th>gender</th>
    77.                         <th>email</th>
    78.                         <th>deptName</th>
    79.                         <th>操作</th>
    80.                     </tr>
    81.                     <c:forEach items="${pageInfo.list}" var="emp">
    82.                         <tr>
    83.                             <th>${emp.empId}</th>
    84.                             <th>${emp.empName}</th>
    85.                             <th>${emp.gender=="M" ? "男":"女"}</th>
    86.                             <th>${emp.email}</th>
    87.                             <th>${emp.department.deptName}</th>
    88.                             <th>
    89.                                 <button class="btn btn-primary btn-sm">
    90.                                     <span class="glyphicon glyphicon-pencil"></span>编辑
    91.                                 </button>
    92.                                 <button class="btn btn-danger btn-sm">
    93.                                     <span class="glyphicon glyphicon-trash"></span>删除
    94.                                 </button>
    95.                             </th>
    96.                         </tr>
    97.                     </c:forEach>
    98.                 </table>
    99.             </div>
    100.         </div>
    102.         <%--显示分页信息--%>
    103.         <div class="row">
    104.             <%--分页文字--%>
    105.             <div class="col-md-6">
    106.               当前${pageInfo.pageNum}页,总${pageInfo.pages}页,总${pageInfo.total}记录
    107.             </div>
    108.             <%--分页条--%>
    109.             <div class="col-md-6">
    110.                 <nav aria-label="Page navigation">
    111.                     <ul class="pagination">
    112.                         <li><a href="${PATH}/emps?pn=1">首页</a></li>
    113.                         <c:if test="${pageInfo.hasPreviousPage}">
    114.                             <li>
    115.                                 <a  href="${PATH}/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
    116.                                         <span aria-hidden="true">&laquo;</span>
    117.                                 </a>
    118.                             </li>
    119.                         </c:if>
    120.                         <c:forEach items="${pageInfo.navigatepageNums}" var="page_Num">
    121.                             <c:if test="${page_Num == pageInfo.pageNum}">
    122.                                 <li class="active"><a href="#">${page_Num}</a></li>
    123.                             </c:if>
    124.                             <c:if test="${page_Num != pageInfo.pageNum}">
    125.                                 <li><a href="${PATH}/emps?pn=${page_Num}">${page_Num}</a></li>
    126.                             </c:if>
    127.                         </c:forEach>
    129.                         <c:if test="${pageInfo.hasNextPage}">
    130.                             <li>
    131.                                 <a  href="${PATH}/emps?pn=${pageInfo.pageNum+1}" aria-label="Previous">
    132.                                     <span aria-hidden="true">&raquo;</span>
    133.                                 </a>
    134.                             </li>
    135.                         </c:if>
    136.                         <li><a href="${PATH}/emps?pn=${pageInfo.pages}">末页</a></li>
    138.                     </ul>
    139.                 </nav>
    140.             </div>
    141.             <%----%>
    142.         </div>
    143.     </div>
    146. </body>
    147. </html>

    ajax查询
    1.index.jsp 直接发起ajax请求进行员工分页数据报告
    2.服务器将查出的数据，以json字符串返回浏览器
    3.浏览器收到js字符串，可以使用js对json进行解析，使用js通过dom增删改的形式改变页面
    4.返回json，实现客户端的无关性

    1.     /**
    2.      * 导入jack包
    3.      * @param pn
    4.      * @param model
    5.      * @return
    6.      */
    7.     @RequestMapping("/emps")
    8.     @ResponseBody
    9.     public Msg getEmpsByJson(@RequestParam(value = "pn",defaultValue = "1") Integer pn, Model model){
    11.         // 这不是一个分页查询
    12.         // 引入 PageHalper 分页插件
    13.         // 在查询之前调用,传入页码，每页的大小
    14.         PageHelper.startPage(pn,5);
    15.         // startPage 后面紧跟着查询就是一个分页查询
    16.         List<Employee> emps = employeeService.getAll();
    18.         // 使用 pageInfo 包装查询后的结果，只需要将 pageInfo 交给页面就行
    19.         // 封装了详细的分页信息，包括查询出来的数据 传入连续显示的页面
    20.         PageInfo page = new PageInfo(emps,5);
    21.         return Msg.success().add("pageInfo",page);
    22.     }
    1. package com.atguigu.crud.bean;
    3. /**
    4.  * @author 温笙
    5.  * @date 2021/8/31
    6.  */
    8. import com.fasterxml.jackson.databind.ObjectMapper;
    9. import com.github.pagehelper.PageInfo;
    11. import java.util.HashMap;
    12. import java.util.Map;
    14. /**
    15.  * 返回json的通用类
    16.  */
    17. public class Msg {
    19.     //状态码
    20.     private int code;
    21.     //提示信息
    22.     private String msg;
    24.     //用户返回的数据
    25.     private Map<String,Object> extend = new HashMap<String,Object>();
    27.     public static Msg success(){
    28.         Msg result = new Msg();
    29.         result.setCode(100);
    30.         result.setMsg("处理成功");
    31.         return result;
    32.     }
    34.     public static Msg fail(){
    35.         Msg result = new Msg();
    36.         result.setCode(200);
    37.         result.setMsg("处理失败");
    38.         return result;
    39.     }
    41.     public int getCode() {
    42.         return code;
    43.     }
    45.     public void setCode(int code) {
    46.         this.code = code;
    47.     }
    49.     public String getMsg() {
    50.         return msg;
    51.     }
    53.     public void setMsg(String msg) {
    54.         this.msg = msg;
    55.     }
    57.     public Map<String, Object> getExtend() {
    58.         return extend;
    59.     }
    61.     public void setExtend(Map<String, Object> extend) {
    62.         this.extend = extend;
    63.     }
    65.     public Msg add(String key, Object value) {
    66.         this.getExtend().put(key,value);
    67.         return this;
    68.     }
    69. }

    ajax实现查询数据

    1. <script type="text/javascript">
    2.     // 1.页面加载完成之后，直接发送ajax请求，获取分页数据
    3.     $(function () {
    4.         //去首页
    5.         toPage(1);
    6.     });
    8.     function toPage(pn) {
    9.         //    发送 ajax 请求
    10.         $.ajax({
    11.             url:"${PATH}/emps",
    12.             data:"pn="+pn,
    13.             type:"get",
    14.             success:function (result) {
    15.                 console.log(result);
    16.                 //    1.解析显示emp数据
    17.                 build_emps_table(result);
    18.                 //    2.解析显示分页信息
    19.                 build_page_info(result);
    20.                 //    3.解析显示分页条
    21.                 build_page_nav(result);
    22.             }
    23.         });
    24.     }
    29.     //    1.解析显示emp数据
    30.     function build_emps_table(result) {
    32.         /*清空table*/
    33.         $("#emps_table tbody").empty();
    35.         // 从 json 数据中获取 emps
    36.         var emps = result.extend.pageInfo.list;
    37.         $.each(emps,function (index,item) {
    38.             // alert(item.empName);
    39.             var empIdTd = $("<td></td>").append(item.empId);
    40.             var empNameTd = $("<td></td>").append(item.empName);
    41.             var gender = item.gender == "M" ? "男":"女";
    42.             var genderTd = $("<td></td>").append(gender);
    43.             var emailTd = $("<td></td>").append(item.email);
    44.             var deptNameTd = $("<td></td>").append(item.department.deptName);
    46.             var editBtn =
    47.                 $("<button></button>")
    48.                     .addClass("btn btn-primary btn-sm")
    49.                     .append($("<span></span>"))
    50.                         .addClass("glyphicon glyphicon-pencil")
    51.                         .append("编辑");
    52.             var delBtn =
    53.                 $("<button></button>")
    54.                     .addClass("btn btn-danger btn-sm")
    55.                     .append($("<span></span>"))
    56.                         .addClass("glyphicon glyphicon-trash")
    57.                         .append("删除");
    59.             var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
    61.             //append 方法执行完成以后 还会返回原来的元素
    62.             $("<tr></tr>")
    63.                 .append(empIdTd)
    64.                 .append(empNameTd)
    65.                 .append(genderTd)
    66.                 .append(emailTd)
    67.                 .append(deptNameTd)
    68.                 .append(btnTd)
    69.                 .appendTo("#emps_table tbody");
    70.         });
    72.     }
    74.     //    2.解析显示分页信息
    75.     function build_page_info(result) {
    77.         $("#page_info").empty();
    79.         $("#page_info").append(
    80.             "当前"+result.extend.pageInfo.pageNum+
    81.             "页,总"+result.extend.pageInfo.pages+
    82.             "页,总"+result.extend.pageInfo.total+"记录");
    83.     }
    85.     //    2.解析显示分页条,点击分页要能进去下一页
    86.     function build_page_nav(result) {
    88.         $("#page_nav").empty();
    90.         var ul = $("<ul></ul>").addClass("pagination");
    92.         /*构建元素*/
    93.         var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
    94.         var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
    95.         if(result.extend.pageInfo.hasPreviousPage == false){
    96.             firstPageLi.addClass("disabled");
    97.             prePageLi.addClass("disabled");
    98.         }else{
    99.             //为元素添加点击翻页的事件
    100.             firstPageLi.click(function(){
    101.                 toPage(1);
    102.             });
    103.             prePageLi.click(function(){
    104.                 toPage(result.extend.pageInfo.pageNum -1);
    105.             });
    106.         }
    110.         var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
    111.         var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
    112.         if(result.extend.pageInfo.hasNextPage == false){
    113.             nextPageLi.addClass("disabled");
    114.             lastPageLi.addClass("disabled");
    115.         }else{
    116.             /*为元素增加点击事件*/
    117.             nextPageLi.click(function () {
    118.                 toPage(result.extend.pageInfo.pageNum+1);
    119.             });
    120.             lastPageLi.click(function () {
    121.                 toPage(result.extend.pageInfo.pages);
    122.             });
    123.         }
    127.         /*添加首页和前一页*/
    128.         ul.append(firstPageLi).append(prePageLi);
    130.         /*遍历给ul添加页码提示*/
    131.         $.each(result.extend.pageInfo.navigatepageNums,function (index,item) {
    133.             var numLi = $("<li></li>").append($("<a></a>").append(item));
    135.             if(result.extend.pageInfo.pageNum == item){
    136.                 numLi.addClass("active");
    137.             }
    139.             numLi.click(function () {
    140.                 toPage(item)
    141.             });
    143.             ul.append(numLi);
    144.         });
    145.         ul.append(nextPageLi).append(lastPageLi);
    147.         /*把ul添加到nav*/
    148.         var nav = $("<nav></nav>").append(ul);
    149.         nav.appendTo("#page_nav");
    150.     }
    152. </script>