目录
前言
一、MybatisPlus搭建及表介绍
1、MybatisPlus环境搭建
2、示例表结构介绍
二、Java后台分页实现
1、实体类实现
2、业务层分页实现
3、控制层实现
三、Thymeleaf分页集成
1、分页表格展示
2、分页条集成
3、成果展示
四、可能遇到的问题
1、分页不展示
2、问题解决
五、总结
前言
在当今的软件开发中，分页功能是提升用户体验和系统性能的关键。无论是企业级应用还是面向用户的平台，高效分页都能显著改善交互体验。今天将带你深入了解如何通过 MyBatisPlus 和 Thymeleaf 的深度整合，打造一个完整的全栈分页解决方案。分页功能不仅能够提升用户交互的流畅性，还能显著降低服务器的负载，提高系统的整体性能。将 MyBatisPlus 和 Thymeleaf 结合使用，可以实现后端数据分页查询与前端页面渲染的无缝对接。这种整合不仅能够提升开发效率，还能确保系统的稳定性和可维护性。
本文的目标是为开发者提供一个完整的全栈分页解决方案，从基础概念到具体实现，再到实际案例，帮助读者全面掌握这一技能。我们将首先介绍分页的基本概念，以及 MyBatisPlus 和 Thymeleaf 的核心功能，帮助读者理解它们如何为分页功能提供支持。接着，通过具体的代码示例，展示如何在 Spring Boot 项目中实现 MyBatisPlus 的分页查询，并通过 Thymeleaf 进行前端页面的渲染。最后，通过一个完整的项目案例，展示如何将所学知识应用到实际开发中，解决实际问题。本文适合 Java 开发者、前端开发者、全栈开发者以及对分页功能实现感兴趣的技术爱好者。无论你是初学者还是经验丰富的开发者，本文都将为你提供有价值的指导和参考。本文还提供了完整的代码示例和项目案例，读者可以通过访问本文的 GitHub 仓库下载相关代码，方便学习和实践。
分页功能是现代应用开发中不可或缺的一部分。通过 MyBatisPlus 和 Thymeleaf 的深度整合，我们可以实现一个高效、稳定的全栈分页解决方案。本文将为读者提供一个系统的学习路径，帮助读者掌握这一重要技能。无论你是初学者还是经验丰富的开发者，本文都将为你提供有价值的指导和参考。让我们一起踏上这段旅程，探索全栈分页解决方案的奥秘吧！
一、MybatisPlus搭建及表介绍
MyBatisPlus 是一款基于 MyBatis 的增强版 ORM 框架，它不仅继承了 MyBatis 的灵活性和易用性，还提供了诸如分页插件、代码生成器等强大的功能，极大地简化了开发流程。通过 MyBatisPlus 的分页插件，开发者可以轻松实现高效的分页查询，而无需手动编写复杂的 SQL 分页逻辑。本节将来简单介绍一下在SpringBoot中如何搭建MyBatisPlus的环境。
1、MybatisPlus环境搭建
这里以Maven为例，在Pom.xml文件通过增加以下依赖来引入MybatisPlus，这里我们需要集成PostgreSQL数据库，因此还需要同时引入对应的数据库驱动包，在JavaBean的生成过程中，为了简化Get和Set等方法，还需要引入Lombok组件，对应的资源引入xml文件如下：
com.baomidou mybatis-plus-boot-starter ${mybatis-plus.version}
org.projectlombok lombok provided
net.postgis postgis-jdbc 2.5.0
2、示例表结构介绍
这里使用城市停水信息数据为例，重点介绍如何进行数据的分页展示，在正式介绍分页实现之前，首先将基础的表结构和示例数据给大家做一个介绍。其表结构如下：
对应的实例数据如下：
二、Java后台分页实现
本节将使用Java开发语言，结合MybatisPlus框架详细介绍在后台如何实现前端的分页需求。包含三个方面的内容，第一个方面是介绍业务实体的实现，第二个方面是介绍业务层如何进行分页实现，第三方面是控制层的API如何跟前端交互。
1、实体类实现
实体的实现比较简单，这里直接给出具体的Java代码如下：
package org.yelang.pcwater.domain;
import java.io.Serializable;
import java.util.Date;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.google.gson.annotations.SerializedName;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.ToString;
/*** - 停水信息表，用于同步停水数据* @author 夜郎king**/
@TableName(value = "biz_stop_water_info")
@NoArgsConstructor
@AllArgsConstructor
@Setter
@Getter
@ToString
public class StopWaterInfo implements Serializable{private static final long serialVersionUID = -1582687729349525826L;@TableId(value="pk_id")private Long pkId;//@TableField(value = "affect_user")private String affectUser;//停水客户@TableField(value = "affected_range")private String affectedRange;//停水范围@TableField(value = "affect_region")private String affectRegion;//停水区域@TableField(value = "created_on")@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")private Date createdOn;//原创建时间@TableField(value = "inform_emergency_plan")private String informEmergencyPlan;//应急计划@TableField(value = "inform_id")private Integer informId;//信息标识@TableField(value = "inform_remark")private String informRemark;//备注信息@TableField(value = "main_lead_path")private String mainLeadPath;//停水主管径private String position;//停水地点private String reason;//停水原因@TableField(value = "service_phone")private String servicePhone;//服务热线@TableField(value = "show_end_date")@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")@SerializedName("showenddate")private Date showEndDate;//显示结束时间@TableField(value = "stop_end_time")@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")private Date stopEndTime;//停水结束时间@TableField(value = "stop_start_time")@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")private Date stopStartTime;//停水开始时间@TableField(value = "stop_time")@SerializedName("stoptime")private String stopTime;//停水时间@TableField(value = "stopwater_type")private String stopwaterType;//停水类型@TableField(value = "supply_emergency_plan")private String supplyEmergencyPlan;//应急供应计划@TableField(value = "supply_remark")private String supplyRemark;//供应备注private String title;//停水标题private String type;//类型@TableField(value = "regin_name")private String reginName;//区域名称@TableField(value = "sync_sno")private Long syncSno;//同步批次号
}2、业务层分页实现
在查询业务中，分页是一个重要的核心，这里我们将具体的实现逻辑都放到业务层来实现，在这里需要使用一个非常重要的对象Page分页对象，这是MybatisPlus的一个基础分页组件，这里也是使用这个对象来完成具体的业务。首先我们在业务接口中定义如下方法：
/**
* -根据区域查询分页停水信息列表
* @param pageNum
* @param pageSize
* @param regionName
* @return
*/
IPage page(Integer pageNum, Integer pageSize,String regionName); 然后来具体实现以上方法，代码如下：
/**
* - 比较原生的分页实现
*/
@Override
public IPage page(Integer pageNum, Integer pageSize, String regionName) {QueryWrapper queryWrapper = new QueryWrapper();queryWrapper.like("regin_name", regionName);queryWrapper.orderByDesc("created_on");Page page = new Page(pageNum, pageSize);return this.baseMapper.selectPage(page, queryWrapper);
} 这里我们通过构造Page对象，将控制层传入的当前页面和每页显示的数据量大小一起传入，然后构造分页信息，一起传给MybatisPlus来进行查询方法的实现。
3、控制层实现
控制层比较简单，接收前端提交的三个参数，当前页数，每页显示数据量，还有一个查询条件参数。然后调用业务层的分页方法，最后将结果回写给前端，核心代码如下：
/**
* - 获取分页数据
* @param pageNum
* @param pageSize
* @param regionName
* @return
*/
@PostMapping("/list")
@ResponseBody
public AjaxResult list(@RequestParam(defaultValue = "1") Integer pageNum,@RequestParam(defaultValue = "5") Integer pageSize,@RequestParam(defaultValue = "") String regionName) {IPage page = waterInfoService.page(pageNum, pageSize, regionName);AjaxResult result = AjaxResult.success();result.put("data", page);return result;
} 三、Thymeleaf分页集成
Thymeleaf 是一种现代的 Java 模板引擎，它能够很好地与 Spring Boot 集成，提供了一种优雅的方式来构建动态 HTML 页面。Thymeleaf 的优势在于它能够在开发阶段以静态 HTML 的形式展示页面，这使得前端开发变得更加直观和便捷。同时，Thymeleaf 提供了丰富的表达式和标签，能够方便地实现数据绑定和页面渲染。本节将具体介绍如何在Thymeleaf中集成后端的分页应用，并且实现分页条。主要分两部分介绍，第一部分是介绍如何进行表格展示实现，第二部分是介绍如何实现分页条。
1、分页表格展示
为了在表格中展示相关的数据，我们首先需要在Html中定义以下html结构，
创建时间 停水地点 原因 请点击查询按钮加载数据。
为了演示简单，这里使用ajax的方式从后天加载相应的数据，示例代码如下：
function renderTablePage(page) {currentPage = page;const tableBody = document.getElementById('table-body');tableBody.innerHTML = '';$.ajax({type:"post",url:ctx + "datasync/list",dataType:"json",cache:false,processData:true,data: {"pageNum":page,"pageSize":EVENTS_PER_PAGE,"regionName":""},success:function(result){const pageData = result.data.records;const totalPages = result.data.pages;if (pageData.length === 0) {tableBody.innerHTML = `未找到符合条件的停水事件。`;} else {pageData.forEach(event => {const row = tableBody.insertRow();row.innerHTML = `${event.createdOn}${event.position}${event.reason}`;});}renderPagination(totalPages);},error:function(){tableBody.innerHTML = `未找到符合条件的停水事件。`;}});}通过代码可以看到，在拿到后台的响应数据后，我们将循环数据来动态实现表格数据的拼接展示。同时将生成分页条。
2、分页条集成
分页条的展示也需要在网页中插入页面元素，在html页面中定义以下网页标签，如下：
在获取表格数据的同时，我们就可以来同步设置分页条的，分页条的这里不采用特别复杂的样式，仅展示上一页和下一页，对应的代码如下：
function renderPagination(totalPages) {const paginationContainer = document.getElementById('table-pagination');paginationContainer.innerHTML = '';if (totalPages <= 1) return;paginationContainer.innerHTML += `前一页 `;paginationContainer.innerHTML += `后一页 `;
}3、成果展示
最后来看一下最终的成果，如下图：
四、可能遇到的问题
本节将介绍一个在实现分页应用的过程中经常容易遇到的问题，也就是没有得到分页信息的问题。以及如何来解决。
1、分页不展示
在成果页面中可以看到，正常的页面是每页展示若干条，而且表格下方带了分页条的。如果你也能实现，说明配置没有问题。如果你的应用截图如下：
出现了数据全部加载的问题。那么可以看看本节的解决方案。
2、问题解决
如果你也遇到这种没有分页条的情况，大概率是遇到了没有正确设置Mybatis的数据库分页插件的问题。导致了业务层在执行业务中，没有正确处理分页问题。解决的办法也很简单，在后台配置好分页插件即可。配置方法如下：
package org.yelang.pcwater.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
/*** - mybatis 分页组件* @author 夜郎king**/
@Configuration
public class MybatisPlusConfig {@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor i = new MybatisPlusInterceptor();i.addInnerInterceptor(new PaginationInnerInterceptor(DbType.POSTGRE_SQL));return i;}
}配置好以上代码后，再次运行程序，你就会发现已经成功的出现了分页条。
五、总结
以上就是本文的主要内容，本文的目标是为开发者提供一个完整的全栈分页解决方案，从基础概念到具体实现，再到实际案例，帮助读者全面掌握这一技能。我们将首先介绍分页的基本概念，以及 MyBatisPlus 和 Thymeleaf 的核心功能，帮助读者理解它们如何为分页功能提供支持。本文将为读者提供一个系统的学习路径，帮助读者掌握这一重要技能。无论你是初学者还是经验丰富的开发者，本文都将为你提供有价值的指导和参考。行文仓促，定有不足之处，欢迎各位朋友在评论区批评指正，不胜感激。
(5) - 条件工作流)
