SpringBoot专栏_web：模板引擎Thymeleaf使用实战，图文结合附带源码下载（第7讲）

傷城~ 2022-04-03 13:55 216阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70][]

## 简介： ##

Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎。类似JSP，  
Velocity，FreeMaker等，它也可以轻易的与Spring MVC等Web框架进行集成  
作为Web应用的模板引擎。与其它模板引擎相比，Thymeleaf最大的特点是能够  
直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用  
Spring Boot推荐使用Thymeleaf。

**模板引擎语言有JSP、Velocity、Freemarker、Thymeleaf，由于Thymeleaf语法简单，功能强大，SpringBoot推荐使用。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 1][]

## Thymeleaf如何使用 ##

HTML页面放在classpath:/templates/，thymeleaf就能自动渲染；

1、导入thymeleaf的名称空间

2、使用thymeleaf语法；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 2][]

**基本语法**

• 表达式：
    – #{...}：国际化消息
    – ${…}：变量取值
    – *{…}：当前对象/变量取值
    – @{…}：url表达式
    – ~{…}：片段引用
    – 内置对象/共用对象：
    • 判断/遍历：
    – th:if
    – th:unless
    – th:each
    – th:switch、th:case
    • th:属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 3][]

## 项目实战： ##

现在大多项目实现前后端分离虽然模板语言使用会有所减少，但是做小项目的时候还是很有用的，可以简单了解下语法。

1.初步配置

配置文件配置缓存关闭，不然开发总是重启

#thymeleaf start
      thymeleaf:
        mode: HTML
        encoding: UTF-8
        content-type: text/html
        cache: false

2.如何定义公用头和footer

我们以框架项目为例吧，里面继承了而很多技术，包括以后案例讲解都会从中挑取代码，所以感兴趣的可以提前了解下。

common中定义了头和尾的共有引入文件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 4][]

sys\_header\_m1.html

**其中要注意th:fragment、th:block和th:replace的用法**

**<head th:fragment="sys\_header(title,links,scripts)">**

**<title th:replace="$\{title\}">limp-framework title</title>**

<!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head th:fragment="sys_header(title,links,scripts)">
        
        <meta charset="utf-8">
        <title th:replace="${title}">limp-framework title</title>
    
        
    
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
        
        <link rel="stylesheet" type="text/css" th:href="@{/systemsite/assets/static/css/font.css}"/>
        <link rel="stylesheet" type="text/css" th:href="@{/systemsite/assets/static/css/limpframwork.css}"/>
    
    
       
        
    
        
        <th:block th:replace="${links}" />
        
        <th:block th:replace="${scripts}" />
    
    
    </head>

sys\_footer\_m1.html

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 5][]

其它页面如何引入？引入head和footer

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 6][]

引入footer

## END ##

现在项目异步渲染的比较多，所以简单了解下基本使用即可。（生成html静态页面的时候可能会使用到）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70]: /images/20220403/7107370b857c4598a0c97abc6387ac5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 1]: /images/20220403/4ff21f85814d4017a33c9a08d5c324c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 2]: /images/20220403/36e5163ed2444806a13d46f54c1617ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 3]: /images/20220403/8ac57fa81d5e468d94ab9382dda0f3aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 4]: /images/20220403/34bb55ac97b54ec48ca2719dfee2f1fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 5]: /images/20220403/192e78e1a0d0477480a21258713b21b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 6]: /images/20220403/b0d1ba8caf534c2bab01262ca8d61a0f.png