KotlinとSpringBoot2で「読書感想文サービス」開発
Web開発するのは、「読書感想文サービス」です。
（※ブログと同じ感じです😂)
機能としては・・・
- 一覧画面
- 新規作成
- 更新
- 削除
基本的な所を作っていき、最後にBootstrapを使って見た目を整えていきたいと思っております。
※ 筆者の都合上、数回に分けて送りたいと思います。
環境
| version | |
|---|---|
| Kotlin | 1.3.61 |
| Spring Boot | 2.2.2 |
| 開発環境 | IntelliJ IDEA 2019.3 |
| Project | Gradle |
| ※ Koltinのインストール・文法などの「環境構築」・「基本」部分は割愛します。 | |
| では、早速・・・・・ |
ひな形プロジェクトの作成
Spring Initializrを使います。
| 環境 | |
|---|---|
| Language(言語) | Kotlin |
| Spring Boot | Spring Boot 2.2.2 |
| Artifact | demo(プロジェクト名) |
| Dependencies | 「Web」と検索 -> Spring Web |
ダウンロードをして、「IntelliJ」で開く。
このように表示され、何も出なければ（赤いビックリマークなどが出ないなど）OK！。
一覧画面を作成
Kotlinを書く部分
- 「demo」 -> src -> main -> Kotlin -> com.example.demoディレクトリまで移動
- 右クリック -> New -> Kotlin File/Class -> 「BookController.kt」と入力
- 「demo」 -> src -> main -> Kotlin -> com.example.demo -> BookController.kt or DemoApplication.kt のようになれば良い
package com.example.demo
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.stereotype.Controller
import org.springframework.ui.Model
@Controller
class BookController {
@GetMapping("/")
fun index(model: Model) :String {
var data = mutableListOf(listOf(1, "本のタイトル", false))
data.add(listOf(2, "本のタイトル", false))
data.add(listOf(3, "本のタイトル", false))
model.addAttribute("bookdata", data)
return "index"
}
}
<説明>
@Controller
class BookController {....}
「@」がついた単語は「アノテーション」と呼ばれるもの。
コンパイル時や実行時にプログラムがどのようなものかが書かれている。（らしい・・・）
引用元： https://www.atmarkit.co.jp/ait/articles/1105/19/news127.html
Webからきた情報（リクエスト）を受け取り、DBとのやりとり、次の画面になった際のデータを準備し、送ったりすることができます。
（以降も、ここで書くことが多くなります）
@GetMapping("/")
fun index(model: Model) :String {...}
GetMappingアノテーションは、指定のURL(現在は「127.0.0.1:8080」をURLに押せばできる）がくれば、index関数の処理を行うことを伝えている。
もし、「127.0.0.1:8080/task」のようにすると、エラー・何も表示されない画面が返ってくる
model.addAttribute("bookdata", data)
modelのaddAttributeメソッドを使い、htmlファイルに送る名前（bookdata)と値(data)を決める。（これから、使う可能性が高い）
htmlファイルでWeb上に出す
- 「build.gradle.kts」ファイルの
dependencies{}内にimplementation("org.springframework.boot:spring-boot-starter-thymeleaf")をいれる。 - 右隅に
Gradleボタン? があり、更新マークのようなボタンを押す。（画像参照） （※プロジェクト作成時に入れられます💦） - 「demo」 -> src -> main -> resources -> templatesディレクトリまで移動
- 右クリック -> New -> File or Kotlin File -> 「index.html」と入力
- 「demo」 -> src -> main -> resources -> templates -> index.html のようになれば良い
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<link th:href="@{/css/index.css}" rel="stylesheet" />
</head>
<body>
<table>
<tr>
<th>Id</th>
<th>Book_title</th>
<th>Finished reading</th>
</tr>
<tr th:each="data:${bookdata}">
<td th:text="${data[0]}"></td>
<td th:text="${data[1]}"></td>
<td th:text="${data[2]}"></td>
</tr>
</table>
</body>
</html>
<説明>
テンプレートエンジン？ thymeleaf?
thymeleafはテンプレートエンジンと呼ばれています。Java用のhtmlで使えるライブラリ？のような形でよく使われているらしいです。
データ（配列の値など）を短いコードで表示することができます。
Ruby on Railsでのhtmlファイル内で「<%= %>」が使えるのに近いかもしれないです。（Railsの場合は、html.erbと書いているので、違うかもしれないですが・・・・
ここまでやれば、「Run」をすればOKです！（画面参照） -> 127.0.0.1:8080とURLに入力 -> 最終的な画面（2つ目の画面）
となっていれば良いかと・・・・・
最後に・・・・
「Kotlin + Spring Boot 入門」でググるとかなりの数の記事が出ているため、ここでわからないことは、他の記事なども活用しつつ、やっていく方が良いかなと思います。
「新規作成」の画面と処理の仕方は、近日中にあげられるようにしたいと思っております。