【Java】リクエストを投げて画面を表示（GET/POST）

#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を使う

```java: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に画面遷移
    }
}
```

```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にアクセスして確認！
* URL：http://localhost:8080/hello

![HW.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282755/fdc8bedc-393c-160d-6847-52d5708cfe7c.png)

#POSTメソッドで画面から値を渡す

###Namespace
* 名前空間とは対象のものをある名称で確実に識別・特定するためのもの
* HTML/XMLの場合、かっこをつかってタグやタイトルかく(`<h1><TITLE>`など)
* Thymeleafでは以下のように独自のネームスペースを用意、
* 名前空間に含まれるSchema(あるシステムの構造を表すもの)を定義すると **Thymeleaf固有のnamespaceを使うことができる**
* th:value属性を使うことで、画面からコントローラークラスに値を渡すことができる。

```Java
//Xmlns:th = “URL” //定義先
<input type="text" name="text1" th:value="${text1_value}"/>
```
* hello.htmlにformタグを追加

```html: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`をセット

```Java: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という形で画面に表示したいデータを追加し、テンプレートをかきかえる**
* **テンプレートとモデルをマージした結果を返す**

```html: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にアクセスして確認！
* URL：http://localhost:8080/hello

![post1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282755/5dbcd289-aa9a-a3d2-118f-5bb8e0c41352.png)


![post2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282755/4d17ea07-4fce-f7a9-e51b-26d0d9d7ef30.png)

##(注)Schemaとは
* 名前空間の中にスキーマが入っている
* **データの構造のこと**
    * 一般的にはDBの名前とサイズ組み合わせ
        * bigint            userId
        * Varchar[50] username
* HTML自体もスキーマである
    * 標準タグの構成をHTMLのスキーマという
        * 例：Aタグは外部リンク/ Div 汎用的な範囲を作るなど
* XML標準の名前空間にスキーマを追加することができる
    * th:labeなどで名前空間を拡張することでスキーマ拡張できる(metaDBと言えるようなもの)

##(注)Thymeleafのモデルとは
* ModelはData Transfer Objectのこと(今回のようにデータのみ渡す=データオブジェクト)
* Java側のコードでデータにアクセスする/Java側のデータを表すclassをHtmlのテンプレに埋め込みたい時にDataだけが入ったJabaのObjectを作って渡すのがModelのt役割