thymeleaf 외부 파일로드 규칙
templates , webapp 에 있는 파일은 서로 include 불가
resource 안에서 모든 것을 핸들링 해야함
🤷♂️❓
th:fragment
영역 처리를 담당하는 thymeleaf 속성
th:fragment = "가상의 이름"
th:fragment="main(data)" 요렇게 인자값을 넘길 수도 있음
th:replace
영역(fragment)을 가져오는 thymeleaf 속성
th:replace="~{경로 :: fragment이름}"
th:insert
thymelefa 3.x 속성 (== replace)
replace는 곧 없어질듯~
==> replace는 기존 태그를 삭제 후 로드하는 방식 / insert는 기존태그 삭제 없이 로드하는 방식
insert 시 sementic tag 주의 .. 두번 들어갈 수 잇음ㅎ
👀 Thymeleaf로 외부파일 로드하기
- controller
@GetMapping("/checkout/index.do")
public String membership(Model m,ServletRequest req) {
return "/checkout/index.html"; //return null 이면 spring mvc 찾음
}
- index.html
<!DOCTYPE html>
<div th:replace="~{/checkout/index :: body}"></div>=> index.jsp 그대로 가져옴
- index,jsp
<!DOCTYPE html>
<html th:fragment="body">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap - 회원가입</title>
~~~~~~~~~~~~~~~~~~~
👀 thymeleaf로 레이아웃 연습
- Controller
@GetMapping("/layout.do")
public String layout(Model m) {
String copyright = "Copyright ⓒ 2023-2024 Maker By hing All reserved";
m.addAttribute("copyright",copyright);
Map<String, String> mdlist = new HashMap<String,String>();
mdlist.put("productnm", "삼성 냉장고");
mdlist.put("money", "680000");
m.addAttribute("mdlist",mdlist);
return "/layout.html";
}=> 요런식으로 찍어주기 가능
- sample.html - 퍼블리셔가 만들어준 이쁜 페이지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style th:fragment="styles">
body {margin : 0; padding : 0;}
header.top {
width : 100%; height : 100px; background-color:skyblue;
display:flex; justify-content : center; align-items:center;
}
header.top > span {
padding : 0 20px; font-size : 16px; text-align : center;
}
footer.copy {
width : 100%; height : 50px; background-color:#333; color : #fff;
font-size :12px; text-align:center; display:flex;
justify-content : center; align-items:center;
}
</style>
</head>
<body>
<header class="top" th:fragment="top">
<span>회사소개</span>
<span>상품소개</span>
<span>공지사항</span>
<span>고객센터</span>
</header>
<!-- 인자값을 받아와서 출력 -->
<section th:fragment="main(data1,data2)">
<div th:text="${data1}"></div>
<div th:text="${data2}"></div>
</section>
<!-- 배열 인자값을 받아와서 출력 -->
<section th:fragment="md(list_product)">
<ul>
<li th:each="pd : ${list_product}">
<span th:text="${pd.key} + ' : '"></span>
<span th:text="${pd.value}"></span>
</li>
</ul>
</section>
<footer class="copy" th:fragment="copy">
<span th:text="${copyright}"></span>
</footer>
</body>
</html>
🔽 요걸 여기다 뜯어서 붙일거임
- layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Thymeleaf 메인화면</title>
<style th:replace="~{/sample.html :: styles}"></style>
<!-- sapmple.html에 있는 styles를 가져오라 -->
</head>
<body>
<header th:replace="~{/sample.html :: top}"></header>
<!-- fragment에 인자값을 전송하여 로드하는 방식 -->
<section th:replace="~{/sample.html :: main('메인화면 상품출력','AD 배너')}"></section>
<!-- Controller에서 받은 배열을 인자값으로 전송 -->
<section th:replace="~{/sample.html :: md(${mdlist})}"></section>
<footer th:replace="~{/sample.html :: copy}"></footer>
</body>
</html>
<!--
태그를 삭제하지 않는 insert 요런식으로 활용 가능 예시
요런식으로도 쓰면 section 사이에 form 넣어서 css 깨짐 방지 가능~
-->
<form th:insert="~{/sample.html :: form}" method="123"></form>'CLASS > SPRINGBOOT' 카테고리의 다른 글
| #6-3 / thymeleaf - 2차배열 출력 (0) | 2024.08.21 |
|---|---|
| #6-2 / thymeleaf - 협업시 properties 분리 (0) | 2024.08.21 |
| #5-2 / thymeleaf로 데이터 출력 2 (0) | 2024.08.20 |
| #5-1 / thymeleaf로 데이터 출력 1 : text , ArrayList , Map , dao, 조건문 , checked (0) | 2024.08.20 |
| #4-2 / Bootstrap - 회원가입 (0) | 2024.08.19 |