SpringBoot源码学习之路（六、Web开发之模板引擎 Thymeleaf ）

桃扇骨 2022-05-19 05:13 192阅读 0赞

# 模板引擎 #

JSP、Velocity、Freemarker、Thymeleaf都是当前比较常用的模板引擎。  
模板引擎的工作原理如图，其实就是将 静态页面 和 数据 进行处理，然后输出我们期望的页面。  
![这里写图片描述][70]

SpringBoot的web开发中推荐使用【Thymeleaf】作为模板引擎，语法更简单，功能更强大；

### 一、引入thymeleaf； ###

<dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
    
            
            
            <properties>
                    
                    <thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
                    
                    <thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
              </properties>

--------------------

### 二、Thymeleaf使用 ###

**从ThymeleafProperties.class源码可以看出，只要我们把HTML页面放在classpath:/templates/，thymeleaf就能自动渲染。**

@ConfigurationProperties(prefix = "spring.thymeleaf")
    public class ThymeleafProperties { 
    
        private static final Charset DEFAULT_ENCODING = Charset.forName("UTF-8");
    
        private static final MimeType DEFAULT_CONTENT_TYPE = MimeType.valueOf("text/html");
    
        public static final String DEFAULT_PREFIX = "classpath:/templates/";
    
        public static final String DEFAULT_SUFFIX = ".html";

**html页面中如何使用Thymeleaf：**  
1、导入thymeleaf的名称空间（为了语法提示）

2、使用thymeleaf语法；

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>成功！</h1>
        
        <div th:text="${hello}">这是显示欢迎信息</div>
    </body>
    </html>

--------------------

### 三、语法规则 ###

**1、th:text；改变当前元素里面的文本内容**

th：任意html属性，来替换原生属性的值  
举例：

<div id="myid" class="myclass" th:class="${hello}" th:id="${hello}">

【th:】的其他使用（与jsp模板引擎的哪些用法相对应？）：  
![这里写图片描述][70 1]

--------------------

**2、表达式（主要五种）**

**一、 $\{…\}：获取变量对象或者变量值（OGNL）。**

1）、获取对象的属性（级联）、调用方法
    
                2）、获取基本的内置的基本对象并使用：
                    #ctx : the context object.
                    #vars: the context variables.
                    #locale : the context locale.   
                    #request : (only in Web Contexts) the HttpServletRequest object.
                    #response : (only in Web Contexts) the HttpServletResponse object.
                    #session : (only in Web Contexts) the HttpSession object.
                    #servletContext : (only in Web Contexts) the ServletContext object.
                    例子（获取当前session的foo）：${session.foo}
    
                3）、获取一些内置的工具对象：
                    #execInfo : information about the template being processed.
                    #messages : methods for obtaining externalized messages inside variables expressions, in the same way as they would be obtained using #{…} syntax.
                    #uris : methods for escaping parts of URLs/URIs
                    #conversions : methods for executing the configured conversion service (if any).
                    #dates : methods for java.util.Date objects: formatting, component extraction, etc.
                    #calendars : analogous to #dates , but for java.util.Calendar objects.
                    #numbers : methods for formatting numeric objects.
                    #strings : methods for String objects: contains, startsWith, prepending/appending, etc.
                    #objects : methods for objects in general.
                    #bools : methods for boolean evaluation.
                    #arrays : methods for arrays.
                    #lists : methods for lists.
                    #sets : methods for sets.
                    #maps : methods for maps.
                    #aggregates : methods for creating aggregates on arrays or collections.
                    #ids : methods for dealing with id attributes that might be repeated (for example, as a result of an iteration).

**二、 \*\{…\}：选择表达式：和 $\{…\} 在功能上是一样。**

但有一个功能就是\*\{…\}可以和配合 th:object=”$\{session.user\}使用如下：

div标签定义了一个object,那当且仅当在该div标签内的子标签使用*{...}可以直接获取到div定义对象的属性值。这个功能相当常用
        <div th:object="${session.user}">
            <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
            <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
            <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
        </div>

**三、 \#\{…\}：获取国际化内容。**  
**四、@\{…\}：定义URL。**

@{/order/process(execId=${execId},execType='FAST')}    
       url相当于当前项目uri+/order/process?execId=${execId}&execType='FAST'

**五、~\{…\}：片段引用表达式。**

**六（其他）。**

Literals（字面量）
              Text literals   : 'one text' , 'Another one!' ,…
              Number literals : 0 , 34 , 3.0 , 12.3 ,…
              Boolean literals: true , false
              Null literal    : null
              Literal tokens  : one , sometext , main ,…
    
        Text operations:（文本操作）
            String concatenation: +
            Literal substitutions: |The name is ${name}|
    
        Arithmetic operations:（数学运算）
            Binary operators: + , - , * , / , %
            Minus sign (unary operator): -
    
        Boolean operations:（布尔运算）
            Binary operators: and , or
            Boolean negation (unary operator): ! , not
    
        Comparisons and equality:（比较运算）
            Comparators: > , < , >= , <= ( gt , lt , ge , le )
            Equality operators: == , != ( eq , ne )
    
        Conditional operators:条件运算（三元运算符）
            If-then: (if) ? (then)
            If-then-else: (if) ? (then) : (else)
            Default: (value) ?: (defaultvalue)
        Special tokens:
            No-Operation: _（代表什么都不操作）

实际学习参考项目：【spring-boot-04-web-restfulcrud】 学习。

[70]: /images/20220519/cc877431f3c04282a051b6e76677d931.png
[70 1]: /images/20220519/0c8ca5cbf8ca44139904a5523147448a.png