Spring-Boot integra Thymeleaf

SpringBoot no recomienda el uso de jsp, pero admite algunas otras tecnologías de motor de plantilla, la recomendación oficial es usar Thymeleaf

Thymeleaf

Thymeleaf es un motor de plantillas similar a Velocity y FreeMarker, que puede reemplazar completamente a JSP. En comparación con otros motores de plantillas, tiene las siguientes cuatro características extremadamente atractivas:

  • Combinación de dinámica y estática: Thymeleaf puede ejecutarse en entornos de red y no conectados, es decir, permite a los artistas ver el efecto estático de la página en el navegador y también permite al programador ver el efecto de página dinámica con datos en el servidor. Esto se debe a que admite prototipos html y luego agrega atributos adicionales a las etiquetas html para lograr la visualización de plantilla + datos. El navegador ignora los atributos de etiqueta indefinidos al interpretar html, por lo que la plantilla thymeleaf se puede ejecutar de forma estática; cuando se devuelven datos a la página, la etiqueta Thymeleaf reemplazará dinámicamente el contenido estático para que la página se muestre de forma dinámica.
  • Fuera de la caja: proporciona dos dialectos, estándar y estándar de primavera, y puede aplicar directamente plantillas para lograr efectos de expresión JSTL y OGNL, evitando el problema de configurar plantillas, cambiar jstl y cambiar etiquetas todos los días. Al mismo tiempo, los desarrolladores también pueden ampliar y crear dialectos personalizados.
  • Compatibilidad con varios dialectos: Thymeleaf proporciona dialectos estándar de primavera y un módulo opcional que está perfectamente integrado con SpringMVC, que puede implementar rápidamente el enlace de formularios, el editor de atributos, la internacionalización y otras funciones.
  • Perfectamente integrado con SpringBoot, SpringBoot proporciona la configuración predeterminada de Thymeleaf y establece el solucionador de vistas para Thymeleaf, podemos operar Thymeleaf como antes usando jsp. Casi no hay diferencia en el código, es decir, hay una diferencia en la sintaxis de la plantilla.

Usemos un caso para integrar Thymeleaf

Escribe el controlador

Escriba un controlador, devuelva datos de usuario, colóquelos en el modelo y renderícelos en la página en el futuro

import com.sunyuqi.domain.User;
import com.sunyuqi.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.List;

@Controller
public class MybatisController {
    
    

    @Autowired
    private UserMapper userMapper;

    @GetMapping("/query")
    public String queryUserList(Model model){
    
    
        List<User> users = userMapper.queryUserList();
        model.addAttribute("users",users);
        return "index";
    }
}

Presentando el lanzador

Introduzca directamente el lanzador:

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

SpringBoot registrará automáticamente un solucionador de vistas para Thymeleaf

Similar al InternalViewResolver que analiza JSP, Thymeleaf también determinará la ubicación del archivo de plantilla en función del prefijo y sufijo:
Inserte la descripción de la imagen aquí

  • Prefijo predeterminado:classpath:/templates/
  • Sufijo predeterminado:.html

Páginas estáticas

De acuerdo con el documento anterior, la plantilla se coloca en la carpeta de plantillas debajo de la ruta de clase de forma predeterminada, y creamos un nuevo archivo html en ella:
Inserte la descripción de la imagen aquí

Escriba una plantilla html para representar los datos en el modelo:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
        table {
     
     border-collapse: collapse; font-size: 14px; width: 80%; margin: auto}
        table, th, td {
     
     border: 1px solid darkslategray;padding: 10px}
    </style>
</head>
<body>
<div style="text-align: center">
    <span style="color: darkslategray; font-size: 30px">欢迎光临!</span>
    <hr/>
    <table class="list">
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr th:each="user : ${users}">
            <td th:text="${user.id}">1</td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}"></td>
            <td th:text="${user.sex}"></td>
        </tr>
    </table>
</div>
</body>
</html>

Tenga en cuenta que cambie el espacio de nombres de html a: xmlns:th="http://www.thymeleaf.org"habrá un indicador de sintaxis

Sintaxis de Thymeleaf:

  • $ {} `: Esto es similar a la expresión el, pero en realidad es la sintaxis de ognl, que es más poderosa que la expresión el
  • th-Instrucción: Se th-realiza mediante el uso de atributos personalizados en Html5. Si no es H5, se puede utilizar en su data-th-lugar
    • th:each: Similar a c:foreachrecorrer una colección, pero con una sintaxis más concisa
    • th:text: El texto en la etiqueta de declaración
      • Por ejemplo <td th-text='${user.id}'>1</td>, si user.id tiene un valor, anulará el valor predeterminado 1
      • Si no hay ningún valor, se mostrará el 1 predeterminado en td. Esta es la razón por la que thymeleaf puede combinar dinámica y estática. La falla del análisis de la plantilla no afectará el efecto de visualización de la página, ¡porque se mostrará el valor predeterminado!

Caché de plantilla

Thymeleaf almacenará en caché la plantilla después de analizar la plantilla por primera vez, lo que mejora enormemente la capacidad de procesamiento simultáneo.

Desactivar la caché requiere configuración

spring.thymeleaf.cache=false

Supongo que te gusta

Origin blog.csdn.net/weixin_42494845/article/details/108411408
Recomendado
Clasificación