7.6. 책 상세 뷰 작성하기

책 컨트롤러에서 리턴한 상세 뷰를 작성하겠습니다.

패키지 익스플로어에서 src/main/resources > templates.book 아래에 read.html 파일을 생성합니다.

src/main/resources > templates.book > read.html

<html xmlns:th="http://www.thymeleaf.org">  
  <head>  
  <title>책 상세</title>  
  </head>  
  <body>  
        <h1>책 상세</h1>  
        <p><label>제목</label> : <span th:text="${bookReadResponseDTO.title}"></span>  
        <p><label>가격</label> : <span th:text="${#numbers.formatInteger(bookReadResponseDTO.price, 3, 'COMMA')}"></span>  
        <p><label>입력일</label> : <span th:text="${#temporals.format(bookReadResponseDTO.insertDateTime, 'yyyy-MM-dd HH:mm')}"></span>  
        <p>  
            <a th:href="@{/book/edit/{id}(id=${bookReadResponseDTO.bookId})}" th:text="수정"></a>           
        </p>  
        <form method="POST" th:action="@{/book/delete}" th:object="${bookReadResponseDTO}">  
            <input type="hidden" th:name="bookId" th:value="*{bookId}" />  
            <input type="submit" value="삭제" />  
        </form>  
        <p>  
            <a th:href="@{/book/list}" th:text="목록으로"></a>  
        </p>  
  </body>  
</html>

컨트롤러에서 반환한 bookReadResponseDTO 데이터는 아래와 같다고 가정해 보겠습니다.

{  
    "bookId" : 4,  
    "title" : "스프링 부트 하루만에 배우기",  
    "price" : 14000,  
    "insertDateTime" : "2023-01-20 12:48"  
}

html은 이렇게 보여집니다.

Copy
<html>  
  <head>  
  <title>책 상세</title>  
  </head>  
  <body>  
        <h1>책 상세</h1>  
        <p><label>제목</label> : <span>스프링 부트 하루만에 배우기</span>  
        <p><label>가격</label> : <span>14,000</span>  
        <p><label>입력일</label> : <span>2023-01-20 12:48</span>  
        <p>  
            <a href="/book/edit/4">수정</a>             
        </p>  
        <form method="POST" action="/book/delete",>  
            <input type="hidden" name="bookId" value="4" />  
            <input type="submit" value="삭제" />  
        </form>  
        <p>  
            <a href="/book/list">목록으로</a>  
        </p>  
  </body>  
</html>

티스토리툴바