mjeongriver
article thumbnail
Published 2023. 2. 13. 18:05
day83-spring boot TIL/Spring boot

1. 롬복 다운로드

설치하고 나서 재시작

 

- 안 켜질 경우에 ini 파일 메모장으로 열고 표시한 부분 상대경로로 변경해줄 것

 

 

* BuilderVO2, BootTest

더보기

- BuilderVO2(위에 어노테이션 까먹지 말고 붙일 것!)

package com.simple.basic.command;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data //get, set, tostring
@NoArgsConstructor //기본 생성자
@AllArgsConstructor //모든 생성자
@Builder //빌더 패턴
public class BuilderVO2 {
	
	private String name;
	private int age;
}

 

- BootTest

package com.simple.basic;

import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

import com.simple.basic.command.BuilderVO;
import com.simple.basic.command.BuilderVO.Builder;
import com.simple.basic.command.BuilderVO2;
import com.simple.basic.controller.HomeController;

@SpringBootTest //스프링 부트 테스트 클래스
public class BootTest {
	
	@Test 
	public void testCode02() {
		
		BuilderVO2 vo2 = BuilderVO2.builder()
				   .age(10)
				   .name("민정")
				   .build();
		
		System.out.println(vo2.toString());
	}	
	
}

 

2. 타임리프(th라는 태그 이름으로 명시적으로 달아주고 나서 시작하면 됨, 반드시는 아님!)

 

2번째 사진: jstl 문법과 80% 유사함

 

- a 링크에서는 @{경로..}, 경로는 골뱅이!

- fragment: include

 

2번 폴더 만들 때  templates 폴더 선택하고 폴더 생성 하고 view라고 쓰면 자동으로 templates.view라고 생성 됨

 

 

3번째 사진처럼 쓰면 자바스크립트에서 참고해서 쓸 수 있게 됩니다. 자바스크립트에서 타임리프 사용!

 

타임리프 템플릿 모형 사용하기, 6번째 사진처럼 감싸주는 형태로 이해할 것!

 

* ThymeleafController, ex01~ex07, layout01~03, test

- 실행은 3번째 처럼 내장 톰캣으로 실행하고 크롬에 view/ex01 검색(@Test 까먹지 말것!)

- 2번째 문단 사진처럼 가변값의 경우 @{test(age=${vo.age})} 이런 식으로 넘겨줄 것

더보기

- ThymeleafController

package com.simple.basic.controller;

import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.Date;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.simple.basic.command.BuilderVO2;
import com.simple.basic.command.SimpleVO;

@Controller
@RequestMapping("/view")
public class ThymeleafController {
	
	@GetMapping("/ex01") //get 방식만 허용
	public String ex01() {
		return "view/ex01";
	}
	
	@GetMapping("/ex02")
	public String ex02(Model model) {
		
		ArrayList<BuilderVO2> list = new ArrayList<>();
		for(int i = 1; i <= 10; i++) {
			BuilderVO2 vo = BuilderVO2
								.builder().name("홍길동" + i)
								.age(i)
								.build();
			list.add(vo);
		}
		
		//model
		model.addAttribute("list", list);
		
		return "view/ex02";
	}
	
	@GetMapping("/ex03")
	public String ex03(Model model) {
		
		ArrayList<BuilderVO2> list = new ArrayList<>();
		for(int i = 1; i <= 10; i++) {
			BuilderVO2 vo = BuilderVO2
								.builder().name("홍길동" + i)
								.age(i)
								.build();
			list.add(vo);
		}
		
		//model
		model.addAttribute("list", list);
		
		return "view/ex03";
	}
	
	//test
	//쿼리 스트링
	@GetMapping("/test")
	public String test(@RequestParam("age") int age,
					   @RequestParam("name") String name) {
		
		System.out.println("test 메서드 실행됨");
		System.out.println(age);
		System.out.println(name);
		
		return "view/test";
	}
	
	//쿼리 파라미터
	@GetMapping("/test2/{a}/{b}")
	public String test(@PathVariable("a") String a,
					   @PathVariable("b") String b) {
		
		System.out.println(a);
		System.out.println(b);
		
		return "view/test";
	}
	
