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

最新推荐文章于 2025-11-02 15:51:32 发布

原创最新推荐文章于 2025-11-02 15:51:32 发布 · 1.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #java #spring

本文详细介绍了如何在Springboot项目中集成PageHelper实现数据分页，包括创建表、数据插入、配置MyBatis和Spring Boot，以及在Controller、Mapper和视图页面的实现。通过实例展示了如何使用PageInfo对象进行分页展示和导航。

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


 <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.8</version>
        </dependency>

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<PageT> pages();
}

<!--mapper.xml-->
<?xml version="1.0" encoding="UTF8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.my.mapper.TMapper">
    <select id="pages" resultType="com.my.pojo.PageT">
        select id,t_name as name,t_brithday as brithday,t_hobbies as hobbies from page_learn
    </select>
</mapper>

因为主要实现分页展示，没有写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<PageT> list=tMapper.pages();
        PageInfo<PageT> pages=new PageInfo<>(list);
        model.addAttribute("pageInfo",pages);
        return "formList";
    }
}

formList.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数据页</title>
    <!-- CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery and JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<view th:class="container" style="padding:60px">
    <table class="table table-striped table-dark">
        <thead>
        <tr>
            <th scope="col">id</th>
            <th scope="col">name</th>
            <th scope="col">brithday</th>
            <th scope="col">hobbies</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="page:${pageInfo.getList()}">
            <th scope="row">[[${page.id}]]</th>
            <td>[[${page.name}]]</td>
            <td>[[${#dates.format(page.brithday,'yyyy-MM-dd')}]]</td>
            <td>[[${page.hobbies}]]</td>
        </tr>
        </tbody>
    </table>
</view>
<view class="container1">
    <view class="row">
        <view class="col" style="text-align:center">
            数据共[[${pageInfo.getTotal()}]]条 &nbsp;&nbsp;当前第[[${pageInfo.getPageNum()}]]页/共[[${pageInfo.getPages()}]]页
        </view>
        <view class="col">
            <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item"><a class="page-link" th:href="@{/page}">首页</a></li>
                <li class="page-item"><a class="page-link" th:href="@{/page(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a></li>
                <li class="page-item"><a class="page-link" th:href="@{/page(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a></li>
                <li class="page-item"><a class="page-link" th:href="@{/page(pageNum=${pageInfo.pages})}">尾页</a></li>
            </ul>
        </nav>
        </view>
    </view>
</view>
</body>
</html>

效果
自己的坑
1. 最开始是将PageInfo对象一步一步拆分，传数据给页面的。改了之后直接传pageInfo对象。
2. 使用PageInfo应看一看源码。了解pageInfo其中的方法。
3. page与PageInfo的关系。(我看过了，想看的自己查。)

总结pageHelper方法

    @Test
    public void pageInfo() {
        PageHelper.startPage(1, 4);
        List<PageT> list = tMapper.pages();
        PageInfo<PageT> 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
*/