티스토리 뷰

백엔드/ThymeLeaf

[Thymeleaf] 데이터 출력

거북이의 기술블로그 2024. 10. 16. 23:23

Model Attribute 출력

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Thymeleaf 테스트 </title>
</head>
<body>
  <ul>
    <li>th:text 출력: <span th:text="${data}"></span></li>
    <li> 컨텐츠 직접 출력 = [[${data}]]</li>
  </ul>
</body>
</html>
  • 속성에서 출력
    • ${data} 이용하여 Model.attribute("data", [data값]) 출력 
  • 컨텐츠 내부 직접 출력
    • "[[]]" 을 이용하여 직접 출력 가능

 

 

객체 출력

** 사전 준비 **

public class User{
     private String username;
     public String getUsername(){
              return this.username;
     }
}

List<User> list = new ArrayList<>();
Map<String, User> map = new HashMap<>();

list.add(userA);
map.put('userA', userA);


model.addAttribute("user", userA);
model.addAttribute("users", list);
model.addAttribute("userMap", map);
  • 객체 한개 출력 ("user")
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Thymeleaf 테스트 </title>
</head>
<body>
  <div>
    <ul>
      <!-- Object : user ( private String username ; ) -->
      <li> username : <span th:text="${user.username}"></span></li>
      <li> username : <span th:text="${user['username']}"></span></li>
      <li> username : <span th:text="${user.getUsername()}"></span></li>
    </ul>
  </div>
</body>
</html>

 

  • 리스트 출력 ("users")
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Thymeleaf 테스트 </title>
</head>
<body>
  <div>
    <ul>
      <!-- List User users; --> 
      <li><span th:text="${users[0].username}"></span></li>
      <li><span th:text="${users[0]['username']"></span></li>
      <li><span th:text="${users[0].getUsername()}"</span></li>
    </ul>
  </div>
</body>
</html>
  • Map 출력 ("userMap")
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Thymeleaf 테스트 </title>
</head>
<body>
  <div>
    <ul>
      <!-- Map User userMap; --> 
      <li><span th:text="${userMap['userA'].username}"></span></li>
      <li><span th:text="${userMap['userA']['username']"></span></li>
      <li><span th:text="${userMap['userA'].getUsername()}"</span></li>
    </ul>
  </div>
</body>
</html>

'백엔드 > ThymeLeaf' 카테고리의 다른 글

[Thymeleaf] 리터럴 (상수)  (0) 2024.10.16
[Tymeleaf] URL 링크 ( th:href="@~" )  (0) 2024.10.16
[Tymeleaf] 지역변수 선언 (th:with)  (0) 2024.10.16
Thymeleaf 기본  (0) 2024.09.23
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함