SpringBootとThymeleafを使用してHelloWorldしてみた

SpringBootとThymeleafを使用してHelloWorldしてみた

SpringBootとThymeleafを使用してHelloWorldしてみた

タイトルの通りHelloWorldを出力してみました。

環境は以下の通りです。

Windows 10 Home
Java11
Spring Tool Suite 4.6.2

プロジェクトの作成

「File」→「New」から以下の「Spring Starter Project」を押下する。

ここになかったら「Other」の中の「Spring Boot」の中にあります。

「New Spring Starter Project」のウィンドウが開くので「Name」にプロジェクト名を入れましょう。今回は「HelloWorld」で作成します。まぁ何でもいいです。「Next>」を押下しましょう。

「New Spring Starter Project Dependencies」の画面がでてくるので、今回は「Spring Web」と「Thymeleaf」を選択しましょう。選択したら「Finish」を押下。

作成されたプロジェクト

以下のようにプロジェクトが作成されるはずです。

作成タイミングによっては、バージョンが違って動かないなんでこともあるかもなのでpom.xmlを乗っけときます。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>HelloWorld</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>HelloWorld</name>
    <description>Demo project for Spring Boot</description>
 
    <properties>
        <java.version>11</java.version>
    </properties>
 
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
 
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>
 
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
 
</project>

index.htmlとHelloWorld.javaの作成

以下のように「index.html」と「HelloWorld.java」を作成する。

今回「index.html」は、「templates」配下に配置しました。

「HelloWorld.java」は、「com.example.demo」に「controller」パッケージを追加してその配下に配置しました。

「index.html」の内容

<!DOCTYPE html>
<html xmlns="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
    <h1>SpringBoot</h1>
    <p th:text="${message}"></p>
</body>
</html>

抜粋した以下のコード部分がThymeleafの書き方で変数式といいます。

「HelloWorld.java」で設定した変数「message」の値を表示します。

9	`<p` `th:text="${message}"></p>`

「HelloWorld.java」の内容

package com.example.demo.controller;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class HelloWorld {
 
    @GetMapping("/")
    public String helloWorld(Model model) { 
        model.addAttribute("message","Hello World");
        return "index";
    }
}