	@GetMapping("/ex04")
	public String ex04(Model model) {
		
		
		BuilderVO2 vo = new BuilderVO2("이순신", 20);
		model.addAttribute("name", "홍길동");
		model.addAttribute("vo", vo);
	
		return "view/ex04";
	}
	
	//타임리프 내장 함수
	@GetMapping("/ex05")
	public String ex05(Model model) {
		
		//날짜의 형변환은 database, 자바, 화면에서 처리
		model.addAttribute("regdate", LocalDateTime.now()); //날짜형
		
		
		return "view/ex05";
	}
	
	//타임리프 include
	@GetMapping("/ex06")
	public String ex06() {
		
		return "view/ex06";
	}
	
	//타임리프 템플릿 모형 사용하기
	@GetMapping("/ex07")
	public String ex07() {
		
		return "view/ex07";
	}
	
	//실습
	@GetMapping("/quiz01")
	public void quiz01(Model model) {
		
		SimpleVO vo = SimpleVO.builder()
				.name("이순신")
				.num("1")
				.id("abc123")
				.build();
		
		model.addAttribute("vo", vo);
	}

}

 

- ex01

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> <!-- 타임리프 명시적 선언 -->
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

		<h3>타임리프 출력과 변수</h3>
		
		<!-- 타임리프 문법을 사용하려면 속성 앞에 th를 붙입니다. -->
		<!-- 동일한 표현입니다. -->
		<h3 th:text="${'hello world'}"></h3>
		<h3>[[${'헬로 월드'}]]</h3>
		
		<h3 th:text="${1 == 1}"></h3>
		<h3>[[${1 == 1}]]</h3>
		
		<h3 th:text="${ true and false }"></h3>
		<h3>[[${true and false}]]</h3>
		
		<h3>[[${ '가' eq '가나다' }]]</h3>
		
		<hr/>
		
		<!-- 변수 선언 -->
		<div th:with="a = 10">
			[[${a}]]
		</div>
	
		<div th:with = "a = '홍길동'" th:text="${a}">
		</div>
		
		<!-- value 값의 사용 -->
		<div th:with = "a = '이순신' ">	
			<input type="text" th:value="${a}">
		</div>	
		
		<hr/>
		
		<!-- if문 -->
		<div th:with="a=10">
			<span th:if="${a == 10}">[[${a + '입니다.'}]]</span>
			<span th:if="${a == 20}">[[${a + '입니다.'}]]</span>
		</div>
		
		<!-- if else 문 : unless는 동일한 조건을 적습니다. -->
		<div th:with="a=10">
			<span th:if="${a != 10}">10이 아닙니다</span>
			<span th:unless="${a != 10}">10 입니다</span>
		</div>
		
		<!-- 삼항 연산자 -->
		<div th:with="a=10">
			[[${a == 10 ? '참' : '거짓'}]]<br/>
			[[${a} == 10 ? '참' : '거짓']]
		</div>
		
</body>
</html>

 

- ex02

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h3>반복문</h3>
	[[${list}]]
	
	<ul>
		<li th:each="vo : ${list}">
			[[${vo.name}]]
			[[${vo.age}]]
		</li>
	</ul>
	
	<hr/>
	<h3>반복문과 state 변수(jstl = varState)</h3>
	
	<!-- each에 두번째 변수를 선언하면 상태 값을 담아줍니다. (index, count, size, current 등) -->
	<ul>
		<li th:each="vo, a : ${list}">
			[[${a.count}]]번 - [[${vo.name}]]
		</li>
	</ul>
	
	<h3>반복문과 조건문</h3>
	<ul>
		<li th:each="vo : ${list}" th:if="${vo.age % 2 == 0}">
			[[${vo.age  + '는 짝수입니다.'}]]
		</li>
	</ul>
	
	<h3>반복문과 조건문2</h3>
	<ul>
		<li th:each="vo : ${list}">
			<span th:if="${vo.age % 2 == 0}">짝수</span>
			<span th:unless="${vo.age % 2 == 0}">홀수</span>
		</li>
	</ul>
	

</body>
</html>

 

