1.分页功能实现

目的：当我们在登录完成之后，第一步应该先看到公司的员工以及一些必要信息，而员工如果太多，我们就不能将所有的数据都展现出来， 因此我们可以使用数据分页来操作数据库中的员工数据。
实现：
controller层：
我们在控制层指定一个查询方法，来实现分页功能

  1.     @RequestMapping("/getEmps")
  2.     public String getEmps(@RequestParam(value ="pn",defaultValue = "1")Integer pn, Model model){
  4.         // 1.引入分页插件
  5.         // 2.在查询前调用,传入页码。以及每页的大小
  6.         PageHelper.startPage(pn,5);
  7.         List<Employee> aLlEmps = empService.getALlEmps();
  8.         // 3.使用pageInfo来包装这个查询后的信息，这个pageinfo中可以获取很多分页的信息
  9.         // 第二个参数代表查出几页
  10.         PageInfo pageInfo = new PageInfo(aLlEmps,5);
  11.         System.out.println("----------------");
  12.         System.out.println(pageInfo.getPageNum());
  13.         model.addAttribute("pageinfo",pageInfo);
  14.         // 获取总页数
  15.         pageInfo.getPageSize();
  16.         pageInfo.getStartRow();
  17.         // 获取当前页
  18.         pageInfo.getPageNum();
  19.         return "list";
  21.     }

视图层：
我们需要使用jstl表达式来对控制层返回的数据进行遍历。
1.加入jstl标签库

  1. <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>

2.遍历数据image.png
3.显示分页信息

  1.  <%--显示分页信息--%>
  2.     <div class="row">
  4.         <nav aria-label="Page navigation example" style="margin: auto">
  5.             <ul class="pagination">
  8.                 <li class="page-item">
  9.                     <a class="page-link" href="${pageContext.request.contextPath}/emp/getEmps?pn=1" aria-label="Previous">
  10.                         <c:if test="${pageInfo.pageNum!=1}">
  11.                             <span aria-hidden="true">首页</span>
  12.                         </c:if>
  14.                     </a>
  15.                 </li>
  17.                 <c:forEach items="${pageinfo.navigatepageNums}" var="pageNums">
  18.                     <c:if test="${pageInfo.pageNum==pageNums}">
  19.                         <li class="page-item active"><a class="page-link" href="#">${pageNums}</a></li>
  20.                     </c:if>
  21.                     <c:if test="${pageInfo.pageNum!=pageNums}">
  22.                         <li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/emp/getEmps?pn=${pageNums}">${pageNums}</a></li>
  23.                     </c:if>
  25.                 </c:forEach>
  26.                 <li class="page-item">
  27.                     <a class="page-link" href="${pageContext.request.contextPath}/emp/getEmps?pn=${pageinfo.pages}" >
  28.                         <c:if test="${pageInfo.pageNum!=pageinfo.pages}">
  29.                             <span aria-hidden="true">尾页</span>
  30.                         </c:if>
  32.                     </a>
  33.                 </li>
  35.             </ul>
  36.         </nav>
  37.     </div>
  38. </div>
  1. 效果：<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/22082810/1629692385902-53fa8c45-0d85-44d9-83c2-2785dc33ef7c.png#clientId=ub9033413-ccca-4&from=paste&height=950&id=u2f53d656&margin=%5Bobject%20Object%5D&name=image.png&originHeight=950&originWidth=1920&originalType=binary&ratio=1&size=95636&status=done&style=none&taskId=uf0aac092-7e59-404b-8cca-5a14df2959b&width=1920)<br />出现的问题：<br />无法出现当前页<br />解决方案：<br />将controller的pn参数传过去作为当前页，因为pn就是前台页面传来的当前页，因此也可以作为当前页传过去。<br />实现：
 model.addAttribute("pageNum",pn);

效果：<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/22082810/1629693047020-7e4904f2-486a-40cd-83f4-eccc3950f960.png#clientId=ub9033413-ccca-4&from=paste&height=594&id=ua4391969&margin=%5Bobject%20Object%5D&name=image.png&originHeight=594&originWidth=1920&originalType=binary&ratio=1&size=64344&status=done&style=none&taskId=u87c9331b-7009-4b08-81d0-c44cb8b3774&width=1920)

2.业务功能更改

因为我们使用普通形式的前台发起数据，后台接收返回数据到页面，这种不利于程序扩展，我们如果想在安卓，ios客户端也可以浏览网页，因此我们采用ajax来完成数据的传输，因为这样无论是pc还是手机端都可以快速解析json，因此使用ajax更利于程序实现平台无关

1、实现查询功能

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