Eclipse で Spring Boot + Thymeleaf . (その２）

10878 ワード
spring-boot Thymeleaf Thymeleaf テキストリンク

はじめに

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. 共通とコンテンツフォルダー作成

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>

４．動作確認