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設計参考
https://qiita.com/JoeB/items/b5d7854e21742a4c4e46
###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