홈 화면과 레이아웃
홈화면
회원기능
- 회원등록
- 회원조회
상품기능
- 상품등록
- 상품수정
- 상품조회
주문기능
- 상품주문
- 주문내역조회
- 주문취소
홈 컨트롤러 등록
package jpabook.jpashop.domain.controller;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@Slf4j
public class HomeController {
@RequestMapping("/")
public String home() {
log.info("home controller");
return "home"; //home.html로 찾아가게끔 설정해주는.
}
}홈 컨트롤러 HTML
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header">
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="container">
<div th:replace="fragments/bodyHeader :: bodyHeader" />
<div class="jumbotron">
<h1>HELLO SHOP</h1>
<p class="lead">회원 기능</p>
<p>
<a class="btn btn-lg btn-secondary" href="/members/new">회원 가입</a>
<a class="btn btn-lg btn-secondary" href="/members">회원 목록</a>
</p>
<p class="lead">상품 기능</p>
<p>
<a class="btn btn-lg btn-dark" href="/items/new">상품 등록</a>
<a class="btn btn-lg btn-dark" href="/items">상품 목록</a>
</p>
<p class="lead">주문 기능</p>
<p>
<a class="btn btn-lg btn-info" href="/order">상품 주문</a>
<a class="btn btn-lg btn-info" href="/orders">주문 내역</a>
</p>
</div>
<div th:replace="fragments/footer :: footer" />
</div> <!-- /container --></body>
</html>Fragments header
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="/css/jumbotron-narrow.css" rel="stylesheet">
<title>Hello, world!</title>
</head>Fragments bodyheader
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="header" th:fragment="bodyHeader">
<ul class="nav nav-pills pull-right">
<li><a href="/">Home</a></li>
</ul>
<a href="/"><h3 class="text-muted">HELLO SHOP</h3></a>
</div>Fragments footer
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="footer" th:fragment="footer">
<p>© Hello Shop V2</p>
</div>
참고: Hierarchical-style layouts
> 예제에서는뷰템플릿을최대한 간단하게설명하려고, header , footer 같은템플릿 파일을반복해서
포함한다. 다음 링크의 Hierarchical-style layouts을참고하면 이런부분도 중복을 제거할수 있다. > https://www.thymeleaf.org/doc/articles/layouts.html
Thymeleaf Page Layouts - Thymeleaf
Summary In this article, we described many ways of achieving the same: layouts. You can build layouts using Thymeleaf Standard Layout System that is based on include-style approach. You also have powerful Layout Dialect, that uses decorator pattern for wor
www.thymeleaf.org
참고: 뷰템플릿변경사항을 서버 재시작없이 즉시반영하기
1. spring-boot-devtools 추가
2. html 파일 build-> Recompile
view 리소스등록
resources/static 하위에 css , js 추가
resources/static/css/jumbotron-narrow.css 추가
출처 : 인프런 강의: 실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발