능글맞은 구렁이

SpringBoot-Thymeleaf(레이아웃) 본문

Framework/SpringBoot

SpringBoot-Thymeleaf(레이아웃)

보라색츄르 2021. 7. 9. 10:25

1. JSP의 include와 같이 특정 부분을 가져와서 포함 시키는 형태(include방법)

    ※ 1), 2)은 포함하는 HTML

   1) th:insert - th:~~의 바깥쪽 태그는 유지하면서 태그의 시작과 끝 내부에 삽입하는 방식

   2) th:replace - 기존 내용을 대체하는 방식

    ※ 3) 포함되는 HTML

   3) th:fragment - 포함하는 HTML에서 사용할 이름

 

 

2. 특정부분을 파라미터 형태로 전달하여 내용에 포함하는 형태(Thymeleaf가 지원해준다.)

   1) th:fragment 

   2) 그외 th:block - HTML 의 <div></div>역할을 하는 Thymeleaf지원태크

   ※참고: 기존 버전에는 th:include가 있었지만 3.0버전 이후로는 사라짐

 

 

 

사용방법

 

1. include방식

 

포함되는 HTML templates=>
fragments => fragment1.html		 포함하는 HTML templates=> sample=>
exLayout1.html
1. 일부분만 포함되는 HTML
   해당 시작 태그내에 th:fragment="이름"  "이름"은 포함하는 HTML쪽에서사용할 이름

    예) <div th:fragment="insert1"><a herf="#">test</a></div>		 1. 삽입 또는 대체를 결정
 <th:block th:replace="~{/포함되는 파일의경로/ 포함되는 파일명}"></th:block>
또는
<div th:replace="~{/포함되는 파일의경로/ 포함되는 파일명}"></div>
2. 전체가 포함되는 HTML(참고: 전체가 포함되지 때문에 th:fragment가필요없다.)
   <!docutype>
   <html></html>
   <head></head>
   <body></body>
   이태그들을 포함하지 않는다. 
3.일부분만 포함하는 HTML
   <div th:repace="~{/포함되는 파일의 경로/포함되는 파일명} :: fragment이름"></div>
   fragment이름: 포함되는 파일에 설정이 되어 있어야한다. 
                                   or
   <div th:insert="~{/포함되는 파일의 경로/포함되는 파일명} :: fragment이름">
   fragment이름: 포함되는 파일에 설정이 되어 있어야한다. 
   insert는 삽입을 시키는것!

 

Controller



@Controller //해당 클래스를 컨트롤러로 자동등록
@RequestMapping("/sample") //요청URL
@Log4j2 //컨트롤러동작여부확인
public class SampleController {


    //레이아웃을 위한 추가 메서드
    @GetMapping({"/exLayout1"})
    public void exLayout1(){
        log.info("exLayout1~~~");
    }

}

=============================================================================================
fragment1.html


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>fragment1.html</title>
</head>
<body>
  <div th:fragment="part1">
    <h2>Part1</h2>
  </div>

  <div th:fragment="part2">
    <h2>Part2</h2>
  </div>

  <div th:fragment="part3">
    <h2>Part3</h2>
  </div>
</body>
</html>


==========================================================================================
fragment2.html

 <div>
       <hr/>
       <h2>Fragment 2FIle</h2>
       <h2>Fragment 2FIle</h2>
       <h2>Fragment 2FIle</h2>
 </div>

===========================================================================================
exLayout1.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Fragment Test</h1>
    <div style="border: 1px solid blue">
        <th:block th:replace="~{/fragments/fragment2}"></th:block>
        <!--th:block은 html의 <div> 동일역할 담당-->
        <!--th:replace="~{/fragments/fragment2}"-->
        <!--th:replace="~{/경로/포함되는 파일명}" 해당 파일의 전체가 포함됨-->
        <!-- -->
    </div><hr/>

    <h1>Layout1-1</h1>
    <div th:replace="~{/fragments/fragment1 :: part1}"></div>
    <!--th:replace="~{/fragments/fragment1 :: part1}"-->
    <!--th:replace="~{/경로/포함되는 파일명 :: fragment이름}" 해당 이름을 가진 부분만 포함된다.-->
    <!--
        <div th:replace="~{/fragments/fragment1 :: part1}"></div> 이 부분이
        <div th:fragment="part1">
            <h2>Part1</h2>
        </div>
        이 태그로 대체!
     -->
    <hr/>

    <h1>Layout1-2</h1>
    <div th:insert="~{/fragments/fragment1 :: part2}"></div>
    <!--th:insert="~{/경로/포함되는 파일명 :: fragment이름}" 해당 이름을 가진 부분만 포함된다.-->
    <!--
        <div th:fragment="part2">
             <h2>Part2</h2>
        </div> 가 삽입

    -->
    <hr />

    <h1>Layout1-3</h1>
    <th:block th:replace="~{/fragments/fragment1 :: part3}"></th:block>

</body>
</html>

 

※주의사항 :  레이아웃파일 : <script></..> <style></...><link../><meta.../> 사용

                  포함되는 파일 :<script></..> <style></...><link../><meta.../> 절대 사용 불가

 

 

2. 파라미터 처리 방식

 

파라미터를 전송받는 HTML 파라미터를 전송하는 HTML
파라미터 선언
th:fragment="target(파라미터1, 파라미터1)"		 파라미터 전송
th:replace="{/경로 / 파일명} :: target(전송할 태그아이디, 전송할태그 아이디) }"
예 ) <ul id="ul_1">
      </ul>
      <ul id="ul_2">
      </ul>
->th:replace="{/경로 / 파일명} :: target(~{this::#u_1}, ~{this::#u_2}) }"
파라미터를 전송하는 HTML-> 전송 -> 파라미터를 전송받은 HTML => 전송받는 내용 수정=> 파라미터를 전송하는 HTML 
    //레이아웃을 위한 추가 메서드
    @GetMapping({"/exLayout1","/exLayout2"})
    public void exLayout1(){
        log.info("exLayout1~~~");
    }

 

'Framework > SpringBoot' 카테고리의 다른 글

SrpingBoot-목록 데이터페이지 처리  (0) 2021.07.13
guestbook 프로젝트 - 구조만들기  (0) 2021.07.09
springBoot-MVC/View Templates  (0) 2021.07.08
SpringBoot-Thymeleaf  (0) 2021.07.08
SpringBoot-Query  (0) 2021.07.07
'Framework/SpringBoot' Related Articles more
Comments