Spring Frameworkを使ってみるpart2

· 1284 文字 · 3 分くらいで読めます
Java · Spring Framework
Java · Spring Framework

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のようです）

※違いました。Beanの内容を出力する際に、greeting.id、bean.contentではなく、 *{id}、*{content}と簡潔に書けるようにするのがth:objectでした。

最後に結果表示のビューを作ります。

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を押すと

結果が表示されます。 日本語もいけました。

関連記事

comments powered by Disqus