知識庫 / Spring / Spring MVC RSS 訂閱

1. 概述

在本快速教程中，我們將構建一個簡單的應用程序，使用 Spring 和 Thymeleaf 以分頁方式顯示項目列表。

對於將 Thymeleaf 與 Spring 集成的介紹，請參閲我們的文章<這裏>。

2. Maven 依賴項

除了常規的 Spring 依賴項之外，我們還將添加 Thymeleaf 和 Spring Data Commons 的依賴項：

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework.data</groupId>
    <artifactId>spring-data-commons</artifactId>
    <version>2.3.2.RELEASE</version>
</dependency>

我們可以在 Maven Central 倉庫中找到最新的 thymeleaf-spring5 和 spring-data-commons 依賴項。

3. 模型

我們的示例應用程序將演示圖書列表的分頁功能。

首先，讓我們定義一個 Book 類，該類包含兩個字段和一個包含所有參數的構造函數：

public class Book {
    private int id;
    private String name;

    // standard constructor, setters and getters
}

4. 服務

然後我們將創建一個服務，使用 Spring Data Commons 庫來生成分頁的書籍列表，以生成請求的頁面。

@Service
public class BookService {

    final private List<Book> books = BookUtils.buildBooks();

    public Page<Book> findPaginated(Pageable pageable) {
        int pageSize = pageable.getPageSize();
        int currentPage = pageable.getPageNumber();
        int startItem = currentPage * pageSize;
        List<Book> list;

        if (books.size() < startItem) {
            list = Collections.emptyList();
        } else {
            int toIndex = Math.min(startItem + pageSize, books.size());
            list = books.subList(startItem, toIndex);
        }

        Page<Book> bookPage
          = new PageImpl<Book>(list, PageRequest.of(currentPage, pageSize), books.size());

        return bookPage;
    }
}

在上述服務中，我們創建了一個方法，根據請求的頁面，返回所選的Page，該頁面由Pageable接口表示。 PageImpl類有助於過濾分頁後的書籍列表。

5. Spring 控制器

我們需要一個 Spring 控制器來在給定頁面大小和當前頁碼的情況下，檢索選定頁面的書籍列表。

為了使用選定頁碼和默認頁面大小的默認值，我們可以訪問資源 /listBooks，無需任何參數。

如果需要特定的頁面大小或頁碼，我們可以添加 page 和 size 參數。

例如，/listBooks?page=2&size=6 將檢索第二頁，每頁 6 個項目：

@Controller
public class BookController {

    @Autowired
    private BookService bookService;

    @RequestMapping(value = "/listBooks", method = RequestMethod.GET)
    public String listBooks(
      Model model, 
      @RequestParam("page") Optional<Integer> page, 
      @RequestParam("size") Optional<Integer> size) {
        int currentPage = page.orElse(1);
        int pageSize = size.orElse(5);

        Page<Book> bookPage = bookService.findPaginated(PageRequest.of(currentPage - 1, pageSize));

        model.addAttribute("bookPage", bookPage);

        int totalPages = bookPage.getTotalPages();
        if (totalPages > 0) {
            List<Integer> pageNumbers = IntStream.rangeClosed(1, totalPages)
                .boxed()
                .collect(Collectors.toList());
            model.addAttribute("pageNumbers", pageNumbers);
        }

        return "listBooks.html";
    }
}

為了為視圖準備分頁功能，我們在 Spring 控制器中添加了模型屬性，包括所選的 Page 以及頁碼列表。

6. Thymeleaf 模板

現在是時候創建一個 Thymeleaf 模板，“listBooks.html”，它以 Spring 控制器的模型屬性為基礎，顯示書籍列表並進行分頁。

首先，我們迭代書籍列表並以表格形式顯示它們。然後，當總頁數大於零時，顯示分頁。

每次點擊並選擇一個頁面時，對應的書籍列表將以高亮顯示的當前頁面鏈接顯示：

<table border="1">
    <thead>
        <tr>
            <th th:text="#{msg.id}" />
            <th th:text="#{msg.name}" />
        </tr>
    </thead>
    <tbody>
        <tr th:each="book, iStat : ${bookPage.content}"
            th:style="${iStat.odd}? 'font-weight: bold;'"
            th:alt-title="${iStat.even}? 'even' : 'odd'">
            <td th:text="${book.id}" />
            <td th:text="${book.name}" />
        </tr>
    </tbody>
</table>
<div th:if="${bookPage.totalPages > 0}" class="pagination"
    th:each="pageNumber : ${pageNumbers}">
    <a th:href="@{/listBooks(size=${bookPage.size}, page=${pageNumber})}"
        th:text=${pageNumber}
        th:class="${pageNumber==bookPage.number + 1} ? active"></a>
</div>

7. 結論

在本文中，我們演示瞭如何使用 Thymeleaf 與 Spring 框架分頁列表的方法。