Web Spring boot 타임리프1

Thymeleaf 1

템플릿 언어?

보통 자바에서 웹 개발시 JSP(Java Server Page)를 이용하여 진행합니다. JSP를 사용하면 <% %>형태의 스크립트릿을 사용하여 개발하게 됩니다. 그러나 이 방식은 스크립트릿과 Html이 혼재된 상태가 되고 html태그의 반복적인 사용으로 인해 수정하기 어려운 상황이 됩니다. 이러한 상태를 해결할 수 있는 것이 바로 템플릿 엔진 입니다. 템플릿 엔진이란 html(Markup)과 데이터를 결한한 결과물을 만들어 주는 도구 입니다. 타임리프는 이 템플릿 엔진중 하나 입니다. 스프링 부트에서는 JSP가 아닌 타임리프를 사용할 것을 권장하고 있습니다. 때문에 스프링 부트에서 JSP를 사용하기 위해서는 별도의 설정이 필요합니다.

Maven 설정 

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
템플릿 의존성(Thymeleaf, groovy, FreeMaker)등을 추가하게 되면 스프링 부트는 자동적으로 src/main/resources/templates경로를 기본 경로로 인식하게 된다.

변수식

html 

<!-- OGNL -->
<p th:text="${new java.util.Date().toString()}"></p>
<!-- utility object -->
<p th:text="${#dates.format(new java.util.Date(), 'yyyy-MM-dd HH:mm')}"></p>
<p th:text="${#numbers.formatInteger(123,5)}"></p>
<p th:text="${#strings.toUpperCase('Welcome to Spring Boot')}"></p>
<!-- parameter -->
<p th:text="'id0=' + ${param.id[0]} + ', id1=' +${param.id[1]}"></p>

출력

출력1

메세지식

메세지식1

위의 사진과 같이 resource폴더에 properties를 생성하고 안에 문자를 설정한다.

messages.properties 

content.id=strongstar
content.name=Han-byeol Kang

html 

<h1 th:text="#{content.id}">Hello World</h1>
<p th:text="#{content.name}"></p>

출력

출력2

링크식

html 

<h1 th:text="#{content.id}">Hello World</h1>
<a th:href="@{'/home/' + ${param.id[0]}}">link</a>

출력

링크식

객체의 변수식

Class 설정(Controller) 

@Controller
public class TestController {
    
    @RequestMapping("/")
    public String index(Model model) {
        model.addAttribute("msg", "data..");
        DataObject data = new DataObject(123, "star");
        model.addAttribute("object", data);
        return "index";
    }
    
    class DataObject {
        public int id;
        public String name;
        
        public DataObject(int id, String name) {
            super();
            this.id = id;
            this.name = name;
        }
    }
}

html 

<h1 th:text="#{content.id}">Hello World</h1>
<p th:text="${msg}">message.</p>
<div th:object="${object}">
<p th:text="*{id}"></p>
<p th:text="*{name}"></p>
</div>

출력

객체

리터럴 치환 ||

html 

<h1 th:text="#{content.id}">Hello World</h1>
<div th:object="${object}">
<p th:text="|id : *{id}, name : *{name}|">message.</p>
</div>

출력

리터럴