BLOG

Springの画面遷移について

こんにちは!りゅうです。
今回はSpringbootの画面遷移部分ついて書いてみました。

この記事で実現したいこと
SpringとGradleを使用し、簡単な画面遷移のできるアプリケーションを作成

使用したベース

まずは以下のSpringInitializrでサンプルのベースを取得してきます。
https://start.spring.io

設定内容はこんな感じです。

Dependenciesに以下を選択しています。
・Spring web Webサービスを提供するフレームワーク
・Thymeleaf  HTMLなどのテンプレートエンジン(ここではControllerを使用するために必要)

必要なファイルを作成

全部で4つのファイルを作成していきます。
コントローラ(画面ごとに分けて作成しました。)
・ HomeController
・ ListController
コントローラに対応するページ
・home.html
・list.html

以下はsrc直下の構成です。

コントローラはApplicationファイルと同じ階層にフォルダを作成し、その直下に格納しています。
コントローラで表示したいhtmlのページをresources>templates直下に配置しています。

コントローラ

SpringのControllerは@Controllerのアノテーションを付けることで認識してもらえます。
@RequestMappingに遷移先を指定します。
メソッドの戻り値(home)が指定したhtml(home.html)を呼び出す仕組みになっています。

ListController はhome部分をlistに変えているだけです。

HTML部分
勤怠管理システムという体で作成しました。
それぞれお互いの画面を行き来できるボタンを配置しました。

ホーム画面

勤怠表画面

ビルドと起動

必要なファイルの作成が終わったらターミナルを開き、アプリのフォルダに移動、ビルドコマンドでビルドします。
./gradlew build

ビルドが問題なくできたら以下のコマンドでアプリを起動します。
./gradlew bootRun

ターミナルで起動が確認できたら以下のリンクからアクセスします。
http://localhost:8080/home

こんな感じで表示できているかと思います。

home.html

list.html

最後に

今回はただ画面遷移するだけでしたが、勤怠管理システムとしては勤怠を管理するServiceやModelの実装もできたら、アプリとしては一通り使えるものになるので、実装していこうと思っています。できればログイン機能の実装までしたいところです。

今回は以上になります。
ご覧いただき、ありがとうございました。

BLOGトップへ戻る