Spring Boot Offset分页、Keyset 分页与Thymeleaf教程

欢迎，在本教程中，我们将解释弹簧启动应用程序中的分页，为此，我们将使用百里香叶。

1. 简介

在继续本教程之前，我们将了解常用术语，例如 Spring Boot、龙目岛、百里香叶和分页简介。

1.1 弹簧启动

• Spring 启动是一个模块，它为 Spring框架提供快速的应用程序开发功能，包括自动配置、独立代码和生产就绪代码
• 它创建打包为jar的应用程序，并使用嵌入式 servlet 容器（如 Tomcat、Jetty 或 Undertow）直接启动。因此，无需部署战争文件
• 它通过提供初学者模板简化了 maven 配置，并有助于解决依赖项冲突。它会自动识别所需的依赖项并将其导入应用程序中
• 它有助于删除样板代码、额外的注释和 xml 配置
• 它提供强大的批处理并管理其余端点
• 它提供了一个高效的jpa-starter库，可以有效地将应用程序与关系数据库连接起来
• 它提供微服务架构和云配置，以集中方式管理所有与应用程序相关的配置属性

1.2 龙目岛

• 龙目岛只不过是一个小型库，它减少了项目中样板Java代码的数量
• 使用龙目岛注释自动生成对象的吸气剂和二传手
• 通过注释处理器 API 挂钩
• 在 Java 编译器继续之前，原始源代码将传递给 Lombok 进行代码生成。因此，与Java编译器一起生成正确编译的Java代码
• 在文件夹下，您可以查看已编译的类文件target/classes
• 可以与Maven，Gradle IDE等一起使用。

1.2.1 龙目岛的特点

1.3 百里香叶

• Thymeleaf是用于 Web 应用程序的服务器端 Java 模板引擎
• 它处理HTML，XML，JS，CSS和简单的文本，为Web应用程序带来优雅的设计
• 要使用百里香叶，您必须在模板中定义依赖关系并提及库spring-boot-starter-thymeleafpom.xmlxmlns:th="https://thymeleaf.org"

1.4 分页

• 分页是将数据划分为合适的块以节省资源的过程
• 为了在 Spring boot 应用程序中执行分页，我们将使用接口提供额外的方法来通过使用 spring boot 中的分页来检索结果（即从数据中获取第一页，每个大小有 10 个项目等）。PagingAndSortingRepository

2. 春季启动分页与百里香叶教程

这是实现本教程的系统指南，但在进一步讨论之前，我假设您了解 Spring 启动基础知识。

2.1 申请先决条件

从本教程开始，我们希望您目前在他们最喜欢的选择 IDE 中安装了龙目岛插件。如果有人需要在IntelliJ IDE上完成龙目岛安装，请观看此视频。要在 Eclipse IDE 上进行安装，请观看此视频。

2.2 使用的工具与项目结构

我们正在使用 Eclipse Kepler SR2、JDK 8 和 Maven。如果您对应该在哪里创建相应的文件或文件夹感到困惑，让我们回顾一下 Spring 引导应用程序的项目结构。

图1：项目结构

让我们开始构建应用程序！

3. 创建 Spring 引导应用程序

以下是开发应用程序所涉及的步骤。

3.1 Maven 依赖

在这里，我们指定了Spring Boot，Spring Data JPA，Thymeleaf，H2数据库，Faker和Lombok的依赖关系。Maven 将自动解析其他依赖项。更新后的文件将具有以下代码。

绒球.xml

3.2 应用程序属性

在 location： 创建一个新的属性文件，并向其添加以下代码。SpringbootThymeleafPaginationV2/src/main/resources/

应用程序属性

3.3 Java类

让我们编写此应用程序中涉及的所有 java 类。

3.3.1 实现/主类

将以下代码添加到主类，以便从 main 方法启动应用程序。永远记住，Spring 引导应用程序的入口点是包含注释和静态 main 方法的类。@SpringBootApplication

春靴百里香叶分页.java

3.3.2 模型类

将以下代码添加到模型类中。Resident

居民.java

