Spring BootとThymeleafで簡単なフォーム入出力を行う
■ なにをするのか
Spring BootとThymeleafを使ってフェームの入出力を行うテストアプリケーションを作成する。次の画像は完成イメージである。
氏名、性別、好みを入力し、結果を出力する。出力する際に男性なら「くん付け」、女性なら「ちゃん付け」で呼称とする。なお、CSSは一切使用しないものとする。
アプリケーションは非常にシンプルであるが、GETとPOSTの際に処理を切り分けるなどの、コントローラーの基本が学べる内容である。
■ 同期
Spring BootとThymeleaf を使ってGET, POSTを利用した実装の大まかな流れを掴むために簡単なサンプルを作って確認しようとした際に作成したものである。他の初学者の一助になればと思い投稿する。
■ 全体の流れ
1. HTMLを作成
2. コントローラーを実装と解説
3. 実行
■ 前提
念の為、動作環境情報を掲示する。
環境
OS : macOS Mojave 10.14
JDK : jdk1.8.0_231.jdk
IDE : IntelliJ IDEA
ビルドツール : Gradle 6.4.1
Spring Boot バージョン : 2.3.2
Thymeleaf : 3.0ファイル階層
main
.
├── java
│ └── com
│ └── example
│ └── hellospringboot
│ ├── HelloSpring.java
│ └── HelloSpringBootApplication.java
└── resources
├── application.properties
├── static
└── templates
└── index.html■ 実装
実際のコード内容を確認したのち、内容を細かく解説する。
1. HTMLを作成する
index.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css">
<title>タイトル</title>
</head>
<body>
<main>
<h1>Sample Application</h1>
<p th:text="${th_greet}" class="greet"></p>
<form method="POST" action="/">
<p>氏名</p>
<input type="form" name="nickname" placeholder="ニックネーム">
<div>
<p>性別</p>
<input id="radio_male" type="radio" name="radio_1" value="male">
<label for="radio_male">男性</label>
<input id="radio_female" type="radio" name="radio_1" value="female">
<label for="radio_female">女性</label>
</div>
<p>好きなOS</p>
<select id="select_1" name="favorite_distribution">
<option value="CentOS">CentOS</option>
<option value="Ubuntu">Ubuntu</option>
<option value="debian">debian</option>
<option value="Arch">Arch</option>
<option value="Gentoo">Gentoo</option>
</select>
<div style="margin: 2rem 0rem">
<input type="submit" value="SEND">
</div>
</form>
</main>
</body>
</html>氏名、性別、好みを入力し出力する。出力する際に男性なら「くん付け」、女性なら「ちゃん付け」で呼称とする。なお、CSSは一切使用しない。当然独自に利用してもよい。HTMLの説明は本投稿の趣旨とは関係が薄いため割愛する。
このHTMLのポイントに次である。Java側の実装により、Thymeleafが「th:text="${th_greet}"」を検出し任意の文字列に書き換えが行われる。「th_greet」はその際の目印になる重要な一文である。
<p th:text="${th_greet}" class="greet"></p>2. コントローラーを実装する。
HelloSpring.java
package com.example.hellospringboot;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
@Controller
public class HelloSpring {
@RequestMapping(value = "/", method = RequestMethod.GET)
public String getIndex(Model model){
model.addAttribute("th_greet", "こんにちは！氏名を入力してください");
return "index";
}
@RequestMapping(value = "/", method = RequestMethod.POST)
public String postIndex(@RequestParam("nickname")String nickname,
@RequestParam("radio_1")String sex,
@RequestParam("favorite_distribution")String distribution,
Model model) {
String sexuality = sex.equals("male") ? "くん" : "ちゃん";
String message = "こんにちは！ " + nickname + sexuality + "が好きなディストリビューションは" + distribution + "ですね！";
model.addAttribute("th_greet", message);
return "index";
}
}以下、可能な限り詳細に説明する。
@Controllerこの宣言の直下で定義されたクラスはコントローラーとしてSpring Frameworkに解釈させる目印である。クラス宣言の直前に行う。
@RequestMapping(value = "/", method = RequestMethod.GET)リクエストパスが「/」であり、なおかつHTTP.GETでのリクエストが行われた際の処理を定義する宣言である。「URIが「/」」とは「localhost:8080/」の最後のスラッシュに相当する。例えば「value = "/name"」なら「localhost:8080/name」との紐付けが行われる。なお、「method = RequestMethod.POST」と記述すればHTTP.POSTメソッドでのリクエストに対応し、今回の実装でいうとpostIndexメソッドが相当する。
まとめると、HTTP.GETリクエストに対するレスポンスはgetIndexメソッドが行い、HTTP.POSTリクエストに対するレスポンスはpostIndexメソッドが行っている。因みにgetIndexやpostIndexなどのメソッド名は任意のものでよい。
public String index(Model model){String側を返却するindexメソッドを定義する。引数のModelはSpring Framework側で用意される引数である。今回はテキストデータが返却できればよいのでModelで定義している。
model.addAttribute("th_greet", "こんにちは！氏名を入力してください");「th:text="${th_greet}"」を目印に、文字列「"こんにちは！氏名を入力してください"」の紐付けを行っている。
return "index";Thymeleafがディレクトリ名「templates/」配下にあるファイル名「index.html」を検出しModelの紐付けを行う。返却値が文字列型であることに注意されたい。
@RequestParam("nickname")String nickname,「@RequestParam」とはHTMLから送信された値を取得する宣言であり、「("nickname")」はHTMLタグのname属性を元に判断されている。取得しした値はString型の変数nicknameに保存される。他のsexやdistributionについても同様である。最後のModelだが、POSTメソッドに対するレスポンスではテキストデータが返却できればよいのでModelで定義している。
String sexuality = sex.equals("male") ? "くん" : "ちゃん";これは三項演算子で利用して、性別から敬称を判別している。
String message = "こんにちは！ " + nickname + sexuality + "が好きなディストリビューションは" + distribution + "ですね！";
model.addAttribute("th_greet", message);
return "index";最後に返却する文字列をModelオブジェクトに格納し返却している。ここでの返却値は、getIndexメソッド同様に、HTMLテンプレート名を指定している。もちろん別のHTMLテンプレート名を指定してもよい。
参考までにこのときのModelの中身をプリントアウトすると次の値が取得できる。
System.out.println(model);
結果
{th_greet=こんにちは！ たけしくんが好きなディストリビューションはUbuntuですね！}■ 実行結果
Spring Bootを起動させ実行結果を確認する。ブラウザから「localhost:8080」にアクセスすれば確認できる。
■ まとめ
Spring BootとThymeleafを使って簡単なフォーム入出力を行うアプリケーションを作成した。今回の実装はかなり初歩的な実装であるが、GETとPOSTの流れをコンパクトに確認できる実装なのでなにかの参考になれば幸いである。
この記事が気に入ったらサポートをしてみませんか？