GETメソッドでhello.htmlに画面遷移する
- ブラウザでURLを入力してエンターを押すと、GETメソッドを呼んで、ブラウザでHTMLページを取得する
- localhost:8080/helloへのGETリクエストに対する処理をgetHelloメソッドで行う
- メソッドの戻り値には拡張子なしのhtmlファイル名を指定
- htmlファイルは、resources/templatesフォルダーからのパスを指定
- localhost:8080/helloにGETリクエストが来るとhello.htmlを表示
@Controller
- コントローラークラス
- @Controllerアノテーションを付けることで、DIで利用できる
@GetMapping
- @GetMappingをメソッドに付けると、HTTPリクエストのGETメソッドを処理できるようになる
- Web UIを返すときはGetMappingを使う
HelloController.java
package com.example.demo.trySpring;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HelloController{
@GetMapping("/hello")
public String getHello(){
return"hello"; //hello.htmlに画面遷移
}
}
hello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> <!--Thymeleafを使用するために記述-->
<head>
<meta charset="UTF8"></meta>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<body>
</html>
URLにアクセスして確認！
POSTメソッドで画面から値を渡す
Namespace
- 名前空間とは対象のものをある名称で確実に識別・特定するためのもの
- HTML/XMLの場合、かっこをつかってタグやタイトルかく(
<h1><TITLE>など) - Thymeleafでは以下のように独自のネームスペースを用意、
- 名前空間に含まれるSchema(あるシステムの構造を表すもの)を定義すると Thymeleaf固有のnamespaceを使うことができる
- th:value属性を使うことで、画面からコントローラークラスに値を渡すことができる。
//Xmlns:th = “URL” //定義先
<input type="text" name="text1" th:value="${text1_value}"/>
- hello.htmlにformタグを追加
hello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF8"></meta>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<form method="post" action="/hello">
好きな文字を入力：
<input type="text" name="text1" th:value="${text1_value}"/>
<input type="submit" value="クリック"/>
</form>
<body>
</html>
使用メソッドをformタグのmethod属性で指定
- POSTメソッド用の処理をHelloControllerクラスに追加
@PostMapping
- POSTメソッドで送られてきた場合の処理を行う
@RequestParam
- メソッドの引数に@RequestParamアノテーションを付けることで、画面からの入力内容を受け取る
- アノテーションの引数には、htmlのname属性の値を指定
model.addAttribute
- model.addAttributeにキーと値をセットする
- 画面（html）から指定したキーの値を受け取ることができる
- この場合のModelについては下記の(注)参考
- キーバリューでデータを渡すことであらかじめ特定のクラスを作り込まなくていい=汎用性が高い
以下の例では、
- FormをクリックしたらPOSTが飛ぶ（postRequest）
-
@RequestParamのアノテーションをつけることで
"text1"を指定したstrで受け取れる -
"sample"というattribute名でstrをセット
HelloController.java
package com.example.demo.trySpring;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class HelloController{
@GetMapping("/hello")
public String getHello(){
return"hello";
}
@PostMapping("/hello")
public String postRequest(@RequestParam("text1")String str, Model model){
model.addAttribute("sample",str); //画面から受け取った文字列をModelに登録
return "helloResponse"; //helloResponse.htmlに画面遷移
}
}
コントローラークラスからの値を受け取る
-
src/main/resources/templates配下に、helloResponse.htmlを作成 -
th:text属性に、model.addAttributeで登録したキーを指定する - SpringBootの決まりごととして、共通してModelクラスでAttributeという形で画面に表示したいデータを追加し、テンプレートをかきかえる
- テンプレートとモデルをマージした結果を返す
helloResponse.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF8"></meta>
<title>Response Sample</title>
</head>
<body>
<h1>Hello Response</h1>
<!--Modelからの値を受け取り受け取った文字を表示-->
<p th:text="${sample}"></p><body>
</html>
URLにアクセスして確認！
(注)Schemaとは
- 名前空間の中にスキーマが入っている
-
データの構造のこと
- 一般的にはDBの名前とサイズ組み合わせ
- bigint userId
- Varchar[50] username
- 一般的にはDBの名前とサイズ組み合わせ
- HTML自体もスキーマである
- 標準タグの構成をHTMLのスキーマという
- 例：Aタグは外部リンク/ Div 汎用的な範囲を作るなど
- 標準タグの構成をHTMLのスキーマという
- XML標準の名前空間にスキーマを追加することができる
- th:labeなどで名前空間を拡張することでスキーマ拡張できる(metaDBと言えるようなもの)
(注)Thymeleafのモデルとは
- ModelはData Transfer Objectのこと(今回のようにデータのみ渡す=データオブジェクト)
- Java側のコードでデータにアクセスする/Java側のデータを表すclassをHtmlのテンプレに埋め込みたい時にDataだけが入ったJabaのObjectを作って渡すのがModelのt役割