728x90
반응형

 

다음 예제는 데이터가있는 테이블  렌더링하는 두 가지 다른 흥미로운 조각 사용법을 보여줍니다 . 

 

이것은 변경할 수있는 테이블 헤더와 데이터가 렌더링되는 본문의 두 가지 중요한 부분으로 구성된 재사용 가능한 테이블 조각입니다.

<table>
    <thead th:fragment="fields(theadFields)">
        <tr th:replace="${theadFields}">
        </tr>
    </thead>
    <tbody th:fragment="tableBody(tableData)">
        <tr th:each="row: ${tableData}">
            <td th:text="${row.id}">0</td>
            <td th:text="${row.name}">Name</td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

 

 

 

 

이 테이블을 사용하려면 필드 함수를 사용하여 자체 테이블 헤더를 전달할 수 있습니다 . 

 

헤더는 myFields 클래스  참조됩니다 . 테이블 본문은 데이터를 매개 변수로 tableBody 함수 에 전달하여로드됩니다 .

<body>
    <header th:replace="fragments/general.html :: header"> </header>
    <table>
        <thead th:replace="fragments/tables.html
              :: fields(~{ :: .myFields})">
            <tr class="myFields">
 
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <div th:replace="fragments/tables.html
          :: tableBody(tableData=${data})">
        </div>
    </table>
    <div th:replace="fragments/general.html :: footer"></div>
</body>

 

 

 

이것이 최종 페이지의 모양입니다.

<body>
    <div>
        <h1>Thymeleaf Fragments sample</h1>
    </div>
    <div>Data received</div>
    <table>
        <thead>
            <tr class="myFields">
 
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>John Smith</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>Jane Williams</td>
            </tr>
        </tbody>
    </table>
    <footer>
        <a href="/spring-thymeleaf/fragments">Fragments Index</a> |
        <a href="/spring-thymeleaf/markup">Markup inclussion</a> |
        <a href="/spring-thymeleaf/params">Fragment params</a> |
        <a href="/spring-thymeleaf/other">Other</a>
    </footer>
</body>

 

 

 

템플릿 관리를 쉽게 할 수있는 강력한 도구 인 Thymeleaf Fragments를 사용하여보기 구성 요소를 재사용하는 방법을 살펴 보았습니다.

 

728x90
반응형
728x90
반응형

 

Spring Boot 의 기본 템플릿 엔진은 Thymeleaf 로 사용되고 있습니다.

 

Jpa 의 저장 또한 LocalDateTime 으로 아래처럼 사용하고 있습니다.

 

 

 

일반적인 방법으로는 java.util.date 객체를 사용하고 있지만 Java8 에서는 LocalDateTime 을 사용하도록 권장하고 있기때문에 Format 방식도 조금 다르게 진행합니다.

 

그래서 간단하게 Thymeleaf 3.0에서 Format하는 방식을 설명하겠습니다.

 

백엔드에서 아래와같이 model로 넘기는 가정으로 진행하겠습니다.

 

model.addAttribute("standardDate", new Date());

model.addAttribute("localDateTime", LocalDateTime.now());

model.addAttribute("localDate", LocalDate.now());

model.addAttribute("timestamp", Instant.now());

 

 

 

 

날짜  어떻게 백엔드쪽에 설정 되었는지에 상관없이 , 그것은 선택된 표준에 따라 보여 질 것입니다. 

 

standardDate는 #에 의해 처리 될 것입니다 날짜 유틸리티입니다. 새로운 LocalDateTime, LocalDate  Instant 클래스는 # temporals 유틸리티에 의해 처리됩니다 . 

 

<h1>Format ISO</h1>

<p th:text="${#dates.formatISO(standardDate)}"></p>

<p th:text="${#temporals.formatISO(localDateTime)}"></p>

<p th:text="${#temporals.formatISO(localDate)}"></p>

<p th:text="${#temporals.formatISO(timestamp)}"></p>

 

 

 

자동으로 하지 않고 원하는 format을 설정하는 방식입니다.

 

<h1>Format manually</h1>

<p th:text="${#dates.format(standardDate, 'dd-MM-yyyy HH:mm')}"></p>

<p th:text="${#temporals.format(localDateTime, 'dd-MM-yyyy HH:mm')}"></p>

<p th:text="${#temporals.format(localDate, 'MM-yyyy')}"></p>

 

 

 

 

 

# temporals.format (...)을 사용 하여 Instant 클래스를 처리 할 수 ​​없습니다 . 

 

UnsupportedTemporalTypeException 이 발생 합니다. 또한 LocalDate의 서식 지정은 특정 날짜 필드 만 지정하고 시간 필드를 건너 뛰는 경우에만 가능합니다.

 

자세한 설명은 아래의 url을 통해 확인하실수 있습니다.

 

https://www.baeldung.com/dates-in-thymeleaf

 

How to Work with Dates in Thymeleaf | Baeldung

A quick and practical guide to working with dates in Thymeleaf

www.baeldung.com

728x90
반응형

+ Recent posts