「SpringBoot」アノテーションPostMappingでフォームの値を別画面に渡す

2022年1月30日

環境
Windows10 64bit
Spring Boot 2.6.3
Spring Tool Suite 4
JDK 11
thymeleaf 3

アノテーション PostMapping
public @interface PostMapping
HTTP POST リクエストを特定のハンドラーメソッドにマッピングするためのアノテーション。
具体的には、@PostMapping は @RequestMapping(method = RequestMethod.POST) の
ショートカットとして機能する合成アノテーションです。
操作方法
1.pom.xmlに以下の依存関係ライブラリが必要です

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
</dependency>

2.ユーザー登録画面(値を送信する側index.html)
書式
th:action ="@{/フォーム名}"
サンプルコード

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>登録画面(値を送信する側)</title>
  </head>
  <body>
  <!--actionで送信先を指定　methodでpost方式を指定 -->
    <form method="post" th:action="@{/memform}">
      名前:<input type="text" name="username" />
      <input type="submit" value="送信" />
    </form>
  </body>
</html>

3.コントローラのクラス(MemberController.java)

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 MemberController {

      //memberフォルダは配下のindex.htmlを画面に表示
      @GetMapping("/member")
      public String input1() {
            return "member/index";
      }
      
      //@RequestParamでリクエストパラメータを受け取る
      @PostMapping("/memform")
      public String confirm(@RequestParam String username, Model model) {
            //index.htmlのテキストボックスのusername変数
            model.addAttribute("username", username);
            //addAttributeメソッドでキーに"addr"で値を設定します
            model.addAttribute("addr", "東京新宿区");
            return "member/userform";
      }
}

4.確認画面(値を受け取る)
ファイル名：src\main\resources\templates\member\userform.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
      <meta charset="utf-8" />
      <title>ユーザー登録確認画面(値を受け取る側)</title>
</head>

<body>
      名前: <p th:text="${username}"></p>
      住所: <p>[[${addr}]]</p>
</body>

</html>

5.実行確認
プロジェクトを右クリックして、「実行(R)」->「Spring Boot アノテーション」をクリックします
ブラウザに以下のURLを入力するとindex.htmlが画面に表示されます。
http://127.0.0.1:8080/member

Spring Boot

Posted by arkgame

Related posts: