728x90

 

참고 링크 : https://wikidocs.net/book/7601

오라클DB와 intelliJ로 작업하였습니다

이번에는 질문 목록에 "해당 질문에 달린 답변 개수"를 표시할 수 있는 기능을 추가해 보자.

코드의 분량은 많지 않지만, 게시판 서비스를 더욱 서비스답게 만들어 주는 기능이다.

답변 개수는 다음처럼 게시물 제목 바로 오른쪽에 표시하자.

 

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{layout}">
<!--layout:decorate 속성 : 템플릿의 레이아웃(부모템플릿)으로 사용할 템플릿을 설정-->


<div layout:fragment="content" class="container my-3"> <!--<th:block layout:fragment="content"></th:block>-->
    <table class="table">
        <thead class="table-dark">
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성일시</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="question, loop : ${paging}">
            <td th:text="${paging.getTotalElements - (paging.number * paging.size) - loop.index}"></td>
            <!--<td th:text="${loop.count}"></td>테이블항목에 번호추가-->
            <td>
                <a th:href="@{|/question/detail/${question.id}|}" th:text="${question.subject}"></a>
            <!--해당질문에 달린답변개수 표시-->
            <span class="text-danger small ms-2"
            th:if="${#lists.size(question.answerList) > 0}"
            th:text="${#lists.size(question.answerList)}"></span>
            </td>
            <!--날짜객체 날짜포맷에맞게 변환-->
            <td th:text="${#dates.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></td>
        </tr>
        </tbody>
    </table>

    <!-- 페이징처리 시작 -->
    <div th:if="${!paging.isEmpty()}"><!--paging.isEmpty:페이지존재여부(게시물있으면 false,없으면 true)-->
        <ul class="pagination justify-content-center">
            <li class="page-item" th:classappend="${!paging.hasPrevious} ? 'disabled'">
            <!-- !paging.hasPrevious - disabled : 이전페이지가 없으면 비활성화-->

                <a class="page-link" th:href="@{|?page=${paging.number-1}|}">
                <!--이전페이지 링크-->
                    <span>이전</span>
                </a>
            </li>


            <!--th:each :페이지 리스트 루프--> <!--#numbers.sequence(시작, 끝)-->
            <li th:each="page: ${#numbers.sequence(0, paging.totalPages-1)}"

                th:if="${page >= paging.number-5 and page <= paging.number+5}"

            th:classappend="${page == paging.number} ? 'active'"
            class="page-item">
            <!--page == paging.number : 현재페이지와 같으면 active 적용-->

                <a th:text="${page}" class="page-link" th:href="@{|?page=${page}|}"></a>
            </li>


            <li class="page-item" th:classappend="${!paging.hasNext} ? 'disabled'">
            <!-- !paging.hasNext - disabled : 다음페이지 없으면 비활성화-->

                <a class="page-link" th:href="@{|?page=${paging.number+1}|}">
                <!--다음페이지 링크-->
                    <span>다음</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- 페이징처리 끝 -->

    <a th:href="@{/question/create}" class="btn btn-primary">질문 등록하기</a> <!--질문버튼추가 부트스트랩으로 버튼디자인!-->

</div>


</html>

th:if="${#lists.size(question.answerList) > 0}"로 답변이 있는지 조사하고, 

th:text="${#lists.size(question.answerList)}"로 답변 개수를 표시했다.

#list.size(이터러블객체)는 이터러블 객체의 사이즈를 반환하는 타임리프의 유틸리티이다.

이제 답변이 있는 질문은 다음처럼 제목 오른쪽에 빨간색(text-danger) 숫자가 작게(small) 왼쪽 여백(ms-2)이 추가되어 표시된다.

728x90

'Follow Work > SpringbootBoard' 카테고리의 다른 글

[StringBoot] 회원가입 (19)  (0) 2022.08.16
[StringBoot] 스프링 시큐리티 (18)  (0) 2022.08.16
[StringBoot] 게시물 일련번호 추가 (16)  (0) 2022.08.16
[StringBoot] 페이징 (15)  (0) 2022.08.16
[StringBoot] 네비게이션바 (14)  (0) 2022.08.15

티스토리툴바