728x90
반응형
SpringBoot에서 Thymeleaf를 사용하는 법을 알아보자. 이때 SpringBoot와 Thymeleaf는 같지 않음을 기억하자.
Thymeleaf
- OGNL(Object-Graph Navigation Language): 자바의 값에 접근하기 위한 오픈소스 표현식(template) 언어
- SSR(Server-Side Rendering)을 도와주는 template
- 디자이너와 개발자 간의 연결이 쉬워진다.
1. SSR와 CSR
▶︎ SSR(Server-Side Rendering): 서버에서 그려준다.
▶︎ CSR(Client-side Rendering): 클라이언트에서 그려준다. 빠른 속도가 장점
2. Thymeleaf 사용하기
▶︎ index.html -> src/main/resources/static
▶︎ hello.html(연결할 페이지) -> src/main/resources/templates
: controller에서 보내준 string값을 보내줬을 때 hello.html에서 아래와 같이 받아준다
1) 상단 <html> 태그에 xmlns:th="http://www.thymeleaf.org" 를 넣어준다.
2) body 태그 안에 th:text="${}" 형태를 넣어주면 controller에서 template형태로 rendering된 값이 담아진 html을 받을 수 있다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 th:text="${name}">Hello, Name!</h1>
<a href="/">index</a>
</body>
</html>
1) utility
▶︎ LeafController.java
@GetMapping("/util")
public String utility() {
return "utility";
}▶︎ utility.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p th:text="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd HH:mm')}">#dates objects</p>
<p th:text="${#numbers.formatInteger(3456.1234, 4)}">#numbers objects</p>
<p th:text="${#strings.toUpperCase('hello, springboot')}">#string objects</p>
<a href="/">index</a>
</body>
</html>▶︎ 결과
2) expression
▶︎ LeafController
@GetMapping("/expr")
public String expression(Model model) {
model.addAttribute("name", "Thymeleaf");
LeafDto dto = new LeafDto("java", 1);
model.addAttribute("dto", dto);
List<LeafDto> list = new ArrayList<LeafDto>();
list.add(new LeafDto("Database", 2));
list.add(new LeafDto("HTML/CSS", 3));
list.add(new LeafDto("jsp/Servlet", 4));
model.addAttribute("list", list);
return "expression";
}▶︎ expression.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>Expression</h1>
<p th:text="|Hello, ${name}|">Expression</p>
<!-- 방법1 -->
<p th:text="${dto.subject}">subject</p>
<p th:text="${dto.seq}">seq</p>
<!-- 방법2 -->
<div th:object="${dto}">
<p th:text="*{subject}"></p>
</div>
<!-- 방법3: list -->
<table border="1">
<tr>
<th>Subject</th>
<td>Seq</td>
</tr>
<tr th:each="dto: ${list}">
<th th:text="*{dto.subject}">dto.subject</th>
<td th:text="*{dto.seq}">dto.seq</td>
</tr>
</table>
<!-- 방법3에 대한 다른 예외 방법 -->
<table border="1">
<tr>
<th>Subject</th>
</tr>
<tr th:each="dto: ${list}">
<td th:object="${dto}">
<span th:text="*{subject}"></span>
<span th:text="*{seq}"></span>
</td>
</tr>
</table>
<hr>
<!-- 참/거짓 -->
<table border="1">
<tr th:if="${list} ne null">
<td>iflist가 null이 아닙니다.</td>
</tr>
<tr th:unless="${list} ne null">
<td>iflist가 null이 맞습니다. </td>
</tr>
</table>
<!-- 삼항연산자 -->
<p th:text="${list} ne null ? 'null이 아닙니다.' : 'null이 맞습니다.'">
<!-- for문 -->
<div th:each="num:${#numbers.sequence(1,3)}">
<th:block th:switch="${num}">
<p th:case="1" th:text="|this is ${num}|">1</p>
<p th:case="2" th:text="|second ${num}|">2</p>
<p th:case="3" th:text="|other ${num}|">3</p>
</th:block>
</div>
<!-- 경로설정 -->
<a th:href="@{index.html}">index</a><br>
<a th:href="@{util}">utility</a>
</body>
</html>▶︎ 결과
3) parameter
▶︎ LeafController.java
@GetMapping("/params")
public String parameters(HttpSession session) {
session.setAttribute("pw", "session val");
return "params";
}▶︎ param.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 th:text="|Hello, ${param.id}|">Hello, $Parameter id</h1>
<h1 th:text="|Hello, ${#request.getParameter('id')}">Hello, $Parameter id</h1>
<h3>[[${session.pw}]]</h3>
<h3 th:text="${session.pw}">$session pw</h3>
<h3 th:text="${session['pw']}">$session pw</h3>
</body>
</html>▶︎ 결과
4) static
▶︎ LeafController.java
@GetMapping("/static")
public String staticTest() {
return "static";
}▶︎ static.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<h1>RESOURCES!</h1>
</body>
</html>▶︎ style.css : static 폴더에 담아준다
h1{
color : red;
}
▶︎ script.js : static 폴더에 담아준다
onload=function(){
alert("test!!");
}▶︎ 결과
728x90
반응형
'Web > Spring' 카테고리의 다른 글
| [Spring]SpringBoot03_JPA (0) | 2020.11.11 |
|---|---|
| [Spring]SpringBoot01 (0) | 2020.11.10 |
| [Spring]MVC_08.jdbc_lamda(익명함수) (0) | 2020.11.07 |
| [Spring]MVC_07.update (0) | 2020.11.07 |
| [Spring]MVC_06.file (0) | 2020.11.06 |
