Zenn
👶

Spring Bootのチュートリアルをやってみる①Thymeleaf Web 画面の作成

2024/12/22に公開
初心者
Spring Boot
チュートリアル
helloworld
非エンジニア
tech

はじめに

最終目標：Spring BootでECサイトを構築
Javaの知識：Progateでさらっと学習した程度で分からないことが分からないほどの超初心者
環境：eclipseを使用

Hello World

以下公式ドキュメントに沿ってやってみる
https://spring.pleiades.io/guides/gs/serving-web-content#scratch

プロジェクトの作成


Spring Web、Thymeleaf、Spring Boot DevToolsだけにチェックをつける

コントローラーとHTMLを作成

java:/practice-springboot/src/main/java/com/example/practice_springboot/GreetingController.java

GreetingController.java

package com.example.practice_springboot;

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

@Controller
public class GreetingController {
	@GetMapping("/greeting")
	public String greeting(
		@RequestParam(
			name="name", required=false, defaultValue="World"
		) 
		String name, Model model
	) {
		model.addAttribute("name", name);
		return "greeting";
	}
}

/practice-springboot/src/main/resources/templates/greeting.html

greeting.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>Getting Started: Serving Web Content</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<p th:text="|Hello, ${name}!|" />	
</body>
</html>

実行

プロジェクトを右クリック＞実行＞Spring Bootアプリケーションを押下

http://localhost:8080/greeting にアクセス

Hello Worldが表示される

URLの後ろに?name=任意の文字列のパラメータを追加してアクセス
http://localhost:8080/greeting/?name=User


?name=User

http://localhost:8080/greeting/?name=neko


?name=neko

index.htmlを作成

/practice-springboot/src/main/resources/static/index.html

index.html
<!DOCTYPE html>
<html>
<head>
	<title>Getting Started: Serving Web Content</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<p>Get your greeting <a href="/greeting">here</a></p>
</body>
</html>

再度実行

http://localhost:8080/にアクセスするとindex.htmlが作成される

できた😸

Discussion