SpringBootやってみる~DBアクセス(mybatis)編~ データ登録②

12690 ワード
メモ spring-boot 初心者 入門 メモ テキストリンク

目的

自己学習向け・初心者向けメモ。
前回の SpringBootやってみる~DBアクセス(mybatis)編~ データ登録① のアプリケーションをベースとする

概要

画面項目の追加、登録時のデータ入力チェックを行う
- 完成図(予定)
- テーブルへのカラム追加
- アプリケーションの実装
- アプリケーションの実行
- 次回

完成図

【検索画面】

【検索結果画面】

【登録画面】

【登録画面_入力チェック】

【登録確認画面】

テーブルへのカラム追加

ユーザー情報テーブルに生年月日を追加する

【userinfo(ユーザー情報)】

論理名 論理名 型 文字数 制約
id ID integer NOT NULL, PRIMARY KEY
name 名前 varchar 255
sex 性別 varchar 1
dob 生年月日 varchar 8

アプリケーションの実装

バリデーションの追加に関して変更したプログラムの構成は以下の通り

バリデーションを使うためにpom.xmlにvalidationを依存関係に追加する

pom.xml
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-validation</artifactId>
</dependency>

Formの各項目にバリデーションを追加する

そもそもバリデーションとは・・・・
入力内容や記述内容が要件を満たしているか、妥当性を確認すること

追加したバリデーション

アノテーション(javax.validation.*) 用途
@NotEmpty Nullおよび空でないことをチェックする
@Size 文字列の最小と最大の間のサイズかチェックする
@Pattern 文字列のパターンにマッチする
UserForm.java

/** 名前 */
@NotEmpty(message="名前を入力してください。")
private String name;

/** 性別 */
@NotEmpty(message="性別を選択してください。")
private String sex;

/** 生年月日 */
@NotEmpty(message="生年月日を入力してください。")
@Size(min=8, max=8, message="生年月日は8文字です。")
@Pattern(regexp="[0-9]*", message="生年月日は半角数字です。")
private String dob;

バリデーションを有効化する（@Validatedの追加）

UserForm.java
/**
 * 確認画面に遷移する
 * @param demoForm Formオブジェクト
 * @param result バインド結果
 * @return 確認画面または入力画面へのパス
 */
 @PostMapping(value = "/confirm", params = "next")
 public String confirm(@Validated UserForm userForm, BindingResult result){
    //チェック処理を行い、画面遷移する
    if (result.hasErrors()) {
    return "register";
    }
    return "confirm";
}

エラーメッセージを追加する

register.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登録画面</title>
</head>
<body>
    <form method="post" action="/confirm" th:object="${userForm}">
        <ul>
            <li th:each="error : ${#fields.detailedErrors()}" style="color: red">
                <span th:text="${error.message}"></span>
            </li>
        </ul>
        <p>名前：　<input type="text" th:value="*{name}" th:field="*{name}" /></p>
        <p>性別：　<for th:each="item : *{getSexItems()}">
                       <input type="radio" name="sex" th:value="${item.key}" th:text="${item.value}" th:field="*{sex}" />
                   </for>
        <p>生年月日：　<input type="text" th:value="*{dob}" th:field="*{dob}" maxlength="8"/></p>
        </p>
        <input type="submit" name="next" value="確認" />
        <input type="button" onclick="location.href='./'" value="戻る" />
    </form>
</body>
</html>

ソースコードの詳細はいかに記載
GitHub

アプリケーションの実行

名前以外入力

性別以外入力

生年月日 8桁以外入力

生年月日以外入力

次回

データの更新とか追加予定？