0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-09-15
1 / 14

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

@Controller

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


 ※以下のような流れでSpring MVC Containerはクライアントのリクエストからビューを返却します。
     以下のような流れでSpring MVC Containerはクライアントのリクエストからビューを返却します.png


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


検証

ビュー(HTMLファイル)作る
 1. HTMLの空ファイル作成

 プロジェクトの下記ディレクトリーの配下に「hello.html」を作成する。
  src/main/templetes
  image.png


2. HTMLの編集

 1で作成されたhello.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クラスファイル作成
  プロジェクトの下記ディレクトリーの配下に「Greeting.java」を作成する。
  src/main/java/jp/co/picasoft/training/view/controller
 image.png


 2. Javaクラスファイルの編集
 1で作成されたGreeting.javaに下記ソースを貼り付けて。
 ※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


「main」メソッド上の「run」または「debug」をクリックして、アプリケーションを起動する。
image.png


 2. ブラウザで動作確認
ブラウザを起動して、アドレスバーに「http://localhost:8080/greeting」を入力して、「Enter」キーをクリックして、先作成した「hello.html」により生成したビューを表示されます。
image.png


補足

 @Controllerはビューの返却に使うだけじゃなくて、下記のような「@ResponseBody」の指定すれば、JSON形式のデータも返却できる。

@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


※以下のような流れでクライアントのリクエストからJson形式のデータを返却します。
     image.png

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


参照

Spring - MVC Framework

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?