【Javaお勉強日記】Springbootを使ってサンプルアプリ-2・モデルを使ったりバリデーション掛けたり
今回も防備録です。
モデルを使って画面とのデータのやりとりを管理する。
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>の直前に移植する
この記事が気に入ったらサポートをしてみませんか?