develog

[spring boot] Thymeleaf 본문

카테고리 없음

[spring boot] Thymeleaf

냐옴 2020. 4. 8. 16:16

Thymeleaf

  • Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
  • 파일 확장자는 .html

사용 선언

  • html 태그에 xmlns:th 속성(attribute)을 추가한다
<html xmlns:th="http://www.thymeleaf.org">

Simple expressions:

${...} Variable Expressions
@{...} Link URL Expressions
*{...} Selection Variable Expressions
#{...} Message Expressions
~{...} Fragment Expressions

기본객체

${#request}
${#response}
${#session}
${#servletContext}
${#locale}

편의객체

## request parameter 데이터 꺼내기
## uri 가 '/test?paramData=123' 인 경우
${param.paramData}

## session 객체 사용
## session.setAttribute("sessionData", "123");
${session.sessionData}

## spring bean 에 접근
${@helloBean.hello('spring')}

유틸리티 객체

#message
#uris
#dates
#calendars
#temporals
#numbers
#strings
#objects
#bools
#arrays
#lists
#ids

Link URL

/items
<a th:href="@{/items}"></a>

/items/2
<a th:href="@{/items/{itemId}(itemId=${item.id})}"></a>
<a th:href="@{|/items/${item.id}|}"></a>

/items?id=2&name=itemA&price=333
<a th:href="@{/items(id=${item.id}, name=${item.name}, price=${item.price})}"></a>

/items/2?name=itemA&price=333
<a th:href="@{/items/{id}(id=${item.id}, name=${item.name}, price=${item.price})}"></a>

location.href='/items/2'
<a th:href="|location.href='@{|/items/${item.id}|}'|"></a>
<a th:href="|location.href='@{/items/{itemId}(itemId=${item.id})}'|"></a>

text

<p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>

text (escape, unescape)

<!-- escape 처리는 아래 2가지 방법으로 처리 가능 -->
<span th:text></span>      <!-- attribute 사용 -->
<span> [[${data}]] </span> <!-- -->

<!-- unescape 처리는 아래 2가지 방법으로 처리 가능 -->
<span th:utext></span>     <!-- attribute 사용 -->
<span> [(${data})] </span> <!-- -->
// Controller 에서 model 에 html 태그 데이터를 담는다
model.addAttribute("data", "<span style='color: red;'>Thymeleaf</span>");
<!-- HTML -->

<!-- escape 로 처리하면 태그 내용이 텍스트로 그대로 출력 -->
th:text 사용O, Hello <span th:text="${data}">NONE</span><br>
th:text 사용X, <span>Hello [[${data}]]</span><br>

<!-- unescape 로 처리하면 태그 내용이 HTML 로 랜더링되서 출력 -->
th:text 사용O, Hello <span th:utext="${data}">NONE</span><br>
th:text 사용X, <span>Hello [(${data})]</span><br>

브라우저 출력 결과

SpringEL

# Object
${user.username}
${user['username']}
${user.getUserName()}

# List
${userList[0].username}
${userList[0]['username']}
${userList[0].getUserName()}

# Map
${userMap['userA'].username}
${userMap['userA']['username']}
${userMap['userA'].getUserName()}

지역변수 th:with

<div th:with="first=${users[0]}">
    <span th:text="${first.username}"></span>
</div>

literal

## 기본적으로 '' 를 사용
<span th:text="'hello'"></span>
<span th:text="'hello world'"></span>
<span th:text="'hello ' + ${data}"></span>

## 공백없는 문자는 '' 생략 가능
<span th:text="hello"></span>

## || 사용
<span th:text="|hello world|"></span>
<span th:text="|hello ${data}|"></span>

date

  • model 에 localDateTime 변수 등록
model.addAttribute("localDateTime", LocalDateTime.now());
  • #temporals
default = <span th:text="${localDateTime}"></span>
format  = <span th:text="${#temporals.format(localDateTime, 'yyyy-mm-dd HH:mm:ss')}"></span>

year    = <span th:text="${#temporals.year(localDateTime)}"></span>
month   = <span th:text="${#temporals.month(localDateTime)}"></span>
day     = <span th:text="${#temporals.day(localDateTime)}"></span>

hour    = <span th:text="${#temporals.hour(localDateTime)}"></span>
minute  = <span th:text="${#temporals.minute(localDateTime)}"></span>
second  = <span th:text="${#temporals.second(localDateTime)}"></span>

operation

  • 산술연산
<span th:text="10 + 2"></span>
<span th:text="10 - 2"></span>
<span th:text="10 * 2"></span>
<span th:text="10 / 2"></span>
<span th:text="10 % 2"></span>
결과
<span>12</span>
<span>8</span>
<span>20</span>
<span>5</span>
<span>0</span>
  • 비교연산
eq ( == )
ne ( != )
gt ( >  )
ge ( >= )
lt ( <  )
le ( <= )

<span th:text="1 eq 10"></span><br>  <!-- false -->
<span th:text="1 ne 10"></span><br>  <!-- true -->
<span th:text="1 gt 10"></span><br>  <!-- false -->
<span th:text="1 ge 10"></span><br>  <!-- false -->
<span th:text="1 lt 10"></span><br>  <!-- true -->
<span th:text="1 le 10"></span><br>  <!-- true -->

<span th:text="1 == 10"></span><br>  <!-- false -->
<span th:text="1 != 10"></span><br>  <!-- true -->
<span th:text="1 > 10"></span><br>   <!-- false -->
<span th:text="1 >= 10"></span><br>  <!-- false -->
<span th:text="1 < 10"></span><br>   <!-- true -->
<span th:text="1 <= 10"></span><br>  <!-- true -->
  • 조건식 ( ? : )
<span th:text="(10 % 2 == 0) ? 'even' : 'odd'"></span>
  • Elvis 연산자 ( ?: '' )
${data}?: '데이터가 없습니다' = <span th:text="${data}?: '데이터가 없습니다'"></span>
${nullData}?: '데이터가 없습니다' = <span th:text="${nullData}?: '데이터가 없습니다'"></span>
  • No operation ( ?: _ ), html 내용을 그대로 출력
${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다</span>
${nullData}?: _ = <span th:text="${nullData}?: _">데이터가 없습니다</span>

if, unless

<span th:text="조건에_만족하면_출력" th:if="${user.age lt 20}"></span>
<span th:text="조건에_만족하지_않으면_출력" th:unless="${user.age ge 20}"></span>

switch, case

<td th:switch="${user.age}">
    <span th:case="10">10 age</span>
    <span th:case="20">20 age</span>
    <span th:case="*">age</span>
</td>

loop

  • th:each
<tr th:each="prod, info : ${prods}">
    <td>
        index=<span th:text="${info.index}">index</span>
        count=<span th:text="${info.count}">count</span>
        size=<span th:text="${info.size}">size</span>
        odd=<span th:text="${info.odd}">odd</span>
        even=<span th:text="${info.even}">even</span>
        first=<span th:text="${info.first}">first</span>
        last=<span th:text="${info.last}">last</span>
        current=<span th:text="${info.current}">current</span>
    </td>
    <td th:text="${prod.name}">Onions</td>
    <td th:text="${prod.price}">2.41</td>
    <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>
  • th:block
<th:block th:each="user : ${users}">
    <div>
    </div>
    
    <div>
    </div>
</th:block>

comment

<!--/* thymeleaf comment 1 */-->

<!--/* 
    thymeleaf comment 2
    <span th:text="thymeleaf text">default text</span>
*/-->

<!--/*-->
    thymeleaf comment 3
    <span th:text="thymeleaf text">default text</span>
<!--*/-->

th:inline="javascript"

  • source code
<script th:inline="javascript">
    var username = [[${user.username}]];
    var age = [[${user.age}]];
    
    var username2 = /*[[${user.username}]]*/ "test username";
    
    var user = [[${user}]];
</script>
  • result html
<script>
    var username = "userA";
    var age = 10;
    
    var username2 = "userA";
    
    var user = {"username":"userA","age":10};
</script>

 

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

 

Tutorial: Using Thymeleaf

1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a

www.thymeleaf.org

 

저작자표시 비영리 동일조건 (새창열림)
Comments