Notas de estudio de SpringBoot motor de plantillas 5-Thymeleaf

Thymeleaf

Thymeleaf Chinese Reference Manual
Código de extracción: y4hm

Motor de plantillas

La página que nos entregó el front-end es una página html. Si es nuestro desarrollo anterior, necesitamos convertirlos en páginas jsp. La ventaja de jsp es que cuando encontramos algunos datos y los reenviamos a la página JSP, podemos usar jsp para realizar fácilmente la visualización e interacción de datos.

jsp admite funciones muy poderosas, incluida la capacidad de escribir código Java, pero en nuestra situación actual, el proyecto SpringBoot es el primero en forma de jar, no war, como segundo, todavía usamos Tomcat incrustado, así que bueno, él no soporta jsp por defecto ahora.

Eso no es compatible con jsp. Si usamos páginas estáticas puras directamente, nos traerá muchos problemas en el desarrollo, entonces, ¿qué debemos hacer?

SpringBoot recomienda que pueda usar el motor de plantillas:

Hemos escuchado mucho sobre los motores de plantillas. De hecho, JSP es un motor de plantillas, y hay más freemarkers, incluido Thymeleaf recomendado por SpringBoot. Hay muchos motores de plantillas, pero no importa cuántos motores de plantillas, sus ideas son todo. Lo mismo, ¿qué tipo de pensamiento? Echemos un vistazo a esta imagen:

la función del motor de plantillas es escribir una plantilla de página, por ejemplo, algunos valores son dinámicos, escribimos algunas expresiones. ¿De dónde provienen estos valores? Encapsulamos algunos datos en segundo plano. Luego, entregue esta plantilla y estos datos a nuestro motor de plantillas. El motor de plantillas lo ayudará a analizar y completar la expresión en la posición que especifiquemos de acuerdo con nuestros datos, y finalmente generar el contenido que queremos a partir de estos datos y escribirlo para nosotros. ., Este es nuestro motor de plantillas, ya sea jsp u otros motores de plantillas, es la misma idea. Es solo que, entre diferentes motores de plantilla, pueden tener una sintaxis ligeramente diferente. No presentaré los demás. Presentaré principalmente el motor de plantillas Thymeleaf recomendado por SpringBoot. Este motor de plantillas es un motor de plantillas de lenguaje de alto nivel y su sintaxis es más simple. Además, la función es más poderosa.

Echemos un vistazo a este motor de plantillas, ya que tenemos que mirar este motor de plantillas. Primero, veamos cómo usar SpringBoot. ¿Cómo
presentar Thymeleaf
? Para springboot, todo es algo inicial, vamos a introducirlo en el proyecto. Tres sitios web para todos:

Thymeleaf ： 网 ： https: //www.thymeleaf.org/

Página de inicio de Thymeleaf en Github: https://github.com/thymeleaf/thymeleaf

Documento oficial de primavera: encuentre nuestra versión correspondiente

https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-starter

Encuentre la dependencia pom correspondiente: ¡puede hacer clic en el código fuente para ver el paquete original!

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

Maven descargará automáticamente el paquete jar, podemos ir y ver lo que descargamos;

Análisis de hojas de tomillo

Antes, presentamos Thymeleaf, entonces, ¿cómo lo usamos?

Primero tenemos que mirar las reglas de configuración automática de nuestro Thymeleaf según el principio de configuración automática de SpringBoot, y las usaremos de acuerdo con esa regla.

Busquemos la clase de configuración automática de 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;
}

¡Podemos ver el prefijo y sufijo predeterminados en él!

Solo necesitamos poner nuestra página html debajo de las plantillas debajo de la ruta de clase, y thymeleaf puede representarla automáticamente por nosotros.

No necesitas configurar nada para usar thymeleaf, simplemente
colócalo en la carpeta especificada.

prueba

1. Escribe un TestController

@Controller
public class TestController {
    
    
    
    @RequestMapping("/t1")
    public String test1(){
    
    
        //classpath:/templates/test.html
        return "test";
    }
    
}

2. Escriba una página de prueba test.html y colóquela en el directorio de plantillas.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>我是test</h1>

</body>
</html>

3. Inicie la prueba de solicitud de proyecto

Aprendizaje gramatical de Thymeleaf

Para aprender la gramática, lo más preciso es consultar el documento oficial del sitio web, buscamos la versión correspondiente y echamos un vistazo;

Sitio web oficial de Thymeleaf: https://www.thymeleaf.org/, ¡solo eche un vistazo al sitio web oficial! ¡Descarguemos la documentación oficial de Thymeleaf!

Hagamos el ejercicio más simple: necesitamos encontrar algunos datos y mostrarlos en la página.

1. Modifique la solicitud de prueba y agregue la transmisión de datos;

@RequestMapping("/t1")
public String test1(Model model){
    
    
    //存入数据
    model.addAttribute("msg","Hello,Thymeleaf");
    //classpath:/templates/test.html
    return "test";
}

2. Si queremos usar thymeleaf, necesitamos importar restricciones de espacio de nombres en el archivo html para facilitar las solicitudes.

Podemos ir al # 3 del documento oficial para echar un vistazo al espacio de nombres:

 xmlns:th="http://www.thymeleaf.org"

3. Escribamos la página de inicio

<!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. ¡Inicie la prueba!

Bien, para empezar, ¡estudiemos en serio la sintaxis de Thymeleaf!

1. ¡Podemos usar cualquier th: attr para reemplazar el valor del atributo nativo en Html!

2. ¿Qué expresiones podemos escribir?
Ir al documento para ver

Examen de práctica:

1. Escribimos un Controller y ponemos algunos datos

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. Recuperar datos de la página de prueba

<!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. ¡Empiece a probar el proyecto!

Hemos leído la gramática y muchos estilos, aunque aprendamos ahora, lo olvidaremos, por eso en el proceso de aprendizaje lo que necesitamos usar, según la documentación oficial, es lo más importante, debemos ser competentes en el uso de la documentación oficial!