@GetMapping
コントローラーGreetingControllerから見ていきます。名前にもControllerと付いてわかりやすいですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
package com.example.handlingformsubmission; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.PostMapping; @Controller public class GreetingController { @GetMapping("/greeting") public String greetingForm(Model model) { model.addAttribute("greeting", new Greeting()); return "greeting"; } @PostMapping("/greeting") public String greetingSubmit(@ModelAttribute Greeting greeting, Model model) { model.addAttribute("greeting", greeting); return "result"; } } |
9行目に@Controllerの記述がありますが、これでこのクラスがコントローラーと宣言しています。
|
9 |
@Controller |
コントローラーはユーザ要求とモデル、モデルとビューを紐づける役割でした。12行目の@GetMapping(“/greeting”)がユーザ要求を定義しています。つまりユーザがブラウザで、
http://<サーバー名>:8080/greeting
と入力した際の紐づけが定義されます。
|
12 |
@GetMapping("/greeting") |
具体的な紐づけはその後の13行目から記述されており、メソッドgreetingFormが実行されることになります。
|
13 14 15 16 |
public String greetingForm(Model model) { model.addAttribute("greeting", new Greeting()); return "greeting"; } |
14行目で引数のmodelクラス.addAttributeメソッド利用して、ビューに引き渡す値を設定しています。ここでは、モデルGreetingのインスタンスを設定して名前を「greeting」としています。
そして15行目の「return “greeting”;」でビューgreetingの表示を行っています。
まとめるとユーザが
http://<サーバー名>:8080/greeting
と入力するとビューgreetingが表示されます。その際にモデルGreetingがインスタンス化され引き渡されます。
次は呼び出されるビューgreetingを見ていきましょう。
greeting.html
ビューgreetingはファイル「greeting.html」になります。ファイル種類がhtmlなので基本的にはhtmlのコードが書かれていますが、「th:」から始まる命令は、表示を行うThymeleafエンジンの命令になります。この命令によりモデルからデータを取得したり、モデルへデータを設定したりできます。「th:」を中心にコードを見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE HTML> <html xmlns:th="https://www.thymeleaf.org"> <head> <title>Getting Started: Handling Form Submission</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <h1>Form</h1> <form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post"> <p>Id: <input type="text" th:field="*{id}" /></p> <p>Message: <input type="text" th:field="*{content}" /></p> <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p> </form> </body> </html> |
最初にth:が出現するのは、9行目のformタグの中に二箇所あります。
|
9 |
<form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post"> |
一つ目の「 th:action=”@{/greeting}”」でformタグのactionを「/greenting」と指定しています。
つまり、submitが実行されたなら、
http://<サーバー名>:8080/greeting
が発行されます。ここで覚えておいて欲しいのがformタグ内で「metod=”post”」と記述されているのでこのURLはpostで発行されるということです。
二つ目の「th:object=”${greeting}」で、これから操作するオブジェクトは「$greeting」であることを指定しています。
この「$greeting」は、コントローラーでインスタンスを設定した際の名前(“greeting”)にあたります。
|
14 |
model.addAttribute("greeting", new Greeting()); |
次にth:が登場するのは、10行目、11行目です。
|
10 11 |
<p>Id: <input type="text" th:field="*{id}" /></p> <p>Message: <input type="text" th:field="*{content}" /></p> |
それぞれ「th:field=”{・・・}”」の記述があります。このth:fieldはinputタグと上記で指定したオブジェクトのプロパティ(変数)を紐づける命令です。
例えば10行目の「th:field=”*{id}” 」の場合はオブジェクト$greeting(モデルGreetingのインスタンス)のプロパティidとinputタグを紐づけます。もしプロパティidに値が設定されているとデフォルト値として表示されます。※今回は設定されていないので表示されません。
まとめると、greeting.htmlが呼び出されると、inputタグ(id,content)とコントローラーで設定された$greeting(インスタンスGreenting)のプロパティ(id,content)が紐づけられます。もし$greetingのプロパティ(変数)id,contentに値が設定されていればそれぞれinputタグにデフォルト値として表示されます。そしてsubmitボタンが押されると、
http://<サーバー名>:8080/greeting
がpostで発行されます。
ビューの内容がわかりました。次に進みましょう。
