가자공부하러!

6. Thymeleaf 활용 방법(Spring Boot) 본문

공부/Spring Boot

6. Thymeleaf 활용 방법(Spring Boot)

오피스엑소더스 2019. 7. 19. 08:10


1. Thymeleaf

2. 기초 활용법 - 설정, th:oo

3. static resource include

4. 특수문자 

5. Thymeleaf form 만들기 예제(th:object. th:field)


1. Thymeleaf      

1. Thymeleaf


  > Spring Boot 공식 지원 Server-side Template Engine

  > 순수 HTML 문서에 HTML5 문법으로 Server-side 로직을 수행하고 적용시킬 수 있다.



2. 기초활용법 - 설정, th:oo

1. 설정

  > 문서 html태그에 XML name space(xmlns) 명기 필요

1
2
3
4
5
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head> ... </head>
<body> ... </body>
</html>
cs

2. th:oo
  > Model에서 넘어온 값을 받기 위한 코드로써, html 태그에 선언한다.
  > th:text - 컨트롤러가 보낸 값을 태그 내 텍스트로 보여준다
1
2
3
4
5
6
7
8
9
10
11
//CommonController.java
@Controller
public class CommonController {    
    @RequestMapping("welcome")
    public ModelAndView welcomePage(ModelAndView mav) {
        mav.setViewName("welcome"); //값을 보낼 목적지 html 설정
        String name = "minhj"; //보내고자 하는 문자열 변수 선언 및 초기화
        mav.addObject("name", name); //변수명 name으로 Model에 저장
        return mav; //Model 전송
    }
}
cs
1
2
3
4
5
6
7
8
<!-- welcome.html -->
<!DOCTYPE html> 
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head> ... </head>
<body>
    <h1 th:text="${name}">Name</h1>
</body>        
</html>
cs




3. static resource include

1. static 경로(root = static)

  > src/main/resources/static/js

  > src/main/resources/static/css


2. script

1
2
<script th:src="@{//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js}"></script>
<script th:src="@{/js/freeboard.js}"></script>
cs

3. css
1
<link rel="stylesheet" th:href="@{/css/freeboard.css}" />
cs


4. 특수문자

1. *(asterisk)

  > 원문 : thymeleaf.org/doc

  > 해석 : Spring Boot Asterisk-syntax

  > 요약 : $랑 똑같은데 객체를 선택할 수 있다는데 모르겠음


5. Thymeleaf form 만들기 예제(th:object. th:field)             

2. 해석 : Spring Boot Example - Creating a Form








'공부 > Spring Boot' 카테고리의 다른 글

8. Thymeleaf with tiles/sitemesh - 중단  (0) 2019.07.24
7. Spring boot Oracle DB연동(Thymeleaf, Hikari CP 활용)  (0) 2019.07.23
5. Spring Boot 자유게시판 만들기  (0) 2019.07.18
4. Spring Boot Oracle DB 연동(JSP, MyBatis)  (2) 2019.07.15
3. Spring Boot 어노테이션 관련 정보 모음  (0) 2019.07.13
'공부/Spring Boot' Related Articles more
Comments