SpringBootポートフォリオ作成_画面

SpringBootポートフォリオ作成

要件

Spring Bootで一通りアプリを書く
・Todo項目追加、一覧取得、完了済みマークメソッド
・lombok ログ　validation jQuery
JUnitテストケースで単体テスト作成
Git GitHUb
Docker(-compose)を使用
AWSでデプロイ

作業手順

・アプリケーションで使用するデータベースを作成する。
・STS で新規プロジェクトを作成する。
・テーブル定義を作成する。
・URL 設計を作成する。
・マイグレーションファイルを作成する。
・機能ごとに...
・マッパーやドメインを作成する。
・コントローラーを作成する。
・テンプレートを作成する。

新規プロジェクト作成

名前：springtodo
Javaバージョン：11
グループ：dev.itboot
成果物：springtodo
バージョン：1.0.0説明省略
パッケージ：dev.itboot.mb
依存関係で以下を選択して
SpringBootDevTools（開発ツール）
Lombok（開発ツール）
Validation=検証（I/O)
MyBatisFramework（SQL）
H2Database（SQL）
PostgresSQL Driver
Thymeleaf（テンプレート・エンジン）
SpringWeb（Web）
SpringDataJPA

テーブル定義・URL設計参考

application.properties

mybatis.configuration.mapunderscoretocamelcase=true
spring.datasource.url=jdbc:h2:mem:spring_demo
server.port=8080
ローカルではH2を使うことにする。
http://localhost:8080/h2-console
←新規で立ち上げることをお勧めします。

lombokの設定

1.サイトからlombok.jarをダウンロードする。

2.⁨⁨/Applications/SpringToolSuite4.app/Contents/Eclipse/へlombok.jarを配置する。

3./Applications/SpringToolSuite4.app/Contents/Eclipse/SpringToolSuite4.iniへ下記を追記する。
-javaagent:/Applications/SpringToolSuite4.app/Contents/Eclipse/lombok.jar

ログについて

ログ設定

lombok 設定必要
@Slf4j
→ アノテーション必要。

ログのレベルを変えたい。→

application.properties に
logging.level.<パッケージ名>や<クラス名>を追加
logging.level.com.example.demo=trace

パスの指定

logging.file.path=./log

ファイル名の指定

logging.file.name=./log/application.log

バリデーション

その1

参考アドレス
https://itsakura.com/java-springboot-validate

参考プログラム抜粋

package dev.itboot.mb.domains;

import java.util.Date;

import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;

import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.format.annotation.DateTimeFormat.ISO;

import lombok.Data;

@Data
public class TaskForm {
    private int id;
    private boolean status;
//  @NotBlank(message = "必須項目です")
    @NotBlank
    @Size(max = 60)
//  @Size(min = 3, max = 6, message = "3文字から6文字で入力して下さい")
    private String title;
//  @NotNull(message = "必須項目です")
    @NotNull
    @DateTimeFormat(iso = ISO.DATE)
    private Date lmt;
}


    @PostMapping("/add")
    public String create(@Validated TaskForm taskForm, BindingResult bindingResult,
            @RequestParam Map<String, String> requestParams) throws Exception {

        if (bindingResult.hasErrors()) {
            return "add";
        } else {
            String title = requestParams.get("title");
//          System.out.println(title);
            String lmt = requestParams.get("lmt");
//          System.out.println(lmt);
            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
            int id = 0;
            Task t = new Task(id, false, title, dateFormat.parse(lmt));
            taskMapper.add(t);
            log.info("登録遷移処理");
            return "redirect:/";
        }
    }

手順

resourcesの直下に
ValidationMessages.propertiesを設定
注意
UTF-8にすること
例：
javax.validation.constraints.NotBlank.message = 必須入力です。
javax.validation.constraints.NotNull.message = 必須入力です。
javax.validation.constraints.Size.message ={min}から{max}の範囲内でなければなりません。

今の時点でのつまずいたところ・・・

@DateTimeFormat(iso = ISO.DATE)をつけ忘れ・・・
参考エラー
Failed to convert property value of type java.lang.String to required type java.util.Date for property lmt; nested exception is org.springframework.core.convert.ConversionFailedException: Failed to convert from type [java.lang.String] to type [java.util.Date] for value 2021-06-18; nested exception is java.lang.IllegalArgumentException

jQuery

手順

POMに以下を追加

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.5.1</version>
        </dependency>

HTML下部に指定
<script src="webjars/jquery/3.5.1/jquery.min.js"></script>  
<script type="text/javascript" th:src="@{/script.js}"></script>


$(function(){
        $("#title").on('keydown keyup change', function() {
                var count = $(this).val().length;
                $("#count").text(count);
                if(count > 60) {
                    $("#count").css({color: 'red', fontWeight: 'bold'});
                }else{
                    $("#count").css({color: '#333', fontWeight: 'normal'});
                }
        });
});

  <div class="todo-container">

      <h1 class="h3 mb-4">タスクを追加する</h1>

      <div class="card">
        <div class="card-body">
          <form action="/add" th:object="${taskForm}" method="post">
            <div class="form-group">
              <label for="title">タイトル</label>
              <input class="form-control" th:field="*{title}" />
              <span class="text-danger" th:if="${#fields.hasErrors('title')}" th:errors="*{title}"></span>
            </div>
            <div class="form-group">
              <label for="limit">期限</label>
              <input class="form-control"  type="date" th:field="*{lmt}"/>
              <span class="text-danger" th:if="${#fields.hasErrors('lmt')}" th:errors="*{lmt}"></span>
            </div>
            <div class="d-flex justify-content-between align-items-center">
              <a href="/" class="btn btn-outline-primary">戻る</a>
              <button class="btn btn-primary" type="submit">追加する</button>
            </div>
            <div class="form-group">
              <span id="count"></span>/60
            </div>
          </form>   
        </div>
      </div>
    </div>

テスト作成

クラスを指定して新規→テストケース作成
@SpringBootTest

Docker(-compose)を使用をして確認を行った。

特記事項

postgres環境で試したことで色々な問題が出た。
SQLは手動で流した。試行錯誤の結果

CREATE SEQUENCE tasks_seq;

CREATE TABLE tasks (
id integer NOT NULL DEFAULT nextval('tasks_seq'),
status BOOLEAN NOT NULL,
title VARCHAR(100) NOT NULL,
lmt DATE NOT NULL
);
ALTER SEQUENCE tasks_seq
OWNED BY tasks.id

INSERT INTO tasks(id, status, title, lmt) values(nextval('tasks_seq'), 'f', 'ドリブル練習', CURRENT_DATE);
INSERT INTO tasks(id, status, title, lmt) values(nextval('tasks_seq'), 'f', 'シュート練習', CURRENT_DATE);

AWS上にリリースを行なった。

つまずいた点　SQLがうまくいかなかった。
postgresのバージョンが違うのだろうか？

参考

http://springmybatis-env.eba-fb6zgdsj.ap-northeast-1.elasticbeanstalk.com/
https://github.com/noikedan/springtodo