概要

記事一覧はこちらです。

下記の概要の Web アプリケーションを作成します。

今回は以下の方法を知るためにサンプルを作成します。
- Spring Boot のプロジェクトに npm を使用して Bootstrap や AdminLTE の CSS のライブラリをインストールする方法
- webpack を使用して各画面の js ファイルを生成する方法
- MySQL, PostgreSQL ではなく H2 Database を使用し、Flyway を使用してテーブルを作成する方法（別途 DB のソフトをインストールすることなく試せるサンプルを作成できるようになりたい）
- Geb でテストを作成する方法
Web で webpack に関する記事を見ていると CSS, Javascript, 画像ファイル等の複数ファイルを１ファイルにまとめてるのが本来の使い方のようなのですが、今回は CSS や画像ファイル等 Javascript 以外のファイルは１つにまとめずに npm-scripts でコピーするだけにし、Javascript のファイルだけ webpack で１つにまとめます。
以下の仕様の入力フォームを作成します。
- 入力画面１ → 入力画面２ → 入力画面３ → 確認画面 → 完了画面、の５画面構成にします。
- 確認画面から修正したい項目がある入力画面へ戻れるようにします。
- 入力されたデータは入力画面１～３、確認画面を遷移している時はセッションに保存します。
- 確認画面で確認ボタンが押されたら DB に保存してメールを送信した後、完了画面へ遷移します。
画面は Bootstrap + AdminLTE で作成します。AdminLTE は本来管理画面向けですが、この２つを組み合わせて npm でインストールするサンプルが欲しいので、この組み合わせで作成します。
jQuery は 3 系ではなく AdminLTE が使用している 2 系にします。
これまでは Bootstrap, jQuery, AdminLTE を build.gradle にスクリプトを書いてインストールしていましたが、今回は Node.js をインストールして npm + npm-scripts でインストールします。
Javascript は webpack を使用して各画面毎の js ファイルを生成するようにします。
画面のテストは Geb を使用してみます。Selenide にするか迷いましたが、個人的に Groovy を気に入っているので Geb を試すことにしました。
Project は ksbysample-boot-miscellaneous/boot-npm-geb-sample に作成します。
構成要素は、以下の想定です。
- Spring Boot 1.5
- Spring Session（Redis は使用せず spring.session.store-type=hash_map で設定します）
- Thymeleaf 3
- Doma 2
- FreeMarker
- Bootstrap
- AdminLTE
- jQuery
- H2 Database
- Flyway
以下の順序で進める予定です。
- Project の作成
- Node.js のインストール
- Bootstrap, AdminLTE のインストール
- URL の決定
- 画面の HTML + Controller クラスの作成
- テーブルの作成、Flyway によるテーブル作成処理の作成
- 入力画面の作成
- 確認画面の作成
- 完了画面の作成
- Geb によるテストの作成