728x90
반응형
식 참고 페이지
Tutorial: Using Thymeleaf
1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a
www.thymeleaf.org
<!-- 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>
</dependencies>
package com.bit.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.GetMapping;
import com.bit.domain.MemberVo;
@Controller
public class SampleController {
@GetMapping("/sample1") //templates/sample1.html (동적) thymeleaf 가 들어가는 자리
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<MemberVo>();
for (int i = 0; i < 10; i++) {
list.add(new MemberVo(123, "u0" + i, "p0" + i, "홍길동" + i, new Timestamp(System.currentTimeMillis())));
}
model.addAttribute("list", list);
}
// 삼항연산자와 조건문
@GetMapping("/sample4")
public void sample4(Model model) {
List<MemberVo> list = new ArrayList<MemberVo>();
for (int i = 0; i < 10; i++) {
list.add(new MemberVo(123, "u000" + i%3, "p000" + i%3, "홍길동" + i, new Timestamp(System.currentTimeMillis())));
}
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<MemberVo>();
for (int i = 0; i < 10; i++) {
list.add(new MemberVo(123, "u000" + i%3, "p000" + i%3, "홍길동" + i, new Timestamp(System.currentTimeMillis())));
}
model.addAttribute("list", list);
model.addAttribute("result", "SUCCESS");
}
@GetMapping("/sample7")
public void sample7(Model model) {
model.addAttribute("now", new Date());
model.addAttribute("price", 123456789); //int -> Integer (Auto Boxing 이 일어남 Object 가 Integer로)
model.addAttribute("title", "This is a just sample.");
model.addAttribute("options", Arrays.asList("AAAA","BBB","CCC","DDD"));
}
// 보여기지만 하는 메서드기 때문에 GetMapping만 선언
@GetMapping("/sample8")
public void sample8(Model model) {
}
@GetMapping("/sample9")
public void sample9(Model model) {
}
}
package com.bit.domain;
import java.sql.Timestamp;
import lombok.AllArgsConstructor;
import lombok.Data;
@Data
@AllArgsConstructor
public class MemberVo {
private int mno;
private String mid;
private String mpw;
private String mname;
private Timestamp regdate;
}
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Thymeleaf Test Page</h1>
<h1 th:text="${greeting}">Thymeleaf Test Page</h1>
</body>
</html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h3 th:text = "${vo}">Thymeleaf Test Page</h3>
<div th:utext = "${'<h3>' + vo.mid + '</h3>'}"></div>
<div th:text = "${'<h3>' + vo.mid + '</h3>'}"></div>
</body>
</html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf3</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>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf4</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!--th:with taget : 지정한 이 영영(여기서는 테이블) 에서만 사용되는 지역변수-->
<table border="1" th:with = "target = 'u0001'">
<tr>
<td>MID</td>
<td>MNAME</td>
<td>REGDATE</td>
</tr>
<!--iterState : each의 상태변수-->
<tr th:each = "member : ${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><p>
<table border="1" th:with = "target = 'u0001'">
<tr>
<td>MID</td>
<td>MNAME</td>
<td>REGDATE</td>
</tr>
<!--iterState : each의 상태변수-->
<tr th:each = "member : ${list}">
<td>
<a href="/modify" th:if = "${member.mid==target}" th:text = "MODIFY"></a>
<p th:unless = "${member.mid==target}" th:text = "VIEW"></p>
</td>
<td th:text = "${member.mid==target? 'SECRET':member.mid}"></td>
<td th:text = "${member.mname}"></td>
<td th:text = "${#dates.format(member.regdate,'yyyy-mm-dd')}"></td>
</tr>
</table><p>
</body>
</html>
5
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf4</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script>
var result = [[${result}]];
</script>
<script th:inline = "javascript">
var result = [[${result}]];
</script>
</body>
</html>6
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf4</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body><!--inline : 텍스트를 inline 안에 선언-->
<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>
<!--원래 방법 보통은 생략을 한다 ** vars : 기본 객체-->
<div>[[${#vars.result}]]</div>
<div th:text = "${result}"></div>
</body>
</html>7
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf4</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h3 th:text = "${now}"></h3>
<!--3자리 단위로 출력, 연습용 하드코딩-->
<h3 th:text = "${#numbers.formatInteger(price,3,'COMMA')}"></h3>
<h3 th:text = "${#numbers.formatInteger(price,3,'POINT')}"></h3>
<!-- th: wiht, 여기서만 사용하는 숫자변수-->
<h3 th:with = "priceValue = 11199.84745">
<p th:text = "${#numbers.formatInteger(priceValue, 3, 'COMMA')}"></p>
<!--formatDecimal : 실수-->
<p th:text = "${#numbers.formatDecimal(priceValue, 5, 10, 'COMMA')}"></p>
</h3>
<h3 th:text = "${title}"></h3>
<!--utext : html코드를 출력시켜주는, s만 bold체로 출력된다-->
<span th:utext = "${#strings.replace(title, 's', '<b style= color:red;>s</b>')}"></span>
<!--ul li 형식사용(잘린걸 보기 쉽게) split사용해서 텍스트 자르기-->
<ul>
<li th:each = "str: ${#strings.listSplit(title, ' ')}">[[${str}]]</li>
</ul>
<!---->
<h3 th:text = "${options}"></h3>
</body>
</html>8
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf4</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!--외부파일 가져오는 th:insert = "~{}"-->
<div th:insert = "~{fragments/header::header}"></div>
<!--외부 링크 가져오기(절대경로)-->
<ul>
<li><a th:href="@{http://localhost/sample1}">sample1</a></li>
<li><a th:href="@{/sample1}">sample1</a></li>
<li><a th:href="@{~/sample1}">sample1</a></li>
<li><a th:href="@{/sample1(p1='aaa', p2='bbb')}">sample1</a></li>
</ul>
<div th:insert = "~{fragments/footer::footer}"></div>
</body>
</html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{/layout/layout1}">
<head>
<title>Thymeleaf4</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div layout:fragment="content">
<h1>Hello World</h1>
</div>
<th:block layout:fragment="script">
<script th:inline="javascript">
alert("Java Script Block");
</script>
</body>
</html>Boot05
1.Project->Spring Starter Project => boot05
- lombok
- Spring Boot DevTools
- Thymeleaf
- Spring Web Service
2.환경설정 : UTF-8
- Window -> Perferences -> General -> Workspace -> Text file encoding : UTF-8
3.application.properties
- spring.thymeleaf.cache=false
4.package : controller , domain
5.src - templates 안에 thymeleaf html 파일 저장
6.controller/ SampleController.java
7.templates/sample1.html728x90
반응형
'Spring > Spring framework' 카테고리의 다른 글
| Spring MVC Request life cycle (0) | 2021.12.24 |
|---|---|
| 인터셉터 (0) | 2021.08.19 |
| boot06 부트스트랩 이용한 게시판 만들기 (0) | 2021.08.11 |
| thymeleaf (0) | 2021.08.10 |
| JPA (0) | 2021.08.09 |
| boot04 회원게시판 (0) | 2021.08.09 |