Spring boot整合pagehelper（全网最全，最容易理解，有前端页面）

最新推荐文章于 2024-02-21 13:15:00 发布

微雨曳荷

最新推荐文章于 2024-02-21 13:15:00 发布

阅读量1.4k

点赞数

分类专栏：后端开发

本文链接：https://blog.csdn.net/weixin_44226805/article/details/105841935

版权

后端开发专栏收录该内容

6 篇文章 1 订阅

订阅专栏

前言：近日，偶然灵感突发，想写一个论坛项目，之但是在整合后端时，为了写好分页却翻了一天的车，不掌握不理解是真的烦麻烦！之前也学过分页，但是那都是别人写好的，直接复制；虽有人家写好的论坛项目源码，但是分页却是自己写的，看着觉得别扭，我突然想用pagehelper能不能也实现这样的功能呢？于是在自己一番大量翻车的摸索下，终于成功了！

话不多说，spring boot项目（jar包项目）首先要引入相应的dependency：

   <!-- 分页插件依赖 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>4.1.0</version>
        </dependency>

之后就要配置pagehelper了，网上大概有两种做法：
一种时在application.ym 文件中中配置，一种是用配置类的方法（@Configuration），为了方便用这里我采用第二种方式，上代码：

@Configuration
public class MybatisConfig {
    @Bean
    public PageHelper pageHelper(){
        PageHelper pageHelper = new PageHelper();
        Properties p = new Properties();
        p.setProperty("offsetAsPageNum","true");
        p.setProperty("rowBoundsWithCount","true");
        p.setProperty("reasonable","true");
        pageHelper.setProperties(p);
        return pageHelper;
    }

重点来了，底层整合mybatis，在这里就不较多赘述，所以在这里我只在controller层对pagehelper进行应用，并没有对其进行加工或者改写或者以新的方式添加一些元素，原装的pagehelper
controller层：

@Autowired
    private DiscussPostService discussPostService;

    @Autowired
    private UserService userService;

    @GetMapping("page")
    public String getIndexPage(Model model, @RequestParam(value = "page",defaultValue = "1")int page,
                               @RequestParam(value = "size",defaultValue = "4")int size){
        PageHelper.startPage(page,size);
        根据用户userId查询用户所发的帖子，以userId=101举例
        List<DiscussPost> list=discussPostService.selectDiscussPosts(101);
        User user=userService.selectById(101);
        PageInfo<DiscussPost> pageInfo=new PageInfo<>(list);
       //以下是对json格式测试时写的,用postman测试请求
//        Map<String,Object> data=new HashMap<>();
//        data.put("total_size",pageInfo.getTotal());//总条数
//        data.put("total_page",pageInfo.getPages());//总页数
//        data.put("current_page",page);//当前页
//        data.put("data",pageInfo.getList());
//        data.put("user",user);

    
        model.addAttribute("pageInfo",pageInfo);
        model.addAttribute("user",user);
        return "index";

    }

这里前后端一般是通过ajax进行交互，但是我完全不太明白，只知道thymleaf模板引擎好用就行，(*^ ▽ ^ *)

不过这里倒是有些需要注意，一定要向前端传递数据， model.addAttribute,其次前端要注意取值，同时网页头部还要引入thymeleaf模板，并改写对应的引用，与超链接

<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

重头戏来了，获取后端传来的数据：
一、这里以逐条显示为例：

<!-- 帖子列表 -->
				<ul class="list-unstyled">
					<li class="media pb-3 pt-3 mb-3 border-bottom" th:each="map:${pageInfo.list}" >
						<a href="site/profile.html">
							<img th:src="${user.headerUrl}" class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;">
						</a>
						<div class="media-body">
							<h6 class="mt-0 mb-3">
								<a href="#" th:utext="${map.title}" >备战春招，面试刷题跟他复习，一个月全搞定！</a>
								<span class="badge badge-secondary bg-primary" th:if="${ map.type==1}">置顶</span>
								<span class="badge badge-secondary bg-danger" th:if="${map.status==1}">精华</span>
							</h6>
							<div class="text-muted font-size-12">
<!--								thmeleaf利用内置的#dates-->
								<u class="mr-3" th:utext="${user.username}">寒江雪</u> 发布于 <b th:text="${
								#dates.format(map.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</b>
								<ul class="d-inline float-right">
									<li class="d-inline ml-2">赞 11</li>
									<li class="d-inline ml-2">|</li>
									<li class="d-inline ml-2">回帖 7</li>
								</ul>
							</div>
						</div>						
					</li>

这里通过pageInfo.list获取里面封装的数据，通过thymeleaf加载还是蛮方便的，对应的日期格式还可以转换成对应的格式

效果：
在这里插入图片描述
那么底下的分页怎么搞呢？这里我参考了pageInfo的源码

public class PageInfo<T> implements Serializable {
    private static final long serialVersionUID = 1L;
    //当前页
    private int pageNum;
    //每页的数量
    private int pageSize;
    //当前页的数量
    private int size;
    //排序
    private String orderBy;

