Thymeleaf 입문
2021. 8. 10. 14:08ㆍ(구)공부/SpringBoot
728x90
프로젝트 생성시 Thymeleaf 넣어서 생성
resources/static 은 정적 html 자리
resources/templates 은 동적 html 자리
유틸객체
application.properties
server.port=8888
spring.thymeleaf.cache=false
package com.bit.controller;
import java.sql.Timestamp;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import com.bit.domain.MemberVO;
@Controller
public class SampleController {
@GetMapping("/sample1") // templates/sample1.html
public void sample1(Model model) {
model.addAttribute("greeting", "하이");
}
@GetMapping("/sample2")
public void sample2(Model model) {
MemberVO vo = new MemberVO(123, "u00", "p00", "홍길동", new Timestamp(System.currentTimeMillis()));
model.addAttribute("vo", vo);
}
@GetMapping("/sample3")
public void sample3(Model model) {
List<MemberVO> list = new ArrayList<>();
for (int i = 0; i < 10; i++) {
MemberVO vo = new MemberVO(123, "u0" + i, "p0" + i, "홍길동" + i, new Timestamp(System.currentTimeMillis()));
list.add(vo);
}
model.addAttribute("list", list);
}
@GetMapping("/sample4")
public void sample4(Model model) {
List<MemberVO> list = new ArrayList<>();
for (int i = 0; i < 10; i++) {
MemberVO vo = new MemberVO(123, "u000" + i % 3, "p000" + i % 3, "홍길동" + i,
new Timestamp(System.currentTimeMillis()));
list.add(vo);
}
model.addAttribute("list", list);
}
@GetMapping("/sample5")
public void sample5(Model model) {
model.addAttribute("result", "SUCCESS");
}
@GetMapping("/sample6")
public void sample6(Model model) {
List<MemberVO> list = new ArrayList<>();
for (int i = 0; i < 10; i++) {
MemberVO vo = new MemberVO(123, "u000" + i % 3, "p000" + i % 3, "홍길동" + i,
new Timestamp(System.currentTimeMillis()));
list.add(vo);
}
model.addAttribute("list", list);
model.addAttribute("result", "SUCCESS");
}
}스프링때와는 return 없이 바로 간다.
예시
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf3</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>hi page</h1>
<h1 th:text="${vo}"> Thymeleaf Test Page</h1>
<div th:utext='${"<h3>"+vo.mid+"</h3>"}'></div>
<div th:text='${"<h3>"+vo.mid+"</h3>"}'></div>
</body>
</html>결과는
hi page
MemberVO(mno=123, mid=u00, mpw=p00, mname=홍길동, regdate=2021-08-10 14:32:15.767)
u00
<h3>u00</h3>저런 식으로 utext는 html언어로 풀이를 해서 표시하고 text는 그대로 표시함
반복문 쓰기
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>sample3</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table border="1">
<tr>
<td>INDEX</td>
<td>SIZE</td>
<td>ODD/EVEN</td>
<td>MID</td>
<td>MNAME</td>
<td>REGDATE</td>
</tr>
<!--iterState는 each의 상태변수-->
<tr th:each="member,iterState: ${list}">
<td th:text="${iterState.index}"></td>
<td th:text="${iterState.size}"></td>
<td th:text="${iterState.odd} + ' ' + ${iterState.even}"></td>
<td th:text="${member.mid}"></td>
<td th:text="${member.mname}"></td>
<!--dates는 보조객체-->
<td th:text="${#dates.format(member.regdate,'yyyy-MM-dd')}"></td>
</tr>
</table>
</body>
</html>
삼항연산자와 if문
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>sample4</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!--th:with="target='u0001' 테이블 안에서만 사용가능함-->
<table border="1" th:with="target='u0001'">
<tr>
<td>MID</td>
<td>MNAME</td>
<td>REGDATE</td>
</tr>
<!--iterState는 each의 상태변수-->
<tr th:each="member,iterState: ${list}">
<td th:text="${member.mid == target} ? 'SECRET':member.mid"></td>
<td th:text="${member.mname}"></td>
<!--dates는 보조객체-->
<td th:text="${#dates.format(member.regdate,'yyyy-MM-dd')}"></td>
</tr>
</table>
<table border="1" th:with="target='u0001'">
<tr>
<td>MID</td>
<td>MNAME</td>
<td>REGDATE</td>
</tr>
<tr th:each="member: ${list}">
<td>
<a href="/modify" th:if="${member.mid==target}" th:text="MODIFY">
<p th:unless="${member.mid==target}" th:text="VIEW">
</td>
<td th:text="${member.mname}"></td>
<td th:text="${#dates.format(member.regdate,'yyyy-MM-dd')}"></td>
</tr>
</table>
</body>
</html>스크립트의 차이
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>sample4</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script>
var result = [[${result}]]; //SUCCESS
</script>
<script th:inline="javascript">
var result = [[${result}]]; //"SUCCESS"
</script>
</body>
</html>다양한 사용법
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>sample6</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table border="1" th:inline="text">
<tr>
<td>MID</td>
<td>MNAME</td>
<td>REGDATE</td>
</tr>
<tr th:each="member:${list}">
<td>[[${member.mid}]]</td>
<td>[[${member.mname}]]</td>
<td>[[${member.regdate}]]</td>
</tr>
</table>
<div>[[${result}]]</div>
<div>[[${#vars.result}]]</div> //vars는 보조객체인데 생략가능
<div th:text="${result}"></div> //3개 다 같은 결과를 가짐
</body>
</html>#numbers #strings
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>sample7</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h3 th:text="${now}"></h3>
<h3 th:text="${#numbers.formatInteger(price,3,'COMMA')}"></h3>
<h3 th:text="${#numbers.formatInteger(price,3,'POINT')}"></h3>
<h3 th:with="priceValue=11199.84745">
<p th:text="${#numbers.formatInteger(priceValue,3,'COMMA')}"></p>
<p th:text="${#numbers.formatDecimal(priceValue,5,10,'POINT')}"></p>
</h3>
<h3 th:text="${title}"></h3>
<span th:utext="${#strings.replace(title,'s','<b style=color:red>s</b>')}"></span>
<ul>
<li th:each="str:${#strings.listSplit(title,' ')}">[[${str}]]</li>
</ul>
<h3 th:text="${options}"></h3>
</body>
</html>
디자인 활용 https://html5boilerplate.com/
HTML5 ★ BOILERPLATE
The web’s most popular front-end template which helps you build fast, robust, and adaptable web apps or sites.
html5boilerplate.com
에서 다운 받은 뒤 resources/static 에 풀기
pom.mxl에 추가
<!-- https://mvnrepository.com/artifact/nz.net.ultraq.thymeleaf/thymeleaf-layout-dialect -->
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.5.3</version>
</dependency>
728x90
'(구)공부 > SpringBoot' 카테고리의 다른 글
| 게시판 만들기 - 2(페이징) (2) | 2021.08.12 |
|---|---|
| 게시판 만들기 - 1 (0) | 2021.08.11 |
| JPA 다양한 select 메소드 (0) | 2021.08.06 |
| JUnit (0) | 2021.08.05 |
| 어노테이션 (0) | 2021.08.05 |