Draw screen with Thymeleaf in SpringBoot

Purpose

Last time, I was able to display the character string on the browser using @RestController of SpringBoot, so This time, I will learn how to display an HTML file using @Controller.

Advance preparation

We will proceed on the assumption that the Spring Boot project already exists. For how to create a project, please refer to Spring Quickstart Guide and this article. is.

1. Let's make a Controller!

I think the source code when the Spring Quickstart Guide is over is as follows.

DemoApplication.java

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
@RestController
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}

	@GetMapping("/hello")
	public String hello(@RequestParam(value = "name", defaultValue = "World") String name) {
		return String.format("Hello %s!", name);
	}
}

With this implementation, we will delete unnecessary parts in the DemoApplication.java file.

DemoApplication.Completed form of java

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}

}

Create a controller folder in the same hierarchy as DemoApplication.java. Then create HelloController.java in that folder and describe the process.

HelloController.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 HelloController {

	@GetMapping("/hello")
	public String hello(Model model) {
		String message = "Hello World from HelloController!!!";
		model.addAttribute("msg", message);
		return "hello";
	}
}

The annotation of the HelloController class is @Controller. By setting @Controller, the template file written in html will be returned.

Since the ○○ part of return" ○○ " is the name of the html file, you will have to create hello.html later.

Model sets the data to be used in the template. The message variable that stores the string is passed to the template in the notation model.addAttribute ("value name ", value).

The Controller is now complete!

2. Let's use Thymeleaf!

I will create the View part of MVC, but this time I will use Thymeleaf.

Thymeleaf is a template engine that can be handled by springboot. The value stored in the variable on the Controller side can be displayed as an HTML file. [Thymeleaf Tutorial] written in Japanese (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#thymeleaf%E3%81%AE%E7%B4%B9%E4%BB%8B ) Is also available!

Now, edit the pom.xml file to use Thymeleaf.

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>demo</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <name>demo</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-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>

    <!--↓ ↓ ↓ ↓ ↓ Added to use Thymeleaf ↓ ↓ ↓ ↓ ↓-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    

  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>

</project>

3. Create an HTML file for drawing the screen!

Let's create hello.html in src / main / resources / templates.

The contents of hello.html are as follows. Don't forget to define the thymeleaf namespace in your html tag!

hello.html

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>Spring Boot Lesson</title>
</head>

<body>
  <h1>Hello World on Thymeleaf! </h1>

  <h1 th:text="${msg}"></h1>
</body>

</html>

In the second h1 tag, the value passed from the Controller is displayed by setting th: text =" $ {msg} ".

4. Let's do it!

I have prepared to draw an HTML file with @Controller in 1-3, and to draw a value defined in Controller with Thymeleaf in an HTML file. Let's run and check.

Enter the following command in the terminal and press Enter.

Terminal

$ ./mvnw spring-boot:run

After waiting for about 2 seconds, when you access http: // localhost: 8080 / hello,

hello.html is drawn and the msg defined in Controller is also displayed correctly.

At the end

I learned how to display an HTML file using @Controller. There are many more ways to write Thymeleaf, so I'd like to write an article at another time.

Reference site

Use Thymeleaf template in Spring Boot https://cloudear.jp/blog/?p=799

Tutorial: Using Thymeleaf (ja) https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#thymeleaf%E3%81%AE%E7%B4%B9%E4%BB%8B