    //由于startRow和endRow不常用，这里说个具体的用法
    //可以在页面中"显示startRow到endRow 共size条数据"

    //当前页面第一个元素在数据库中的行号
    private int startRow;
    //当前页面最后一个元素在数据库中的行号
    private int endRow;
    //总记录数
    private long total;
    //总页数
    private int pages;
    //结果集
    private List<T> list;

    //第一页
    private int firstPage;
    //前一页
    private int prePage;
    //下一页
    private int nextPage;
    //最后一页
    private int lastPage;

    //是否为第一页
    private boolean isFirstPage = false;
    //是否为最后一页
    private boolean isLastPage = false;
    //是否有前一页
    private boolean hasPreviousPage = false;
    //是否有下一页
    private boolean hasNextPage = false;
    //导航页码数
    private int navigatePages;
    //所有导航页号
    private int[] navigatepageNums;

所以只要在前端通过传来的值编写分页的逻辑即可，
但是注意：这里所获取的仅仅也只是数字，比如拿

${pageInfo.prePage}
这个获取的也只不过是对应的数字，而每个页面都对应着超链接，还得以请求的方式发回去，怎么办呢？

通过thyme leaf的th:href解决呀

th:href="@{/home/page(page=${pageInfo.prePage})}

具体代码：

<nav class="mt-5" th:if="${pageInfo.total>0}">
					<p>当前 <span th:text="${pageInfo.pageNum}"></span> 页,总 <span th:text="${pageInfo.pages}"></span> 页,共 <span th:text="${pageInfo.total}"></span> 条记录</p>
					<ul class="pagination justify-content-center">
						<li class="page-item">
							<a class="page-link" th:href="@{/home/page(page=${pageInfo.FirstPage})}">首页</a>
						</li>
						<li th:class="|page-item ${pageInfo.pageNum==pageInfo.FirstPage ? 'disabled':''}|" >
							<a class="page-link" th:href="@{/home/page(page=${pageInfo.prePage})}" >上一页</a>
						</li>
						<li th:class="|page-item ${i==pageInfo.pageNum? 'active': ''}| " th:each="i:${#numbers.sequence(pageInfo.FirstPage,
						pageInfo.LastPage)}">
							<a class="page-link" th:href="@{/home/page(page=${i})}" th:text="${i}">1</a>
						</li>

						<li th:class="|page-item ${pageInfo.pageNum==pageInfo.lastPage ? 'disabled':''}|">
							<a class="page-link" th:href="@{/home/page(page=${pageInfo.nextPage})}">下一页</a>
						</li>
						<li class="page-item">
							<a class="page-link" th:href="@{/home/page(page=${pageInfo.lastPage})}">末页</a>
						</li>
					</ul>
				</nav>

所以此时controller里面的page就相当重要喽！
再来一遍效果
在这里插入图片描述
对应的第二页的链接请求：

http://localhost:8081/home/page?page=2

不过不得不说着前端代码还是写的蛮漂亮的，能指明当前页，而且遇到首页与尾页，首页不能上一页，尾页不能下一页。

写作还尚有不足，项目正在开发，以后也会分享一些开发中遇到问题的解决思路哒！文章还有不足还望大佬不吝赐教，同时有更好能够优化前端代码逻辑，还希望能在评论区留言！

微雨曳荷

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Spring boot整合pagehelper（全网最全，最容易理解，有前端页面）

前言：近日，偶然灵感突发，想写一个论坛项目，之但是在整合后端时，为了写好分页却翻了一天的车，不掌握不理解是真的烦麻烦！之前也学过分页，但是那都是别人写好的，直接复制；虽有人家写好的论坛项目源码，但是分页却是自己写的，看着觉得别扭，我突然想用pagehelper能不能也实现这样的功能呢？于是在自己一番大量翻车的摸索下，终于成功了！话不多说，spring boot项目（jar包项目）首先要引入相...
复制链接

扫一扫