Thymeleaf
Thymeleaf Chinese Reference Manual
Extraction code: y4hm
Template engine
The page handed to us by the front end is an html page. If it is our previous development, we need to convert them into jsp pages. The advantage of jsp is that when we find out some data and forward it to the JSP page, we can use jsp to easily realize data display and interaction.
jsp supports very powerful functions, including the ability to write Java code, but in our current situation, the SpringBoot project is first in the form of a jar, not war, like second, we still use embedded Tomcat, so Well, he does not support jsp by default now.
That doesn't support jsp. If we use pure static pages directly, it will bring us a lot of trouble in development, so what should we do?
SpringBoot recommends that you can use the template engine:
We actually hear a lot about template engines. In fact, JSP is a template engine, and there are more freemarkers, including Thymeleaf recommended by SpringBoot. There are many template engines, but no matter how many template engines, their ideas are all It's the same, what kind of thinking? Let's take a look at this picture:
the role of the template engine is to write a page template, for example, some values are dynamic, we write some expressions. Where do these values come from? We encapsulate some data in the background. Then give this template and this data to our template engine. The template engine will help you parse and fill the expression to the position we specify according to our data, and then finally generate the content we want from this data and write it out for us. , This is our template engine, whether it is jsp or other template engines, it is the same idea. It's just that, between different template engines, they may have a slightly different syntax. I won't introduce the others. I will mainly introduce the Thymeleaf template engine recommended by SpringBoot. This template engine is a high-level language template engine, and its syntax is simpler. Moreover, the function is more powerful.
Let's take a look at this template engine. Since we have to look at this template engine. First, let's look at how to use SpringBoot. How to
introduce Thymeleaf
? For springboot, everything is a start thing, let's introduce it in the project. Three websites for everyone:
Thymeleaf ： 网 ： https: //www.thymeleaf.org/
Thymeleaf's homepage on Github: https://github.com/thymeleaf/thymeleaf
Spring official document: find our corresponding version
https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-starter
Find the corresponding pom dependency: you can click into the source code to see the original package!
<!--thymeleaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Maven will automatically download the jar package, we can go and see what we downloaded;
Thymeleaf analysis
Before, we have introduced Thymeleaf, so how do we use this?
We first have to look at the automatic configuration rules of our Thymeleaf according to the automatic configuration principle of SpringBoot, and we will use them in accordance with that rule.
Let's find the automatic configuration class of Thymeleaf: ThymeleafProperties
@ConfigurationProperties(
prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {
private static final Charset DEFAULT_ENCODING;
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
private boolean checkTemplate = true;
private boolean checkTemplateLocation = true;
private String prefix = "classpath:/templates/";
private String suffix = ".html";
private String mode = "HTML";
private Charset encoding;
}
We can see the default prefix and suffix in it!
We only need to put our html page under templates under the classpath, and thymeleaf can automatically render it for us.
You don’t need to configure anything to use thymeleaf, just 
put it in the specified folder.
test
1. Write a TestController
@Controller
public class TestController {
@RequestMapping("/t1")
public String test1(){
//classpath:/templates/test.html
return "test";
}
}
2. Write a test page test.html and place it in the templates directory
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我是test</h1>
</body>
</html>
3. Start the project request test
Thymeleaf grammar learning
To learn grammar, it is most accurate to refer to the official website document, we find the corresponding version and take a look;
Thymeleaf official website: https://www.thymeleaf.org/, just take a look at the official website! Let's download the official documentation of Thymeleaf!
Let’s do the simplest exercise: we need to find out some data and display it on the page
1. Modify the test request and add data transmission;
@RequestMapping("/t1")
public String test1(Model model){
//存入数据
model.addAttribute("msg","Hello,Thymeleaf");
//classpath:/templates/test.html
return "test";
}
2. If we want to use thymeleaf, we need to import namespace constraints in the html file to facilitate prompts.
We can go to #3 of the official document to take a look at the namespace:
xmlns:th="http://www.thymeleaf.org"
3. Let's write the front-end page
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>test</h1>
<!--th:text就是将div中的内容设置为它指定的值，和之前学习的Vue一样-->
<div th:text="${msg}"></div>
</body>
</html>
4. Start the test!
OK, getting started, let’s study the syntax of Thymeleaf seriously!
1. We can use any th:attr to replace the value of the native attribute in Html!
2. What expressions can we write?
Go to the document to see
Practice test:
1. We write a Controller and put some data
package com.zhou.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.ArrayList;
import java.util.Arrays;
//这个需要模板引擎的支持！ thymeleaf
@Controller
public class IndexController {
@RequestMapping("/test")
public String test(Model model){
model.addAttribute("msg","<h1>msg——hello,springboot</h1>");
model.addAttribute("users", Arrays.asList("zhouyi","joy"));
return "test";
}
}
2. Retrieve data from the test page
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
我是 test
<div th:utext="${msg}"></div>
<div th:text="${msg}"></div>
<hr/>
<p>写法一</p>
<h3 th:each="user:${users}" th:text="${user}"></h3>
<p>写法二</p>
<h3 th:each="user:${users}">[[${
user}]]</h3>
</body>
</html>
3. Start project testing!
We have read the grammar and many styles, even if we learn now, we will forget, so in the learning process, what we need to use, according to the official documentation, is the most important thing, we must be proficient in using the official documentation!