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,

スクリーンショット 2020-07-01 10.45.40.png

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

Recommended Posts

Draw screen with Thymeleaf in SpringBoot
Implement text link with Springboot + Thymeleaf
Fill the screen with buttons in TableLayout
Create a simple CRUD with SpringBoot + JPA + Thymeleaf ② ~ Screen and function creation ~
Implement Sign in with Twitter in spring-boot, security, social
04. I made a front end with SpringBoot + Thymeleaf
Handle HTTP PUT / DELETE methods in SpringBoot2.2 + Thymeleaf
Display the list in setDetails on the screen with spring-security
Supports multi-port with SpringBoot
Generate JavaScript with Thymeleaf
Create a simple CRUD with SpringBoot + JPA + Thymeleaf ③ ~ Add Validation ~
Input in tabular format with Struts2.5.x (JSP and Thymeleaf compatible)
Make a simple CRUD with SpringBoot + JPA + Thymeleaf ① ~ Hello World ~
Use thymeleaf3 with parent without specifying spring-boot-starter-parent in Spring Boot
Make a simple CRUD with SpringBoot + JPA + Thymeleaf ⑤ ~ Template standardization ~
Use Thymeleaf with Azure Functions
Change the port with SpringBoot
Japaneseize using i18n with Rails
Refer to enum in Thymeleaf
Hello World with SpringBoot / Gradle
Screen transition with swing, java
Create a simple CRUD with SpringBoot + JPA + Thymeleaf ④ ~ Customize error messages ~