Thymeleaf is a template engine that plays a key role in web frameworks, though, and is one of its most important components as they are in charge of producing the user interface or view layer (usually in XHTML or HTML form).
Here is a very nice article that you can refer to for introducing yourself to the Thymeleaf world.
In this post, we will see the basic syntaxes of Thymeleaf.
https://www.baeldung.com/thymeleaf-in-spring-mvc
First, you must write this tag to use the thymeleaf tags in the HTML or XHTML.
<html xmlns:th="http://www.thymeleaf.org">And, save the objects in a controller class and call with the thymeleaf tags.
SampleController.java
package com.example.demo.controller;
import java.sql.Timestamp;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.example.demo.model.Member;
@Controller
public class SampleController {
@RequestMapping("sample1")
public String sample1(Model model) {
// model.addAttribute("greeting", "Hello World");
model.addAttribute("greeting", "Hello World");
return "sample1";
}
@RequestMapping("sample2")
public String sample2(Model model) {
Member member = new Member(1,"test","1234","Meadow", new Timestamp(System.currentTimeMillis()));
model.addAttribute("member", member);
return "sample2";
}
@RequestMapping("sample3")
public String sample3(Model model) {
List<Member> list = new ArrayList<Member>();
for(int i=0; i<10; i++) {
Member member = new Member(1,"test"+i,"1234","Meadow"+i, new Timestamp(System.currentTimeMillis()));
list.add(member);
}
model.addAttribute("list", list);
return "sample3";
}
@RequestMapping("sample4")
public String sample4(Model model) {
List<Member> list = new ArrayList<Member>();
for(int i=0; i<10; i++) {
Member member = new Member(i,"u000"+i %3, // 3으로 나눈 나머지 id
"p000"+i %3, // 3으로 나눈 나머지 pw
"Meadow"+i,
new Timestamp(System.currentTimeMillis()));
list.add(member);
}
model.addAttribute("list", list);
return "sample4";
}
@RequestMapping("sample5")
public String sample5(Model model) {
String result = "SUCCESS";
model.addAttribute("result", result);
return "sample5";
}
@RequestMapping("sample6")
public String sample6(Model model) {
model.addAttribute("now", new Date());
model.addAttribute("price", 123456789);
model.addAttribute("title", "Sample title");
model.addAttribute("options", Arrays.asList("AAA","BBB","CCC","DDD"));
return "sample6";
}
@RequestMapping("sample7")
public String sample7(Model model) {
return "sample7";
}
}
To print out String : th:text
<h1 th:text="${greeting}">Thymeleaf Test page</h1>If you just write ${greeting}, it will not work as a thymeleaf tag.
To print DTO object : th:text
<h1 th:text="${member}">Thymeleaf Test page</h1>To print out the data from the controller class : th:utext
<div th:utext='${"<h3>"+member.no+"</h3>"}'></div>
<div th:utext='${"<h3>"+member.id+"</h3>"}'></div>
<div th:utext='${"<h3>"+member.pw+"</h3>"}'></div>
<div th:utext='${"<h3>"+member.name+"</h3>"}'></div>
<div th:utext='${"<h3>"+member.regdate+"</h3>"}'></div>
To print out list object : the:each="member : ${list}"
<tr th:each="member : ${list}">
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>
<td th:text="${#dates.format(member.regdate,'yyyy-MM-dd HH:mm:ss')}"></td>
</tr>
To run loops : th:each
<table border="1" align="center" width="300">
<tr>
<td>ID</td>
<td>NAME</td>
<td>REGDATE</td>
</tr>
<tr th:each="member : ${list}">
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>
<td th:text="${#dates.format(member.regdate,'yyyy-MM-dd HH:mm:ss')}"></td>
</tr>
</table><br>
To define variables : th:with
<table border="1" align="center" width="300" th:with="target='u0001'">If tag : th:if ~ th:unless
<table border="1" align="center" width="300" th:with="target='u0001'">
<tr>
<td>ID</td>
<td>NAME</td>
<td>REGDATE</td>
</tr>
<tr th:each="member : ${list}">
<td th:if="${member.id}">
<a href="/modify" th:if="${member.id == target}">Modify</a>
<p th:unless="${member.id == target}">View</p>
</td>
<td th:text="${member.name}"></td>
<td th:text="${#dates.format(member.regdate,'yyyy-MM-dd HH:mm:ss')}"></td>
</tr>
</table>
To run javascript with thymeleaf : th:inline
<script th:inline="javascript">
var result = [[${result}]];
document.write(result);
</script>
<script>
var result = [[${result}]];
document.write(result);
</script>To set the format of dates
<h2 th:text="${#dates.format(now, 'yyyy-MM-dd HH:mm:ss')}"></h2>
To set the format of numbers
<h2 th:text="${#numbers.formatInteger(price, 3, 'COMMA')}"></h2>
To print out bold
<span th:utext="${#strings.replace(title,'t','<b>t</b>')}"></span>
To break down into words and print out as a list (parsing)
<ul>
<li th:each="str:${#strings.listSplit(title,' ')}">[[${str}]]</li>
</ul>
To link
<ul>
<li><a th:href="@{http://localhost:80/sample1}">sample1</a></li>
<li><a th:href="@{/sample1}">sample1</a></li>
<li><a th:href="@{~/sample1}">sample1</a></li>
<!-- To send the value -->
<!-- http://localhost/Thymeleaf/sample1?p1=aaa&p2=bbb -->
<li><a th:href="@{/sample1(p1='aaa', p2='bbb')}">sample1</a></li>
</ul>
To print out list with for loop
HomeController.java
package com.example.demo.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class HomeController {
@RequestMapping("/listTest")
public void listTest(Model model) {
List list = new ArrayList();
for(int i=1; i<=20; i++) {
list.add("Data:"+i);
}
model.addAttribute("name", "Sample Data");
model.addAttribute("list", list);
}
}listTest.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf Example</title>
</head>
<body>
<p th:text=" 'Hello, ' + ${name} +'!' "/>
<ul>
<li th:each="data : ${list}" th:text="${data}"></li>
</ul>
</body>
</html>
'Spring & Spring Boot' 카테고리의 다른 글
| Spring Boot) Spring Boot with MyBatis (0) | 2022.11.19 |
|---|---|
| Spring Boot) Basics of Spring Boot /Lombok (0) | 2022.10.18 |
| Spring) How to start a new Spring Framework Project[2] (0) | 2022.10.14 |
| Spring) How to start a new Spring Framework Project[1] (0) | 2022.10.11 |
| Spring) Spring with MyBatis / Configuration (0) | 2022.10.08 |