目录
前言
在当今的软件开发中，分页功能是提升用户体验和系统性能的关键。无论是企业级应用还是面向用户的平台，高效分页都能显著改善交互体验。今天将带你深入了解如何通过 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文件如下：
XML
<!-- mybatis-plus -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>${mybatis-plus.version}</version>
</dependency>
<!-- lombok 代码自动生成组件 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<scope>provided</scope>
</dependency>
<!-- PostgreSql 驱动包 -->
<dependency>
<groupId>net.postgis</groupId>
<artifactId>postgis-jdbc</artifactId>
<version>2.5.0</version>
</dependency>2、示例表结构介绍
这里使用城市停水信息数据为例，重点介绍如何进行数据的分页展示，在正式介绍分页实现之前，首先将基础的表结构和示例数据给大家做一个介绍。其表结构如下：
对应的实例数据如下：
二、Java后台分页实现
本节将使用Java开发语言，结合MybatisPlus框架详细介绍在后台如何实现前端的分页需求。包含三个方面的内容，第一个方面是介绍业务实体的实现，第二个方面是介绍业务层如何进行分页实现，第三方面是控制层的API如何跟前端交互。
1、实体类实现
实体的实现比较简单，这里直接给出具体的Java代码如下：
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的一个基础分页组件，这里也是使用这个对象来完成具体的业务。首先我们在业务接口中定义如下方法：
java
/**
* -根据区域查询分页停水信息列表
* @param pageNum
* @param pageSize
* @param regionName
* @return
*/
IPage<StopWaterInfo> page(Integer pageNum, Integer pageSize,String regionName); 然后来具体实现以上方法，代码如下：
java
/**
* - 比较原生的分页实现
*/
@Override
public IPage<StopWaterInfo> page(Integer pageNum, Integer pageSize, String regionName) {
QueryWrapper<StopWaterInfo> queryWrapper = new QueryWrapper<StopWaterInfo>();
queryWrapper.like("regin_name", regionName);
queryWrapper.orderByDesc("created_on");
Page<StopWaterInfo> page = new Page<StopWaterInfo>(pageNum, pageSize);
return this.baseMapper.selectPage(page, queryWrapper);
}这里我们通过构造Page对象，将控制层传入的当前页面和每页显示的数据量大小一起传入，然后构造分页信息，一起传给MybatisPlus来进行查询方法的实现。
3、控制层实现
控制层比较简单，接收前端提交的三个参数，当前页数，每页显示数据量，还有一个查询条件参数。然后调用业务层的分页方法，最后将结果回写给前端，核心代码如下：
java
/**
* - 获取分页数据
* @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<StopWaterInfo> 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结构，
html
<div id="table-wrapper">
<table class="table table-striped table-hover table-sm align-middle small mb-0" id="event-data-table">
<thead class="table-primary">
<tr>
<th>创建时间</th>
<th>停水地点</th>
<th>原因</th>
</tr>
</thead>
<tbody id="table-body">
<tr th:if="${#lists.isEmpty(waterEvents)}">
<td colspan="3" class="text-center text-muted">请点击查询按钮加载数据。</td>
</tr>
</tbody>
</table>
</div>为了演示简单，这里使用ajax的方式从后天加载相应的数据，示例代码如下：
javascript
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 = `<tr><td colspan="5" class="text-center text-muted">未找到符合条件的停水事件。</td></tr>`;
} else {
pageData.forEach(event => {
const row = tableBody.insertRow();
row.innerHTML = `
<td data-id="${event.pkId}">${event.createdOn}</td>
<td>${event.position}</td>
<td>${event.reason}</td>
`;
});
}
renderPagination(totalPages);
},
error:function(){
tableBody.innerHTML = `<tr><td colspan="5" class="text-center text-muted">未找到符合条件的停水事件。</td></tr>`;
}
});
}通过代码可以看到，在拿到后台的响应数据后，我们将循环数据来动态实现表格数据的拼接展示。同时将生成分页条。
2、分页条集成
分页条的展示也需要在网页中插入页面元素，在html页面中定义以下网页标签，如下：
html
<div class="pagination-container mt-2">
<nav aria-label="Table Pagination">
<ul class="pagination pagination-sm justify-content-center mb-0" id="table-pagination">
</ul>
</nav>
</div>在获取表格数据的同时，我们就可以来同步设置分页条的，分页条的这里不采用特别复杂的样式，仅展示上一页和下一页，对应的代码如下：
javascript
function renderPagination(totalPages) {
const paginationContainer = document.getElementById('table-pagination');
paginationContainer.innerHTML = '';
if (totalPages <= 1) return;
paginationContainer.innerHTML += `
<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
<a class="page-link" href="#" onclick="changePage(${totalPages},${currentPage - 1})" aria-label="Previous">前一页</a>
</li>
`;
paginationContainer.innerHTML += `
<li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
<a class="page-link" href="#" onclick="changePage(${totalPages},${currentPage + 1})" aria-label="Next">后一页</a>
</li>
`;
}3、成果展示
最后来看一下最终的成果，如下图：
四、可能遇到的问题
本节将介绍一个在实现分页应用的过程中经常容易遇到的问题，也就是没有得到分页信息的问题。以及如何来解决。
1、分页不展示
在成果页面中可以看到，正常的页面是每页展示若干条，而且表格下方带了分页条的。如果你也能实现，说明配置没有问题。如果你的应用截图如下：
出现了数据全部加载的问题。那么可以看看本节的解决方案。
2、问题解决
如果你也遇到这种没有分页条的情况，大概率是遇到了没有正确设置Mybatis的数据库分页插件的问题。导致了业务层在执行业务中，没有正确处理分页问题。解决的办法也很简单，在后台配置好分页插件即可。配置方法如下：
java
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 {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor i = new MybatisPlusInterceptor();
i.addInnerInterceptor(new PaginationInnerInterceptor(DbType.POSTGRE_SQL));
return i;
}
}配置好以上代码后，再次运行程序，你就会发现已经成功的出现了分页条。
五、总结
以上就是本文的主要内容，本文的目标是为开发者提供一个完整的全栈分页解决方案，从基础概念到具体实现，再到实际案例，帮助读者全面掌握这一技能。我们将首先介绍分页的基本概念，以及 MyBatisPlus 和 Thymeleaf 的核心功能，帮助读者理解它们如何为分页功能提供支持。本文将为读者提供一个系统的学习路径，帮助读者掌握这一重要技能。无论你是初学者还是经验丰富的开发者，本文都将为你提供有价值的指导和参考。行文仓促，定有不足之处，欢迎各位朋友在评论区批评指正，不胜感激。