POSTの値を表示する
ここでは以下のことを実施します。
1.コントローラでPOSTの値を取得する
2.ThymelefでPOSTの値を表示する。
依存関係は以下を選択する
・Spring Boot DevTools
・Thymeleaf
・Spring Web
コントローラ作成
コントローラを作成します。
@PostMapping
HTTPのPOSTリクエストを受け付ける。"/confirm"など、
パスの指定方法は@GetMappingと同じ
package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class HomeController {
@GetMapping("/")
public String index() {
return "form";
}
@PostMapping("/confirm")
public String confirm(@RequestParam String message,Model model) {
model.addAttribute("message",message);
return"confirm";
}
}
thymeleafを作成
POST送信用のHTMLを作成する。
th:action
フォームのPOST先を@{パス名}で指定する。
@{...}はリンクURL式${...}は変数式という
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form th:action="@{/confirm}" method = "post">
<label>メッセージ：
<input type="text" name ="message">
</label>
<button>送信</button>
</form>
</body>
</html>
確認用のHTML
コントローラ側でモデルに変数messageを登録しているので
confirm.thmlで扱うことができる。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
メッセージ：<span th:text="${message}">
</span>
</body>
</html>
確認
表示された画面で、メッセージに文字を入力。
送信ボタンを押下するとその値がconfirm.htmlに表示される
Spring MVCとは
Spring MVCはWebアプリケーションを作成するためのフレームワーク
MVCはソフトウェア設計の1つで機能をModel、View、Controllerの3つに分割して
それらが連携して処理をする。
Spring MVCはMVCの中でもFrontControllerに分類されている。
中央のフロントコントローラが処理の中継を行い、管理するパターン
Model-View-Controllerを作成
依存関係は以下の設定
・Spring Boot DevTools
・Lombok
定型コードの削除に役立つjavaアノテーションライブラリ
・Thymeleaf
・Spring Web
モデルの作成
モデルを作成する。
@Data
Lombokの@Dataアノテーション
GatterやSetter、toStringなどの定型コードを自動生成してくれる。
package com.example.demo;
import lombok.Data;
@Data
public class User {
private String name;
private String email;
private String age;
}
コントローラの作成
@ModelAttribute
モデル属性にバインドする。
package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import com.example.demo.User;
@Controller
public class HomeController {
@GetMapping("/from")
private String readForm(@ModelAttribute User user) {
return "from";
}
@PostMapping("/form")
private String confirm(@ModelAttribute User user) {
return "confirm";
}
}
Thymeleaf作成
th:object
フォームにバインドするオブジェクトを設定
今回はコントローラ側で用意した"user"オブジェクトを設定している。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form th:action="@{/form}" th:object="${user}" method="post">
<label for="name">氏名： </label>
<input type="text" th:field ="*{name}">
<br>
<label for="email">E-Mail： </label>
<input type="email" th:field ="*{email}">
<br>
<label for="age">年齢： </label>
<input type="number" th:field ="*{age}">
<br>
<button>送信</button>
</form>
</body>
</html>
confirm.htmlを作成
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span th:inline="text">
氏名：[[${user.name}]]<br>
E-Mail:[[${user.email}]]<br>
年齢：[[${user.age}]]<br>
</span>
</body>
</html>
確認
表示された画面で、メッセージに文字を入力。
送信ボタンを押下するとその値がconfirm.htmlに表示される
