This is the 13th day of my participation in the August More Text Challenge. For details, see:August is more challenging

What is the Thymeleaf

  • Thymeleaf is a new generation of Java template engines that are similar to traditional engines like Velocity, FreeMarker, and so on.

  • The main purpose of Thymeleaf is to introduce elegant templates into the development workflow and to display HTML correctly in the browser. At the same time, it can be used as a static engine to facilitate collaborative development among development members.

  • Spring Boot officially recommends using templates and provides a complete automated configuration solution for Thymeleaf;

  • Tutorial: Using Thymeleaf: Thymeleaf + Spring

The consolidation process

Preparation process

Before officially starting the integration process, this article is first given to build the environment, convenient for you to follow the content of the study.

  • JDK 11 (other versions of the JDK are theoretically possible, but JDK 1.8 or later is more recommended)
  • IDEA (there is no requirement here, but my personal words is a new version I will update, although bloated, but updated really good 😂)
  • SpringBoot 2.x (now the mainstream should be 2.x, 1.x is the older version)

Add the Thymeleaf dependency

There are two ways to add a Thymeleaf dependency:

  1. The first kind of

When creating a new project, select Thymeleaf in Templeate Engines.

  1. The second,

For projects that forgot to add Thymeleaf dependencies when creating a new project, you can simply add the dependencies manually in the project’s POM.xml.

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Copy the code

Write entity classes and controllers

  1. New entity classUser

Because Lombok is used here, the code is greatly simplified by eliminating various setters and getters, as well as eliminating various constructors and overwriting methods such as toString(). All we need to do is add Lombok’s dependencies to pom.xml and add corresponding annotations to our entity classes.

Here is the corresponding code to insert Lombok dependencies into pom.xml.

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>
Copy the code

We can then write our entity class using @data, @Component, @allargsConstructor, and NoArgsConstructor annotations. Each annotation has the following meaning:

  • @Component: Instantiates the class to the Spring container, equivalent to a configuration file;

  • @data: Provides get and set methods for all properties of the class, as well as equals, canEqual, hashCode, toString, and a constructor with an empty default argument;

  • @allargsconstructor: Provide a full-parameter constructor for the class, but no longer provide a default constructor;

  • @noargsconstructor: Since using AllArgsConstructor causes a class to have no default null constructor, it is required to provide a null constructor for the class;

package com.cunyu.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.stereotype.Component;

/ * * *@author : cunyu
 * @version : 1.0
 * @className : User
 * @date: 2020/7/29 justice *@description: User entity class */

@Component
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private int age;
    private String name;
    private String email;
}
Copy the code
  1. Writing the Controller

The main things to notice at this point are setViewName(), which represents the front page of the method, the.html file with the file name in our template, and addObject(), which injects values into the property and then passes the property to the front end template.

package com.cunyu.controller;

import com.cunyu.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

/ * * *@author : cunyu
 * @version : 1.0
 * @className : UserController
 * @date: 2020/7/29 "*@description : UserController
 */

@Controller
public class UserController {

    / / access IP: port/index
    @GetMapping("/index")
    public ModelAndView index(a) {
        ModelAndView modelAndView = new ModelAndView();
        // Set the jump view, which is located in templates/index.html
        modelAndView.setViewName("index");
        modelAndView.addObject("title".Thymeleaf the use of");
        modelAndView.addObject("desc"."Spring Boot integrated Thymeleaf");

        User author = new User(25."Village Yuyao"."[email protected]");

        modelAndView.addObject("author", author);
        returnmodelAndView; }}Copy the code

Create the Thymeleaf template

First the code above, we set the jump of the view as the index, so we need in the SRC/main/resources/templates to create the index. The HTML.

<! DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <! -- title property in Controller -->
    <title th:text="${title}"></title>
    
</head>
<body>
<! -- desc in Controller -->
<h1 th:text="${desc}" th:align="center"></h1>
    
<! --> the author information in the Controller -->
<h2 th:align="center">===== Author information =====</h2>
<p th:text="${author? .name}"></p>
<p th:text="${author? .age}"></p>
<p th:text="${author? .email}"></p>
</body>
</html>

Copy the code

test

Start the project, and then visit http://localhost:8080/index in your browser, if the information in the chart, the integration of success.

Matters needing attention

For ease of use, we can add some configurations of our own when using the Thymeleaf template. The default configuration file for a project should be application.properties, but SpringBoot recommends yML configuration, so we need to manually change it to yML.

spring:
  thymeleaf:
    cache: false
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML
    encoding: UTF-8
    servlet:
      content-type: text/html
Copy the code

conclusion

Well, that’s all we have time for today. Today’s brief introduction to Themeleaf was followed by a description of the process of integrating Thymeleaf with SpringBoot, and finally some considerations for using some of the related configurations commonly used in Thymeleaf.