1, Meet Thymeleaf

Students who have worked on the SSM web project know that when we want to interact with the back-end data on the HTML page, we have no choice but Ajax, and the use of JSTL on the HTML page is not supported. At this time, we need to use the JSP page - a special java class (servlet in essence). However, the compatibility between JSP and springboot is not good, so we can't package it into jar package together, Therefore, Thymeleaf is officially launched to replace JSP.

2, Introduction to Thymeleaf

Official document: thymeleaf is an XML/XHTML/HTML5 template engine, which can be used for application development in Web and non Web environments. It is an open source Java library based on the Apache License 2.0 license.
Thymeleaf provides an optional module for integrating Spring MVC. In application development, you can use thymeleaf to completely replace JSP or other template engines, such as Velocity, FreeMarker, etc. The main goal of thymeleaf is to provide a well formatted template creation method that can be correctly displayed by the browser, so it can also be used as static modeling. You can use it to create validated XML and HTML templates. Instead of writing logic or code, developers only need to add tag attributes to the template. Next, these tag attributes execute pre-defined logic on the DOM (document object model).
Its features are: out of the box, dynamic and static combination, multi dialect support, and perfect integration with SpringBoot.
Thymeleaf allows you to work with six templates, each called a template pattern:

• XML
• Valid XML
• XHTML
• Valid XHTML
• HTML5
• Legacy HTML5

3, Spring boot integrates thymeleaf

The steps of using springboot integration and Thymeleaf are as follows:

1. Create a springboot project
2. Add start dependency for thymeleaf
3. Add start dependency for spring web
4. Write html and use the syntax of thymleaf to obtain the value of the variable corresponding to the background transfer
5. Write the controller to set the value of the variable into the model

(1) Create a stand-alone project springboot thymeleaf

Import pom.xml dependency

<?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">
<modelVersion>4.0.0</modelVersion>

<groupId>org.example</groupId>
<artifactId>SpringThymeleaf</artifactId>
<version>1.0-SNAPSHOT</version>
<--Dependency management-->
<parent>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-parent</artifactId>
	<version>2.1.4.RELEASE</version>
</parent>
<dependencies>
	<!--web Start dependence-->
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-web</artifactId>
	</dependency>
	<!--thymeleaf to configure-->
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-thymeleaf</artifactId>
	</dependency>
</dependencies>
</project>

(2) Create the package com.company.thymeleaf.thymeleaf. And create the startup class ThymeleafApplication

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

(3) Create application.yml

Set the cache setting of thymeleaf to false. Because thymeleaf is cached by default, the test should avoid the interference of cache to us, so it is set to false.

spring:
  thymeleaf:
    cache: false

(4) Control layer - create a controller to test the background setting data into the model.

Create com.company.thymeleaf.controller.TestController with the following code:

@Controller
@RequestMapping("/test")
public class TestController {
	/***
	* Go to / test/hello and jump to the demo page
	* @param model
	* @return String 
	*/
	@RequestMapping("/hello")
	public String hello(Model model){
		model.addAttribute("hello","hello welcome");
		return "demo";
	}
}

(5) Create html

Create the templates directory in resources, and create demo.html in the templates directory. The code is as follows:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>Thymeleaf Introduction to</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
	<!--output hello data-->
	<p th:text="${hello}"></p>
</body>
</html>

Explanation:

This statement uses thymeleaf label
<html  xmlns:th="http://www.thymeleaf.org" > 

This sentence uses th:text="${Variable name}" Indicates use thymeleaf Get text data, similar to EL expression
<p th:text="${hello}"></p>

(6) Testing

Start the system and access it in the browser http://localhost:8080/test/hello