详细笔记的第一遍：学习ssm的整合-CRUD的第3天（2021-11-23）2
15、显示分页数据
现在这些数据已经显示出来了，但是下面的分页信息还没有做。
下面开始做这部分的功能：
现在的分页信息显示：
<div class="row">
<div class="col-md-6">
当前记录数：xxx
</div>
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="#">首页</a></li>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<li><a href="#">末页</a></li>
</ul>
</nav>
</div>
</div>
数据都是写死的。1、先修改这部分：
现在：
<div class="col-md-6">
当前第${pageInfo.pageNum}页，总共${pageInfo.pages}页，总共${pageInfo.total}条记录
</div>
接下来修改：
现在点他们没有任何反应，都是死的。
写死的代码：
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="#">首页</a></li>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<li><a href="#">末页</a></li>
</ul>
</nav>
</div>
先修改这个：
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
现在的代码：
<c:forEach items="${pageInfo.navigatepageNums}" var="pageNum">
<li><a href="#">${pageNum}</a></li>
</c:forEach>
在浏览器里面输入：
http://localhost:8080/ssm_crud/emps?pn=5
就变成动态的显示了。而不是永远是12345改进的地方：
我们发送的请求是找第五页，但是这边的图标5没有高亮显示：
我们希望5可以显示高亮：
使用li标签的禁用或激活状态。
包括如果当前是第1页，就没有上一页的按钮。
如果当前是最后一页，就没有下一页的按钮。
点击首页，进入第一页。
点击末页，进入最后一页。
<div class="row">
<div class="col-md-6">
当前第${pageInfo.pageNum}页，总共${pageInfo.pages}页，总共${pageInfo.total}条记录
</div>
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="emps?pn=1">首页</a></li>
<c:if test="${pageInfo.hasPreviousPage}">
<li>
<a href="emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</c:if>
<c:forEach items="${pageInfo.navigatepageNums}" var="page_Num">
<c:if test="${page_Num == pageInfo.pageNum}">
<li class="active"><a href="emps?pn=${page_Num}">${page_Num}</a></li>
</c:if>
<c:if test="${page_Num != pageInfo.pageNum}">
<li><a href="emps?pn=${page_Num}">${page_Num}</a></li>
</c:if>
</c:forEach>
<c:if test="${pageInfo.hasNextPage}">
<li>
<a href="emps?pn=${pageInfo.pageNum+1}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<li><a href="emps?pn=${pageInfo.pages}">末页</a></li>
</ul>
</nav>
</div>
</div>
这里主要就是用到了PageInfo对象。
逻辑不复杂，就是有些繁琐。
1、不管什么情况，都会显示首页。
点击首页，都是进入第一页
2、如果当前就是第1页，也就是没有上一页，那么上一页的按钮就会藏起来。
3、当前页面的时候，页码会显示高亮。
4、如果当前是最后一页，下一页的按钮会隐藏
5、点击末页，直接会进入到最后一页。
我们之前写的list.jsp里面的路径是写死了。
在一些超链接的那里
<a href="emps?pn=1">首页</a>
我们使用的都是相对路径（因为这里没有/），但是相对路径在找资源的时候经常容易出错。
emps?pn=1
所以，我们要使用绝对路径（以/开始），以服务器的路径为标准，
http://localhost:3306/ssm_crud。所以我们需要加上 /ssm_crud/emps?pn=1
来访问。
但是我们一般在jsp代码里面不能直接写死项目名。
使用命名方式：
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
以后使用${APP_PATH}来代替/ssm_crud
所以emps?pn=1也可以写成：
/ssm_crud/emps?pn=1
或者动态的：
${APP_PATH}/emps?pn=1
16、返回分页的json数据。
我们现在的客户端时浏览器，所以我们服务器得到请求的时候，处理之后，响应结果是一个页面给浏览器。
但是客户端不一定是浏览器，还有可能是安卓或者ios
所以，服务器需要响应json数据，而不是页面。
总结：服务器将这些有效的数据，以json的形式返回给客户端。
我们我们开始对之前写的查询接口进行改造。
使用纯Ajax来处理。
之前的写法：
1、首先访问首页index.jsp
2、在index.jsp页面中发出查询所有员工信息的请求
3、发出请求之后，其中控制器层比如：EmployeeCoontroller类里面的某个控制器方法接收处理该请求，查出所有的员工的数据
4、将查处的所有数据借助pagehelper插件在list.jsp页面进行展示。
现在的逻辑思路：
1、首先访问首页index.jsp
2、index.jsp直接发起ajax请求。进行员工分页数据查询
3、服务器将查出的数据，以json字符串的形式返回给浏览器。
4、浏览器收到json字符串，可以使用js对json进行解析。使用js通过dom增删改的形式来改变页面。
5、返回json，实现客户端的无关性。（随便使用客户端）
之前的代码：
1、首页index.jsp：
2、控制器：
3、承载数据的页面List.jsp
现在的做法：
1、控制器方法不在返回String 类型，而是直接返回PageInfo对象。
这里需要使用到SpringMVC的注解@ResponseBody，可以将返回的java对象转换成json对象，然后返回给客户端。
学习注解@ResponseBody的连接：
【补充学习注解：@ResponseBody】
4、将java对象直接作为控制器方法的返回值，那么就会自动将javabean对象转换为json格式的字符串。（注意：这里不是直接转换成json对象而是json格式的字符串）
【继续正题：】
1、在pom文件里面引入jackson包
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.8</version>
</dependency>
当前所有的pom文件依赖：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.rtl</groupId>
<artifactId>ssm-crud</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.7.RELEASE</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.8</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>4.3.7.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>4.3.7.RELEASE</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.4.2</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-core</artifactId>
<version>1.3.7</version>
</dependency>
<dependency>
<groupId>c3p0</groupId>
<artifactId>c3p0</artifactId>
<version>0.9.1.2</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.27</version>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>4.3.7.RELEASE</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.0.0</version>
</dependency>
</dependencies>
</project>
2、重新编写Controller，返回值是PageInfo对象，借助jackson技术，将PageInfo java对象转化为json字符串。
@RequestMapping(value = "/emps")
@ResponseBody
public PageInfo getEmpsWithJson(@RequestParam(value = "pn",defaultValue = "1")Integer pn){
//设置显示的起始页和每页显示的数据条数
PageHelper.startPage(pn,5);
//紧跟着的就是分页查询
List<Employee> emps = employeeService.getAll();
PageInfo pageInfo = new PageInfo(emps,5);
return pageInfo;
}
3、重新部署项目并测试：
在浏览器直接输入：
http://localhost:8080/ssm_crud/emps
【问题：】目前直接返回的PageInfo对象过于单一。
以后做增删查改的时候，如果出现错误，需要返回一些错误信息给浏览器。所以，我们需要自定义一个java bean对象来作为结果返回给浏览器。
做一个通用的返回的类Msg
加上3个方法：
public static Msg success(){
return new Msg(100,"处理成功！");
}
public static Msg fail(){
return new Msg(200,"处理失败！");
}
//第三个属性，通过这个方法进行赋值。一般是在控制器方法调用这个方法。
public Msg add(String key,Object value){
this.getExtend().put(key,value);
return this;
}全部的Msg的代码：
package com.rtl.crud.bean;
import java.util.HashMap;
import java.util.Map;
public class Msg {
//状态码：100代表成功，200代表失败
private int code;
//提示信息
private String msg;
//用户要返回给浏览器的数据
private Map<String,Object> extend = new HashMap<>();
public static Msg success(){
return new Msg(100,"处理成功！");
}
public static Msg fail(){
return new Msg(200,"处理失败！");
}
//第三个属性，通过这个方法进行赋值。一般是在控制器方法调用这个方法。
public Msg add(String key,Object value){
this.getExtend().put(key,value);
return this;
}
public Msg() {
}
public Msg(int code, String msg) {
this.code = code;
this.msg = msg;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Map<String, Object> getExtend() {
return extend;
}
public void setExtend(Map<String, Object> extend) {
this.extend = extend;
}
}
2、变化控制器方法：
@RequestMapping(value = "/emps")
@ResponseBody
public Msg getEmpsWithMsgToJson(@RequestParam(value = "pn",defaultValue = "1")Integer pn){
//设置显示的起始页和每页显示的数据条数
PageHelper.startPage(pn,5);
//紧跟着的就是分页查询
List<Employee> emps = employeeService.getAll();
PageInfo pageInfo = new PageInfo(emps,5);
Msg msg = Msg.success().add("pageInfo", pageInfo);
return msg;
}
3、重新部署+测试：
http://localhost:8080/ssm_crud/emps
