Thymeleaf 사용법을 알아보기 위해 예제를 진행해보자. 서버에서 가공한 데이터를 뷰 쪽에 전달해 해당 데이터를 출력하는 예제, 서버로 데이터를 전송하는 예제 등을 다뤄보자
th:text
com.shop 아래에 dto 패키지 생성 후 뷰 영역에서 사용할 ItemDto 클래스를 생성하자.
데이터를 주고받을 때에는 Entity 클래스 자제를 반환하면 안되고, 데이터 전달용 객체 (Data Transfer Object)를 생성해서 사용해야 한다.
⇒ 데이터베이스의 설계를 외부에 노출할 필요도 없고, 요청 및 응답 객체가 항상 엔티티와 같지는 않다.
com.shop.dto.ItemDto
package com.shop.dto;
import lombok.Getter;
import lombok.Setter;
import java.time.LocalDate;
import java.time.LocalDateTime;
@Getter
@Setter
public class ItemDto {
private Long id;
private String itemNm;
private Integer price;
private String itemDetail;
private String sellStatCd;
private LocalDateTime regTime;
private LocalDateTime updateTime;
}ItemDto 객체를 하나 생성해서 모델에 데이터를 담아 뷰에 전달하자
com.shop.controller.ThymeleafExController.java 에 아래 코드 추가
@GetMapping(value= "/ex02")
public String thymeleafExampleEx02(Model model){
ItemDto itemDto = new ItemDto();
itemDto.setItemDetail("상품 상세 설명");
itemDto.setItemNm("테스트 상품1");
itemDto.setPrice(10000);
itemDto.setRegTime(LocalDateTime.now());
model.addAttribute("itemDto", itemDto);
return "thymeleafEx/thymeleafEx02";
}전달 받은 itemDto 객체를 th:text를 이용해 출력
resources/templates/thymeleafEx02.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>상품 데이터 출력 예제</h1>
<div>
상품명: <span th:text="${itemDto.itemNm}"></span>
</div>
<div>
상품상세설명: <span th:text="${itemDto.itemDetail}"></span>
</div>
<div>
상품등록일: <span th:text="${itemDto.regTime}"></span>
</div>
<div>
상품가격: <span th:text="${itemDto.price}"></span>
</div>
</body>
</html>
입력한 데이터가 화면에 잘 출력된다!
th:each
여러 개의 데이터를 가지고 있는 컬렉션 데이터를 화면에 출력해보자
com.shop.controller.ThymeleafExController.java 에 아래 코드 추가
@GetMapping(value="/ex03")
public String thymeleafExample03(Model model){
List<ItemDto> itemDtoList = new ArrayList<>();
for(int i=1; i<=10; i++){
ItemDto itemDto = new ItemDto();
itemDto.setItemDetail("상품 상세 설명" + i);
itemDto.setItemNm("테스트 상품" + i);
itemDto.setPrice(1000*i);
itemDto.setRegTime(LocalDateTime.now());
itemDtoList.add(itemDto);
}
model.addAttribute("itemDoList", itemDtoList);
return "thymeleafEx/thymeleafEx03";
}resources/templates/thymeleafEx03.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>상품 리스트 출력 예시</h1>
<table border="1">
<thead>
<tr>
<td>순번</td>
<td>상품명</td>
<td>상품설명</td>
<td>가격</td>
<td>상품등록일</td>
</tr>
</thead>
<tbody>
<tr th:each="itemDto, status: ${itemDoList}">
<!-- 현재 순회하고 있는 데이터의 인덱스 출력 -->
<td th:text="${status.index}"></td>
<td th:text="${itemDto.itemNm}"></td>
<td th:text="${itemDto.itemDetail}"></td>
<td th:text="${itemDto.price}"></td>
<td th:text="${itemDto.regTime}"></td>
</tr>
</tbody>
</table>
</body>
</html>status에는 현재 반복에 대한 상태 데이터가 존재함. 변수명은 status 대신 다른 것을 사용해도 무방함!
th:if, th:unless
조건문 살펴보기.
순번이 짝수이면 '짝수'를, 출력하고 짝수가 아니라면 '홀수'를 출력해주는 예제
com.shop.controller.ThymeleafExController.java 에 아래 코드 추가
@GetMapping(value="/ex04")
public String thymeleafExample04(Model model){
List<ItemDto> itemDtoList = new ArrayList<>();
for(int i=1; i<=10; i++){
ItemDto itemDto = new ItemDto();
itemDto.setItemDetail("상품 상세 설명" + i);
itemDto.setItemNm("테스트 상품" + i);
itemDto.setPrice(1000*i);
itemDto.setRegTime(LocalDateTime.now());
itemDtoList.add(itemDto);
}
model.addAttribute("itemDtoList", itemDtoList);
return "thymeleafEx/thymeleafEx04";
}resources/templates/thymeleafEx04.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>상품 리스트 출력 예시</h1>
<table border="1">
<thead>
<tr>
<td>순번</td>
<td>상품명</td>
<td>상품설명</td>
<td>가격</td>
<td>상품등록일</td>
</tr>
</thead>
<tbody>
<tr th:each="itemDto, status: ${itemDoList}">
<!-- 인덱스가 짝수라면 status.even은 true가 됨. '짝수' 출력 -->
<td th:if="${status.even}" th:text="짝수"></td>
<td th:unless="${status.even}" th:text="홀수"></td>
<td th:text="${itemDto.itemNm}"></td>
<td th:text="${itemDto.itemDetail}"></td>
<td th:text="${itemDto.price}"></td>
<td th:text="${itemDto.regTime}"></td>
</tr>
</tbody>
</table>
</body>
</html>
th:switch, th:case
여러 개의 조건을 처리해야 할 때 사용
resources/templates/thymeleafEx04.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>상품 리스트 출력 예시</h1>
<table border="1">
<thead>
<tr>
<td>순번</td>
<td>상품명</td>
<td>상품설명</td>
<td>가격</td>
<td>상품등록일</td>
</tr>
</thead>
<tbody>
<tr th:each="itemDto, status: ${itemDtoList}">
<td th:switch="${status.even}">
<span th:case=true>짝수</span>
<span th:case=false>홀수</span>
</td>
<td th:text="${itemDto.itemNm}"></td>
<td th:text="${itemDto.itemDetail}"></td>
<td th:text="${itemDto.price}"></td>
<td th:text="${itemDto.regTime}"></td>
</tr>
</tbody>
</table>
</body>
</html>
th:href
링크를 처리하는 문법.
링크의 종류?
1. Absolute URL: 이동할 서버의 URL을 입력해주는 Absolute URL 방식은 http:// 또는 https://로 시작.
2. Context-relative URL: 가장 많이 사용되는 방식. 우리가 실행하는 애플리케이션의 서버 내부를 이동하는 방법.
com.shop.controller.ThymeleafExController.java 에 아래 코드 추가
@GetMapping(value = "/ex05")
public String thymeleafExample05(Model model){
return "thymeleafEx/thymeleafEx05";
}resources/templates/thymeleafEx05.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Thymeleaf 링크처리 예제 페이지</h1>
<div>
<a th:href="@{/thymeleaf/ex01}">예제1 페이지 이동</a>
</div>
<div>
<a th:href="@{https://www.thymeleaf.org/}">thymeleaf 공식 페이지 이동</a>
</div>
</body>
</html>
파라미터 전달하는 경우
resources/templates/thymeleafEx05.html
<div>
<a th:href="@{/thymleaf/ex06(param1='파라미터 데이터1', param2='파라미터 데이터2')}">thymeleaf 파라미터 전달</a>
</div>전달할 매개변수를 입력한 경로 끝에 "(key=value)" 구조로 입력.
com.shop.controller.ThymeleafExController.java 에 아래 코드 추가
@GetMapping(value = "/ex06")
public String thymeleafExample06(String param1, String param2, Model model){
model.addAttribute("param1", param1);
model.addAttribute("param2", param2);
return "thymeleafEx/thymeleafEx06";
}resources/templates/thymeleafEx06.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>파라미터 전달 예제</h1>
<div th:text="${param1}"></div>
<div th:text="${param2}"></div>
</body>
</html>