• Spring Data JPA - Web 支持、使用Pageable 参数Thymeleaf 视图进行搜索/过滤、排序和分页

    实体

    1. package com.example;
    2.  
    3. import jakarta.persistence.Entity;
    4. import jakarta.persistence.GeneratedValue;
    5. import jakarta.persistence.GenerationType;
    6. import jakarta.persistence.Id;
    7. import java.util.Date;
    8. import lombok.Data;
    9. import org.hibernate.annotations.DynamicUpdate;
    10.  
    11. @Data
    12. @Entity
    13. @DynamicUpdate
    14.  
    15. public class LoginLog {
    16.  
    17.     @Id
    18.     @GeneratedValue(strategy = GenerationType.IDENTITY)
    19.     private Long id;
    20.  
    21.     private String username;
    22.  
    23.     private String description;
    24.  
    25.     private String ip;
    26.  
    27.     private String sessionid;
    28.  
    29.     private Date eventtime;
    30.  
    31. }

    存储库

    1. package com.example;
    2.  
    3. import org.springframework.data.domain.Page;
    4. import org.springframework.data.domain.Pageable;
    5. import org.springframework.data.jpa.repository.JpaRepository;
    6. import org.springframework.data.jpa.repository.Query;
    7.  
    8. public interface LoginLogRepository extends JpaRepository {
    9.  
    10.     Page findAllByOrderByIdDesc(Pageable pageable);
    11.  
    12.     @Query("SELECT l FROM LoginLog l WHERE CONCAT(l.username, ' ', l.description, ' ', l.ip, ' ', l.sessionid) LIKE %?1%")
    13.     public Page search(String keyword, Pageable pageable);
    14.  
    15. }

    MVC 控制器

    1. package com.example;
    2.  
    3. import java.util.List;
    4. import java.util.stream.Collectors;
    5.  
    6. import org.springframework.beans.factory.annotation.Autowired;
    7. import org.springframework.data.domain.Page;
    8. import org.springframework.data.domain.Pageable;
    9. import org.springframework.data.domain.Sort;
    10. import org.springframework.data.repository.query.Param;
    11. import org.springframework.data.web.PageableDefault;
    12. import org.springframework.stereotype.Controller;
    13. import org.springframework.ui.Model;
    14. import org.springframework.web.bind.annotation.GetMapping;
    15.  
    16. @Controller
    17. public class LoginLogController {
    18.  
    19.     @Autowired
    20.     private LoginLogRepository loginLogRepository;
    21.  
    22.     @GetMapping("/loginlog")
    23.     public String getLoginLog(@Param("keyword") String keyword, @PageableDefault(size = 10, sort = "id", direction = Sort.Direction.DESC) Pageable pageable,
    24.             Model model) {
    25.  
    26.         if (keyword == null || keyword.trim().isEmpty()) {
    27.             Page page = loginLogRepository.findAll(pageable);
    28.             List sortOrders = page.getSort().stream().collect(Collectors.toList());
    29.             if (sortOrders.size() > 0) {
    30.                 Sort.Order order = sortOrders.get(0);
    31.                 model.addAttribute("sortProperty", order.getProperty());
    32.                 model.addAttribute("sortDesc", order.getDirection() == Sort.Direction.DESC);
    33.                 model.addAttribute("sortDirection", order.getDirection().isAscending() ? "asc" : "desc");
    34.                 model.addAttribute("reverseSortDirection", order.getDirection().isAscending() ? "desc" : "asc");
    35.             }
    36.             model.addAttribute("keyword", "");
    37.             model.addAttribute("page", page);
    38.         } else {
    39.             Page page = loginLogRepository.search(keyword, pageable);
    40.             List sortOrders = page.getSort().stream().collect(Collectors.toList());
    41.             if (sortOrders.size() > 0) {
    42.                 Sort.Order order = sortOrders.get(0);
    43.                 model.addAttribute("sortProperty", order.getProperty());
    44.                 model.addAttribute("sortDesc", order.getDirection() == Sort.Direction.DESC);
    45.                 model.addAttribute("sortDirection", order.getDirection().isAscending() ? "asc" : "desc");
    46.                 model.addAttribute("reverseSortDirection", order.getDirection().isAscending() ? "desc" : "asc");
    47.             }
    48.             model.addAttribute("keyword", keyword);
    49.             model.addAttribute("page", page);
    50.         }
    51.  
    52.         return "loginlog/list_loginlog";
    53.  
    54.     }
    55.  
    56. }

    Thymeleaf 视图

    1. html>
    2. <html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org">
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <meta content="width=device-width, initial-scale=1.0" name="viewport">
    6.         <title>Dashboard - Admin Bootstrap Templatetitle>
    7.         <meta name="robots" content="noindex, nofollow">
    8.         <meta content="" name="description">
    9.         <meta content="" name="keywords">
    10.         <link rel="icon" th:href="@{/assets/img/favicon.png}"  />
    11.         <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />
    12.         <link rel="stylesheet" type="text/css" th:href="@{/webjars/font-awesome/css/all.min.css}"/>
    13.         <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap-icons/font/bootstrap-icons.css}"/>
    14.         <link rel="stylesheet" type="text/css" th:href="@{/assets/css/style.css}" />
    15.         <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
    16.     head>
    17.     <body>
    18.         <header id="header" class="header fixed-top d-flex align-items-center" th:replace="fragments/header :: header">
    19.         header>
    20.         <aside id="sidebar" class="sidebar" th:replace="fragments/sidebar :: sidebar">
    21.         aside>
    22.         <main id="main" class="main">
    23.             <div class="pagetitle">
    24.                 <nav>
    25.                     <ol class="breadcrumb">
    26.                         <li class="breadcrumb-item"><a href="index.html">主页a>li>
    27.                         <li class="breadcrumb-item active">登录日志li>
    28.                     ol>
    29.                 nav>
    30.             div>
    31.             <section class="section dashboard">
    32.                 <div class="row">
    33.                     <div class="col-lg-12">
    34.                         <div class="card">
    35.                             <div class="card-body">
    36.  
    37.                                 <br/>
    38.                                 <br/>
    39.                                 <div class="table-title">
    40.                                     <div class="row">
    41.                                         <div class="col-sm-6">
    42.                                             <h2> <b>登录日志b>h2>
    43.                                         div>
    44.                                     div>
    45.                                 div>
    46.                                 <div class="my-3 ">
    47.  
    48.                                     <div class="row d-flex flex-row">
    49.                                         <form th:action="@{/loginlog}" id="searchForm" >
    50.                                             <div class="row">
    51.                                                 <div class="col-sm-8">
    52.                                                     <div class="col-md-12 mt-2">
    53.                                                         <div class="search">
    54.                                                             <i class="fa fa-search">i>
    55.                                                             <input id="keyword" type="search" name="keyword" th:value="${keyword}" required class="form-control"
    56.                                                                    placeholder="Enter keyword">
    57.                                                             <button type="submit" class="btn btn-secondary">搜索button>
    58.                                                         div>
    59.                                                     div>
    60.                                                 div>
    61.                                                 <div class="col-sm-3">
    62.                                                     <div class="col-md-12 input-group mt-2">
    63.                                                         <div class="input-group-prepend">
    64.                                                             <label class="input-group-text" for="pageSize">每页显示行数:label>
    65.                                                         div>
    66.                                                         <select form="searchForm" name="size" th:value="${pageSize}" onchange="changePageSize()" class="size-select"
    67.                                                                 id="pageSize">
    68.                                                             <option th:each="s : ${ {10, 25, 50} }" th:value="${s}" th:text="${s}" th:selected="${s == page.size}">option>
    69.                                                         select>
    70.                                                     div>
    71.                                                 div>
    72.                                                 <div class="col-sm-1">
    73.                                                     <div class="col-md-12 mt-2">
    74.                                                         <button id="btnClear" class="btn btn-info">重置button>
    75.                                                     div>
    76.                                                 div>
    77.                                             div>
    78.                                         form>
    79.                                     div>
    80.  
    81.                                 div>
    82.                                 <table class="table table-striped table-hover">
    83.                                     <thead >
    84.                                         <tr>
    85.                                             <th scope="col" >
    86.                                                 <a th:href="@{'/loginlog?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''}
    87.                                                    + 'page=' + ${page.number} + '&size=' + ${page.size}
    88.                                                    + ${sortProperty!=null ? '&sort=' +  'id'  + ',' + (sortProperty == 'id' ? reverseSortDirection : sortDirection) : ''}}">
    89.                                                     IDa>
    90.                                                 <span th:if="${sortProperty ==  'id' }"
    91.                                                       th:class="${sortDirection == 'asc' ? 'fas fa-arrow-down-short-wide' : 'fas fa-arrow-down-wide-short'}">span>
    92.                                             th>
    93.                                             <th scope="col" >
    94.                                                 <a th:href="@{'/loginlog?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''}
    95.                                                    + 'page=' + ${page.number} + '&size=' + ${page.size}
    96.                                                    + ${sortProperty!=null ? '&sort=' +  'username'  + ',' + (sortProperty == 'username' ? reverseSortDirection : sortDirection) : ''}}">
    97.                                                     登录账号a>
    98.                                                 <span th:if="${sortProperty ==  'username' }"
    99.                                                       th:class="${sortDirection == 'asc' ? 'fas fa-arrow-down-short-wide' : 'fas fa-arrow-down-wide-short'}">span>
    100.                                             th>
    101.                                             <th scope="col" >
    102.                                                 <a th:href="@{'/loginlog?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''}
    103.                                                    + 'page=' + ${page.number} + '&size=' + ${page.size}
    104.                                                    + ${sortProperty!=null ? '&sort=' +  'description'  + ',' + (sortProperty == 'description' ? reverseSortDirection : sortDirection) : ''}}">
    105.                                                     事件描述a>
    106.                                                 <span th:if="${sortProperty ==  'description' }"
    107.                                                       th:class="${sortDirection == 'asc' ? 'fas fa-arrow-down-short-wide' : 'fas fa-arrow-down-wide-short'}">span>
    108.                                             th>
    109.                                             <th scope="col" >
    110.                                                 <a th:href="@{'/loginlog?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''}
    111.                                                    + 'page=' + ${page.number} + '&size=' + ${page.size}
    112.                                                    + ${sortProperty!=null ? '&sort=' +  'ip'  + ',' + (sortProperty == 'ip' ? reverseSortDirection : sortDirection) : ''}}">
    113.                                                     IPa>
    114.                                                 <span th:if="${sortProperty ==  'ip' }"
    115.                                                       th:class="${sortDirection == 'asc' ? 'fas fa-arrow-down-short-wide' : 'fas fa-arrow-down-wide-short'}">span>
    116.                                             th>
    117.                                             <th scope="col" >
    118.                                                 <a th:href="@{'/loginlog?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''}
    119.                                                    + 'page=' + ${page.number} + '&size=' + ${page.size}
    120.                                                    + ${sortProperty!=null ? '&sort=' +  'sessionid'  + ',' + (sortProperty == 'sessionid' ? reverseSortDirection : sortDirection) : ''}}">
    121.                                                     会话IDa>
    122.                                                 <span th:if="${sortProperty ==  'sessionid' }"
    123.                                                       th:class="${sortDirection == 'asc' ? 'fas fa-arrow-down-short-wide' : 'fas fa-arrow-down-wide-short'}">span>
    124.                                             th>
    125.                                             <th scope="col" >
    126.                                                 <a th:href="@{'/loginlog?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''}
    127.                                                    + 'page=' + ${page.number} + '&size=' + ${page.size}
    128.                                                    + ${sortProperty!=null ? '&sort=' +  'eventtime'  + ',' + (sortProperty == 'eventtime' ? reverseSortDirection : sortDirection) : ''}}">
    129.                                                     时间a>
    130.                                                 <span th:if="${sortProperty ==  'eventtime' }"
    131.                                                       th:class="${sortDirection == 'asc' ? 'fas fa-arrow-down-short-wide' : 'fas fa-arrow-down-wide-short'}">span>
    132.                                             th>
    133.  
    134.                                         tr>
    135.                                     thead>
    136.                                     <tbody>
    137.                                         <tr th:each="loginLog : ${page.content}">
    138.                                             <td th:text="${loginLog.id}">IDtd>
    139.                                             <td th:text="${loginLog.username}">登录账号td>
    140.                                             <td th:text="${loginLog.description}">事件描述td>
    141.                                             <td th:text="${loginLog.ip}">IPtd>
    142.                                             <td th:text="${loginLog.sessionid}">会话IDtd>
    143.                                             <td th:text="${#dates.format(loginLog.eventtime,'yyyy-MM-dd HH:mm:ss.SSS')}">时间td>
    144.                                         tr>
    145.  
    146.  
    147.  
    148.  
    149.                                     tbody>
    150.                                 table>
    151.  
    152.                                 <div class="row">
    153.                                     <div class="col-sm-6">
    154.                                         <div th:if="${page.totalPages > 0}">
    155.                                             总计<span th:text="${page.totalElements}">99span>行，当前显示<span th:text="(${page.number} )*${page.size} +1">1span> -
    156.                                             <span th:text="(${page.number} )*${page.size} +${page.numberOfElements}">5span>行   总计<span th:text="${page.totalPages}">99span>页
    157.                                         div>
    158.                                     div>
    159.                                     <div class="col-sm-6" th:with="sortParam=${sortProperty+','+(sortDesc?'desc':'asc')}">
    160.                                         <nav aria-label="Pagination" th:if="${page.totalPages > 0}">
    161.                                             <ul class="pagination justify-content-center">
    162.                                                 <li class="page-item" th:classappend="${page.number == 0} ? 'disabled'">
    163.                                                     <a class="page-link"
    164.                                                        th:href="@{'/loginlog?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' +'0'+ '&size=' + ${page.size}+'&sort='+${sortParam}}"
    165.                                                        title="First Page" rel="First Page">
    166.                                                         最前页
    167.                                                     a>
    168.                                                 li>
    169.                                                 <li class="page-item font-weight-bold" th:classappend="${page.number == 0} ? 'disabled'">
    170.                                                     <a class="page-link"
    171.                                                        th:href="@{'/loginlog?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' + ${page.number - 1} + '&size=' + ${page.size}+'&sort='+${sortParam}}"
    172.                                                        title="Previous Page" rel="Previous Page">
    173.                                                         前一页
    174.                                                     a>
    175.                                                 li>
    176.                                                 <li class="page-item disabled" th:if="${page.number - 2 > 0}">
    177.                                                     <a class="page-link" href="#">...a>
    178.                                                 li>
    179.                                                 <li
    180.                                                     th:each="i : ${#numbers.sequence(page.number > 2 ? page.number - 2 : 0, page.number + 2 < page.totalPages ? page.number + 2 : page.totalPages-1)}"
    181.                                                     class="page-item" th:classappend="${i == page.number} ? 'active'">
    182.                                                     <a class="page-link"
    183.                                                        th:href="@{'/loginlog?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' + ${i} + '&size=' + ${page.size}+'&sort='+${sortParam}}"
    184.                                                        th:title=${i+1} th:rel=${i+1}>
    185.                                                         [[${i+1} ]]
    186.                                                     a>
    187.                                                 li>
    188.                                                 <li class="page-item disabled" th:if="${page.number + 2 < page.totalPages}">
    189.                                                     <a class="page-link" href="#">...a>
    190.                                                 li>
    191.                                                 <li class="page-item font-weight-bold" th:classappend="${page.number == page.totalPages-1} ? 'disabled'">
    192.                                                     <a class="page-link"
    193.                                                        th:href="@{'/loginlog?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' + ${page.number + 1} + '&size=' + ${page.size}+'&sort='+${sortParam}}"
    194.                                                        title="Next Page" rel="Next Page">
    195.                                                         后一页
    196.                                                     a>
    197.                                                 li>
    198.                                                 <li class="page-item" th:classappend="${page.number == page.totalPages-1} ? 'disabled'">
    199.                                                     <a class="page-link"
    200.                                                        th:href="@{'/loginlog?' + ${keyword!=null && keyword!=''? 'keyword=' + keyword + '&' : ''} + 'page=' +${page.totalPages-1}+ '&size=' + ${page.size}+'&sort='+${sortParam}}"
    201.                                                        title="Last Page" rel="Last Page">
    202.                                                         最后页
    203.                                                     a>
    204.                                                 li>
    205.                                             ul>
    206.                                         nav>
    207.                                     div>
    208.                                 div>
    209.  
    210.                             div>
    211.                         div>
    212.                     div>
    213.                 div>
    214.             section>
    215.         main>
    216.         <footer id="footer" class="footer" th:replace="fragments/footer :: footer">
    217.             <div class="copyright"> © Copyright <strong><span>Compnay Namespan>strong>. All Rights Reserveddiv>
    218.             <div class="credits"> with love <a href="https://freeetemplates.com/">FreeeTemplatesa>div>
    219.         footer>
    220.         <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short">i>a>
    221.         <script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}">script>
    222.         <script type="text/javascript" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}">script>
    223.         <script type="text/javascript" th:src="@{/assets/js/main.js}" >script>
    224.  
    225.         <script type="text/javascript">
    226.             $(document).ready(function () {
    227.                 $(".btn-delete").on("click", function (e) {
    228.                     e.preventDefault();
    229.                     link = $(this);
    230.  
    231.                     tutorialTitle = link.attr("tutorialTitle");
    232.                     $("#yesBtn").attr("href", link.attr("href"));
    233.                     $("#confirmText").html("Do you want to delete the Tutorial \" + tutorialTitle + "\<\/strong\>?");
    234.                     var myModal = new bootstrap.Modal(document.getElementById('confirmModal'), {
    235.                         keyboard: false
    236.                     });
    237.                     myModal.toggle();
    238.                 });
    239.  
    240.                 $("#btnClear").on("click", function (e) {
    241.                     e.preventDefault();
    242.                     $("#keyword").text("");
    243.                     window.location = "[[@{/loginlog}]]";
    244.                 });
    245.             });
    246.  
    247.             function changePageSize() {
    248.                 $("#searchForm").submit();
    249.             }
    250.         script>
    251.  
    252.     body>
    253. html>

    输出

  • 相关阅读:
    kafka笔记（二）：生产者-同步发送/异步发送/生产者分区/数据可靠性/数据去重/消息发送流程
    【小嘟陪你刷题01】LeetCode 448 && 238 && 728 && 724 && 349 && 747 && 面试题05.06 && 645
    要闻 | 自然资源部实景三维建设与城市精细化治理工程技术创新中心揭牌仪式暨第二季度工作推进会顺利召开
    java计算机毕业设计河东街摊位管理系统源码+mysql数据库+系统+LW文档+部署
    【Python】基本使用
    【uniapp】真机运行 访问电脑本地接口127.0.0.1网络失败（亲测有用！！）
    批处理生成带有时间戳或递增编号的临时文件名
    【微信小程序】使用npm包
    Redis总结
    做着做着感觉自媒体做不下去了？
  • 原文地址：https://blog.csdn.net/allway2/article/details/128160327