第5章 Thymeleafの利用

5.3 簡易ログインアプリケーション(Thymeleaf版)作成

5.3.1 アプリケーション概要

1

アプリケーション作成の目的
4.6で作成したプロジェクトをもとに、Thymeleafを利用したアプリケーション作成を学習していきます。

2

簡易ログインアプリケーション(Thymeleaf版)プロジェクト構成(完成状態)

5.3.2 ビルドファイルの修正

1プロジェクト直下の「pom.xml」ファイルを開く

図 5.3 1：pom.xmlを開くと、このような専用のビジュアルエディタが現れる。

2「依存関係（Dependencies）」タブに切り替える

図 5.3 2：「依存関係（Dependencies）」タブに切り替える。

3

「追加（Add）」ボタンを押してダイアログに下記の内容を入力し、「OK」ボタンをクリック
Group Id: org.springframework.boot
Artifact Id: spring-boot-starter-thymeleaf


図 5.3 3：グループId（Group Id）とアーティファクトId（Artifact Id）を記入し、OKする。

4

「pom.xml」タブに切り替え、下記の記述が追加されていることを確認し、ファイルを保存

【ファイル名：pom.xml】


図 5.3 4：これでThymeleafを利用するためのライブラリを用意してくれるようになる。

5.3.3 テンプレートファイルの作成

1

「src/main/resources」パッケージの「templates」フォルダ内に「login」フォルダを作成

2

1で作成した「login」フォルダ内に「form.html」「success.html」を作成

3

2で作成した「form.html」ファイルに以下に示すソースコードを記述する。
（赤く囲まれた部分以外はhtmlファイル作成時にデフォルトで追加してくれるようになっている。）

■ソースコード
【ファイル名：form.html】


図 5.3 5：プロジェクト準備完了

4

2で作成した「success.html」ファイルに以下に示すソースコードを記述する。

■ソースコード
【ファイル名：success.html】


図 5.3 6：プロジェクト準備完了

5.3.4 クラスファイルの作成

1

「jp.co.f1.spring.login」パッケージに「LoginThymeleafController.java」の作成とソースコードの記述

作成した「LoginThymeleafController」クラスファイルに以下に示すソースコードを記述する。

■ソースコード
【ファイル名：LoginThymeleafController.java】

ソースを表示
印刷SyntaxHighlighterについて
1package jp.co.f1.spring.login;
2 
3import org.springframework.stereotype.Controller;
4import org.springframework.web.bind.annotation.GetMapping;
5import org.springframework.web.bind.annotation.PostMapping;
6import org.springframework.web.bind.annotation.RequestParam;
7import org.springframework.web.servlet.ModelAndView;
8 
9@Controller
10public class LoginThymeleafController {
11 
12  // 「/loginForm」へアクセスがあった場合
13  @GetMapping("/loginForm")
14  public ModelAndView loginForm(ModelAndView mav) {
15    // 画面に出力するViewを指定
16    mav.setViewName("login/form");
17    // ModelとView情報を返す
18    return mav;
19  }
20 
21  // 「/login」へPOST送信された場合
22  @PostMapping(value = "/login")
23  // POSTデータ（必須）を受け取る
24  public ModelAndView login(@RequestParam String id, @RequestParam String pass, ModelAndView mav) {
25    // Viewに渡す変数をModelに格納
26    mav.addObject("id", "Your ID is " + id + ".");
27    mav.addObject("pass", "PASS is " + pass + ".");
28    // 画面に出力するViewを指定
29    mav.setViewName("login/success");
30    // ModelとView情報を返す
31    return mav;
32  }
33 
34}

図 5.3 7：プロジェクト準備完了

5.3.5 アプリケーションの実行

1

アプリケーションの実行

2

アプリケーションにアクセス(ログイン情報入力画面)
以下のアドレスから簡易ログインアプリケーションにアクセスします。
URL：http://localhost:8080/loginForm


図 5.3 8：アプリケーションアクセス画面(ログイン情報入力画面)

3

アプリケーションにアクセス(ログイン情報表示画面)
上記のように「ID」と「PASSWORD」を入力し「Login」ボタンを押下すると、次の画面に遷移し結果が表示されればアプリケーション動作は成功です。


図 5.3 9：アプリケーションアクセス画面(ログイン情報表示画面)

NEXT>> 5.4 簡易ログインアプリケーションの説明(Thymeleaf版)

f