Springboot+PageHelper实现分页(前后端简单展示)

Springboot+PageHelper实现分页(前后端简单展示)

• 创建表及赋值

  --创建表
  DROP TABLE IF EXISTS `page_learn`;
  CREATE TABLE `page_learn` (
    `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一标识',
    `t_name` varchar(255) NOT NULL COMMENT 't家族名字',
    `t_brithday` datetime DEFAULT NULL COMMENT '出生日期',
    `t_hobbies` varchar(255) DEFAULT NULL COMMENT '爱好',
    PRIMARY KEY (`id`)
  ) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;
  ​
  --插入数据
  INSERT INTO `page_learn` VALUES ('1', 'T一', '2022-04-28 14:53:57', '足球，篮球');
  INSERT INTO `page_learn` VALUES ('2', 'T二', '2020-08-19 14:54:38', '足球');
  INSERT INTO `page_learn` VALUES ('3', 'T三', '2022-04-05 14:57:00', '羽毛球');
  INSERT INTO `page_learn` VALUES ('4', 'T四', '2022-04-06 14:57:30', '乒乓球');
  INSERT INTO `page_learn` VALUES ('5', 'T五', '2022-04-12 14:58:16', '排球');
  INSERT INTO `page_learn` VALUES ('6', 'T六', '2022-04-05 14:58:40', '篮球，排球');
  INSERT INTO `page_learn` VALUES ('7', 'T七', '2022-04-13 14:59:12', '羽毛球，乒乓球');
  INSERT INTO `page_learn` VALUES ('8', 'T八', '2022-04-05 15:01:03', '足球，篮球');
  INSERT INTO `page_learn` VALUES ('9', 'T九', '2022-04-29 15:01:24', '篮球，排球');
  INSERT INTO `page_learn` VALUES ('10', 'T十', '2022-05-08 15:01:51', '排球');

• 创建springboot时，勾选好mybatis,mysql,theamleaf。

• pom.xml

   
              com.github.pagehelper
              pagehelper-spring-boot-starter
              1.2.8
          

• application.properties

  # 应用名称
  spring.application.name=my
  # 应用服务 WEB 访问端口
  server.port=8080
  #下面这些内容是为了让MyBatis映射
  #指定Mybatis的Mapper文件
  mybatis.mapper-locations=classpath:mappers/*xml
  #指定Mybatis的实体目录
  mybatis.type-aliases-package=com.my.pojo
  # 数据库驱动：
  spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
  # 数据源名称
  spring.datasource.name=defaultDataSource
  # 数据库连接地址
  spring.datasource.url=jdbc:mysql://localhost:3306/mybatis?serverTimezone=UTC&characterEncoding=UTF-8
  # 数据库用户名&密码：
  spring.datasource.username=root
  spring.datasource.password=123456
  # THYMELEAF (ThymeleafAutoConfiguration)
  # 开启模板缓存（默认值： true ）
  spring.thymeleaf.cache=false
  # 检查模板是否存在，然后再呈现
  spring.thymeleaf.check-template=true
  # 检查模板位置是否正确（默认值 :true ）
  spring.thymeleaf.check-template-location=true
  #Content-Type 的值（默认值： text/html ）
  spring.thymeleaf.content-type=text/html
  # 开启 MVC Thymeleaf 视图解析（默认值： true ）
  spring.thymeleaf.enabled=true
  # 模板编码
  spring.thymeleaf.encoding=UTF-8
  # 要被排除在解析之外的视图名称列表，⽤逗号分隔
  spring.thymeleaf.excluded-view-names=
  # 要运⽤于模板之上的模板模式。另⻅ StandardTemplate-ModeHandlers( 默认值： HTML5)
  spring.thymeleaf.mode=HTML5
  # 在构建 URL 时添加到视图名称前的前缀（默认值： classpath:/templates/ ）
  spring.thymeleaf.prefix=classpath:/templates/
  # 在构建 URL 时添加到视图名称后的后缀（默认值： .html ）
  spring.thymeleaf.suffix=.html
  ​
  pagehelper.helper-dialect=mysql
  pagehelper.reasonable=true
  pagehelper.support-methods-arguments=true

• 实体类

  package com.my.pojo;
  ​
  import java.util.Date;
  ​
  public class PageT {
      private Integer id;
      private String name;
      private Date brithday;
      private String hobbies;
  ​
      public PageT(){
  ​
      }
  ​
      public PageT(Integer id, String name, Date brithday, String hobbies) {
          this.id = id;
          this.name = name;
          this.brithday = brithday;
          this.hobbies = hobbies;
      }
  ​
      public Integer getId() {
          return id;
      }
  ​
      public void setId(Integer id) {
          this.id = id;
      }
  ​
      public String getName() {
          return name;
      }
  ​
      public void setName(String name) {
          this.name = name;
      }
  ​
      public Date getBrithday() {
          return brithday;
      }
  ​
      public void setBrithday(Date brithday) {
          this.brithday = brithday;
      }
  ​
      public String getHobbies() {
          return hobbies;
      }
  ​
      public void setHobbies(String hobbies) {
          this.hobbies = hobbies;
      }
  ​
      @Override
      public String toString() {
          return "PageT{" +
                  "id=" + id +
                  ", name='" + name + '\'' +
                  ", brithday=" + brithday +
                  ", hobbies='" + hobbies + '\'' +
                  '}';
      }
  }

• mapper层

  //mappwer接口
  package com.my.mapper;
  import com.github.pagehelper.Page;
  import com.github.pagehelper.PageInfo;
  import com.my.pojo.PageT;
  import org.apache.ibatis.annotations.Mapper;
  ​
  import java.util.List;
  ​
  @Mapper
  public interface TMapper {
      List pages();
  }

  
  
  
  
      
          select id,t_name as name,t_brithday as brithday,t_hobbies as hobbies from page_learn
      
  

• 因为主要实现分页展示，没有写service层

• controller层

  package com.my.controller;
  ​
  import com.github.pagehelper.PageHelper;
  import com.github.pagehelper.PageInfo;
  import com.my.mapper.TMapper;
  import com.my.pojo.PageT;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.stereotype.Controller;
  import org.springframework.ui.Model;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RequestParam;
  ​
  import java.util.List;
  ​
  @Controller
  public class PageController {
  ​
      @Autowired
      private TMapper tMapper;
  ​
      @RequestMapping("/page")
      public String page1(Model model,@RequestParam(defaultValue = "1",value = "pageNum")int pageNum){
  ​
          PageHelper.startPage(pageNum,4);
          List list=tMapper.pages();
          PageInfo pages=new PageInfo<>(list);
          model.addAttribute("pageInfo",pages);
          return "formList";
      }
  }

• formList.html

  
  
  
      
      
      
      
      
      
      
  
  
  
      
          
          
              
              
              
              
          
          
          
          
              
              
              
              
          
          
      
  id
  name
  brithday
  hobbies
  [[${page.id}]]
  [[${page.name}]]
  [[${#dates.format(page.brithday,'yyyy-MM-dd')}]]
  [[${page.hobbies}]]
  
  
      
          
              数据共[[${pageInfo.getTotal()}]]条   当前第[[${pageInfo.getPageNum()}]]页/共[[${pageInfo.getPages()}]]页
          
          
              
  
              
  
                  
  首页
                  
  上一页
                  
  下一页
                  
  尾页
              
          
          
      
  
  
  

  • 效果

  • 

     

  • 自己的坑

    1. 最开始是将PageInfo对象一步一步拆分，传数据给页面的。改了之后直接传pageInfo对象。

    2. 使用PageInfo应看一看源码。了解pageInfo其中的方法。

    3. page与PageInfo的关系。(我看过了，想看的自己查。)

  • 总结pageHelper方法

        @Test
        public void pageInfo() {
            PageHelper.startPage(1, 4);
            List list = tMapper.pages();
            PageInfo pageInfo=new PageInfo<>(list);
    //        PageInfo.getList()
            for (PageT t:pageInfo.getList()) {
                System.out.println(t);
            }
    //        总数据条数
            long totalNum=pageInfo.getTotal();
    //        总页面数
            int totalPages=pageInfo.getPages();
    //        当前页面
            int currentPage=pageInfo.getPageNum();
    //        是否有下一页
            boolean nextPage=pageInfo.isHasNextPage();
    //        是否有上一页
            boolean prePage=pageInfo.isHasPreviousPage();
    //        是否首页
            boolean firstPage=pageInfo.isIsFirstPage();
    //        是否尾页
            boolean lastPage=pageInfo.isIsLastPage();
    
            System.out.println("总数据条数"+totalNum);
            System.out.println("总页面数"+totalPages);
            System.out.println("是否有下一页"+nextPage);
            System.out.println("是否有上一页"+prePage);
            System.out.println("是否首页"+firstPage);
            System.out.println("是否尾页"+lastPage);
    
        }
    
    /**
    *
        PageT{id=1, name='T一', brithday=Thu Apr 28 22:53:57 CST 2022, hobbies='足球，篮球'}
        PageT{id=2, name='T二', brithday=Wed Aug 19 22:54:38 CST 2020, hobbies='足球'}
        PageT{id=3, name='T三', brithday=Tue Apr 05 22:57:00 CST 2022, hobbies='羽毛球'}
        PageT{id=4, name='T四', brithday=Wed Apr 06 22:57:30 CST 2022, hobbies='乒乓球'}
        总数据条数10
        总页面数3
        是否有下一页true
        是否有上一页false
        是否首页true
        是否尾页false
    */