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

環境
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に以下の依存関係ライブラリが必要です

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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 ="@{/フォーム名}"
サンプルコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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)

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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";
}
}
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"; } }
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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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

関連投稿:

  1. 「Spring Boot 2.6」アノテーション@RestControllerでlistの戻り値を返す
  2. 「SpringBoot」Spring Tool Suite4.8でSpring Bootアプリケーションを実行する方法
  3. 「Spring Boot」HttpMessageConverters クラスのサンプル
  4. [Spring Boot]Modelクラスでリスト(list)の値を渡すサンプルコード

Spring Boot

Posted by arkgame