详细笔记的第一遍：学习ssm的整合-CRUD的第3天（2021-11-23）2

现在这些数据已经显示出来了，但是下面的分页信息还没有做。
下面开始做这部分的功能：

现在的分页信息显示：

            

                当前记录数：xxx
            
            

                
            
        

数据都是写死的。

1、先修改这部分：


现在：

 

                当前第${pageInfo.pageNum}页，总共${pageInfo.pages}页，总共${pageInfo.total}条记录
            

接下来修改：

现在点他们没有任何反应，都是死的。
写死的代码：

先修改这个：

 
1
2
3
4
5

现在的代码：

                            
${pageNum}
 

在浏览器里面输入：

http://localhost:8080/ssm_crud/emps?pn=5

就变成动态的显示了。而不是永远是12345

改进的地方：
我们发送的请求是找第五页，但是这边的图标5没有高亮显示：

我们希望5可以显示高亮：
使用li标签的禁用或激活状态。
包括如果当前是第1页，就没有上一页的按钮。
如果当前是最后一页，就没有下一页的按钮。
点击首页，进入第一页。
点击末页，进入最后一页。

            

                当前第${pageInfo.pageNum}页，总共${pageInfo.pages}页，总共${pageInfo.total}条记录
            
            

                
            
        

这里主要就是用到了PageInfo对象。
逻辑不复杂，就是有些繁琐。
1、不管什么情况，都会显示首页。
点击首页，都是进入第一页
2、如果当前就是第1页，也就是没有上一页，那么上一页的按钮就会藏起来。


3、当前页面的时候，页码会显示高亮。

4、如果当前是最后一页，下一页的按钮会隐藏


5、点击末页，直接会进入到最后一页。

我们之前写的list.jsp里面的路径是写死了。
在一些超链接的那里

首页

我们使用的都是相对路径（因为这里没有/），但是相对路径在找资源的时候经常容易出错。
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

我们现在的客户端时浏览器，所以我们服务器得到请求的时候，处理之后，响应结果是一个页面给浏览器。
但是客户端不一定是浏览器，还有可能是安卓或者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】

https://blog.csdn.net/qq_41709577/article/details/121437719

4、将java对象直接作为控制器方法的返回值，那么就会自动将javabean对象转换为json格式的字符串。（注意：这里不是直接转换成json对象而是json格式的字符串）

【继续正题：】
1、在pom文件里面引入jackson包

            com.fasterxml.jackson.core
            jackson-databind
            2.8.8
        

当前所有的pom文件依赖：

    4.0.0

    com.rtl
    ssm-crud
    1.0-SNAPSHOT
    war

    
        8
        8
    
    
        
            org.springframework
            spring-webmvc
            4.3.7.RELEASE
        
        
            com.fasterxml.jackson.core
            jackson-databind
            2.8.8
        
        
            org.springframework
            spring-jdbc
            4.3.7.RELEASE
        
        
            org.springframework
            spring-aspects
            4.3.7.RELEASE
        

        
            org.mybatis
            mybatis
            3.4.2
        

        
            org.mybatis
            mybatis-spring
            1.3.1
        
        
            org.mybatis.generator
            mybatis-generator-core
            1.3.7
        

        
            c3p0
            c3p0
            0.9.1.2
        

        
            mysql
            mysql-connector-java
            8.0.27
        
        
            jstl
            jstl
            1.2
        

        
            javax.servlet
            javax.servlet-api
            3.1.0
        

        
            junit
            junit
            4.12
        


        
            org.springframework
            spring-test
            4.3.7.RELEASE
        

        
            com.github.pagehelper
            pagehelper
            5.0.0
        

    

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 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 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 getExtend() {
        return extend;
    }

    public void setExtend(Map extend) {
        this.extend = extend;
    }
}

2、变化控制器方法：

 @RequestMapping(value = "/emps")
    @ResponseBody
    public Msg getEmpsWithMsgToJson(@RequestParam(value = "pn",defaultValue = "1")Integer pn){
        //设置显示的起始页和每页显示的数据条数
        PageHelper.startPage(pn,5);
        //紧跟着的就是分页查询
        List 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