「Java Spring Boot」Thymeleafで5つの画面遷移を行う

HTML、JavaScript、Thymeleafでの画面遷移

フォルダ構成

今回、画面遷移の実験を行うにあたり、プロジェクトをSpring Initializrで「Java Spring Boot+Gradle」の構成を作成しました。

your root/
|-- src/main/java/
|   `-- com.example/
|      `-- controllers/
|          `-- PageController.java
|          `-- TopController.java
`-- src/main/resources/
   |-- templates/
   |     `-- NextPage.html
   |     `-- Top.html
   `-- static/
        `-- css/
           `-- main.css

TopController.java

URL「http://localhost:8080/」でトップページを表示するためのコントローラです。サーバーのコントローラから、フロントへ「id」という名前のパラメータを渡しています。ModelAndViewを使用し、パラメータとビューをセットしています。

PageController.java

遷移先ページのコントローラです。

Top.html

トップページのビューファイルです。

CASE 1　：　遷移先をformタグに記載する

フロントエンドで処理（判定、チェック、メッセージ表示など）を行う必要がなければ一番スマートな記載です。

CASE 2　：　遷移先をonClickに記載する

CASE1と出来ることは一緒ですが、CASE1のほうがよりスマートです。

CASE 3　：　遷移先をformタグに記載し、javascriptメソッドで遷移する

フロントエンドで処理（判定、チェック、メッセージ表示など）を行いたい場合の記載方法です。

CASE 4　：　javascriptメソッドで遷移先を指定して遷移する

formタグに遷移先のactionなどを記載せず、javascriptの中で遷移先を動的に変更したい場合に使用できます。例えば、画面入力値に応じて遷移先の画面を切り替えたい時などに有効です。

CASE 5　：　コントローラからの戻り値を遷移先に含める

GETのURLパラメータに、コントローラから受け取った「id」を付ける方法です。

最終的にはこのような画面になります。

NextPage.html

遷移先ページのビューです。

main.css

今回の目的からするとCSSは必須ではないので外部ファイル化しました。