SpringBoot-web development (3): template engine Thymeleaf



This article mainly introduces the Thymeleaftemplate engine recommended by SpringBoot , which is a high-level language template engine with simpler syntax and more powerful functions

Reference: https://www.jianshu.com/p/7c27c50f24ec

1. Introduction

In the past, we usually turn the html page handed over to us by the front end into a jsp page, and easily realize data display and front-end interaction through jsp.

jsp supports very powerful functions and can write Java code, but springboot does not support jsp by default

If you use a purely static page directly, the development will be very troublesome, which introduces模板引擎



2. What is a template engine?

模板引擎It is generated to separate the user interface from the business data (content). It can generate documents in a specific format. The template engine used for the website will generate a standard [HTML] document; SpringBoot recommends using the template engine

ZWPF0M5W_CR_NEUY6H46__W

  • There are many template engines. In the past, JSP was a template engine. There are also more freemarkers, including Thymeleaf recommended by SpringBoot.

  • There are many template engines, but the principles are as follows:
    Insert picture description here

  • When we write a page template, some values ​​are some data we encapsulate in the background, which are dynamic. We will write some expressions to retrieve these values. According to the data, the template engine will help you parse and fill the expression into the position we specify, and finally generate the data we want to write out

  • All template engines have the same principle, but the syntax of different template engines will be different

  • Template technology is not a mysterious technology, it does the physical work of splicing strings. The template engine uses regular expressions to identify template identifiers and replaces the identifiers with data

Comparison of commonly used template engines :
image-20200923214737908



3. Thymeleaf

1 Introduction

ThymeleafThe main goal is to bring elegant natural templates to your development workflow-HTML can be displayed correctly in the browser, and can be used as a static prototype, so as to achieve more powerful collaboration in the development team. Thymeleaf can handle HTML, XML, JavaScript, CSS and even plain text.
image-20200923214427073

  • thymeleafSix templates can be processed, each of which is called a template mode:

    There are two markup template modes (HTML, XML)

    Three text template modes (TEXT, JAVASCRIPT, CSS)

    No operation template mode (RAW)

Thymeleafhttps://www.thymeleaf.org/

Github address : https://github.com/thymeleaf/thymeleaf

Official website document : https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#what-kind-of-templates-can-thymeleaf-process


2. Import Thymeleaf

The current version is 3.x, just import the following dependency

<!--thymeleaf-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

After importing the dependencies, check whether the jar package is imported.
image-20200922231528040
You can find that the following two packages are automatically imported ( 2.xthe version needs to import the following two dependencies separately)

<dependency>
	<groupId>org.thymeleaf</groupId>
	<artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
	<groupId>org.thymeleaf.extras</groupId>
	<artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>

3. Use Thymeleaf

We first have to look at the automatic configuration rules of our Thymeleaf in accordance with SpringBoot's automatic configuration principles, and we will use them according to that rule.

Let's look for Thymeleaf's automatic configuration class: ThymeleafProperties
image-20200922232535328
you can see the default prefix and suffix, which is Thymeleafthe view parser

Summary : To use thymeleaf, you only need to import the corresponding dependencies, and then put the htmlpage in resourcethe templatesdirectory under , thymeleaf can help us automatically render


4. Simple test

1. Write a TestController
image-20200923212322017

package com.zsr.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestController {
    
    
    @RequestMapping("/test")
    public String TestThymeleaf(Model model) {
    
    
        model.addAttribute("msg", "Hello,Thymeleaf");
        return "test";
    }
}

2. Write a test page test.html and place it in the templates directory
image-20200923210314616

First introduce the thymeleaf namespace constraint

xmlns:th="http://www.thymeleaf.org"
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试Thymeleaf</title>
</head>
<body>
<!--th:text就是将div中的内容设置为它指定的值-->
<div th:text="${msg}"></div>
</body>
</html>

3. Start the project request test

accesshttp://localhost:8080/test
image-20200923140335602

Successfully fetched value


5. thymeleaf syntax

Reference: https://www.cnblogs.com/itdragon/archive/2018/04/13/8724291.html

https://www.cnblogs.com/jnba/p/10832878.html

1, th attribute

th:text: Text replacement;

th:utext: Support html text replacement.

th:value: Attribute assignment

th:each: Traverse loop elements

th:if: Determination condition, as well as a similar th:unless, th:switch,th:case

th:insert: The introduction of code blocks, similar to th:replace, th:include, commonly used in common code block extraction scenarios

th:fragment: Define the code block to be easily referenced by th:insert

th:object: Declare variables, generally used in conjunction with *{} to achieve the effect of laziness.

th:attr: Set label attributes, multiple attributes can be separated by commas

2. Standard expression syntax

${...} Variable expressions, Variable Expressions

#常用的内置对象
`ctx` :上下文对象
`vars` :上下文变量
`locale`:上下文的语言环境
`request`:(仅在web上下文)的 HttpServletRequest 对象
`response`:(仅在web上下文)的 HttpServletResponse 对象
`session`:(仅在web上下文)的 HttpSession 对象
`servletContext`:(仅在web上下文)的 ServletContext 对象

#常用的内置方法
`strings`:字符串格式化方法,常用的Java方法它都有,比如:equals,equalsIgnoreCase,length,trim,toUpperCase,toLowerCase,indexOf,substring,replace,startsWith,endsWith,contains,containsIgnoreCase等
`numbers`:数值格式化方法,常用的方法有:formatDecimal等
`bools`:布尔方法,常用的方法有:isTrue,isFalse等
`arrays`:数组方法,常用的方法有:toArray,length,isEmpty,contains,containsAll等
`lists`,`sets`:集合方法,常用的方法有:toList,size,isEmpty,contains,containsAll,sort等
`maps`:对象方法,常用的方法有:size,isEmpty,containsKey,containsValue等
`dates`:日期方法,常用的方法有:format,year,month,hour,createNow等

@{...} Link expressions, Link URL Expressions

#{...} Message expressions, Message Expressions

~{...} Code block expressions, Fragment Expressions

*{...} Selection Variable Expressions, Selection Variable Expressions

Guess you like

Origin blog.csdn.net/qq_45173404/article/details/108763691