[스프링부트]_게시판_5

JSB게시판 프로젝트 게시판만들기_5

정리 할 내용

1. 맵핑 정리
2. 진행 과정 정리
3. 오류/애러 정리
4. 해결 과정 정리

---

지난 진행 과정

1. 서비스 활용
2. 세부 페이지 제작
3. 댓글 기능 제작
4. 웹 꾸미기
5. 게시글 등록 기능 제작

이번포스팅 진행 과정

1. 네비게이션 바 추가
2. 페이지 표기
3. 게시물 번호 지정/시간순 배열
4. 답변 개수 표기

---

1. 네비게이션 바 추가

보통 홈페이지를 이용하다보면 위쪽이나 옆쪽에 어느 페이지를 들어가든지 계속 표기되는 전체 메뉴를 본 적 있을것이다. 매 번 도메인 페이지로 돌아가지않고도 다른 페이지로 바로 갈 수 있게해주는 이 기능을 네이게이션 바라고한다.

사진의 위쪽에 보면 게시판이라는 문구와 로그인문구가 표기된다.

Template안에 HTML 코드로 해결.

---

2.페이지 표기
사진의 아래쪽을 보면 이전 / 다음 그리고 그사이에 페이지 표시가있다. 게시글 수가 많아져서 페이지가 길어 질 때, 이를 일정 단위로 끊어서 다음 페이지에 표기되게 해준다.

특정한 맵핑없이 스프링부트에서 제공하는 Import로 해결.

---

3.게시물 번호 지정/시간순 배열
사진을 보면 가장 상단의 마지막 게시글이 153번이고 내림차순으로 번호가 내려간다. 기존의 사이트는 가장 최근에 올린 글이 1번이었다.

원리는 간단하다. Reverse개념으로 HTML 코드로 해결.

게시물 번호 = 전체 게시물 개수 - (현재 페이지 * 페이지당 게시물 개수) - 나열 인덱스

 <td th:text="${paging.getTotalElements - (paging.number * paging.size) - loop.index}"></td>

paging.getTotalElements = 전체 게시물 개수
paging.number = 현재 페이지 번호
paging.size = 페이지당 게시물 개수
loop.index = 나열 인덱스 ( 0부터 시작 )

---

4. 답변 개수 표기

   게시글에 답변을 달아보았다.
   답변이 달려 있는 게시글 제목 옆에는 숫자가 표기된다.

   이 기능 역시 HTML 코드로 쉽게 해결 된다.

    <span class="text-danger small ms-2"
                          th:if="${#lists.size(question.answerList) > 0}" 
                          th:text="${#lists.size(question.answerList)}">
                      </span>

th:if="${#lists.size(question.answerList) > 0}" = 댓글 유무 확인

th:text="${#lists.size(question.answerList)}" = 댓글 개수 표기

댓글이 0개 이상이면 그 개수를 표기한다. 이런 의미다.

---

이번 과정에는 매핑이나 Java코드를 전혀 사용하지 않았다.
사용자의 편의를 위한 화면 구성으로 HTML 코드와 스프링부트에서 제공하는 Import만 사용하였다.