「Spring Tool Suite」を使用して「Spring boot + Thymeleaf」でWeb画面を作成し画面遷移（ページ遷移）をさせる

「Spring Tool Suite」を使用して「Spring boot + Thymeleaf」でWeb画面を作成し画面遷移（ページ遷移）をさせてみたので、その時の手順を残します。

# 環境
+ Pleiades All in One Eclipse（リリース 2021-06）
+ Spring Tool Suite (STS) 4.11.0
+ Eclipse上で Spring Boot プロジェクトを作成済み

「Pleiades All in One Eclipse」と「Spring Tool Suite (STS)」のインストールについては前回の記事「[EclipseにSpring Tool Suiteのプラグインをインストールする方法](https://qiita.com/yasushi-jp/items/16507881b42a007aa660 "EclipseにSpring Tool Suiteのプラグインをインストールする方法")」を参照してください。

Eclipse上で Spring Boot プロジェクトの作成は前回の記事「[「Spring Tool Suite」を使用して「Spring boot + Thymeleaf」で簡単なWeb画面を作成](https://qiita.com/yasushi-jp/items/e6c6686f06c4390857ce "「Spring Tool Suite」を使用して「Spring boot + Thymeleaf」で簡単なWeb画面を作成")」を参照してください。


# 1. 作成したページ（画面）

トップページ、入力ページ、出力ページの3画面を作成してみました。

### （１）トップページ

http://localhost:8080 にアクセスすると「トップページ」が開きます。
「入力画面へ」リンクをクリックすると「入力ページ」へ遷移します。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/a0e803cc-d5d9-26bd-b575-7fde19539542.png)

### （２）入力ページ
「名前」と「電話番号」の入力欄があります。
「出力画面へ」ボタンをクリックすると、入力した「名前」と「電話番号」で「出力ページ」が表示されます。
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/e24ea494-08c6-adb5-fce5-74e996a389f2.png)

### （３）出力ページ
入力ページで入力した「名前」と「電話番号」が表示されます。
「入力画面へ戻る」ボタンをクリックすると、「入力ページ」が表示されます。
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/7cfaaedd-1974-3129-217e-22ef639b88ec.png)


# 2. 作成した手順

### 2.1. データを保持するクラスの作成
「com.example.demo」パッケージ配下に、以下の「DemoForm.java」を作成します。
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/8e5dcf8d-975c-45a6-aed9-16023890048d.png)

「DemoForm.java」は「名前」（name）と「電話番号」（tel）を保持するクラスです。

```java:DemoForm.java
package com.example.demo;

public class DemoForm {

	private String name;
	
	private String tel;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getTel() {
		return tel;
	}

	public void setTel(String tel) {
		this.tel = tel;
	}
}
```

### 2.2. Controllerの作成
「com.example.demo」パッケージ配下に、以下の「DemoController.java」を作成します。 
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/e8742910-2c14-7fad-5738-467cb76e40d4.png)

indexメソッドは「http://localhost:8080/ 」を受け付けたときの処理です。`@RequestMapping("/")`の記述が`/`のリクエストに対応します。
パラメータ`message`に「ようこそ！Spring boot + Thymeleafへ！」の文字列を設定します。
`return index;`で「index.html」を表示します。

inputメソッドは「http://localhost:8080/input 」を受け付けたときの処理です。「入力画面へ」リンク、「入力画面へ戻る」ボタンがクリックされたときに呼ばれます。`@RequestMapping("/input")`の記述が`/input`のリクエストに対応します。
パラメータ`demoForm`に「DemoForm」のオブジェクトを設定します。
`return input;`で「input.html」を表示します。

outputメソッドは「http://localhost:8080/output 」を受け付けたときの処理です。「出力画面へ」ボタンがクリックされたときに呼ばれます。`@RequestMapping("/output")`の記述が`/output`のリクエストに対応します。
メソッドの引数`@ModelAttribute DemoForm demoForm`でパラメータ`demoForm`を受け取り、パラメータ`demoForm`に設定します。
`return output;`で「output.html」を表示します。

```java:DemoController.java
package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class DemoController {

	@RequestMapping("/")
	public String index(Model model) {
		model.addAttribute("message", "ようこそ！Spring boot + Thymeleafへ！");
		return "index";
	}

	@RequestMapping("/input")
	public String input(Model model) {
		model.addAttribute("demoForm", new DemoForm());
		return "input";
	}

	@RequestMapping("/output")
	public String output(@ModelAttribute DemoForm demoForm, Model model) {
		model.addAttribute("demoForm", demoForm);
		return "output";
	}

}
```

### 2.3. トップページの作成
「src/main/resources/templates」配下に、以下の「index.html」を作成します。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/cc1f00da-2274-1438-91da-f1f795e01fdf.png)

```html:index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>トップページ</title>
</head>
<body>
	<p th:text="${message}"></p>
	<p>
		<a th:href="@{/input}">入力画面へ</a>
	</p>
</body>
</html>
```

### 2.4. 入力ページの作成
「src/main/resources/templates」配下に、以下の「input.html」を作成します。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/4244d353-8caf-6638-f93e-2ab6499faf46.png)

```html:input.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力ページ</title>
</head>
<body>
	<form th:action="@{/output}" th:object="${demoForm}" method="post">
		<p>
			名前：<input type="text" th:field="*{name}" />
		</p>
		<p>
			電話番号：<input type="text" th:field="*{tel}" />
		</p>
		<p>
			<input type="submit" value="出力画面へ" />
		</p>
	</form>
</body>
</html>
```

### 2.5. 出力ページの作成
「src/main/resources/templates」配下に、以下の「output.html」を作成します。
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/4af9a8f6-d6a1-2155-7141-ec9fbaf93228.png)

```html:output.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>出力ページ</title>
</head>
<body>
	<form th:action="@{/input}" th:object="${demoForm}" method="post">
		<div th:object="${demoForm}">
			<p>
				名前：<span th:text="*{name}"></span>
			</p>
			<p>
				電話番号：<span th:text="*{tel}"></span>
			</p>
			<p>
				<input type="submit" value="入力画面へ戻る" />
			</p>
		</div>
	</form>
</body>
</html>
```

Spring Boot アプリケーションの実行は「[「Spring Tool Suite」を使用して「Spring boot + Thymeleaf」で簡単なWeb画面を作成](https://qiita.com/yasushi-jp/items/e6c6686f06c4390857ce "「Spring Tool Suite」を使用して「Spring boot + Thymeleaf」で簡単なWeb画面を作成")」の「3. Spring Boot アプリケーションの実行」を参照してください。

---
以上