- ex03

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>	

	<h3>타임리프 block문</h3>
	
	[[${list}]]
	
	<hr/>
	
	<!-- block은 별도의 태그를 사용하지 않고, 마치 중괄호처럼 사용하고 싶을 때 적용 -->
	<ul>
		<th:block th:each="vo : ${list}">
		<li>[[${vo}]]</li>
		</th:block>
	</ul>
	
	<!-- 가짜 태그 -->
	<!-- <th:block>11</th:block> -->
	
	<hr/>
	<h3>타임리프 a태그</h3>
	
	<a href="test?a=10">일반 a 태그</a>
	<a th:href="@{test?a=10}">타임리프 a태그</a>

	<!-- 
		a링크로 값을 넘기는 방법
		경로(키=값, 키=값) 
		경로/변수/변수(변수=값, 변수=값)
	-->
	<ul>
		<li th:each=" vo : ${list}">
			<a th:href="@{test(age=${vo.age}, name=${vo.name} )}">키 값 넘기기(쿼리 스트링 방식)</a>
		
			<a th:href="@{test2/{age}/{name}(age=${vo.age}, name=${vo.name} )}">키 값 넘기기(쿼리 파라미터)</a>
		</li>
	</ul>
	
</body>
</html>

 

- ex04

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	[[${name}]] <br/>
	[[${vo}]] <br/>
	
	<!-- 컨트롤러에서 보내는 값을 JSON 문자열 형태로 받아줍니다. -->
	<script th:inline="javascript">
		console.log( '[[${name}]]' );
		console.log( '[[${vo}]]' );
		
		var aa = '[[${name}]]';
		var bb = '[[${vo}]]';
		
		
		console.log(JSON.parse(aa));
		console.log(JSON.parse(bb));
		
	</script>
	
	
</body>
</html>

 

