Eclipse에서 Spring Boot + Thymeleaf. (그 2)

10157 단어 spring-bootThymeleaf

소개



Spring Boot + Thymeleaf 샘플 프로그램을 Eclipse로 만들어 보자.
계속. Thymeleaf layout을 사용하여 공통 머리글, 바닥글을 만듭니다.

개발 환경



Windows 10 Pro 1709(16299.192)
Eclipse pleiades-4.7.3
java 1.8.0_162
spring-boot-2.0.2.RELEASE
thymeleaf-3.0.9.RELEASE

절차



1. 공통 및 콘텐츠 폴더 만들기
2. 머리글, 바닥글 만들기
3. 머리글, 바닥글 내장
4. 동작 확인

1. 공통 및 컨텐츠 폴더 작성



1-1.templates 폴더 아래에 contents 및 common 폴더 만들기







1-2.employee.html은 contents 폴더로 이동






1-3.view name을 "employee"에서 "contents/employee"로 변경



EmployeeController.java
package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class EmployeeController {

    @RequestMapping("/show")
    public ModelAndView show(ModelAndView mav) {
        EmployeeForm form = new EmployeeForm();
        form.setId("1");
        form.setName("Ken");
        form.setEmail("[email protected]");

        mav.addObject("employeeForm", form);
        mav.setViewName("contents/employee");

        return mav;
    }

}

2. 머리글, 바닥글 만들기



2-1.templates/common 폴더 아래에 header.html, footer.html 만들기



header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>header</title>
</head>
<body>
    <div th:fragment="common_header" th:remove="tag">
        <h1>
            <a th:href="@{/}" style="background: #e5eCf9;">Staff Management System</a>
        </h1>
    </div>
</body>
</html>

footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>footer</title>
</head>
<body>
    <div th:fragment="common_footer" th:remove="tag">
        <p style="text-align: center; background: #e5eCf9;">Copyright &copy; 20XX CompanyName</p>
    </div>
</body>
</html>

3. 헤더, 바닥글 내장



3-1.employee.html에 머리글, 바닥글 포함



employee.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello, Spring Boot!</title>
</head>
<body>

<div th:replace="common/header :: common_header"></div>  <!-- 追加 -->

<h1>Hello, Spring Boot!</h1>

<form th:action="@{/show}" th:object="${employeeForm}" method="post">
    <table>
        <caption>
            <strong>従業員検索</strong>
        </caption>
        <thead>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>EMAIL</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td th:text="*{id}"></td>
                <td th:text="*{name}"></td>
                <td th:text="*{email}"></td>
            </tr>
        </tbody>
    </table>

    <p>Name (optional): <input type="text" th:field="*{name}" />
       <em th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</em></p>
    <p><input type="submit" value="Submit" /></p>

</form>

<div th:replace="common/footer :: common_footer"></div>  <!-- 追加 -->

</body>
</html>

4. 동작 확인



Eclipse에서 Spring Boot + Thymeleaf. (1)
Chart.js를 Thymeleaf x SpringBoot로

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage