우당탕탕 개발일지
14일차_게시판 프로젝트(7) 본문
1. 페이징 처리 (3)
1. '페이지목록' 버튼 클릭
2. 페이지 정보 가져오기
3. 하단 페이지 번호 계산
1-1. '페이지목록' 버튼 클릭
index.html
1. board/paging 주소로 Get 방식 요청
1-2. 개념 설명
BoardController.java
@PageableDefault(page = 1)
-> 페이지 번호 1부터 시작
-> API 요청 시 Pageable 객체에 대한 파라미터를 넘겨주지 않아도 자동으로 기본값을 가진 Pageable 타입 파라미터를 제공
Pageable
-> 페이징 정보(페이지 번호, 페이지 크기, 정렬 방식 등)를 담고 있는 인터페이스
-> Spring JPA 에서 제공
Page 객체
-> Pageble을 파라미터로하여 가져온 결과물은 Page<SomeObject> 형태로 반환
-> Pageable 파라미터로 받아 결과를 반환
참고
https://velog.io/@albaneo0724/Spring-Pagination%EA%B3%BC-Page-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Pageable
https://velog.io/@songyuheon/Spring-Data-JPA%EC%9D%98-Page-%EA%B0%9D%EC%B2%B4
1-3. 페이지 정보 가져오기
BoardController.java
1. Service의 paging 함수 호출
BoardService.java
1. 변수 세팅
- page : DB로 요청한 페이지 번호 추출 -> pageable은 1부터 시작, page 는 0부터 시작이기때문에 -1
- pageLimit : 한 페이지에 보여줄 아이템 개수
2. Page<BoardEntity> 객체에 페이지 정보 담음.
-> findAll 함수와 PageRequest.of()를 사용하여 Page 객체 생성
-> 담은 정보 : 2번의 page, pageLimit & id 컬럼을 기준으로 아이템 정렬 (여기서 컬럼명은 entity에서 설정한 이름)
3. boardEntity(Page 객체) 가 가지고 있는 메소드 확인
4. Page<BoardEntity> 객체를 Page<BoardDTO>객체로 변환
-> 화면 상에 보여질 정보임으로 Entity 객체를 DTO로 변환
-> Map : for문처럼 하나씩 뽑아옴
-> 담은 정보 : id, Writer, Title, Hits, CreatedTime
5. Page<BoardDTO> 객체 반환
1-4. 하단 페이지 번호 계산
BoardController.java
1. blockLimit : 하단에 보여지는 페이지 번호 개수
2. startPage : 하단에 보여지는 첫번째 페이지 번호
- 현재 페이지가 2 or 3 일 경우 시작 페이지 1 설정
- 현재 페이지가 8 or 9 일 경우 시작 페이지 7 설정
3. endPage : 하단에 보여지는 마지막 페이지 번호
- 총 페이지가 8일 경우 마지막 숫자는 8로 나올 수 있도록
1-5. 데이터 반환
BoardController.java
1. model 객체에 필요 데이터 담기
boardList, startPage, endPage
2. paging.html 반환
1-6.유튜브 영상
https://www.youtube.com/watch?v=FyTeBkdXBrg&list=PLV9zd3otBRt7jmXvwCkmvJ8dH5tR_20c0&index=11
2. Paging 화면 설명
2-1. Paging.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="saveReq()">글작성</button>
<table>
<tr>
<th>id</th>
<th>title</th>
<th>writer</th>
<th>date</th>
<th>hits</th>
</tr>
<tr th:each="board: ${boardList}">
<td th:text="${board.id}"></td>
<td><a th:href="@{|/board/${board.id}?page=${boardList.number + 1}|}" th:text="${board.boardTitle}"></a></td>
<td th:text="${board.boardWriter}"></td>
<td th:text="*{#temporals.format(board.boardCreatedTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
<td th:text="${board.boardHits}"></td>
</tr>
</table>
<!-- 첫번째 페이지로 이동 -->
<!-- /board/paging?page=1 -->
<a th:href="@{/board/paging(page=1)}">First</a>
<!-- 이전 링크 활성화 비활성화 -->
<!-- boardList.getNumber() 사용자:2페이지 getNumber()=1 -->
<a th:href="${boardList.first} ? '#' : @{/board/paging(page=${boardList.number})}">prev</a>
<!-- 페이지 번호 링크(현재 페이지는 숫자만)
for(int page=startPage; page<=endPage; page++)-->
<span th:each="page: ${#numbers.sequence(startPage, endPage)}">
<!-- 현재페이지는 링크 없이 숫자만 -->
<span th:if="${page == boardList.number + 1}" th:text="${page}"></span>
<!-- 현재페이지 번호가 아닌 다른 페이지번호에는 링크를 보여줌 -->
<span th:unless="${page == boardList.number + 1}">
<a th:href="@{/board/paging(page=${page})}" th:text="${page}"></a>
</span>
</span>
<!-- 다음 링크 활성화 비활성화
사용자: 2페이지, getNumber: 1, 3페이지-->
<a th:href="${boardList.last} ? '#' : @{/board/paging(page=${boardList.number + 2})}">next</a>
<!-- 마지막 페이지로 이동 -->
<a th:href="@{/board/paging(page=${boardList.totalPages})}">Last</a>
</body>
<script>
const saveReq = () => {
location.href = "/board/save";
}
</script>
</html>
2-2. boardList
paging.html
1. 서버로 부터 받은 데이더 boardList
2. id, title, writer, createTime, hit 뿌림
3. 게시물 제목 선택 시, board/{id}?page={페이지 번호} 주소로 게시물 화면 요청
[ 주의 사항 ]
1. 주소 작성 | | 작성
-> 작성하지 않을 경우 컨트롤러로부터 받은 데이터 값을 가져오지 못하고 board.id 문자 그대로 읽음
2. boardList.number은 현재 페이지의 -1 값 반환 따라서 +1 를 하여 사람들이 보는 페이지 번호로 설정
2-3. startPage, endPage
paging.html
1. First
- 주소 : board/paging?page=1
- 동작 : (page=1)
- 설명 : 항상 page가 1번
2. prev
- 주소 : board/paging?page={boardList.getnumber}
- 동작 : ${boardList.first} ? '#' : @{/board/paging(page=${boardList.number})}
- 설명 : 현재 페이지가 처음이면 이동 X, 그렇지 않으면 하나 앞으로 (여기서 number는 현재 페이지의 -1 값 반환)
3. next
- 주소 : board/paging?page={boardList.getnumber+2}
- 동작 : ${boardList.last} ? '#' : @{/board/paging(page=${boardList.number + 2})}
- 설명 : 현재 페이지가 마지막이면 이동 X, 그렇지 않으면 하나 뒤로 (여기서 number는 현재 페이지의 -1 값 반환)
4. last
- 주소 : board/paging?page=last
- 동작 : (page=${boardList.totalPages})
- 설명 : 항상 page가 게시물 개수 번호
https://velog.io/@muchogusto/a-href-%EB%AC%B4%EC%97%87%EC%9D%84-%EC%9D%98%EB%AF%B8
2-4. 유튜브 영상
https://www.youtube.com/watch?v=u9fzUJ9Petk&list=PLV9zd3otBRt7jmXvwCkmvJ8dH5tR_20c0&index=12
3. 상세화면에서 목록화면 넘어가기
3-1. 목록 버튼 클릭
detail.html
1. 목록 버튼 클릭
2. listReq 함수 호출
3. "/board/paging?page="+page 주소로 Get 방식 요청
3-2. 페이지 데이터 전달
BoardController.java
1. detail.html 부를때, 페이지 정보도 같이 전달
2. 코드 : @PageableDefault(page=1) Pageable pageable
3. pageable.getPageNumber 값을 model에 'page' 이름으로 전달
3-.3 유튜브 영상
https://www.youtube.com/watch?v=WBKo1jXFVqU&list=PLV9zd3otBRt7jmXvwCkmvJ8dH5tR_20c0&index=13
'개발 프로젝트 > 게시물 프로젝트' 카테고리의 다른 글
| 16일차_게시판 프로젝트(9) (0) | 2024.03.26 |
|---|---|
| 15일차_게시판 프로젝트(8) (0) | 2024.03.22 |
| 13일차_게시판 프로젝트(6) (0) | 2024.03.20 |
| 12일차_게시판 프로젝트(5) (0) | 2024.03.19 |
| 11일차_게시판 프로젝트(4) (0) | 2024.03.18 |
