0
0

More than 1 year has passed since last update.

Spring + Thymeleaf + My Batisで行うCRUD操作 ~Create編~

Last updated at Posted at 2023-02-03

・はじめに

 この記事ではCRUD操作のデータを登録するCreate操作についてのやり方について書いていきます。SQLとのやり取りを簡単にするためにMy Batisを使用します。また、データクラスの記述を省略するためにLombokを使用しています。
 今回は読んだ本を登録するという機能のページを作っていきます。

~用意するクラス~

 ・Controllerクラス
   VIEWとModelを扱うServiceクラスとやり取りして必要な情報を取り出す司令塔的役割のクラス。

 ・データクラス
   使いたいデータのクラス。ログイン処理を行いたいのならログインに必要なデータ、例えばIDやパスワードを設定する。 LomBokの@DataをつけることによってSetterとGetterの文を省略します。

 ・Serviceクラス
   Modelとやり取りするクラス。SQLとやり取りしてデータの登録、取り出し、更新、削除を行わせるクラス。

 ・Mapperクラス
   My Batisを導入すると使えるもの。@Mapperを付けたクラスではSQLの操作をすることができ、メソッドに@Select, @Insert, @Update, @Deleteをつけることによって簡単にデータの登録、取り出し、更新、削除がでできます。

 ・SQLの設定
   Springではschema.sqlでSQLのテーブルを作ることができます。事前にデータを入れたい場合はdata.sqlで設定できます。

 ・HTMLファイル
   見た目に当たるものです。今回は簡単に作ります。

・事前準備

   あらかじめ行わなければならないことはSQLの設定です。SQLのテーブルを作り、そこに本のデータを登録します。

   今回はID本の名前出版社を設定します。IDはユーザーが決めるのでなく、自動的に登録されるようにします。そのため、自動的に数字を登録してくれるAUTO_INCREMENTを入れます。そして主キー設定であるPRIMARY KEYも設定します。

   テーブルはschema.sqlにSQL文を書くことによって作ることができます。

schema.sql
    DROP TABLE IF EXISTS Book;

    CREATE TABLE Book (
        bookId INTEGER PRIMARY KEY AUTO_INCREMENT,
        book_name VARCHAR(255),
        publisher VARCHAR(255)
);

・コードを書いていく

・HTMLファイルの設定

    今回のHTMLファイルは簡単なものにします。必要なページはアカウント登録の情報を入れてもらうフォーム形式にします。HTMLファイルの名前は`torokuHTML`にします。
    

Thymeleafの連携のために htmlタグの中にxmlns:th="http://www.thymeleaf.orgを入れます。これでThymeleafとの連携が可能です。そしてThymeleafの機能を使うためには、前にthを付けることによって使うことができます。例えばリンクを貼りたい場合はth:hrefです。そしてリンク先をコントローラーで設定したリンクにしたい場合は@{ }の中にリンクを書くとそこに飛ぶようにできます。

torokuHTML.html
    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
        <head> ~省略~ </head>
        <body>
            <h3>会員登録ページ</h3>
            <form th:action="@{/toroku/create}" th:method="@{post}">
                  <label>本の名前:</label>
                  <input type="text" name="book_name" /><br>
                  <label>出版社:</label>
                  <input type="text" name="publisher" /><br>
                  <button type="submit">登録</button>
            </form>
        </body>
    </html>

・Controllerクラスの設定

    次に、Controllerクラスの設定をします。今回は会員登録をするので/torokuというページに飛ぶと、登録フォームのページがででくる設定にします。さらに/toroku/createはサービスを呼び出し、入力された情報をSQLに登録するものにします。

Controller
    
    @Autowired
    BookService bookService;
    
    @RequestMapping("/toroku")
    public String torokuPage() {
        
        return "torokuHTML";
    }

    @PostMapping("/toroku/create")
    public String toroku(Book book) {
         //後で設定するサービスクラス
         bookService.insertBookService(book);

          return "redirect:/toroku";
    }
}

これで/torokuにいくと、torokuHTMLのページが表示されるようになります。

・データクラスの設定

   次に、データクラスの設定を行います。今回は本のID本の名前出版社を設定します。

Book.java
   @Data
    public class Book {
       private int bookId;
       private String book_name;
       private String publisher;
}

データクラスはこれで完成です。

・Mapperクラス

   次に、Mapperクラスの設定を行います。今回はCreate編なので@Insertをしていきます。My Batisの@Mapperはインターフェースにつけます。
   そしてメソッドに使いたいSQL文(Select, Insert, Update, Delete)のアノテーションを入れて使っていきます。アノテーションのあとにかぎかっこを付けて、そこにSQL文を書きます。値を#{データ名}にするとパラメータになり、受け取った値を操作してくれるようになります。
Mapper
    @Mapper
    public interface BookMapper{
        @Insert("INSERT INTO Book(book_name, publisher) VALUES(#{book_name}, #{publisher})")
        void insertBookInfo(Book book);
}

・Serviceクラス

    最後にServiceクラスを作っていきます。ここにはしてほしい処理を書いていきます。Controllerクラスが全体の司令塔なら、Serviceクラスは処理の司令塔兼実際に処理を行うクラスです。
    クラス宣言の前に@Serviceを入れます。クラス又はメソッドに@Transactionalを入れると、トランザクション処理をさせることもできます。@Autowiredは、Beanを呼び込むアノテーションです。簡単に言うとnewせずにインスタンスを呼ぶことができるものです。
Service
    @Service
    public class BookService {
    
    @Autowired
    BookMapper bookMapper;
    
    public void insertBookService(Book book) {
        bookMapper.insertBookInfo(book);
    }
}

これで完成です!

・確認

・ページに飛んでみる

  それでは実際に起動して入力した値がきちんとSQLに登録されているかを見ていきましょう!

  まずは、/torokuに接続すると、

screenshot.2023-02-04.jpg

このようなページが表示されます。(見やすいようにCSSを適用しています)

実際に入れて登録を押すと、入力した文字が消えます。こうなるともうすでに完了しています。試しに何個か入れてみましょう。

screenshot.2023-02-04 (1).jpg

・SQLの確認

  このwebページ上では、実際にSQLにデータが登録されているかどうかがわかりません。今の状態ではWeb上で確認することができないので、今回は実際にコマンドプロンプトで確認してみます。

screenshot.2023-02-04 (2).jpg

すると、Web上で入力したデータがしっかりとSQLに登録されていることを確認できました!

これで完成です。お疲れさまでした!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0