저번 포스팅에서 간단하게 CRUD만을 활용해 게시판을 구현해 보았다
이번에는 JPA에서 제공해주는 매우 쉽고 편한 페이징 처리를 해볼려고 한다
저번에 만들어 두었던 게시판을 활용해도 좋고 새로운 프로젝트에 활용해도 상관은 없다
나의 경우는 지난 시간에 게시판을 만들어 놓은 소스를 활용 할 것이다
[Spring-Boot] JPA를 활용하여 간단한 CRUD 게시판 만들기(1)
[Spring-Boot] JPA를 활용하여 간단한 CRUD 게시판 만들기(1)
시작하기 전에 간단하게 JPA를 알아보자면 Java Persistence API의 약자로 자바 진영의 ORM 기술 표준이다. 여기서 ORM 도 간단하게 알고 넘어가자면 Object Relational Mapping의 약자로 객체-관계 매핑 이란 뜻
ldevlog.tistory.com
프로젝트가 없다면 이 글을 참고하여 게시판을 만들어 보고 적용시켜 보아도 좋다
BoardServcie.java 파일에 페이징 처리를 한 list를 가져오기 위해 소스를 수정해 주었다
public Page<Board> list(int page) {
return boardRepository.findAll(PageRequest.of(page, 3, Sort.by(Sort.Direction.DESC, "idx")));
}Page<> 를 반환하는 메소드를 만들고 인자로 넘어온 페이지는 우리가 봐야될 페이지이고 3은 데이터를 3개씩 페이징 처리를 한다는 뜻이다 기본적인 사이트에서는 10, 20, 30개 단위로 하겠지만 나는 데이터를 넣기가 귀찮아서 3개씩 쪼개는 걸로 했다 그리고 뒤에 오는 Sort는 데이터를 정렬하는 방법인데 idx를 기준으로 내림차순 정렬을 하게 되면 최신순으로 데이터가 보여질 것이다
그럼 controller 단에서도 소스를 수정해 주면 된다
@GetMapping("/list")
public String list(Model model, @RequestParam(required = false, defaultValue = "0", value = "page") int page) {
Page<Board> listPage = boardService.list(page); // 불러올 페이지의 데이터 1페이지는 0부터 시작
int totalPage = listPage.getTotalPages(); // 총 페이지 수
model.addAttribute("board", listPage.getContent());
model.addAttribute("totalPage", totalPage);
return "list";
}리스트 페이지의 파라미터로 page를 받아 주고 service에서 Page를 반환하는 list 메소드를 호출해 준다.
그 뒤에 getTotalPages 는 총 페이지 수를 반환해 주는데 우리가 만약 100개의 데이터를 10개씩 쪼갠다고 하면 반환값은 총 10페이지인 10이 될것이다
그리고 getContent 는 현재 페이지에서 검색된 데이터만 List형태로 반환시켜 주기 때문에 화면 단으로 보내 그대로 그려주기만 하면된다
list.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.main {
width: 700px;
height: 700px;
margin: auto;
margin-top: 100px;
}
table {
text-align: center;
}
.register {
text-align: center;
display: inline-block;
border: 1px solid;
width: 80px;
height: 30px;
background-color: mistyrose;
text-decoration: none;
line-height: 30px;
}
ul {
text-align: center;
margin-top: 20px;
}
ul li {
list-style-type: none;
display: inline-block;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="main">
<a href="/board/register" class="register">글 쓰기</a>
<table>
<colgroup>
<col width="50">
<col width="300">
<col width="150">
<col width="200">
</colgroup>
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>등록일</th>
</tr>
</thead>
<tbody>
<tr th:each="board : ${board}">
<td th:text="${board.idx}"></td>
<td><a th:href="@{/board/detail/{idx}(idx=${board.idx})}" th:text="${board.title}"></a></td>
<td th:text="${board.writer}"></td>
<td th:text="${#temporals.format(board.createdAt, 'yyyy-MM-dd HH:mm')}"></td>
</tr>
</tbody>
</table>
<div class="pagination">
<ul>
<li th:each="page : ${#numbers.sequence(0, totalPage - 1)}">
<a th:href="@{/board/list(page=${pageStat.index})}" th:text="${pageStat.index + 1}"></a>
</li>
</ul>
</div>
</div>
</body>
</html>맨 하단에 pagination 이라는 div태그에 페이지를 그려주었다
나의 경우는 12개의 데이터를 3개로 쪼개서 4가 반환이 되었고 페이지를 1부터 그려주기 위해서 0부터 totalPage 에 -1을 해주었다 그럼 0, 1, 2, 3 까지 페이지가 그려 질 것이고 화면상에는 +1을 해주어 1, 2, 3, 4 라는 페이지가 표시되게 해주었다 uri은 그대로 0, 1, 2, 3 으로 보내주면 된다
그럼 이렇게 게시판 하단부에 페이징 처리된 모습이 보일 것이다
정말 너무나 간단하게 페이징 처리를 해보았다
현재 여기에는 이전페이지, 다음페이지, 페이징 갯수 등 아무것도 구현되있는 것이 없고 단순히 페이지번호 처리만 한 것인데 지금 해본 페이징처리를 잘 응용해서 더 완벽한 페이징을 구현 해 보면 좋을 것 같다
'프로그래밍 > JAVA' 카테고리의 다른 글
| [JPA] EntityListeners 활용 (0) | 2021.07.17 |
|---|---|
| [JPA] QueryMethod 활용 (0) | 2021.07.17 |
| [Spring-Boot] JPA를 활용하여 간단한 CRUD 게시판 만들기(3) (1) | 2021.07.15 |
| [Spring-Boot] JPA를 활용하여 간단한 CRUD 게시판 만들기(2) (0) | 2021.07.14 |
| [Spring-Boot] JPA를 활용하여 간단한 CRUD 게시판 만들기(1) (0) | 2021.07.14 |
