▶ Springboot 의 2가지 특징
1. IoC (Inversion of Control) / DI (Dependency Injection) => @Autowired
2. AOP (Aspect Oriented Programming)
▶ Thymeleaf
1. 개념
- 스프링 부트에서 권장하는 View Template
- HTML5 문법을 사용하는 HTML 태그 및 속성 기반의 Template Engine
- 텍스트, HTML, XML, JavaScript, CSS 등 사용 가능
- Controller에서 View로 넘겨준 Model을 이용하여 내용 출력
2. 표현 방식
1) Variable Expression : ${ ... }
2) Iteration
- th:each (반복문)
- th:if , th:unless , th:switch (조건문)
- 링크 URL 표현식 : @{ ... }
2. 예제 소스코드
// ThymeleafController.java //
package com.example.basic.Controller;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import com.example.basic.model.Emp;
import com.example.basic.repository.EmpRepository;
@Controller
public class ThymeleafController {
@Autowired
EmpRepository empRepository;
@GetMapping("/user")
public String user(Model model) {
Map<String, Object> user = null;
user = new HashMap<>();
user.put("userId", "z");
user.put("userName", "zoo");
user.put("userAge", 25);
model.addAttribute("user", user);
return "home";
}
@GetMapping("/userList")
public String userList(Model model) {
List<Map<String, Object>> userList = new ArrayList<>();
Map<String, Object> user = null;
user = new HashMap<>();
user.put("userId", "a");
user.put("userName", "apple");
user.put("userAge", 21);
userList.add(user);
user = new HashMap<>();
user.put("userId", "b");
user.put("userName", "banana");
user.put("userAge", 22);
userList.add(user);
user = new HashMap<>();
user.put("userId", "c");
user.put("userName", "carrot");
user.put("userAge", 23);
userList.add(user);
model.addAttribute("userList", userList);
return "home";
}
@GetMapping("/empList")
public String empList(Model model) {
List<Emp> empList = empRepository.findAll();
model.addAttribute("empList", empList);
return "empList";
}
}
// empList.html //
<html xmlns="http://www.thymeleaf.org">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
<head>
<title>Emp List</title>
</head>
<body>
<table class="table table-dark table-striped table-hover">
<thead>
<tr>
<th>EMPNO</th>
<th>ENAME</th>
<th>JOB</th>
<th>MGR</th>
<th>HIREDATE</th>
<th>SALARY</th>
<th>COMM</th>
<th>DEPTNO</th>
<th>DNAME</th>
<th>LOC</th>
</tr>
</thead>
<tbody>
<tr th:each="emp : ${empList}">
<td>[[${emp.empno}]]</td>
<td>[[${emp.ename}]]</td>
<td>[[${emp.job}]]</td>
<td>[[${emp.mgr}]]</td>
<td>[[${emp.hiredate}]]</td>
<td>[[${emp.sal}]]</td>
<td>[[${emp.comm}]]</td>
<td>[[${emp.depts.deptno}]]</td>
<td>[[${emp.depts.dname}]]</td>
<td>[[${emp.depts.loc}]]</td>
</tr>
</tbody>
</table>
</body>
</html>
