Motor de plantillas integrado SpringBoot (Thymeleaf, Freemarker, JSP)

Resumen de puntos de conocimiento de Java: Si quieres verlo, puedes ingresarlo desde aquí

Tabla de contenido

- - 2.7 Motor de plantillas integrado

2.7 Motor de plantillas integrado

2.7.1、Hoja de tomillo

1. Introducción

Se puede decir que la separación de front-end y back-end es la idea más común en la actualidad (el front-end escribe el código de front-end y el back-end escribe el código de back-end, sin afectarse entre sí).

En el desarrollo web tradicional de Java, JSP generalmente se usa para desarrollar la página principal. Pero la página JSP está escrita con HTML+Java, lo que obviamente no se ajusta a la idea de "separación de front-end y back-end". Por lo tanto, en el desarrollo web Java actual, el uso de JSP se ha ido reduciendo gradualmente. Entre ellos, Thymeleaf es una de las mejores tecnologías utilizadas en lugar de JSP.

Thymeleaf es un marco de trabajo de motor de plantillas para renderizar XML, XHTML, HTML5, JavaScript, CSS e incluso texto sin formato. Se puede integrar con marcos web como Spring MVC, y el navegador puede abrirlo directamente incluso si el proyecto no se está ejecutando, pero el navegador ignorará los atributos de etiqueta de Thymeleaf indefinidos y mostrará el efecto de una página estática. a medida que se accede a través de una aplicación web, Thymeleaf mostrará. Reemplazará dinámicamente el contenido estático y hará que la página se muestre dinámicamente.

Combinación de dinámica y estática: puede abrirla directamente con un navegador para ver el efecto estático de la página, o acceder a ella a través de una aplicación web para ver el efecto de página dinámica.
Listo para usar: proporciona el dialecto estándar de Spring y un módulo opcional perfectamente integrado con SpringMVC, que puede implementar rápidamente funciones como vinculación de formularios, editor de atributos e internacionalización.
Compatibilidad con varios dialectos: proporciona dos dialectos estándar de Thymeleaf y estándar de Spring, que pueden aplicar plantillas directamente para implementar expresiones JSTL y OGNL; los desarrolladores también pueden expandir y crear dialectos personalizados cuando sea necesario.
Integración perfecta con SpringBoot: Springboot se recomienda y admite oficialmente, y proporciona una configuración predeterminada para Thymeleaf, y también establece una resolución de vistas para Thymeleaf.

El uso de Thymeleaf en Spring requiere la importación de dependencias relacionadas (paquetes jar):

<!--  thymeleaf的依赖  -->
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.15.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.0.15.RELEASE</version>
</dependency>
<!--  html、xml解析器-->
<dependency>
    <groupId>org.attoparser</groupId>
    <artifactId>attoparser</artifactId>
    <version>2.0.5.RELEASE</version>
</dependency>
<!--转义反转义词库-->
<dependency>
    <groupId>org.unbescape</groupId>
    <artifactId>unbescape</artifactId>
    <version>1.1.6.RELEASE</version>
</dependency>

2. Gramática

Aprendiendo de los documentos oficiales

Hay muchas etiquetas dentro de Thymeleaf que reemplazan HTML, así como algunas expresiones. Son estas etiquetas y expresiones las que permiten que Thymeleaf tenga la función de visualización dinámica.

Al usarlo, agregue un espacio de declaración en la página HTML para evitar errores al editar.

<html lang="en" xmlns:th="http://www.thymeleaf.org">

th tag: La razón por la que thymeleaf puede lograr diferentes visualizaciones estáticas y dinámicas es que expande el atributo th sobre la base de etiquetas HTML Básicamente, los atributos de las etiquetas HTML originales pueden ser reemplazados por el atributo th:. Estos atributos con th se pueden usar directamente en etiquetas HTML, por lo que el HTML en Thymeleaf muestra el contenido original cuando es estático y muestra el conjunto de contenido con atributos después del acceso a la web, de modo que hace que HTML sea una visualización bidireccional estática y dinámica.

