SpringBoot——Thymeleaf模板引擎

谁借莪１个温暖的怀抱￠ 2022-09-14 02:28 326阅读 0赞

### Thymeleaf模板引擎 ###

*  模板引擎
 *  引入Thymeleaf
 *  模板引擎使用

# 模板引擎 #

前端交给我们的页面，是html页面。如果是我们以前开发，我们需要把他们转成jsp页面，jsp好处就是当我们查出一些数据转发到JSP页面以后，我们可以用jsp轻松实现数据的显示，及交互等。

jsp支持非常强大的功能，包括能写Java代码，但是呢，我们现在的这种情况，**SpringBoot这个项目首先是以jar的方式，不是war，像第二，我们用的还是嵌入式的Tomcat，所以呢，他现在默认是不支持jsp的。**  
针对SpringBoot可以使用模板引擎  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6KaB5LiN5LiA6LW3Y2nkuKrppa0_size_20_color_FFFFFF_t_70_g_se_x_16]  
**模板引擎就是我们写一个页面模板，我们在后台封装一些数据，然后将数据和模板交给模板引擎，模板引擎按照数据将页面中的一些表达式进行解析，并填充到指定位置，最后把这个数据生成想要的内容写出去。**

# 引入Thymeleaf #

都是基于3.xx开发

对于SpringBoot引入  
Thymeleaf 官网：https://www.thymeleaf.org/

Thymeleaf 在Github 的主页：https://github.com/thymeleaf/thymeleaf

<dependency>
                <groupId>org.thymeleaf</groupId>
                <artifactId>thymeleaf-spring5</artifactId>
                <version>3.0.12.RELEASE</version>
            </dependency>
            <dependency>
                <groupId>org.thymeleaf.extras</groupId>
                <artifactId>thymeleaf-extras-java8time</artifactId>
                <version>3.0.4.RELEASE</version>
            </dependency>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6KaB5LiN5LiA6LW3Y2nkuKrppa0_size_17_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][94cc120375de47729418a445d57f2c5a.png]

# 模板引擎使用 #

**只要使用Thymeleaf，只需要导入对应的依赖，导入之后将html页面放在templates目录下**![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6KaB5LiN5LiA6LW3Y2nkuKrppa0_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

Thymeleaf所有的模板引擎都写在template路径下![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6KaB5LiN5LiA6LW3Y2nkuKrppa0_size_10_color_FFFFFF_t_70_g_se_x_16]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6KaB5LiN5LiA6LW3Y2nkuKrppa0_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][6fcab903933e4b7eb5e0902a1792e612.png]  
使用方法：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html  
在htnl中导入

<!DOCTYPE html>
    
    <html>
    
      <head>
        <title>Good Thymes Virtual Grocery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" media="all" 
              href="../../css/gtvg.css" data-th-href="@{/css/gtvg.css}" />
      </head>
    
      <body>
      
        <p data-th-text="#{home.welcome}">Welcome to our grocery store!</p>
      
      </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6KaB5LiN5LiA6LW3Y2nkuKrppa0_size_17_color_FFFFFF_t_70_g_se_x_16 1]

![在这里插入图片描述][3489836a8d734182b977c2d60898384d.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6KaB5LiN5LiA6LW3Y2nkuKrppa0_size_20_color_FFFFFF_t_70_g_se_x_16 3]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6KaB5LiN5LiA6LW3Y2nkuKrppa0_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/148273438afb4d339990ea7396c80d20.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6KaB5LiN5LiA6LW3Y2nkuKrppa0_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/e06620d246684b2e88980fab2fa09781.png
[94cc120375de47729418a445d57f2c5a.png]: /images/20220828/20693c8211f6485e9777b07dcc4acc26.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6KaB5LiN5LiA6LW3Y2nkuKrppa0_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/778e3eb602fc41169e4029eb68f98ce7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6KaB5LiN5LiA6LW3Y2nkuKrppa0_size_10_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/566f12867db2440fa729928fb3c1fb03.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6KaB5LiN5LiA6LW3Y2nkuKrppa0_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/53820254524f4023b93117f2ce3b8ea2.png
[6fcab903933e4b7eb5e0902a1792e612.png]: /images/20220828/03cc6cf1b78044b6b1722106feae1ebb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6KaB5LiN5LiA6LW3Y2nkuKrppa0_size_17_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/cc47f46c03444076acd36b7fb32d4325.png
[3489836a8d734182b977c2d60898384d.png]: /images/20220828/9a66dbdf35024776a81fad732e51a46b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6KaB5LiN5LiA6LW3Y2nkuKrppa0_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/cd21af92e26a4f1f98068e840b80e468.png