230213 Spring Boot Thymeleaf 문법 -a태그, block,
thymeleaf문법에서 a링크
th가 붙지 않고 href를 쓰면 정적인 값만 넣을 수 있다. 변하는 값은 넣지 못한다.
@{}를 사용하면 가변값을 보낼 수 있다.
이때, th:href="@{경로(키=값)}"or th:href="@{경로(키=${값})}"의 형태로 넘긴다.
여러값이 넘어가면, th:href="@{경로(키=값, 키=값)}" or th:href="@{경로(키=${값}, 키=${값})}"으로 &가 아닌 쉼표를 사용하여 넘긴다.
@PathVariable
쿼리파라미터
경로/값(키=값)
th:href="@{경로/{변수}/{변수2}(변수=${값}, 변수2=${값2})}"
컨트롤러에서 받을 때도,
@GetMapping("/경로/{a}/{b}")
public String test2(@PathVariable("a")String a,@PathVariable("b")String b) {
System.out.println(a);
System.out.println(b);
return "view/test";
}
이때, Mapping경로에 사용한 {변수명}과 @PathVariable()에 사용한 변수명이 같아야 한다.
스프링부트 뿐만 아니라 스프링에서도 사용할 수 있다.
@PathVariable은 Request의 역할.
가변변수를 넘기지 않으면 그냥 a태그 사용하면 된다.
ex03.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymleaf.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.name+' 나이: '+vo.age}]]</li>
</th:block>
</ul>
<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 href="test?age=${vo.age}">키값넘기기</a> -->
<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>
+)이때
<a href="test?a=10">일반 a태그</a>
<a th:href="@{test?a=10}">타임리프 a태그</a>는 예시용이다.
Controller에서
@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(age);
System.out.println(name);
return "view/test";
}
//쿼리파라미터
@GetMapping("/test2/{a}/{b}")
public String test2(@PathVariable("a")String a,@PathVariable("b")String b) {
System.out.println(a);
System.out.println(b);
return "view/test";
}각 a링크를 누르면 test페이지로 넘어가고, 콘솔문이 출력된다.
thymeleaf문법에서 block
태그를 감싸는 가짜태그. 조건문이나 반복태그를 감쌀 때 쓸 수 있다.
<th:block th:each="vo:${list}"></th:block>
이 태그는 화면에 나타나지 않는다. 개발자도구를 봐도 요소에 없다.
자바스크립트에서 타임리프 사용
th:inline="javascript"
<script th:inline="javascript">
console.log('[[${name}]]')
console.log('[[${vo}]]')
console.log('[[${vo.name}]]')
</script>
th:inline="javascript"을 넣지 않으면
console.log('[[${name}]]')는 잘 나오지만,
console.log('[[${vo}]]')는 단순 문자열로 나온다. 사용 불가.
단, ""가 있는 문자열로 받는다. 따라서 JSON.parse로 형변환을 해주어야 한다.
ex04.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
[[${name}]]
[[${vo}]]
<!-- 컨트롤러에서 보내는 값을 JSON문자열 형태로 받아줍니다. -->
<script th:inline="javascript">
var aa = '[[${name}]]';
var bb = '[[${vo}]]';
console.log(JSON.parse(aa));
console.log(JSON.parse(bb));
</script>
</body>
</html>
Controller에서
@GetMapping("/ex04")
public String ex04(Model model) {
BuilderVO2 vo = new BuilderVO2("이순신",20);
model.addAttribute("name", "홍길동");
model.addAttribute("vo",vo);
return "view/ex04";
}
이때, script에서 var bb=[[${vo}]]를 해도 콘솔창에서 제대로 출력되긴 하나,
받아오는 값이 없으면 에러가 발생한다.
원칙 => '[[${변수}]]'로 받고 JSON.parse를 한다.