🔙뒤로가기

홈 컨트롤러 등록

package jpabook.jpashop.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";
    }
}

스프링 부트 타임리프 기본 설정

spring:
 thymeleaf:
 prefix: classpath:/templates/
 suffix: .html

<aside> ⚠️ 스프링 부트 타임리프 viewName 매핑

반환한 문자(home)과 스프링 부트 설정 prefix, suffix 정보를 사용해서 렌더링할 뷰 (html)를 찾는다.

참고: https://docs.spring.io/spring-boot/docs/2.1.7.RELEASE/reference/html/commonapplication-properties.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.html

<!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, shrinkto-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.html

<!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.html

<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>">
<div class="footer" th:fragment="footer">
  <p>&copy; Hello Shop V2</p>
</div>

CSS 적용 전

Untitled

참고: Hierarchical-style layouts 예제에서는 뷰 템플릿을 최대한 간단하게 설명하려고, header , footer 같은 템플릿 파일을 반복해서 포함한다. 다음 링크의 Hierarchical-style layouts을 참고하면 이런 부분도 중복을 제거할 수 있다. https://www.thymeleaf.org/doc/articles/layouts.html

view resources 등록