-
게시판 만들기 📋 페이징 (PageRequest) 처리Spring Boot/게시판 만들기 2022. 6. 21. 15:23
이전 글) 목록, 조회, 등록, 상세 페이지 구현하기
게시판 만들기 📋 목록, 조회, 등록, 상세 페이지 구현하기
이전 글) 데이터베이스(MariaDB) 연동 및 JPA 입력, 조회, 수정, 삭제 구현 게시판 만들기 📋 데이터베이스(MariaDB) 연동 및 JPA 입력, 조회, 수정, 삭제 구현 이전 글) 스프링 부트 프로젝트 생성하기
hnev.tistory.com
[개발환경] - 윈도우 MariaDB 설치 및 접속하기
🌈 페이징 (PageRequest) 처리
📌 개발환경
IntelliJ Community, SpringBoot, Java 1.8, Gradle, Jar, Thymeleaf, JPA, MariaDB
Springframework의 PageRequest를 통해 간단하게 페이징 처리를 할 수 있습니다.
서비스 수정
BoardService.java
finaAll() 메서드에서 페이징 처리를 위해 아래와 같이 변경합니다.
public List<Board.ResponseDto> findAll() { return boardRepository.findAll(Sort.by(Sort.Direction.DESC, "registerTime")).stream().map(Board.ResponseDto::new).collect(Collectors.toList()); }↓
PageRequest.of에 지정된 크기에 맞게 조회합니다.
게시글 번호와 페이징 navigation에 사용될 매개변수 paging, totalCnt, totalPage도 추가합니다.public HashMap<String, Object> findAll(Integer page, Integer size) { HashMap<String, Object> resultMap = new HashMap<String, Object>(); Page<Board> list = boardRepository.findAll(PageRequest.of(page, size, Sort.by(Sort.Direction.DESC, "registerTime"))); resultMap.put("list", list.stream().map(Board.ResponseDto::new).collect(Collectors.toList())); resultMap.put("paging", list.getPageable()); resultMap.put("totalCnt", list.getTotalElements()); resultMap.put("totalPage", list.getTotalPages()); return resultMap; }컨트롤러 수정
BoardController.java
컨트롤러에서도 페이지 번호와 페이지 사이즈를 받는 RequestParam을 추가합니다.
값이 없을 경우 defaultValue 값이 생성됩니다.@GetMapping("/board") public String getBoardIndexPage(Model model, @RequestParam(required = false, defaultValue = "0") Integer page, @RequestParam(required = false, defaultValue = "5") Integer size) { model.addAttribute("result", boardService.findAll(page, size)); return "/board/index"; }게시판 화면 수정
HTML - /board/list.html
게시글 번호와 pagination ui를 추가합니다.
전체 코드
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Title</title> <link rel="stylesheet" href="/css/bootstrap.min.css"> <script src="/js/jquery-3.6.0.min.js"></script> <script src="/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-5"> <h2>Toy - Board</h2> <div class="mt-3"> <a href="/board/write" class="btn btn-primary">Register</a> </div> <table class="table table-striped"> <thead> <tr> <th scope="col">No.</th> <th scope="col">Title.</th> <th scope="col">Register ID.</th> <th scope="col">Register Time.</th> </tr> </thead> <tbody> <tr th:each="list, status : ${result.list}" th:with="paging=${result.paging}"> <th scope="row"><span th:text="${result.totalCnt - status.index - (paging.pageNumber * paging.pageSize)}"></span></th> <td> <a th:href="@{/board/write(id=${list.id})}"> <span th:text="${list.title}"></span> </a> </td> <td th:text="${list.registerId}">Otto</td> <td th:text="${list.registerTime}">@mdo</td> </tr> </tbody> </table> <div class="row"> <div class="col"> <ul class="pagination"> <li class="page-item" th:each="index : ${#numbers.sequence(1, result.totalPage)}" th:with="paging=${result.paging}"> <a class="page-link" th:classappend="${paging.pageNumber == (index-1)} ? bg-primary : bg-secondary" th:href="@{/board(page=${index - 1}, size=${paging.pageSize})}"> <span class="text-white" th:text="${index}"></span> </a> </li> </ul> </div> </div> </div> </body> </html>테스트
전체 게시글 9개 중 size 5개에 맞게 정상적으로 노출됩니다.
사이즈는 고정인 채로 페이지 번호만 변경됩니다.
10개씩 노출하려면 size를 10으로 지정하면 됩니다.
/board?page=0&size=5
↪ 데이터 조회 1~5
/board?page=1&size=5
↪ 데이터 조회 6~10
Developer Step
📁 Project Download
GitHub
Reference
'Spring Boot > 게시판 만들기' 카테고리의 다른 글
게시판 만들기 📋 목록, 조회, 등록, 상세 페이지 구현하기 (0) 2022.06.20 게시판 만들기 📋 데이터베이스(MariaDB) 연동 및 JPA 입력, 조회, 수정, 삭제 구현 (0) 2022.06.18 스프링 부트 프로젝트 생성하기 (0) 2022.06.17