Thymeleaf + Springboot + Mybatis + MySQL + VSCodeー画面遷移(@Controller)

### ＠Controllerを使って、画面遷移を実現する。

##### ＠Controller
　1\. Spring MVCのコントローラを指定するときに使用
　2\. @Controllerは主にビュー名を返却するために使用
　<font color=red>「classpath:templetes/ + "ビュー名" + .html」が画面のパスになる。<font>
　

---

　※以下のような流れでSpring MVC Containerはクライアントのリクエストからビューを返却します。
　　　　　![以下のような流れでSpring MVC Containerはクライアントのリクエストからビューを返却します.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480807/3da447b9-27cf-7e48-37a9-e02c94c09ec5.png)

---
■流れ説明
　・ HTTPリクエストを受信した後、DispatcherServletはHandlerMapping を参照して、適切なコントローラーを呼び出します。
　・ コントローラは、要求を受け取り、使用GETまたはPOSTメソッドに基づいて、適切なサービスメソッドを呼び出します。serviceメソッドは、定義されたビジネスロジックに基づいてモデルデータを設定し、ビュー名をDispatcherServletに返します。
　・ DispatcherServletはからの助けを取るViewResolverピックアップへの要求のために定義されたビューを生成する。
　・ ビューが完成すると、DispatcherServletはモデルデータをビューに渡し、ビューは最終的にブラウザにレンダリングされます。

---
### 検証
##### ビュー（HTMLファイル）作る
###### 　1\. HTMLの空ファイル作成
　プロジェクトの下記ディレクトリーの配下に「<strong>hello.html</strong>」を作成する。
　　<strong>src/main/templetes</strong>
　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480807/5de48085-dc20-69c3-e7b9-9dc633364b14.png)

---

###### 2\. HTMLの編集
　１で作成されたhello.htmlに下記ソースを貼り付けて。
```html:hello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- (1)共通headerで置き換える -->

<head th:replace="~{common/common :: meta_header('挨拶',~{::link},~{::script})}">
    <!-- (2)このページ固有で読み込むCSS/JS -->
    <link rel="stylesheet" th:href="@{/css/book/book-list.css}" />
</head>

<body>
    <!-- ヘッダの読み込む -->
    <div th:replace="~{common/common :: header}"></div>
    <!-- メニューの読み込む -->
    <div th:replace="~{common/common :: menu}"></div>
    <div class="text-center">
        <h1>ブック管理一覧画面</h1>
    </div>
    <div id="book-list" v-cloak>
        Hello World!
    </div>
    <script>
        const vBookList = new Vue({
            el: "#book-list",
            data: {
            },
            methods: {
            },
            async mounted() {
            }
        })
    </script>
</body>
```

---

##### Controllerクラスを作る
　1\. Javaクラスファイル作成
　　プロジェクトの下記ディレクトリーの配下に「<strong>Greeting.java</strong>」を作成する。
　　<strong>src/main/java/jp/co/picasoft/training/view/controller</strong>
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480807/3ce57fce-e8d4-ffec-e115-2a9f56b6237f.png)

---

　2\. Javaクラスファイルの編集
　１で作成されたGreeting.javaに下記ソースを貼り付けて。
　<font color=red>※javaファイル中のパッケージ情報を変更しないでください。</font>
```java:Greeting.java
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/greeting")
public class Greeting {
    
    @GetMapping
    public String greeting() {
        return "hello";
    }
}

```

---
##### 動作確認
　1\. アプリケーション起動
　　「Ctrl+p」をクリックして、「TrainingApplication」を入力して、「TrainingApplication.java」を開いて、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480807/144b2f27-1762-816d-dd47-3752cef4a308.png)

---

「main」メソッド上の「run」または「debug」をクリックして、アプリケーションを起動する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480807/845d48e2-02d8-80ec-fe4c-1ed3b3602d7f.png)

---
　2\. ブラウザで動作確認
ブラウザを起動して、アドレスバーに「[http://localhost:8080/greeting](http://localhost:8080/greeting)」を入力して、「Enter」キーをクリックして、先作成した「hello.html」により生成したビューを表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480807/38284fe7-5d78-533a-0f5b-8ded4bf7c7bb.png)

---
##### 補足
　@Controllerはビューの返却に使うだけじゃなくて、下記のような「@ResponseBody」の指定すれば、JSON形式のデータも返却できる。
```java:@ResponseBody
    @GetMapping(value = "/some")
    public @ResponseBody Map<String, String> retrieveUserInfo() {
        Map<String, String> m = new HashMap<>();
        m.put("id", "1");
        m.put("name", "田中雄一");
        return m;
    }
```

　動作確認結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480807/c39464e2-b52b-885e-81be-911600e66702.png)

---
※以下のような流れでクライアントのリクエストからJson形式のデータを返却します。
　　　　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480807/d3e43c65-5b01-463b-a2c1-7c7c8b797e88.png)

　・クライアントがWeb Serviceにリクエストを送ります。
　・MappingのHandlerとそのTypeをサーチするDispatcherServletにリクエストをインターセプトします。
　・RestControllerまたは「@Controller + @ResponseBody 」はリクエストの処理を行い、データを返却します。

---

##### 参照
[Spring - MVC Framework](https://www.tutorialspoint.com/spring/spring_web_mvc_framework.htm)