Springbootで「HelloWorld」

# Springbootで「HelloWorld」を表示する

## 開発環境
* Windows　10　Home　64bit
* Eclipse　Version: 2021-03 (4.19.0)
* Java 11

## Springbootでプロジェクトを追加する
**ファイル　→　新規　→　Springスターター・プロジェクト**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/dba1e794-f2be-ae04-6588-83f388f0354c.png)
プロジェクト名を決める
デフォルトロケーションを使用
* 型：Gradle
* Javaバージョン：11
* パッケージリング：Jar
* 言語：Java

で次へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/aeb7dd32-a898-2cef-0070-29cdfefe3fac.png)

##### 依存関係選択
* Thymeleaf
* Spring web

を選択して完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/e51c3b31-cbde-f0cb-e912-71f25fc6577e.png)

**このような階層構造でJavaファイルが生成される**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/5edcdb5e-1586-b0df-7ed6-5d627fd047d1.png)

プロジェクト上で右クリック　→　実行　→　**Spring boot App**
**コンソールにこのように表示されたら、作成成功!**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/ef31b7ef-93f9-1a03-4da0-5e4948985ac2.png)

## HTMLファイルの作成
プロジェクト上で右クリック　→　新規　→　その他　→　HTMLファイル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/69c9c40d-3630-b70d-9223-0e571b6b7252.png)

今回【test.html】というファイル名で作成
**親フォルダーを入力または選択は：TestHello/src/main/resources/templates**
をパスで指定して新規作成

```HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<h1>Hello World!</h1>
ようこそ、Springbootの世界へ

</body>
</html>
```
いったん上記のよう＜title＞にタイトルと、＜body＞にテキストを記述

## クラスファイルの作成
プロジェクト上で右クリック　→　新規　→　クラス
【TestController】というクラス名で作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/124cc3cd-b5de-0cfd-05cb-82520f2f7d84.png)

このような構成で.Javaファイルが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/6935b6f8-4940-2879-6412-1c055578d798.png)

```Java
package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller //ClassにControllerのアノテーション
public class TestController {
	//RequestMappingのアノテーション
	@RequestMapping(value = "/", method = RequestMethod.GET) 
	public String test(Model model) {
		return "test"; //"test"は表示したいHTMLの名前（拡張子不要）
	}
}
```
上記のようにコードを記述

## 実行とブラウザに表示
保存したら
プロジェクト上で右クリック　→　実行　→　Spring boot App

ブラウザで**http://localhost:8080/**にアクセスして、テキストが表示されるか確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/a0e45716-cffd-d476-6c26-8cde0b0f8b88.png)

## Controllerからテキストを渡す
HTMLのコードに
xmlns:th="http://www.thymeleaf.org"（Thymeleafの属性）
th:text = "${テキスト}"を加える。後述のControllerのコードで
ここにデータ名が渡される。
**どちらもHTMLのタグ内に記述する**

```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title >test</title>
</head>
<body>
<h1 th:text = "${title}">HelloWorld!</h1>
ようこそ、Springbootの世界へ！
</body>
</html>
```
Controllerのファイルには
model.addAttribute("title","テキスト");を加える
引数のテキストがth:textに渡される
**その際HTMLにテキストがあっても上書きされる**

```
public class TestController {
	//RequestMappingのアノテーション
	@RequestMapping(value = "/", method = RequestMethod.GET) 
	public String test(Model model) {
		
		model.addAttribute("title", "th:textで出力した場合はHTMLは上書きになる" );//Controllerから送りたいテキスト
		
		return "test"; //"test"は表示したいHTMLの名前（拡張子不要）
	}
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1614172/f3eae7cd-18c3-4c17-0e58-d18453dd0c54.png)


以上

Thymeleafを使いこなせるように頑張って、また続き書きます