tamuraです。
今回はちょっとアプリっぽい動きのものを作ります。
目標
- formに入力した値を表示する
Handling Form Submission
ここの内容をやっていきます。
前回に引き続き、Mavenを使っていきます。
part1のソースをベースにしています。
コントローラの改修
part1では@RequestMapping
を使って/greeting
とメソッドを紐付けました。
今回も@RequestMapping
を使っていきます。
part1と違うのは、HTTPリクエストのメソッドによって実行するメソッドを変更する点です。
src/main/java/hello/GreetingController.java
package hello;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class GreetingController {
@RequestMapping(value=\"/greeting\", method=RequestMethod.GET)
public String greetingForm(Model model) {
model.addAttribute(\"greeting\", new Greeting());
return \"greeting\";
}
@RequestMapping(value=\"/greeting\", method=RequestMethod.POST)
public String greetingSubmit(@ModelAttribute Greeting greeting, Model model) {
model.addAttribute(\"greeting\", greeting);
return \"result\";
}
}
アノテーション
@RequestMapping
/greeting
へのGETリクエストとgreetingForm()
メソッドを紐付ける/greeting
へのPOSTリクエストとgreetingSubmit()
メソッドを紐付ける
@ModelAttribute
については後述します。
実装
greetingForm
- 初回のアクセスで呼ばれる想定
Greeting
オブジェクトをモデルにセットする\"greeting\"
というビューの名前を返す
greetingSubmit
- formでsubmitボタンが押された想定
- 画面で入力された値が引数で渡されるため、それをモデルにセットする
\"result\"
というビューの名前を返す
モデルの作成
id
、content
を保持するモデルを作成します。
これはgreeting
ビューで表示されるformの各フィールドの情報です。
src/main/java/hello/Greeting.java
package hello;
public class Greeting {
private long id;
private String content;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
ビューの作成
つづいてビューを作ります。
src/main/resources/templates/greeting.html
<!doctype html>
<html xmlns:th=\"http://www.thymeleaf.org\">
<head>
<title>Greeting 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:object=\"${greeting}\"
という記述でformからデータを集め、
th:action=\"@{/greeting}\"
という記述で/greeting
へその内容をPOSTします。
th:field=\"*{id}\"
とth:field=\"*{content}\"
がGreeting
オブジェクトのフィールドに相当します。
(ここら辺の処理を行っているのが@ModelAttribute
のようです)
最後に結果表示のビューを作ります。
src/main/resources/templates/result.html
<!doctype html>
<html xmlns:th=\"http://www.thymeleaf.org\">
<head>
<title>Greeting Started: Handling Form Submission</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
</head>
<body>
<h1>Result</h1>
<p th:text=\"'id: ' + ${greeting.id}\" />
<p th:text=\"'content: ' + ${greeting.content}\" />
<a href=\"/greeting\">Submit another message</a>
</body>
</html>
実行可能にする
part1同様、実行可能なJarファイルを作成します。
src/main/java/hello/Application.java
package hello;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.SpringApplication;
import org.springframework.context.annotation.ComponentScan;
@ComponentScan
@EnableAutoConfiguration
public class Application {
public static void main(String...args) {
SpringApplication.run(Application.class, args);
}
}
実行
mvn spring-boot:run
で実行します。ブラウザを開いて http://localhost:8080/greeting にアクセスします。
new Greeting()
をした際の初期値がセットされています。
値を入力してsubmitを押すと
結果が表示されます。 日本語もいけました。