Desarrollo web SpringBoot (3): motor de plantillas Thymeleaf



Este artículo presenta principalmente el Thymeleafmotor de plantillas recomendado por SpringBoot , que es un motor de plantillas de lenguaje de alto nivel con una sintaxis más simple y funciones más poderosas.

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

1. Introducción

En el pasado, generalmente convertíamos la página html que nos entregaba el front-end en una página jsp, y realizamos fácilmente la visualización de datos y la interacción del front-end mediante jsp.

jsp admite funciones muy potentes y puede escribir código Java, pero springboot no admite jsp de forma predeterminada

Si usa una página puramente estática directamente, el desarrollo será muy problemático, lo que introduce模板引擎



2. ¿Qué es un motor de plantillas?

模板引擎Se genera para separar la interfaz de usuario de los datos comerciales (contenido). Puede generar documentos en un formato específico. El motor de plantilla utilizado para el sitio web generará un documento [HTML] estándar; SpringBoot recomienda utilizar el motor de plantilla

ZWPF0M5W_CR_NEUY6H46__W

  • Hay muchos motores de plantillas. En el pasado, JSP era un motor de plantillas. También hay más freemarkers, incluido Thymeleaf recomendado por SpringBoot.

  • Hay muchos motores de plantilla, pero los principios son los siguientes:
    Inserte la descripción de la imagen aquí

  • Cuando escribimos una plantilla de página, algunos valores son algunos datos que encapsulamos en segundo plano, que son dinámicos, escribiremos algunas expresiones para recuperar estos valores. De acuerdo con los datos, el motor de plantillas lo ayudará a analizar y completar la expresión en la posición que especifiquemos, y finalmente generar los datos que queremos escribir.

  • Todos los motores de plantilla tienen el mismo principio, pero la sintaxis de los diferentes motores de plantilla será diferente

  • La tecnología de plantillas no es una tecnología misteriosa, hace el trabajo físico de empalmar cuerdas. El motor de plantillas utiliza expresiones regulares para identificar identificadores de plantilla y reemplaza los identificadores con datos

Comparación de motores de plantillas de uso común :
imagen-20200923214737908



3. Thymeleaf

1. Introducción

ThymeleafEl objetivo principal es traer elegantes plantillas naturales a su flujo de trabajo de desarrollo: HTML se puede mostrar correctamente en el navegador y se puede utilizar como un prototipo estático, para lograr una colaboración más poderosa en el equipo de desarrollo. Thymeleaf puede manejar HTML, XML, JavaScript, CSS e incluso texto sin formato.
imagen-20200923214427073

  • thymeleafSe pueden procesar seis plantillas, cada una de las cuales se denomina modo de plantilla:

    Hay dos modos de plantilla de marcado (HTML, XML)

    Tres modos de plantilla de texto (TEXT, JAVASCRIPT, CSS)

    Modo sin plantilla de operación (RAW)

Thymeleafhttps://www.thymeleaf.org/

Dirección de Github : https://github.com/thymeleaf/thymeleaf

Documento del sitio web oficial : https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#what-kind-of-templates-can-thymeleaf-process


2. Importar Thymeleaf

La versión actual es 3.x, solo importe la siguiente dependencia

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

Después de importar las dependencias, verifique si el paquete jar está importado.
imagen-20200922231528040
Puede encontrar que los siguientes dos paquetes se importan automáticamente ( 2.xla versión necesita importar las siguientes dos dependencias por separado)

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

3. Utilice Thymeleaf

Primero tenemos que mirar las reglas de configuración automática de nuestro Thymeleaf de acuerdo con los principios 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
imagen-20200922232535328
puede ver el prefijo y sufijo predeterminados, que es Thymeleafel analizador de vistas

Resumen : Para usar thymeleaf, solo necesita importar las dependencias correspondientes, y luego poner la htmlpágina en resourceel templatesdirectorio debajo , thymeleaf puede ayudarnos a renderizar automáticamente


4. Prueba simple

1. Escribe un TestController
imagen-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. Escriba una página de prueba test.html y colóquela en el directorio de plantillas.
imagen-20200923210314616

Primero introduzca la restricción de espacio de nombres de hojas de tomillo

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. Inicie la prueba de solicitud de proyecto

accesohttp://localhost:8080/test
imagen-20200923140335602

Valor obtenido con éxito


5. sintaxis de thymeleaf

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

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

1, atributo

th:text: Reemplazo de texto;

th:utext: Soporta reemplazo de texto html.

th:value: Asignación de atributos

th:each: Elementos de bucle transversal

th:if: Condición de determinación, así como un similares th:unless, th:switch,th:case

th:insert: La introducción de bloques de código, similar a th: replace, th: include, de uso común en escenarios comunes de extracción de bloques de código.

th:fragment: Defina el bloque de código para que sea fácilmente referenciado por th: insert

th:object: Declara variables, generalmente utilizadas junto con * {} para lograr el efecto de la pereza.

th:attr: Establece atributos de etiqueta, varios atributos se pueden separar con comas

2. Sintaxis de expresión estándar

${...} Expresiones variables, Expresiones variables

#常用的内置对象
`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等

@{...} Expresiones de enlace, Expresiones de URL de enlace

#{...} Expresiones de mensaje, Expresiones de mensaje

~{...} Expresiones de bloque de código, Expresiones de fragmentos

*{...} Expresiones de variable de selección, Expresiones de variable de selección

Supongo que te gusta

Origin blog.csdn.net/qq_45173404/article/details/108763691
Recomendado
Clasificación