「Spring Boot」thymeleafでフォームの入力値を別画面に送信する

2021年9月27日

1.依存関係ライブラリを追加
pom.xml 下記を追記

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

2.入力フォーム

ファイルパス:src\main\resources\templates\user\index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>ユーザの新規登録 入力フォーム</title>
  </head>
  <body>
   <!--送信先dispform -->
    <form method="get" th:action="@{/dispform}">
     ユーザー名: <input type="text" name="username" /><br/>
      パスワード: <input type="text" name="pwd" /><br/>
      <input type="submit" value="登録" />
    </form>
  </body>
</html>

3.コントローラの定義

package com.arkgame.study;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

//アノテーションController
@Controller
public class SampleController {

      // 送信先user
      @GetMapping("/user")
      public String createUser() {
            return "user/index";
      }

      // 送信先dispform
      @GetMapping("/dispform")
      public String Input(@RequestParam(name = "username") String username, @RequestParam(name = "pwd") String pwd,
                  Model model) {

            // 変数username、pwdをモデルに保存
            model.addAttribute("userInfo", "入力したユーザ名:" + username + " 入力したパスワード:" + pwd);

            // userフォルダ配下のdispform.htmlを表示
            return "user/dispform";

      }

}

4.フォームの値を表示

ファイルパス:src\main\resources\templates\user\dispform.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>ユーザーの入力情報を表示　フォームの項目の値を表示</title>
  </head>
  <body>
    <div th:text="${userInfo}"></div>
  </body>
</html>

5.application.properties

server.port =8788

6.動作テスト
http://127.0.0.1:8788/user
ユーザ名：testuser
パスワード:testpwd
「登録」ボタンを押下すると、次画面に遷移する
http://127.0.0.1:8788/dispform?username=testuser&pwd=testpwd

結果
入力したユーザ名:testuser 入力したパスワード:testpwd

Spring Boot

Posted by arkgame

関連投稿: