Spring Boot integrated thymeleaf quicks tart demo

1. What is thymeleaf?

Thymeleaf is a modern server-side Java template engine that can be used both on the web and in standalone environments. It is capable of handling HTML, XML, JavaScript, CSS, and even plain text.

Thymeleaf’s main goal is to provide an elegant, 高️ maintainable approach to creating templates. To achieve this, it is built on the idea of a natural template. That is, inject its logic into the template file in some way without affecting the template being used as a prototype. This improves design communication and also creates a bridge between the design and development teams.

Features of Thymeleaf:

• Thymeleaf has a highly readable, easy-to-understand syntax.
• Thymeleaf supports all the features of Spring MVC and can be seamlessly integrated with the Spring framework.
• Thymeleaf can run without a web server, making it easy to develop and test.
• Thymeleaf supports a variety of template parsers, and you can choose the right one according to your needs.

Application scenarios for Thymeleaf:

Thymeleaf is a powerful templating engine for a wide range of web applications, whether traditional server-side web applications, single-page applications, or mobile web applications. In addition, Thymeleaf is not only limited to the generation of dynamic content, but can also be used to generate static content, such as email templates, etc., providing great convenience and flexibility for developers.

2. Code engineering

Purpose: Use Thymeleaf as a template to output page html

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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>springboot-demo</artifactId>
        <groupId>com.et</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>
    <artifactId>thymeleaf</artifactId>
    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-autoconfigure</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>
</project>

controller

package com.et.thymeleaf.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import java.util.HashMap;
import java.util.Map;
@Controller
public class HelloWorldController {
    @RequestMapping("/")
    public String index()
    {
        return"index";
    }
    @RequestMapping(value="/save", method= RequestMethod.POST)
    public ModelAndView save(@ModelAttribute User user)
    {
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("result");
        modelAndView.addObject("user", user);
        return modelAndView;
    }
}

entity

package com.et.thymeleaf.controller;
import lombok.Data;

@Data
public class User {
    private String name;
    private int  age;
    private String email;
}

application.properties

spring.thymeleaf.cache=false
spring.thymeleaf.suffix: .html

index.html

<html lang="en">
<head>
    <title>Index Page</title>
</head>
<body>
<form action="save" method="post">
    <table>
        <tr>
            <td><label for="user-name">User Name</label></td>
            <td><input type="text" name="name"></input></td>
        </tr>
        <tr>
            <td><label for="email">Email</label></td>
            <td><input type="text" name="email"></input></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit"></input></td>
        </tr>
    </table>
</form>
</body>
</html>

result.html

<html xmlns:th="https://thymeleaf.org">
<table>
    <tr>
        <td><h4>User Name: </h4></td>
        <td><h4 th:text="${user.name}"></h4></td>
    </tr>
    <tr>
        <td><h4>Email ID: </h4></td>
        <td><h4 th:text="${user.email}"></h4></td>
    </tr>
</table>
</html>

The above are just some of the key codes, all of which can be found in the repositories below

Code repositories

• https://github.com/Harries/springboot-demo

3. Testing

Start the Spring Boot application

Test the template

• Access http://127.0.0.1:8080/ input parameters,
• Clicking Submit will automatically redirect you to the http://127.0.0.1:8080/save and display the parameters entered on the previous page

4. References

• https://www.thymeleaf.org/