Thymeleaf Sample 예제
29 Nov 2019 | SpringBootThymeleaf 라이브러리
타임리프(Thymeleaf) 라이브러리는 템플릿을 이용해서 HTML 페이지를 편리하게 만들 수 있도록 도와줍니다.
Spring Initializer 웹사이트에서 ‘Thymeleaf’ 항목을 선택하고 프로젝트를 생성하면 됩니다.
SampleController.kt
@Controller
class SampleController {
@GetMapping("/hello")
fun hello(model: Model) {
model.addAttribute("message", "Hello, SnowDeer.")
}
}
hello.html
resources/templates/ 디렉토리 아래에 hello.html 파일을 생성합니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<h2>Thymeleaf Template Sample</h2>
</body>
</html>
그런 다음 웹브라우저에서 http://localhost:8080/hello 페이지에 접속하면 방금 생성한 hello.html 페이지가 뜨는 것을
확인할 수 있습니다.
그리고 위 코드를 아래처럼 수정을 하면,
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<h2 th:text="${message}">Thymeleaf Template Sample</h2>
</body>
</html>
SampleController에서 model.addAttribute 메소드로 넘긴 파라메터가 잘 전송된 것을 확인할 수 있습니다.
utext 명령어
utext 명령어는 HTML 문자열을 출력하는 명령어입니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<h2 th:text="${message}">Thymeleaf Template Sample</h2>
th:text
<div th:text='${"<h3>" + user.id + "</h3>"}'/>
<br>
th:utext
<div th:utext='${"<h3>" + user.id + "</h3>"}'/>
</body>
</html>
를 실행해보면
th:text
<h3>snowdeer</h3>
th:utext
snowdeer
와 같이 출력되는 것을 확인할 수 있습니다.
리스트 출력하기
리스트를 위한 반복문은 th:each 명령어를 이용해서 처리할 수 있습니다.
@Controller
class SampleController {
@GetMapping("/userList")
fun userList(model: Model) {
val list = ArrayList<UserVO>()
for (i in 0 until 10) {
val user = UserVO(uno = i.toLong(), id = "snowdeer$i", password = "1234", name = "Seo $i")
list.add(user)
}
model.addAttribute("list", list)
}
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<table border="1">
<tr>
<td>Id</td>
<td>Name</td>
<td>RegDate</td>
</tr>
<tr th:each="user : ${list}">
<td th:text="${user.id}"/>
<td th:text="${user.name}"/>
<td th:text="${#dates.format(user.regDate, 'yyyy-MM-dd hh-mm-ss')}"/>
</tr>
</table>
</body>
</html>
그리고 th:each에서 추가로 반복 상태에 대한 변수 값을 아래의 예제처럼 사용할 수도 있습니다.
<tr th:each="user, iter : ${list}">
<td th:text="${iter.index}"/>
<td th:text="${iter.size}"/>
<td th:text="${user.id}"/>
<td th:text="${user.name}"/>
<td th:text="${#dates.format(user.regDate, 'yyyy-MM-dd hh-mm-ss')}"/>
</tr>
그 외에도 count, odd, even, first, last 등의 값을 사용할 수도 있습니다.
특정 범위내 유효한 변수
특정 범위내에 유효한 변수는 th:with를 이용해서 구현할 수 있습니다. 예를 들면 다음과 같습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<table border="1" th:with="target='snowdeer5'">
<tr>
<td>Id</td>
<td>Name</td>
<td>RegDate</td>
</tr>
<tr th:each="user : ${list}">
<td th:text="${user.id == target ? 'SNOWDEER': user.id}"/>
<td th:text="${user.name}"/>
<td th:text="${#dates.format(user.regDate, 'yyyy-MM-dd hh-mm-ss')}"/>
</tr>
</table>
</body>
</html>
if, ~unless 구문
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<table border="1" th:with="target='snowdeer5'">
<tr>
<td>Id</td>
<td>Name</td>
<td>RegDate</td>
</tr>
<tr th:each="user : ${list}">
<td th:text="${user.id == target ? 'SNOWDEER': user.id}"/>
<td th:if="${user.name}">
<a href="/profile" th:if="${user.name=='Seo 3'}">Seo 3 Profile</a>
<p th:unless="${user.name=='Seo 3'}">Nothing</p>
</td>
<td th:text="${#dates.format(user.regDate, 'yyyy-MM-dd hh-mm-ss')}"/>
</tr>
</table>
</body>
</html>
자바스크립트에 연결하기
@Controller
class SampleController {
@GetMapping("/useJavascript")
fun useJavascript(model: Model) {
val text = "Hello"
model.addAttribute("text", text)
}
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<script th:inline="javascript">
var text = [[${text}]]
alert(text)
</script>
</body>
</html>