【Javaお勉強日記】Springbootを使ってサンプルアプリ-2・モデルを使ったりバリデーション掛けたり

2021年2月4日 15:21

今回も防備録です。

モデルを使って画面とのデータのやりとりを管理する。

package com.example.demoapp.domain;

import lombok.Data;

@Data
public class User {
   private String name;
   private String email;
   private Integer age;
}

Lombokをimportして、メインクラスに@Dataを付与して、フィールド変数を宣言する。

package com.example.demoapp.controller;

@Controller
public class HomeController {
   
   @GetMapping("/form")
   public String readForm(@ModelAttribute User user){
       return "input_form";
   }
   @PostMapping("/form")
   public String handleConfirm(@ModelAttribute User user){
       return "confirm";
   }
}

で、Controller側で、メソッドの変数内で@ModelAttributeして、自作したUser型変数のuserを引数に取るようにする。

フォームを表示する側のメソッドでも@ModelAttributeが必要なことに注意。

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.thymelead.org">
<head>
   <meta charset="UTF-8">
   <title>input_form</title>
</head>
<body>
   <!-- th:object="${user}してるので、↓の*{name}で、${user.name} と等価 -->
   
   <form th:action = "@{/form}" th:object="${user}" method = "POST">
       <label>氏名</label>
       
       <input type ="text" th:field = "*{name}"><br>
       <label>メール</label>   
       <input type ="email" th:field = "*{email}"><br>
       <label>年齢</label>   
       <input type ="number" th:field = "*{age}"><br>        
       <button>送信</button>
   </form>
  
</body>
</html>

フォーム側のHTML。

フォームタグ内でth:object="${user}（変数名じゃなくて、クラス型を先頭小文字で）することで、user変数にアクセス出来て、裏で色々やらなくてもここまでの記述だけで各フォームの内容がuser変数に入る。

で、表示するときは

<!DOCTYPE html>
<html lang='ja' xmlns='http://www.thymeleaf.org'>
<head>
<meta charset='UTF-8'>
<title>confirm</title>
</head>
<body>
   <span th:inline="text">
       氏名：[[${user.name}]]
       メール：[[${user.email}]]
       年齢：[[${user.age}]]
   </span>
</body>
</html>

ってするだけで、表示側もuserにアクセス出来る。（[[]]で囲んで、${型.フィールド名}）

バリデーション機能を付けてみる

build.gradleのdependenciesに

implementation 'javax.validation:validation-api:2.0.1.Final'
runtimeOnly 'org.hibernate.validator:hibernate-validator:6.0.17.Final'

を追記。

package com.example.demoapp.domain.model;

import javax.validation.constraints.Email;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.Size;
import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class Inquiry {
   
   @NotBlank
   @Size(max = 60)
   private String name;
   
   @NotBlank
   @Email
   @Size(max = 254)
   private String email;
   
   @NotBlank
   @Size(max = 500)
   private String message;
}

↑各フィールドの宣言をする時に、バリデーション内容をアノテーションで指定する

で、フォームのhtml部分には以下のように記述

<div class="form-group">
   <label for="name" th:text="{#name}"></label>
   <imput type="text" class="form-control" th:errorclass = "is-invalid" th:field="*{name}"></imput>
   <div class="invalid-feedback" th:errors="*{name}"></div>
</div>

・ th:errorclass = "is-invalid"　で、エラーがあったらclassにis-invalidを追加する（＝エラーがあるときだけ適用するCSSを切り替えられる）

・th:field="*{name}"　このフィールドがエラーだったら↑のerrorclassが適用されるので、th:errorclassを使いたい時は、inptタグ内にname属性か、th:fieldを設定する。

・<div class="invalid-feedback" th:errors="*{name}"></div>　で、エラーメッセージがある場合に表示される。

Bootstrapを導入する

べた書きしても良いんだけど、バージョン管理とか考え始めると大変なので。

build.gradleファイルに追記：

implementation 'org.webjars:bootstrap:4.3.1'
implementation 'org.webjars:jquery:3.4.1'

各htmlファイルのhead内に追記：

<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}">
<script th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>

※Javascript関連が上手く動かない場合は、<script>タグのみ</body>の直前に移植する

この記事が気に入ったらサポートをしてみませんか？