3.3.3 配置类

将以下代码添加到将返回该对象的 Bean 对象的 Bean 类中。此对象的用法可以在 theclass 中看到，该类用于在应用程序启动时将虚拟数据加载到数据库中。fakerDefaultResidentsLoader.java

豆子配置.java

3.3.4 数据访问对象接口

将以下代码添加到扩展接口的接口中。PagingAndSortingRepository

居民存储库.java

3.3.5 服务类

将以下代码添加到服务类中，我们将在其中调用 DAO 接口方法将数据保存到数据库中，并从数据库中获取数据。

居民服务.java

3.3.6 引导类

将以下代码添加到引导类，以便在应用程序启动时将虚拟数据保存到数据库中。这些数据将保存在 H2 数据库中。

默认居民加载器.java

3.3.7 索引控制器类

将以下代码添加到旨在处理传入请求的控制器类中。该类是用注释注释的，该方法将返回应用程序的页面。@ControllerHTTP GETindex

ResidentController.java

4. 百里香叶的变化

我们将创建一个简单的 HTML 页面，该页面将以较小的块（即分页方法）在浏览器上显示居民。在 位置 ： 创建一个新的 HTML 文件，并向其添加以下代码。SpringbootThymeleafPaginationV2/src/main/resources/templates/

索引.html

5. 运行应用程序

要执行应用程序，请右键单击类。SpringbootThymeleafPagination.javaRun As -> Java Application

图 2：运行应用程序

6. 项目演示

打开您选择的浏览器并点击以下 URL。结果将以分页方式显示（即较小的块），您可以单击页码以根据页码检索结果。

图3：使用百里香叶在春季启动中进行分页

这就是本教程的全部内容，我希望这篇文章能为您提供所需的任何帮助。快乐学习，不要忘记分享！

7. 总结

在本节中，您了解到，

• Spring Boot，Thymeleaf，龙目岛及其功能，以及分页概念
• Spring Boot 中的分页实现并使用 Thymeleaf 在浏览器上显示元素

您可以在“下载”部分中将样例应用程序下载为 Eclipse 项目。

 8. 下载日食项目

这是使用百里香叶进行Spring Boot分页的一个例子。

 8. Keyset 分页

存储库

package com.springboot.thymeleaf.pagination.v2.repository;
 
import com.springboot.thymeleaf.pagination.v2.model.Resident;
import java.util.List;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.PagingAndSortingRepository;
import org.springframework.stereotype.Repository;
 
@Repository
public interface ResidentRepository extends PagingAndSortingRepository {
 
    @Query(value = "SELECT * FROM resident AS r WHERE r.id > ?1 ORDER BY r.id ASC LIMIT ?2",
            nativeQuery = true)
    List fetchAllAscNext(Long id, Long limit);
 
    @Query(value = "SELECT * FROM resident AS r WHERE r.id < ?1 ORDER BY r.id DESC LIMIT ?2",
            nativeQuery = true)
    List fetchAllAscPrevious(Long id, Long limit);
 
    @Query(value = "SELECT count(*)  FROM resident", nativeQuery = true)
    public Long fetchCount();
 
    @Query(value = "SELECT min(id)  FROM resident", nativeQuery = true)
    public Long fetchMinId();
 
    @Query(value = "SELECT max(id)  FROM resident", nativeQuery = true)
    public Long fetchMaxId();
}

控制器

package com.springboot.thymeleaf.pagination.v2.controller;
 
import com.springboot.thymeleaf.pagination.v2.model.Resident;
import com.springboot.thymeleaf.pagination.v2.repository.ResidentRepository;
import com.springboot.thymeleaf.pagination.v2.service.ResidentService;
import java.util.Collections;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.List;
import org.springframework.web.bind.annotation.RequestParam;
 
// Causes Lombok to generate a logger field.
@Slf4j
@Controller
public class ResidentController {
 
    private static final int DEFAULT_PAGE_NUMBER = 1;
    private static final int DEFAULT_PAGE_SIZE = 10;
 
    @Autowired
    private ResidentService service;
 
    @Autowired
    private ResidentRepository repository;
 
    @GetMapping(value = "/")
    public String viewIndexPage() {
        log.info("Redirecting the index page to the controller method for fetching the residents in a paginated fashion.");
        return "redirect:residents/paginated/" + DEFAULT_PAGE_NUMBER + "/" + DEFAULT_PAGE_SIZE;
    }
 
    @GetMapping("/residents")
    public String getPaginatedResidents(Model model, @RequestParam(required = false) String keyword, @RequestParam(defaultValue = "next") String dir,
            @RequestParam(defaultValue = "0") Long page,
            @RequestParam(defaultValue = "10") Long size) {
        log.info("Getting the residents in a paginated way for page-number = {} and page-size = {}.", page, size);
        if (dir.equals("next")) {
            List fetchAllAscNext = repository.fetchAllAscNext(page, size);
            model.addAttribute("responseEntity", fetchAllAscNext);
            model.addAttribute("max", fetchAllAscNext.get(fetchAllAscNext.size() - 1).getId());
            model.addAttribute("min", fetchAllAscNext.get(0).getId());
        } else {
            List fetchAllAscPrevious = repository.fetchAllAscPrevious(page, size);
            Collections.reverse(fetchAllAscPrevious);
            model.addAttribute("responseEntity", fetchAllAscPrevious);
            model.addAttribute("max", fetchAllAscPrevious.get(fetchAllAscPrevious.size() - 1).getId());
            model.addAttribute("min", fetchAllAscPrevious.get(0).getId());
        }
        model.addAttribute("fetchCount", repository.fetchCount());
        model.addAttribute("fetchMinId", repository.fetchMinId());
        model.addAttribute("fetchMaxId", repository.fetchMaxId());
        return "index";
    }
 
}

视图

html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Index pagetitle>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">
            th {
                text-align: center;
                font-weight: bold;
                border-top: none !important;
            }
 
            th, td {
                white-space: nowrap;
            }
 
            .mt-20 {
                margin-top: 20px;
            }
 
            .table-alignment {
                margin-left: -200px;
            }
        style>
    head>
    <body>
 
        <div class="container">
            <h3 class="text-info text-center mt-20">Pagination Example : Residentsh3>
 
            <table class="table table-striped table-alignment mt-20 text-center">
                <thead id="residentsTable">
                    <tr>
                        <th>Idth>
                        <th>Full nameth>
                        <th>Ageth>
                        <th>Genderth>
                        <th>Phone Numberth>
                        <th>Email Addressth>
                        <th>Date of Birthth>
                        <th>Home Addressth>
                        <th>Nationalityth>
                        <th>First Languageth>
                    tr>
                thead>
                <tbody>
                    <tr th:each="resident : ${responseEntity}">
                        <td th:text="${resident.id}">td>
                        <td th:text="${resident.fullName}">td>
                        <td th:text="${resident.age}">td>
                        <td th:text="${resident.gender}">td>
                        <td th:text="${resident.phoneNumber}">td>
                        <td th:text="${resident.emailAddress}">td>
                        <td th:text="${resident.dateOfBirth}">td>
                        <td th:text="${resident.homeAddress}">td>
                        <td th:text="${resident.nationality}">td>
                        <td th:text="${resident.firstLanguage}">td>
                    tr>
                tbody>
            table>
 
            
            
            <div class="row">
                <div>
                    <div>
                        Total Items: [[${fetchCount}]]
                    div>
                    <div>
                        <a th:if="${min > fetchMinId}"
                           th:href="@{'/residents/?page='+${min}+'&size=10&dir=prev'}" >
                            Prev
                        a>
                        <span th:unless="${min > fetchMinId}">Prevspan>
                    div>
                    <div>
                        <a th:if="${max < fetchMaxId}"
                           th:href="@{'/residents/?page='+${max}+'&size=10&dir=next'}" >
                            Next
                        a>
                        <span th:unless="${max < fetchMaxId}">Nextspan>
                    div>
 
                div>
            div>
        div>
 
    body>
 
html>