Thymeleaf는 JSP를 사용해봤다면 어려움없이 적응 가능합니다.
먼저 SampleDTO 클래스를 만들어주세요
import lombok.Builder;
import lombok.Data;
import java.time.LocalDateTime;
@Data
@Builder(toBuilder = true)
public class SampleDTO {
private Long sno;
private String first;
private String last;
private LocalDateTime regTime;
}
Lombok의 @Data는 Getter/Setter, toString(), equals(), hashCode()를 자동으로 생성합니다.
SampleController클래스에 작성해준 SampleDTO 객체를 Model에 추가해서 전달해줍니다
package com.test.ex3.controller;
import com.test.ex3.dto.SampleDTO;
import lombok.extern.log4j.Log4j2;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import java.time.LocalDateTime;
import java.util.List;
import java.util.stream.Collectors;
import java.util.stream.IntStream;
@Controller
@RequestMapping("/sample")
@Log4j2
public class SampleController {
@GetMapping("/ex1")
public void ex1(){
log.info("테스트 1~~~~~~~~~~~~~~~~~~~!!");
}
@GetMapping({"/ex2", "/exLink"})
public void exModel(Model model){
List<SampleDTO> list = IntStream.rangeClosed(1,20).asLongStream().mapToObj(i->{
SampleDTO dto = SampleDTO.builder()
.sno(i)
.first("첫번째____"+i)
.last("마지막_______100")
.regTime(LocalDateTime.now())
.build();
return dto;
}).collect(Collectors.toList());
model.addAttribute("list", list);
}
@GetMapping({"/exInline"})
public String exInline(RedirectAttributes redirectAttributes){
log.info("인라인__________");
SampleDTO dto = SampleDTO.builder()
.sno(100L)
.first("첫번째________100")
.last("마지막_______100")
.regTime(LocalDateTime.now())
.build();
redirectAttributes.addFlashAttribute("result", "success");
redirectAttributes.addFlashAttribute("dto",dto);
return "redirect:/sample/ex3";
}
@GetMapping("/ex3")
public void ex3(){
log.info("ex3");
}
}
DTO타입의 객체를 20개 추가하고 Model에 담아서 전송하는 부분입니다.
@GetMapping의 value 속성값을 {}로 처리하면 하나 이상의 URL을 지정할 수 있어요
이제 반복문 처리로 들어가봅시다.
Thymeleaf에서의 반복은 th:each라는 속성을 이용합니다. each 속성은 다음처럼 사용합니다.
th:each = "변수 : ${목록}"
/resources/templates/sample 에 (없는 폴더는 만드세요)
ex2.html을 추가해줍니다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
.target{
background-color : red;
}
</style>
<ul>
<th:block th:each="dto: ${list}">
<li th:text="${dto.sno %5 == 0}? ${dto.sno}:${dto.first}"></li>
</th:block>
</ul>
<ul>
<li th:each="dto, state : ${list}" th:class="${dto.sno % 5 == 0}? 'target'" th:text="${dto}">
</li>
</ul>
<ul>
<li th:each="dto, state : ${list}" th:text="${dto.sno % 5 == 0} ? ${dto.sno}:${dto.first}">
</li>
</ul>
<ul>
<li th:each="dto, state : ${list}" th:text="${dto.sno % 5 == 0} ? ${dto.sno}">
</li>
</ul>
<ul>
<li th:each="dto, state : ${list}">
<span th:if="${dto.sno % 5 == 0}" th:text="${'-------------------'+dto.sno}"></span>
<span th:unless="${dto.sno % 5 == 0}" th:text="${dto.first}"></span>
</li>
</ul>
<ul>
<li th:each="dto, state : ${list}" th:if="${dto.sno %5 == 0}">
[[${dto}]]
</li>
</ul>
<ul>
<li th:each="dto : ${list}">
[[${dto}]]
</li>
</ul>
</body>
</html>
ex3.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 th:text="${result}"></h1>
<h1 th:text="${dto}"></h1>
<script th:inline="javascript">
var msg = [[${result}]];
var dto = [[${dto}]];
</script>
</body>
</html>dto가 JSON 포맷의 문자열로 된 걸 볼 수 있습니다. 위의 코드를 자바스크립트 객체로 변환해서 사용하려면 JSON.parse('\"'+dto+'\"'); 와 같은 형태로 사용 가능합니다.
exLink.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li th:each="dto : ${list}">
<a th:href="@{/sample/exView/{sno}(sno = ${dto.sno})}">[[${dto}]]</a>
</li>
</ul>
<ul>
<li th:each="dto : ${list}">
<a th:href="@{/sample/exView(sno=${dto.sno})}">[[${dto}]]</a>
</li>
</ul>
</body>
</html>
/exLink/3 처럼 sno를 path로 이용하고 싶다면 위의 코드를 사용하고 ?sno= 처럼 사용하려면 아래처럼 사용하면 됩니다.