(Springboot) Thymeleaf 객체 바인딩, 유틸리티 객체

카테고리

Framework/SpringBoot

작성일

2022. 2. 22. 19:43

작성자

갱수터

728x90

th구문과 html구문 우선순위

maincontroller

@Controller
public class MainController {
	@GetMapping("/")
	public String main(Model model) {
		
		model.addAttribute("title", "ksmart42");
		
		return "main";
	}
}

main.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:text="${title}">메인화면</title>
</head>
<body>
	한국스마트정보교육원 42기 진수경
</body>
</html>

실행 결과

html <title> 태그보다 thymeleaf 태그가 우선으로 적용된다

thymeleaf 객체 바인딩

기본으로 이용할 Member dto 생성(getter/setter, tostring, 생성자메서드 오버라이딩 )

서비스 패키지 생성 후

ExamService 클래스 생성

getMemberInfo 메서드 생성

@Service	//어노테이션 추가
public class ExamService {
	public Member getMemberInfo(String memberId) {
		
		Member member = new Member();
		member.setMemberId("id00" + memberId);
		member.setMemberPw("pw00" + memberId);
		member.setMemberLevel("관리자");
		member.setMemberAddr("전주시 덕진구 기린대로 446");
		member.setMemberMobile("0637171008");
		
		return member;
	}
}

controller 패키지 생성 후

ExamController 클래스 생성 후

ExamService DI 주입

@Controller
@RequestMapping("/exam")
public class ExamController {

1. DI 필드 주입방식
@Autowired
private ExamService examService;


2. DI setter method 주입방식
private ExamService examService;

@Autowired
public void setExamService(ExamService examService) {
this.examService = examService; }


3. DI 생성자 method 주입방식
private ExamService examService;

//spring framwork v4.3 이후부터 @Autowired 생략 가능	
public ExamController(ExamService examService) {
	this.examService = examService;
}
}

@GetMapping 메서드 생성

//ExamController class에 @RequestMapping으로 ("/exam")을 매핑해뒀기 때문에 getmapping 경로 하나만 적을수 있게됨
@GetMapping("/exam1")
public String exam1(Model model) {
	
	Member member = examService.getMemberInfo("1");
	
	model.addAttribute("title", "ksmart42");
	model.addAttribute("user", member);	
		
	return "exam/exam1";
}

view단 파일 생성

thymeleaf 라이브러리에 prefix,suffix로 미리 경로와 파일확장자가 정해져 있음
그래서 templates폴더 하위에 html확장자로 파일 생성하는 것...

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:title="${title}"></title>
</head>
<body>
	<!-- thymeleaf 객체 바인딩 -->
	<h1>객체</h1>
	<h1 th:text="${user}"></h1>
	<h1>[[${user}]]</h1>
	
	<h1>객체에 있는 멤버변수</h1>
	<h1 th:text="${user.memberId}"></h1>
	<h1 th:text="${user.getMemberId()}"></h1>
</body>
</html>

thymeleaf 문법
- th:___=""
- title은 없음 실행화면 보면 타이틀안나온걸 볼 수 있음 text로 해줘야함
- html 태그에 th:로 넣거나
- [[]] 이중대괄호 안에 넣어서 출력시켜야함
- thymeleaf로 바인딩된 객체에 .으로 접근할 수 있음

빌드

thymeleaf 리스트객체 바인딩

위에 만들어둔 ExamService 클래스에

getMemberList 메서드 생성

public List<Member> getMemberList(){
	List<Member> membeList = new ArrayList<Member>();

	Member member =null;
	for(int i=1; i<10; i++) {
		if(i%3 ==0) {
			member = new Member("id00"+i, "pw00"+i, "구매자", "전주시 덕진구", "0101234123"+i);
		}
		if(i%3 ==1) {
			member = new Member("id00"+i, "pw00"+i, "관리자", "전주시 완산구", "0101234123"+i);
		}
		if(i%3 ==2) {
			member = new Member("id00"+i, "pw00"+i, "판매자", "전주시 덕진구", "0101234123"+i);
		}
		
		membeList.add(member);
	}
	
	return membeList;
}

ExamController에 @GetMapping 메서드 생성

//ExamController class에 @RequestMapping으로 ("/exam")을 매핑해뒀기 때문에 getmapping 경로 하나만 적을수 있게됨
@GetMapping("/exam2")
public String exam2(Model model) {
	List<Member> memberList = examService.getMemberList();
	
			
	model.addAttribute("title", "ksmart42");
	model.addAttribute("list", memberList);	
	
	return "exam/exam2";
}

view단 파일 생성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:text="${title}"></title>
</head>
<body>
	<!-- thymeleaf 리스트객체 바인딩 -->
	<h1>리스트객체</h1>
	<table border="1">
		<thead>
			<tr>
				<th>인덱스</th>
				<th>카운트</th>
				<th>사이즈</th>
				<th>odd</th>
				<th>even</th>
				<th>first</th>
				<th>last</th>
				<th>아이디</th>
				<th>비밀번호</th>
				<th>회원등급</th>
				<th>주소</th>
				<th>핸드폰번호</th>
			</tr>
		</thead>
		<tbody>
        	<!-- 반복문 th:each구문 l처럼 별칭 줄 수있음, 두번째는 상태 나타내는 것 -->
			<tr th:each="l,status : ${list}">
				<td th:text="${status.index}"></td>
				<td th:text="${status.count}"></td>
				<td th:text="${status.size}"></td>
				<td th:text="${status.odd }"></td>
				<td th:text="${status.even}"></td>
				<td th:text="${status.first }"></td>
				<td th:text="${status.last}"></td>
				<td th:text="${l.memberId}"></td>
				<td th:text="${l.memberPw}"></td>
				<td th:text="${l.memberLevel}"></td>
				<td th:text="${l.memberAddr}"></td>
				<td th:text="${l.memberMobile}"></td>
			</tr>
		</tbody>
	</table>
</body>
</html>

빌드

지역변수(with)와 조건문(if, unless)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:title="${title}"></title>
</head>
<body>
	<h1>리스트객체</h1>
	<!-- target이라는 지역변수 선언 -->
	<table border="1" th:with="target='id001'">
		<thead>
			<tr>
				<th>아이디</th>
				<th>비밀번호</th>
				<th>회원등급</th>
				<th>주소</th>
				<th>핸드폰번호</th>
			</tr>
		</thead>
		<tbody>
			<tr th:each="l : ${memberList}">
				<!-- memberId가 target과 같다면이라는 if 조건문 -->
				<td th:if="${l.memberId == target}" style="color:red;" th:text="${l.memberId}"></td>
				<td th:unless="${l.memberId == target}" th:text="${l.memberId}"></td>
				<th:block th:if="${l.memberId == target}">
					<td th:text="${l.memberPw}" style="color:blue;"></td>
				</th:block>
				<th:block th:if="${l.memberId != target}">
					<td th:text="${l.memberPw}"></td>
				</th:block>
				<td th:text="${l.memberLevel}"></td>
				<td th:text="${l.memberAddr}"></td>
				<td th:text="${l.memberMobile}"></td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
			<!-- 	값을 바인딩 할 땐 $를 붙인다 -->
				<td colspan="5" th:text="${target}"></td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

빌드

<th:block>

눈에 보이는 html 태그가 아니라 논리적인 thymeleaf블럭으로

if조건문이나 each구문 등 활용할 수 있는 태그

실습. 조회되는 회원이 없을 때

view단 if조건문으로 처리하기

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:text="${title}"></title>
</head>
<body>
	<!-- thymeleaf 리스트객체 바인딩 -->
	<!-- 1. 지역변수(th:with) -->
	<!-- 2. 조건문(th:if, th:unless) -->
	<h1>리스트객체</h1>
	<table border="1" th:with="target='id001'">
		<thead>
			<tr>
				<th>아이디</th>
				<th>비밀번호</th>
				<th>회원등급</th>
				<th>주소</th>
				<th>핸드폰번호</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td colspan="5" th:if="${memberList}==null" th:text="${'조회된 결과가 없습니다.'}"></td>
			</tr>
			<tr th:unless="${memberList}==null" th:each="l : ${memberList}">
				<td th:if="${l.memberId == target}" style="color:red;" th:text="${l.memberId}"></td>
				<td th:unless="${l.memberId == target}" th:text="${l.memberId}"></td>
				<td th:if="${l.memberId == target}" th:text="${l.memberPw}" style="color:blue;"></td>
				<td th:if="${l.memberId != target}" th:text="${l.memberPw}"></td>
				<td th:text="${l.memberLevel}"></td>
				<td th:text="${l.memberAddr}"></td>
				<td th:text="${l.memberMobile}"></td>
			</tr>
		</tbody>
	</table>
</body>
</html>

ExamController에서 테스트해보기

넘어오는 값 없을 때

넘어오는 값 있을 때

null 체크

<h1 th:text="${#lists.isEmpty(memberList)}"></h1>

생각을 해야할게 null을 체크하는거기 때문에 null이 아니면 true가 아니라 false가 나온다
그니깐 false가 나와야 가져올 값이 있다는 뜻...

유틸리티 객체와 유사 for문 controller

@GetMapping("/exam5")
public String exam5(Model model) {
	List<Member> memberList = examService.getMemberList();
	//memberList.get(1).getMemberId();
	model.addAttribute("title", "ksmart42");
	model.addAttribute("memberList", memberList);	
	model.addAttribute("now", new Date());
	   model.addAttribute("price", 123456789);

	
	return "exam/exam5";
}

thymeleaf 유틸리티 객체

<h1 th:text="${now}"></h1>
<h1 th:text="${#dates.format(now, 'yyyy-MM-dd HH:mm:ss')}"></h1>
<h1 th:text="${#dates.createToday()}"></h1>
<h1 th:text="${#numbers.formatInteger(price, 3, 'COMMA')}"></h1>

thymeleaf 유사 for문

<th:block th:each="num, status:${#numbers.sequence(1, #lists.size(memberList))}">
	<h2 th:text="${num}"></h2>
	<h2 th:text="${status.index}"></h2>
	<h1 th:text="${memberList.get(status.index)}"></h1>
</th:block>

저작자표시

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

(Springboot) 🅲 Mybatis 회원가입 ID중복검사(ajax), 유효성 검사 (0)	2022.03.02
(Springboot) 🅲 Mybatis 회원가입 등급 목록 조회 (0)	2022.03.02
(Springboot) Thymeleaf 이클립스 자동완성 플러그인 설치하기 (0)	2022.02.22
(Springboot) 🅲 Mybatis 회원 가입 (0)	2022.02.22
(Springboot) 🆁 Mybatis 회원 목록 조회 (0)	2022.02.22