SpringBoot y Thymeleaf template engine y Demo

Resumen

En la actualidad, el período de desarrollo utilizaba un modo front-end y back-end completamente separado, es decir, el back-end solo proporciona interfaces de datos y el front-end obtiene datos a través de solicitudes AJAX. Este modo no requiere un motor de plantillas.

La separación del front-end y el back-end no es propicio para el SEO, porque el SEO es esencialmente un servidor para iniciar una solicitud a otro servidor para analizar el contenido de la solicitud. En general, el motor de búsqueda no ejecuta el archivo js solicitado. Si una página HTML no procesa datos en el lado del servidor, sino que solo procesa datos en el lado del navegador, entonces la página HTML solicitada por el motor de búsqueda no procesa datos. Esto no es propicio para el contenido que buscan los motores de búsqueda. Por lo tanto, el servidor procesa algunos o todos los datos antes de enviar la página al navegador para asegurarse de que haya datos en la página, lo que conduce al SEO.

Además, el modo de separación frontal será ligeramente peor en rendimiento. En algunos escenarios, es más conveniente usar un motor de plantillas, como una plantilla de correo electrónico.
Motores de plantilla comunes:

• Thymeleaf
• Freemaker
• JSP

El principio de funcionamiento del motor de plantillas:

proporcione la plantilla y los datos al motor de plantillas, y nos ayudará a procesar los datos en la plantilla, formar un resultado y luego enviarlos al navegador.

Thymeleaf

Sitio web oficial de Thymeleaf

Thymeleaf es un moderno motor de plantillas Java del lado del servidor para entornos web y autónomos. El objetivo de Thymeleaf es introducir elegantes plantillas naturales en el flujo de trabajo de desarrollo. Esta plantilla natural es HTML, que se puede mostrar correctamente en el navegador o como un prototipo estático, lo que permite una colaboración más poderosa en el equipo de desarrollo. Thymeleaf es ideal para el desarrollo web HTML5 JVM moderno.

Thymeleaf puede ejecutarse tanto en entornos con y sin red. Los artistas pueden ver efectos estáticos mientras navegan por la página, y también permiten a los programadores ver efectos dinámicos de página con datos en el servidor. Thymeleaf admite prototipos HTML y luego agrega atributos adicionales a las etiquetas HTML para lograr la visualización de plantilla + datos. Cuando el navegador interpreta html, ignorará los atributos de etiqueta indefinidos, por lo que la plantilla de Thymeleaf se puede ejecutar estáticamente; cuando los datos se devuelven a la página, la etiqueta de Thymeleaf reemplazará dinámicamente el contenido estático, de modo que la página se muestre dinámicamente. THymeleaf es una página HTML.

.

Paso 1: integre Thymeleaf y agregue dependencias en el pom.xml del proyecto

<properties>
 		<!--使用最新的版本-->
        <thymeleaf.version>3.0.11.RELEASE</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.4.1</thymeleaf-layout-dialect.version>
</properties>
<dependencies>
<dependency>
	<groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>

Paso 2: Configure Thymeleaf en el archivo application.yml

spring:
        thymeleaf:
                prefix: classpath:/templates/
                check-template-location: true
                cache: false
                suffix: .html
                encoding: UTF-8
                content-type: text/html
                mode: HTML5

• prefijo: especifica el directorio donde se encuentra la plantilla
• check-tempate-location: comprueba si existe la ruta de la plantilla
• caché: ya sea para almacenar en caché, establecer en falso en modo de desarrollo para evitar reiniciar el servidor después de cambiar la plantilla, establecer en verdadero en línea para mejorar el rendimiento.
• codificación y tipo de contenido: establece la codificación y el tipo de contenido
• modo: thymeleaf versión 3.0.11 admite seis tipos de plantillas para procesar HTML (HTML5, HTML4, XHTML), XML, TEXT, JAVASCRIPT, CSS, RAW

Paso 3: escriba el archivo de plantilla de hoja de tomillo

Cree una plantilla de thymeleaf article.html en el directorio SpringBootProject / src / main / resources / templates:
Nota: debe agregar el espacio de nombres xmlns: th = "http://www.thymeleaf.org/, de lo contrario, las etiquetas personalizadas de Thymeleaf no aparecerán.

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta content="text/html;charset=UTF-8"/>
</head>
<body>
<table border="1" bgcolor="#f0ffff">
    <thead>
    <tr>
        <th>序号</th>
        <th>标题</th>
        <th>摘要</th>
        <th>创建时间</th>
    </tr>
    </thead>
    <!-- 使用th:each遍历 -->
    <tbody th:each="article : ${list}">
    <tr>
        <!-- 使用th:text属性输出 -->
        <td th:text="${article.id}"></td>
        <td th:text="${article.title}"></td>
        <td th:text="${article.summary}"></td>
        <td th:text="${article.createTime}"></td>
    </tr>
    </tbody>
</table>
</body>
</html>

El cuarto paso: escribir el controlador

// 注解是@Controller，而不是@RestController，因为@RestController会自动将返回结果转为字符串
@Controller
@RequestMapping("/article")
public class ArticlePageController {

    private final Logger logger = LoggerFactory.getLogger(ArticlePageController.class);
    @GetMapping("/articleList")
    // 参数的名称就是前台要用的传参名称
    public String getArticle(Model model,@RequestParam(defaultValue = "奋斗的历史") String title){
        // title是由前台传到后台来的，如果没有值的时候，就用默认值

        ArticleBean articleBean = new ArticleBean();
        articleBean.setId(1);
        articleBean.setTitle(title);
        articleBean.setSummary(10);
        articleBean.setCreateTime(new Date());
        List<ArticleBean> list = new ArrayList<>();
        list.add(articleBean);
        // 这里的key一定是list，因为模板里用的就是list，这样模板引擎才能将其对应上
        model.addAttribute("list",list);
        // 返回值是classpath:/templates/下的模板路径，路径的最后是模板名称，不用加后缀。
        return "article";
    }
}

Paso 5: Inicie el servicio, pruebe

Comience el servicio:

~/Desktop/SpringBootProject$ mvn spring-boot:run

¿Por qué la página de tomillo se coloca en la carpeta de plantillas y el sufijo es .html?

El marco SpringBoot colocará los componentes funcionales compatibles integrados en el
paquete spring-boot-autoconfigure-2.2.6.RELEASE.jar , mientras que el marco Thymeleaf es compatible. Por lo tanto, puede encontrar el código de configuración automática correspondiente en este paquete, a saber, la clase ThymeleafProperties.java, como se muestra en la figura:

Por supuesto, los valores predeterminados anteriores se pueden modificar a través de los archivos application.yml o application.properties.

Gracias por leer!