1. Spring 프로젝트
pom.xml 라이브러리
<dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf</artifactId> <version>3.0.11.RELEASE</version> </dependency> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring5</artifactId> <version>3.0.11.RELEASE</version> </dependency>
Spring 4 프로젝트의 경우 thymeleaf-spring5 대신 thymeleaf-spring4 라이브러리를 사용해야 합니다 .
SpringTemplateEngine 클래스 는 모든 구성 단계를 수행.
Java 구성 파일에서 이 클래스를 bean으로 구성
@Bean @Description("Thymeleaf Template Resolver") public ServletContextTemplateResolver templateResolver() { ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver(); templateResolver.setPrefix("/WEB-INF/views/"); templateResolver.setSuffix(".html"); templateResolver.setTemplateMode("HTML5"); return templateResolver; } @Bean @Description("Thymeleaf Template Engine") public SpringTemplateEngine templateEngine() { SpringTemplateEngine templateEngine = new SpringTemplateEngine(); templateEngine.setTemplateResolver(templateResolver()); templateEngine.setTemplateEngineMessageSource(messageSource()); return templateEngine; }
templateResolver 빈 속성 접두사 및 접미사 는 각각 webapp 디렉토리 내 보기 페이지의 위치 와 파일 이름 확장자를 나타냅니다.
Spring MVC 의 ViewResolver 인터페이스는 컨트롤러가 반환한 뷰 이름을 실제 뷰 객체에 매핑합니다. ThymeleafViewResolver 는 ViewResolver 인터페이스를 구현 하며 뷰 이름이 주어지면 렌더링할 Thymeleaf 뷰를 결정하는 데 사용됩니다.
통합의 마지막 단계는 ThymeleafViewResolver 를 빈으로 추가
@Bean @Description("Thymeleaf View Resolver") public ThymeleafViewResolver viewResolver() { ThymeleafViewResolver viewResolver = new ThymeleafViewResolver(); viewResolver.setTemplateEngine(templateEngine()); viewResolver.setOrder(1); return viewResolver; }
2. 스프링 부트
pom.xml
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> <version>2.3.3.RELEASE</version> </dependency>
th:text=”#{key}” 태그 속성을 사용 하여 속성 파일의 값을 표시할 수 있습니다.
이것이 작동하려면 속성 파일을 messageSource 빈으로 구성
@Bean @Description("Spring Message Resolver") public ResourceBundleMessageSource messageSource() { ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource(); messageSource.setBasename("messages"); return messageSource; }
welcome.message 와 연결된 값을 표시하는 Thymeleaf HTML 코드
<span th:text="#{welcome.message}" />
3. 사용법
1)
model.addAttribute("serverTime", dateFormat.format(new Date()));
다음은 serverTime 속성 의 값을 표시하는 HTML 코드
Current time is <span th:text="${serverTime}" />
2)
id 와 name이라는 두 개의 필드가 있는 Student 모델 클래스를 정의
public class Student implements Serializable { private Integer id; private String name; // standard getters and setters }
컨트롤러 클래스의 모델 속성으로 학생 목록을 추가
List<Student> students = new ArrayList<Student>(); // logic to build student data model.addAttribute("students", students);
마지막으로 Thymeleaf 템플릿 코드를 사용하여 학생 목록을 반복하고 모든 필드 값을 표시
<tbody> <tr th:each="student: ${students}"> <td th:text="${student.id}" /> <td th:text="${student.name}" /> </tr> </tbody>
3)조건식
학생 모델 에 성별 필드를 추가
public class Student implements Serializable { private Integer id; private String name; private Character gender; // standard getters and setters }
다음과 Thymeleaf 코드를 사용
<td> <span th:if="${student.gender} == 'M'" th:text="Male" /> <span th:unless="${student.gender} == 'M'" th:text="Female" /> </td>
4) 스위치 와 케이스
<td th:switch="${student.gender}"> <span th:case="'M'" th:text="Male" /> <span th:case="'F'" th:text="Female" /> </td>
5) 사용자 입력 처리 예
<form action="#" th:action="@{/saveStudent}" th:object="${student}" method="post"> <table border="1"> <tr> <td><label th:text="#{msg.id}" /></td> <td><input type="number" th:field="*{id}" /></td> </tr> <tr> <td><label th:text="#{msg.name}" /></td> <td><input type="text" th:field="*{name}" /></td> </tr> <tr> <td><input type="submit" value="Submit" /></td> </tr> </table> </form>
.
StudentController 클래스는 양식
@Controller public class StudentController { @RequestMapping(value = "/saveStudent", method = RequestMethod.POST) public String saveStudent(@ModelAttribute Student student, BindingResult errors, Model model) { // logic to process input data } }
@RequestMapping 주석은 컨트롤러 메서드를 양식에 제공된 URL과 매핑합니다 . 주석이 달린 메소드 saveStudent() 는 제출된 양식에 필요한 처리를
수행합니다. 마지막으로 @ModelAttribute 주석은 양식 필드를 학생 개체에 바인딩합니다.
6) 유효성 검사 오류 표시
#fields.hasErrors() 함수를 사용 하여 필드에 유효성 검사 오류가 있는지 확인할 수 있습니다. 그리고 #fields.errors() 함수를 사용하여 특정 필드에 대한 오류를 표시합니다. 필드 이름은 이 두 함수의 입력 매개변수입니다.
<ul> <li th:each="err : ${#fields.errors('id')}" th:text="${err}" /> <li th:each="err : ${#fields.errors('name')}" th:text="${err}" /> </ul>
필드 이름 대신 위의 함수는 와일드 카드 문자 * 또는 상수 all 을 받아 모든 필드를 나타냅니다. 각 필드에 나타날 수 있는 여러 오류를 반복하기 위해 th:each 속성을 사용했습니다.
다음은 와일드카드 * 를 사용하여 재작성한 이전 HTML 코드입니다 .
<ul> <li th:each="err : ${#fields.errors('*')}" th:text="${err}" /> </ul>
그리고 여기서 우리는 상수 all 을 사용하고 있습니다 .
<ul> <li th:each="err : ${#fields.errors('all')}" th:text="${err}" /> </ul>
마찬가지로 전역 상수를 사용하여 Spring에서 전역 오류를 표시할 수 있습니다.
전역 오류를 표시하는 HTML 코드는 다음과 같습니다.
<ul> <li th:each="err : ${#fields.errors('global')}" th:text="${err}" /> </ul>
또한 th:errors 속성을 사용하여 오류 메시지를 표시할 수 있습니다.
양식에 오류를 표시하는 이전 코드는 th:errors 속성 을 사용하여 다시 작성할 수 있습니다.
<ul> <li th:errors="*{id}" /> <li th:errors="*{name}" /> </ul>
7) 전환 사용
이중 대괄호 구문 {{}} 을 사용하여 표시할 데이터 형식을 지정합니다. 이것은 컨텍스트 파일 의 conversionService 빈 에서 해당 유형의 필드에 대해 구성된 포맷터 를 사용합니다.
학생 클래스 에서 이름 필드의 형식을 지정하는 방법을 살펴보겠습니다 .
<tr th:each="student: ${students}"> <td th:text="${{student.name}}" /> </tr>
위의 코드는 WebMvcConfigurer 인터페이스 에서 addFormatters() 메서드를 재정의하여 구성된 NameFormatter 클래스를 사용합니다.
이를 위해 @Configuration 클래스는 WebMvcConfigurerAdapter 클래스를 재정의합니다 .
@Configuration public class WebMVCConfig extends WebMvcConfigurerAdapter { // ... @Override @Description("Custom Conversion Service") public void addFormatters(FormatterRegistry registry) { registry.addFormatter(new NameFormatter()); } }
NameFormatter 클래스 는 Spring Formatter 인터페이스를 구현합니다.
#conversions 유틸리티를 사용하여 표시할 개체를 변환할 수도 있습니다 . 유틸리티 함수의 구문은 #conversions.convert(Object, Class) 입니다 . 여기서 Object 는 클래스 유형 으로 변환됩니다 .
분수 부분이 제거된 학생 개체 백분율 필드 를 표시하는 방법은 다음과 같습니다 .
<tr th:each="student: ${students}"> <td th:text="${#conversions.convert(student.percentage, 'Integer')}" /> </tr>
댓글 ( 5)
댓글 남기기