Spring Bootを使って、フォーム入力 → 処理 → 結果表示 の流れを学びながら、犬の年齢を人間年齢に換算するミニWebアプリを作ってみましょう。
初めてSpring Bootを触る方でも、ThymeleafとModelを使ったデータの受け渡しが体験できます！
手順
- エクリプスで新規 > Spring Starter Project
- アプリ名をDogAge,タイプをMaven
- 以下にチェックをいれる
- Spring Boot DevTools
- Spring Web
- Thymeleaf(HTMLテンプレート)
DogControllerの作成
- demoフォルダを右クリックして 新規クラス > DogController
- 以下のように作成(package,import部分は省略してある)
@Controller
public class DogController {
@GetMapping("/dog")
public String form() {
return "form";
}
}
form.htmlの作成
- templateの直下にform.htmlを作成
- 内容は以下
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
<meta charset="UTF-8">
<title>DogAge</title>
</head>
<body>
<form th:action="@{/dog}" method="post">
犬の年齢: <input type="number" name="age" min="0" required>
<button type="submit">送信</button>
</form>
</body>
</html>
- DogAgeApplicationを右クリック > 実行 > Spring Boot アプリケーション
- 以下のように立ち上がれば成功だ
- ブラウザで以下のURLを入力するとフォームが表示される
DogControllerのPost処理
- DogControllerに以下のように追記する(フォームから送られた年齢を受け取り、人間年齢に換算して結果画面に渡す処理)
@Controller
public class DogController {
@GetMapping("/dog")
public String form() {
return "form";
}
@PostMapping("/dog")
public String result(@RequestParam int age,Model model) {
model.addAttribute("age",age);
model.addAttribute("humanAge",age*7);
return "result";
}
}result.htmlの作成
- templateの直下にresult.htmlを以下のように作成する
th:inline="text"を使うことで、文字列連結を使わずに変数を自然に文中に埋め込むことができる。- 展開したい変数を
[[${変数}]]として埋め込む
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
<meta charset="UTF-8">
<title>DogAge</title>
</head>
<body>
<p th:inline="text">
犬[[${age}]]歳 -> 人間[[${humanAge}]]歳
</p>
<a th:href="@{/dog}">戻る</a>
</body>
</html>- ブラウザをリロードし、犬の年齢を入れ送信ボタンを押してみよう。以下のように人間に換算した年齢が表示されれば成功だ
これで、フォームから入力を受け取り、結果を表示する一連の流れを体験できた。
Spring Bootではこのように、わずか数十行のコードでWebアプリを動かすことができる。
コメント