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

7059 ワード
課題 課題 テキストリンク

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に表示される

以上

bootstrap--バックグラウンドのデータをフロントに読み込む方法