스프링부트
스프링 부트 + Thymeleaf 정리하기(5)
클라스하이
2023. 7. 18. 12:31
- Controller
@GetMapping("/m10")
public String m10(Model model) {
List<String> names = mapper.getNames();
List<BoardDTO> list = mapper.getList();
model.addAttribute("names", names);
model.addAttribute("list", list);
return "m10";
}
@GetMapping("/m11")
public String m11(HttpSession session) {
session.setAttribute("id", "hong");
// session.invalidate();
return "m11";
}
@GetMapping("/m12")
public String m12() {
return "m12";
}- MyBatis
<select id="getNames" resultType="String">
select first_name from employees where rownum <= 10
</select>
<select id="getList" resultType="dto">
select * from tblBoard
</select>- th:each="엘리먼트 : ${리스트배열}" 이게 기본 형태이다.
- 태그 하나로 바로 사용가능하고 자식 태그를 두어서 사용도 가능하다.
<ul>
<li th:each="name : ${names}" th:text="${name}">이름</li>
</ul>
<ul>
<li th:each="name : ${names}" >
<span th:text="${name}"></span>
</li>
</ul>
---------------------------------------------------------------
<ul th:each="name: ${names}">
<li th:text=${name}></li>
</ul>
- 아래의 모형이 dto 리스트를 받아서 출력하는데 th:object 사용하면 선택 변수 표현식으로 * 지정해서 사용가능
<ul>
<li th:each="dto : ${list}" th:text="|${dto.subject}(${dto.id})|"></li>
</ul>
<ul>
<li th:each="dto : ${list}" th:object="${dto}">
<span th:text="*{subject}"></span>
</li>
</ul>
<ul>
<li th:each="dto : ${list}" th:object="${dto}" th:text="*{subject}">
</li>
</ul>- jstl 과 마찬가지로 status라는 것이 있다. index, count 꺼내쓰고 해당 넘버가 어떤 속성인지 last, odd, first even 등을 정의해놓음
<table>
<tr>
<th>번호</th>
<th>아이디</th>
<th>제목</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<!-- 콤마로 두개 가능 -->
<tr th:each="dto, status : ${list}">
<td th:text="${dto.seq}"></td>
<td th:text="${dto.id}"></td>
<td th:text="${dto.subject}"></td>
<td th:text="${status.index}"></td>
<td th:text="${status.count}"></td>
<td th:text="${status.size}"></td>
<td th:text="${status.even}"></td>
<td th:text="${status.odd}"></td>
<td th:text="${status.first}"></td>
<td th:text="${status.last}"></td>
</tr>
</table>- ${#numbers.sequence(1,5)} 라는 걸 정의해서 1~5까지 출력이 가능하다.
<th:block th:each="num : ${#numbers.sequence(1,5)}">
<div th:text="${num}"></div>
</th:block>- 마찬가지로 내장객체라는 것을 가리킬 수 있어야 하는데 ${ }안에 #을 붙인다.
- 단 session은 #을 붙이지 않는다.
<div th:text="${#request}"></div>
<div th:text="${#response}"></div>
<div th:text="${#locale}"></div>
<div th:text="${session}"></div>
<div th:text="${#servletContext}"></div>
<div th:if="${session.id != null}">
인증 : <span th:text="${session.id}">아이디</span>
</div>
<div th:unless="${session.id != null}">미인증</div>- ~{ } : 조각 페이지를 삽입할 때 쓰는 include 지시자이다.
- insert나 replace는 거의 동일하다. ( 차이가 뭐지..? )
- ~{파일이름} 이렇게 쓰면 확장자는 생략할 수 있다.
- th:insert, th:replace로 ~{ } 생략한 채로 th:insert그냥 바로 참조가 가능하다.
- th:fragment="프래그먼트이름"
- th:fragment 라는게 있고 이것은 조각이다. 이걸 따로 정의하고 가져다가 쓸 때는 첫번째로는 문서참조, 그 후에 : : 을 붙이고 해당 fragment 이름으로 참조한다. :: 으로 namespace를 찾는 느낌이다.
- ★★ fragment에 파라미터를 넘겨줄 수 있다.
- th:fragment="owner(name, tel)" 이런식으로 정의해주면 인자를 name, tel로 넘겨받겠다라는 뜻
- 예를 들어서 username 같은거만 따로 넘겨줘서 로그인한 유저에 따라 표기를 다르게 할 수 도 있을 듯..
<!-- templates/inc/sub.html -->
<div>조각 페이지</div><!-- sub2.html -->
<div th:fragment="part">조각 페이지2</div>
<div th:fragment="part2">조각 페이지3</div>
<div th:fragment="owner(name, tel)">
<div>소유주 : <span th:text="${name}"></span></div>
<div>연락처 : <span th:text="${tel}"></span></div>
</div><!-- m12.html -->
<h1>Thymeleaf Fragment</h1>
<h2>insert</h2>
<div th:insert="~{inc/sub.html}"></div>
<!-- insert replace 차이 -->
<h2>replace</h2>
<div th:replace="~{inc/sub.html}"></div>
<hr>
<!-- 확장자 생략이 돤다, -->
<div th:insert="~{inc/sub}"></div>
<!-- ~{} 생략 가능 > 비권장 -->
<div th:insert="inc/sub"></div>
<div th:insert="inc/sub2.html :: part"></div>
<div th:insert="inc/sub2.html :: part2"></div>
<hr>
<!-- 사용시에 약간 함수느낌으로 인자를 넣어줌 -->
<div th:insert="~{inc/sub2::owner('아무개', '010-3333-4444')}"></div>
<div th:insert="~{inc/sub2::owner('테스트', '010-3333-4444')}"></div>