「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のプラグインをインストールする方法」を参照してください。
Eclipse上で Spring Boot プロジェクトの作成は前回の記事「「Spring Tool Suite」を使用して「Spring boot + Thymeleaf」で簡単なWeb画面を作成」を参照してください。
1. 作成したページ（画面）
トップページ、入力ページ、出力ページの3画面を作成してみました。
（１）トップページ
http://localhost:8080 にアクセスすると「トップページ」が開きます。
「入力画面へ」リンクをクリックすると「入力ページ」へ遷移します。
（２）入力ページ
「名前」と「電話番号」の入力欄があります。
「出力画面へ」ボタンをクリックすると、入力した「名前」と「電話番号」で「出力ページ」が表示されます。
（３）出力ページ
入力ページで入力した「名前」と「電話番号」が表示されます。
「入力画面へ戻る」ボタンをクリックすると、「入力ページ」が表示されます。
2. 作成した手順
2.1. データを保持するクラスの作成
「com.example.demo」パッケージ配下に、以下の「DemoForm.java」を作成します。
「DemoForm.java」は「名前」（name）と「電話番号」（tel）を保持するクラスです。
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」を作成します。
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」を表示します。
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」を作成します。
<!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」を作成します。
<!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」を作成します。
<!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画面を作成」の「3. Spring Boot アプリケーションの実行」を参照してください。
以上