Atributos	describir	ejemplo
th:id	Reemplazar el atributo id de HTML	< input id=“html-id” th:id=“thymeleaf-id” />
th:texto	Establecer el contenido de texto del elemento actual (sin escapar de las etiquetas html)	< h1 th:text=“holaSpringBoot” >hola< /h1 >
th:utexto	Reemplazo de texto sin caracteres especiales de escape (se pueden reconocer etiquetas HTML)	<div th:utext="'<h1>Mostrar</h1>'" >texto</div>
th:objeto	Seleccione el objeto en la etiqueta principal y use la expresión de selección *{…} para seleccionar el valor del atributo del objeto en la etiqueta secundaria. Si no hay ningún objeto de selección, la expresión de selección utilizada en la subetiqueta tiene el mismo efecto que la expresión variable ${…}. Al mismo tiempo, incluso si se selecciona un objeto, las expresiones variables aún se pueden usar en subetiquetas.	< div th:objeto=“${sesión.usuario}” > < p th:texto=“*{nombre}”>< /p> </ div>
th:valor	Reemplazar el atributo de valor	< entrada th:valor = “${usuario.nombre}” />
th:con	asignación de variables locales	< div th:with=“isEvens = $p ro d stat .__cuenta {son pares$ }”>< /div>
th:estilo	establecer estilo	< div th:estilo=“'color:#F00; peso-fuente:negrita'”>< /div>
th:onclick	haga clic en evento	< td th:onclick = “'getInfo()'”>< /td>
th:cada uno	Traverse, soporte iterable, mapa, matriz, etc.	< tabla> < tr th: cada = “m: $sesión .___mapa p " >< segundo /_>< t d t h : texto___= "$ {m.getKey()}”>< /td> < td th:text=“${m.getValue()}”>< /td> < /tr> < /table>
th:si	Determinar si mostrar esta etiqueta de acuerdo con las condiciones	< a th:if =“${userId == recopilar.userId}”>
th: a menos que	Contrariamente a la sentencia th:if, no se mostrará cuando se cumpla la condición	< div th:a menos que=“${m.getKey()=='nombre'}” >< /div>
th: cambiar	Similar a la declaración de cambio de caso de Java, generalmente se usa junto con th: case	< div th:switch=“${name}”> < span th:case=“值1”>< /span> < span th:case=“值2”>< /span> </ div>
th:seleccionado	seleccione el cuadro de selección seleccionado	< seleccionar> < opción th:seleccionado=“${nombre=='a'}”> < /opción> …… < /seleccionar>
th:origen	Reemplazar atributo src en HTML	< img th:src=“@{}” src=“” />
th: acción	Reemplazar la dirección de envío del formulario	< formulario th:action="@{/user/login}" th:method="post"> < /form>
linea fina	Atributo en línea; este atributo tiene tres valores: texto, ninguno y javascript. Cuando se usa en la etiqueta <script>, el código js puede hacer que el objeto de la página pase en segundo plano.
th:reemplazar	Etiqueta de diseño; reemplaza la etiqueta completa actual con el fragmento de plantilla (que contiene la etiqueta) especificado por el atributo th:fragment.
th:insertar	Etiqueta de diseño; inserta el fragmento de plantilla (que contiene la etiqueta) especificado mediante el atributo th:fragment en la etiqueta actual.
th:fragmento	Diseño de plantilla, similar a las etiquetas JSP, que se utiliza para definir un fragmento de plantilla al que se hace referencia o se incluye

expresión:
- Expresión variable: ${}La expresión envuelta por ${} es una expresión variable
  - Obtener las propiedades y métodos del objeto: el controlador envía un objeto estudiante
```
获取学生的id：${student.getId}
```
  - Usar primitivas integradas
    - #ctx: objeto de contexto
    - #vars: variables de contexto
    - #locale: la configuración regional del contexto
    - #solicitud: disponible en aplicaciones web (servidor: setAttribute(“estudiante”, estudiante))
