Kotlin Springboot -- Part 01 "/" へのアクセスで template に値を渡してブラウザで表示する Controller を作る

kaede_io

kaede

Posted on August 14, 2022

Kotlin Springboot -- Part 01 "/" へのアクセスで template に値を渡してブラウザで表示する Controller を作る

why

Kotlin x Springboot のことよく知らない。
仲良くなりたかった


何をするのか

https://spring.io/guides/tutorials/spring-boot-kotlin/

この記事を参考にコントローラーを書いて
ビュー相当の HTML に渡してみてみる。


HtmlController を作成して index に値 title を渡す

コントローラーはなんて名前にしても中身の GetMapping が全てビルド時に読み込まれると解釈した。

プロジェクトの最初に作成された SpringbootApplication.kt と並列に

HtmlController.kt を作成する。

中身にこれを書く。

package com.example.springboot

import org.springframework.stereotype.Controller
import org.springframework.ui.Model
import org.springframework.ui.set
import org.springframework.web.bind.annotation.GetMapping

@Controller
class HtmlController {
    @GetMapping("/")
    fun nanika(model: Model): String {
        model["title"] = "SpringBlog"
        return "index"
    }
}
Enter fullscreen mode Exit fullscreen mode

namespace 相当の package を最初に書いて

Controller として使うため の stereotype.Controller
変数を HTML に渡せる形にするための型の ui.Model
model に中身をセットするための ui.set
大事な GetMapping を動かす為の web.bind.annotation.GetMapping

これらを import して
SpringBlog という文字列を model 型にして
index のテンプレートに渡す。

https://speakerdeck.com/otty375/architecture-of-spring-mvc?slide=20

このスライドにも説明が有る

https://speakerdeck.com/otty375/architecture-of-spring-mvc?slide=39

addAttribute でも渡せるらしい。


templates/index を作成して渡された値の title を表示する

https://speakerdeck.com/otty375/architecture-of-spring-mvc?slide=28

Model を参照してレスポンスデータの生成を行っている。

https://qiita.com/takkii1010/items/c9f83966f9088923a6e7

thymleaf はこうやって書く。

そして最初からできている resource/template に
index.html を作成して

<h1>springboot kotlin sample</h1>
<h2 th:text="${title}" />
Enter fullscreen mode Exit fullscreen mode

h1 で普通のテキストと
h2 に th:text でコントローラーから受け取った値を出す
bash みたいな変数の入れ方。

Image description

するとローカルホストで中身が見える。


まとめ

コントローラーを作って、内部に Getmapping で
アクセスされたルートに関数をマッピングして

関数内部で値を model 型にしてテンプレートに渡す

そしてテンプレートで表示する

これでルーティングと、コントローラーから渡された値の表示ができる。

main から呼び出す必要は一切なかった。

💖 💪 🙅 🚩
kaede_io
kaede

Posted on August 14, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related