SpringBoot：POSTの値を表示する、SpringMVCとは、Model-View-Controller作成

#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に表示される
　![課題4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/8a8d558c-b4ed-5880-7e44-92026efb5c18.png)
 ![課題5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/0ba41bbf-4047-8c30-410d-a8a4f313665a.png)


#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に表示される
![課題6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/64707ae6-d02d-8b19-9f46-c07c83346c11.png)
![課題7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/9e16953e-abd2-9fb9-bd07-b47ddfb7c29d.png)

#以上