```
${request.getAttribute('student')}
```
    - #response: Disponible en la aplicación web
    - #sesión: disponible en aplicaciones web
    - #servletContext: disponible en aplicaciones web
  - Usar objetos de herramientas incorporados
    - cadenas, números, arreglos, colecciones, fechas, etc.
```
${#strings.equals(o1,o2}
```
- Seleccione la expresión variable: *{} (básicamente la misma función que la expresión variable, pero se puede usar con th:object, después de que th:object almacene un objeto, el objeto se puede obtener en su subetiqueta interna)
- Internacionalización: #{} (puede obtener una configuración internacionalizada)
- Expresión de URL de enlace: haga referencia a otros enlaces (recursos estáticos, solicitudes de formulario de formulario, etiquetas, etc.)
  - Solicitud sin parámetros: @{xxx}
  - Hay una solicitud de participación: @{/xxx(k1=v1,k2=v2)}
- Expresión de fragmento: ~ (usada para referirse a otros fragmentos de plantilla en la página de plantilla)
carta
- 文本字面量：'one text', 'Another one!', …
- 数字字面量：0, 34, 3.0, 12.3,…
- 布尔文字：true,false
- 空字面量： null
- 文字标记：one, sometext, main,…
文本操作：
- 字符串连接： +
- 字面替换： |The name is ${name}|
算术运算：
- 二元运算符：+, -, *, /,%
- 减号（一元运算符）： -
布尔运算：
- 二元运算符：and,or
- 布尔否定（一元运算符）：!,not
比较与相等：
- 比较器：>, <, >=, <=( gt, lt, ge, le)
- 等式运算符：==, !=( eq, ne)
条件运算符：
- 如果-那么： (if) ? (then)
- 如果-然后-其他： (if) ? (then) : (else)
- 默认： (value) ?: (defaultvalue)

3、使用

Spring Boot 推荐使用 Thymeleaf 作为其模板引擎。SpringBoot 为 Thymeleaf 提供了一系列默认配置，项目中一但导入了 Thymeleaf 的依赖，相对应的自动配置（ThymeleafAutoConfiguration 或 FreeMarkerAutoConfiguration）就会自动生效，因此 Thymeleaf 可以与 Spring Boot 完美整合。

Spring Boot 整合 Thymeleaf 模板引擎，需要以下步骤：

引入 Starter启动器

<!--thymeleaf模板的依赖-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

其模板引擎大多都使用默认值，不配置也能直接使用
通过controller访问

2.7.2、Freemarker

一种基于模板和要改变的数据，并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。是一种用Java语言编写的模板引擎，与Web容器无关，在Web运行时，它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术，而且还可以用于生产XML，JSP或Java等。目前企业中主要用Freemarker做静态页面或是页面展示

freemarker并不关心数据的来源，只是根据模板的内容，将数据模型在模板中显示并输出文件

添加Freemarker 的依赖

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

yml中配置

spring:
  freemarker:
    cache: false
    charset: utf-8
    template-loader-path: classpath:/templates/
    suffix: .html
    content-type: text/html
    request-context-attribute: request

html页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>FreeMarker</title>
    </head>
    <body>
        <h1>Welcome ${user} !</h1>

        <u1>
            <#list lists as list>
                <li>${list} </li>
            </#list>
         </u1>
     </body>
</html>

2.7.3、整合JSP

SpringBoot默认是不支持JSP模板引擎的，但是可以通过引入相关依赖来整合JSP模板引擎。

导入支持JSP的依赖

 <!-- 内置的不支持jsp，所以要添加支持jsp的tomcat-->
<dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<!--jsp标签库支持-->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
</dependency>

添加webapp文件

yml文件中配置支持jsp页面

spring: 
 mvc:    #支持的jsp路径
    view:
      prefix: /WEB-INF/
      suffix: .jsp