Eclipse で Spring Boot + 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フォルダーを作成する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/0cba0f0b-9b7f-c8f1-d82b-9646a5b97a18.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/abffb342-75a0-cef4-728e-c9a68473fe49.png)

#### 1-2.employee.htmlはcontentsフォルダーに移動する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/55465440-e173-93eb-9b3b-a6d8583e848a.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/9a05b7e4-bb47-c462-a7e9-991b34feed0a.png)

#### 1-3.view nameを"employee"から"contents/employee"に変更する
``` java: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("ken@mail.coml");

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

        return mav;
    }

}
```

### 2. ヘッダー、フッター作成
#### 2-1.templates/commonフォルダーの下に、header.html、footer.htmlを作成する
``` 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>
```
``` 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にヘッダー、フッターを組み込む
``` 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>
```

## ４．動作確認
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/a869f17c-4c3e-4d0d-61ce-11f6637d961b.png)