- ex05

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


	<h3>타임리프 내장 함수(구글링 하세요)</h3>
	[[${regdate}]]
	
	<br/>
	[[ ${#temporals.format(regdate, 'yyyy-MM-dd') }]]
	
	<br/> <!-- 문자열 자르기 -->
	[[${#strings.substring('홍길동', 0, 1) }]]
	
</body>
</html>

 

- ex06

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h3>타임리프 include</h3>
	
	<!-- fragment를 가져오기 ~{경로 :: 가져올 이름} -->
	<div th:replace="~{/include/layout01 :: part1}"></div>
	<th:block th:replace="~{/include/layout01 :: part2}"></th:block>
	
	<!-- 파일을 통째로 가져오려면 ~{경로} -->
	<th:block th:replace="~{/include/layout02} "></th:block>
	
</body>
</html>

 

- ex07: second는 .second라고 쓰면 됨, script태그는 th:block 아래에 두면 사용이 가능함.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- ~{파일 경로 :: 템플릿 함수(~{::선택자} }  -->
	<th:block th:replace="~{ /include/layout03 :: 함수( ~{:: .second } ) }">

	<div id="first">
		아이디 선택자 #
	</div>
	
	<div class="second">
		클래스 선택자	
	</div>
	
	
	</th:block>

	<script>
		console.log("이 파일에서만 사용")
	</script>
	
</body>
</html>

 

 - layout01

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<div th:fragment="part1">
		<h3>프래그먼트1</h3>
	</div>
	
	<div th:fragment="part2">
		<h3>프래그먼트2</h3>
	</div>


</body>
</html>

 

- layout02

<header>
	<nav>
		<ul>
			<li><a href="#">메뉴</a></li>
			<li><a href="#">메뉴</a></li>
			<li><a href="#">메뉴</a></li>
			<li><a href="#">메뉴</a></li>
		</ul>
	</nav>
</header>

 

- layout03

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="함수(section)">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<header>
		공통 템플릿 헤더
	</header>
	
	<section th:replace=${section}>
		
	</section>
	
	<footer>
		공통 템플릿 푸터
	</footer>

</body>

</th:block>
</html>

 

- test

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h3>test 결과 화면</h3>

</body>
</html>

 

* ThymeleafController, quiz01, SimpleVO

더보기

- ThymeleafController

package com.simple.basic.controller;

import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.Date;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.simple.basic.command.BuilderVO2;
import com.simple.basic.command.SimpleVO;

@Controller
@RequestMapping("/view")
public class ThymeleafController {
	
	@GetMapping("/ex01") //get 방식만 허용
	public String ex01() {
		return "view/ex01";
	}
	
	@GetMapping("/ex02")
	public String ex02(Model model) {
		
		ArrayList<BuilderVO2> list = new ArrayList<>();
		for(int i = 1; i <= 10; i++) {
			BuilderVO2 vo = BuilderVO2
								.builder().name("홍길동" + i)
								.age(i)
								.build();
			list.add(vo);
		}
		
		//model
		model.addAttribute("list", list);
		
		return "view/ex02";
	}
	
	@GetMapping("/ex03")
	public String ex03(Model model) {
		
		ArrayList<BuilderVO2> list = new ArrayList<>();
		for(int i = 1; i <= 10; i++) {
			BuilderVO2 vo = BuilderVO2
								.builder().name("홍길동" + i)
								.age(i)
								.build();
			list.add(vo);
		}
		
		//model
		model.addAttribute("list", list);
		
		return "view/ex03";
	}
	
	//test
	//쿼리 스트링
	@GetMapping("/test")
	public String test(@RequestParam("age") int age,
					   @RequestParam("name") String name) {
		
		System.out.println("test 메서드 실행됨");
		System.out.println(age);
		System.out.println(name);
		
		return "view/test";
	}
	
	//쿼리 파라미터
	@GetMapping("/test2/{a}/{b}")
	public String test(@PathVariable("a") String a,
					   @PathVariable("b") String b) {
		
		System.out.println(a);
		System.out.println(b);
		
		return "view/test";
	}
	
	@GetMapping("/ex04")
	public String ex04(Model model) {
		
		
		BuilderVO2 vo = new BuilderVO2("이순신", 20);
		model.addAttribute("name", "홍길동");
		model.addAttribute("vo", vo);
	
		return "view/ex04";
	}
	
	//타임리프 내장 함수
	@GetMapping("/ex05")
	public String ex05(Model model) {
		
		//날짜의 형변환은 database, 자바, 화면에서 처리
		model.addAttribute("regdate", LocalDateTime.now()); //날짜형
		
		
		return "view/ex05";
	}
	
	//타임리프 include
	@GetMapping("/ex06")
	public String ex06() {
		
		return "view/ex06";
	}
	
	//타임리프 템플릿 모형 사용하기
	@GetMapping("/ex07")
	public String ex07() {
		
		return "view/ex07";
	}
	
	//실습
	@GetMapping("/quiz01")
	public void quiz01(Model model) {
		
		SimpleVO vo = SimpleVO.builder()
				.name("이순신")
				.num("1")
				.id("abc123")
				.build();
		
		model.addAttribute("vo", vo);
	}

}

 

- quiz01

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<th:block th:replace="~{/include/layout03 :: 함수(~{:: .wrap } ) }"> 
	<h3>이 화면에 진입할 때 SimpleVO를 이용하여 데이터를 출력 합니다. (값은 아무거나)</h3>
	<p>
		회원정보확인 링크에는 quiz_result01?키=값 형태로
		회원번호, 이름, 아이디 을 넘겨주세요
		
		아래 class="wrap" 부분만 layout03 템플릿에 전달 될 수 있도록 처리하세요
	</p>
		
	<div class="wrap">
		회원번호: [[${vo.num}]] <br/>
		이름: [[${vo.name}]] <br/>
		아이디: [[${vo.id}]] <br/>
		<br>
		<a th:href="@{quiz_result01(num=${vo.num}, name=${vo.name}, id=${vo.id} )}">회원정보확인</a>
	</div>
	</th:block>  
	
</html>

 

- SimpleVO

package com.simple.basic.command;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data //get, set, tostring
@NoArgsConstructor //기본 생성자
@AllArgsConstructor //모든 생성자
@Builder //빌더 패턴
public class SimpleVO {
	private String num;
	private String name;
	private String id;
	
}

'TIL > Spring boot' 카테고리의 다른 글

day88-spring boot  (0) 2023.02.17
day86-spring boot  (0) 2023.02.16
day85-spring boot  (0) 2023.02.15
day84-spring boot  (0) 2023.02.14
day82-spring boot  (0) 2023.02.09
profile

mjeongriver

@mjeongriver

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

검색 태그

티스토리툴바