컨트롤러가 있는 HomeController.java 클래스 생성
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "index";
}
}
index.html생성
<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello Page</h1>
<p th:text="${#dates.format(new java.util.Date(), 'dd/MM/yyyy HH:mm')}"></p>
<p th:text="${#numbers.formatInteger(1234,7)}"></p>
<p th:text="${#strings.toUpperCase('Welcome to Spring.')}"></p>
</body>
</html>Thymeleaf가 제공해주는 utility를 사용한다.
index.html 수정(select과 같이 여러개의 값을 처리하기 위해)
<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello page</h1>
<p th:text="'from parameter... id=' + ${param.id[0] + ',name=' + param.name[0]}"></p>
</body>
</html>parameter로 들어올 때 같은 변수의 값으로 여러개의 다른 값이 들어올 때가 있다. thymeleaf에서는 무조건 배열형식으로 받으며 ""안에 단순 문자열을 같이 사용하고 싶다면 ' '을 안에 문자를 넣으면 해결된다
messages.properties파일 생성
content.title=Message sample page.
content.message=This is sample message from properties.message를 이용하려면 반드시 파일의 이름은 messages.properties로 설정해야한다.
index.html 수정(message)
<body>
<h1 th:text="#{content.title}">Hello page</h1>
<p th:text="#{content.message}"></p>
</body>model을 통해서 값이 들어왔다면 ${ }를 사용해야되지만 message를 통해서 들어오기때문에 #{ }를 사용해야한다.
application.properties
logging.level.root=warn
logging.level.org.springframework.web=debug
spring.messages.encoding=utf-8logging level을 debug로 낮추기 위한 작업을 하였고 브라우저에서 한글을 제대로 인식하지 못하기 때문에 utf-8로 바꾸어 인식할 수 있도록 바꿔주었다.
index.html 수정(link와 message)
<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title th:text="#{content.title}"></title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css">
<script th:src="@{/js/jquery-3.6.0.min.js}"></script>
<script>
$(function(){
alert('hello');
});
</script>
</head>
<body>
<h1 class="text-center" th:text="#{content.message}">Hello page</h1>
<p>
<a th:href="@{/home/{orderId}(orderId=${param.id[0]})}">link</a>
</p>
</body>
</html>static밑에 있는 정적페이지(css, image, js)를 link형식으로 사용해야하기 떄문에 @{ }를 사용했으며 {orderId}를 사용하여 바뀔 수 있게 만들고 (orderId=${param.id[0]})를 사용하여 orderid에 대한 정의를 내려준다.
messages.properties안에 있는 message를 처리하기 위해 #{ }를 사용한다.
MemeVO생성
@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
public class MemberVO {
private int userid;
private String username;
private int age;
}
HomeController.java수정
@Controller
public class HomeController {
@RequestMapping("/")
public ModelAndView index(ModelAndView mav) {
mav.setViewName("index");
//mav.addObject("msg", "Current data.");
MemberVO member = new MemberVO(1, "김지민", 24);
mav.addObject("object", member);
return mav;
}
}만들어진 VO를 바탕으로 ModelAndView에 member에 각각의 변수를 넣어주고 return한다.
index.html수정(객체의 변수를 사용하기위함)
<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title th:text="#{content.title}"></title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"
type="text/css">
<script th:src="@{/js/jquery-3.6.0.min.js}"></script>
<script>
$(function() {
alert('hello');
});
</script>
</head>
<body>
<h1 class="text-center" th:text="#{content.message}">Hello page</h1>
<ul th:object="${object}">
<li>id : <span th:="*{id}"></span></li>
<li>name : <span th:text="*{username}"></span></li>
<li>age : <span th:text="*{age}"></span></li>
</ul>
</body>
</html>리스트형식으로 나타내기 위해 ul를 사용하였고 th:object를 이용하여 객체를 가져온다.
*{ }를 이용하여 object안에있는 필드를 가져와 사용이 가능하다
'SpringBoot 코딩' 카테고리의 다른 글
| 7.2 Mybatis와 hikariCP를 이용한 프로젝트 만들기(BootJdbcDemo) (0) | 2021.11.26 |
|---|---|
| 6. Database(NCloud)를 이용한 SpringBoot (BootJdbcDemo) (0) | 2021.11.24 |
| 4. 정적페이지를 이용한 SpringBoot Project(spring web) (0) | 2021.11.23 |
| 3. spring initializr을 이용한 project만들기(demo) (0) | 2021.11.23 |
| 2. Spring Starter Project로 SpringBoot만들기(demo) (0) | 2021.11.23 |
