(第9回) 日記の新規登録機能を追加、CRUDのC(Create、作成)【Spring Boot2で日記ウェブアプリ】

環境と今回の目的

前回は、日記ウェブアプリのコントローラクラスに日記の削除処理をするメソッドを追加しました。
(第8回) 日記の削除機能を追加、CRUDのD(Delete、削除)【Spring Boot2で日記ウェブアプリ】

今回は、日記の新規投稿機能を開発します。CRUDでいうと、C（Create、データ作成）の部分にあたります。
フロントエンド（HTML、Thymeleaf）の方はすでに作ってあるので、コントローラクラスに日記の新規作成処理をするメソッドを追加していきます。

◾️開発環境やバージョン情報です。
OS：macOS Big Sur（バージョン11.7.1）
開発環境：Eclipse（Pleiades All in One、4.16(2020-06)、Java Full Edition版）
Spring Bootバージョン：2.7.5
->2.4でも確認済み
Java：11
データベース：H2
Bootstrap5.2.2

コントローラクラスに日記の新規投稿処理メソッドを追加

前回はコントローラクラスDiaryController.javaに日記の削除処理を行うdeleteメソッドを作成しました。
今回も同じくDiaryController.java内に、日記の新規作成処理を行うaddメソッドを追加します。

package com.example.demo;

import java.time.LocalDateTime;
import java.time.temporal.ChronoUnit;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
@RequestMapping("diary")
public class DiaryController {
  @Autowired
  DiaryRepository diaryRepository;
  
  //日記一覧情報の取得
  @GetMapping("summary")
  public String summary(Model model) {
    Iterable<Diary> diarys = diaryRepository.findAll();
    model.addAttribute("diarys", diarys);
    return "summary";
  }

  //指定されたidの日記を削除する
  @PostMapping("delete")
  public String delete(@RequestParam Integer id) {
    diaryRepository.deleteById(id);
    return "redirect:/diary/summary";
  }

  //日記の新規登録
  @PostMapping("add")
  public String add(@RequestParam String newdiary) {
    //ChronoUnit.SECONDSで秒以下を切り捨て
    Diary diary = new Diary(newdiary, LocalDateTime.now().truncatedTo(ChronoUnit.SECONDS));
    diaryRepository.save(diary);
    return "redirect:/diary/summary";
  }
}

addメソッドには@PostMapping("add")が付いていますので、下のURLにPOSTリクエストされた時に実行されます。

http://localhost:8080/diary/add

addメソッドの引数は"(@RequestParam String newdiary)"としていますので、HTTPのPOSTリクエストのリクエストパラメータnewdiaryを受け取る事ができます。

また、@RequestParamの変数名のnewdiaryは、HTMLフォームのname属性と一致させる必要があります。第7回のページから、フロント側のThymeleafのsummary.htmlの一部を抜粋して確認します。

<h3>新規投稿</h3>
<form th:action="@{/diary/add}" method="post">
<input type="text" name="newdiary" class="form-control mb-2">
<button type="submit" class="btn btn-primary">投稿する</button>
</form>

textタイプのinputタグがあり、そのデータがnewdiaryという名前(name属性)でPOSTリクエストで送信されてくるのがわかります。このあたりのコードは、削除処理のdeleteメソッドと同じ感じですね。

次に、addメソッド内の1行目ですが、まずは新規登録する日記のDiaryオブジェクトを生成しています。

Diary diary = new Diary(newdiary, LocalDateTime.now().truncatedTo(ChronoUnit.SECONDS));

Diaryオブジェクトは、POSTされた日記投稿本文テキストと投稿日時からなります。
投稿日時は秒までをDBに保持させたいので、ChronoUnit.SECONDSで秒以下を切り捨てします。

次に、addメソッド内の2行目で、新規投稿された日記データ(前行のDiaryオブジェクト)をDBのdiaryテーブルに登録しています。

diaryRepository.save(diary);

diaryテーブルへのデータ登録処理は、第4回ページで作成したリポジトリインタフェースDiaryRepository.javaを使用しています。saveメソッドは、Spring Data JPAのCrudRepositoryが宣言しているメソッドで、実装はSimpleJpaRepositoryクラスです。

そして最後の行ですが、画面をリダイレクトしています。

return "redirect:/diary/summary";

リダイレクト先URLは以下です。投稿された日記データの新規登録処理が完了したら日記一覧データを再表示するためです。

http://localhost:8080/diary/summary

このあたりの流れも削除処理のdeleteメソッド時と同じですね。

アプリの実行とブラウザで動作確認

それではSpring Bootアプリを起動して、ブラウザで動作確認をしてみます。
アクセスするURLは「http://localhost:8080/diary/summary」です。

日記一覧データが表示されたら、新規投稿のテキストボックスに適当に入力して投稿するボタンを押してみます。日記一覧データが再表示され、新規投稿したデータも一覧に表示されるはずです。

ブラウザで動作確認をしましたが、EclipseのコンソールビューでSQLログを確認したり、H2 Consoleでdiaryテーブルのデータを確認するのもいいと思います。
コンソールビューではinsert SQLのログが流れているのがわかりますし、H2 Consoleではdiaryテーブルに新規登録した日記データがレコード追加されている事がわかるはずです。

最後に、次回

以上今回は、日記投稿ウェブアプリのサーバサイド（コントローラクラス）の日記の新規投稿機能を追加しました。
これで日記データの新規登録処理ができるようになりましたが、今のままだと新規投稿データに何も入力しなくても空データが登録できてしまいます。

ですので次回は、新規投稿フォームにバリデーション機能（検証チェック）を追加して、空データなどが登録できないようにしていきます。

(第10回) Spring Boot2で新規登録フォームのバリデーション【Spring Boot2で日記ウェブアプリ】
Spring Bootの日記投稿ウェブアプリ開発入門トップ