SpringBoot-web开发(三): 模板引擎Thymeleaf

淩亂°似流年 2022-12-10 04:51 235阅读 0赞

**\[SpringBoot-web系列】前文**：  
[SpringBoot-web开发(一): 静态资源的导入(源码分析)][SpringBoot-web_]  
[SpringBoot-web开发(二): 页面和图标定制(源码分析)][SpringBoot-web_ 1]

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

### 目录 ###

*  1. 引入
 *  2. 什么是模板引擎？
 *  3. Thymeleaf
 *   *  1. 简介
     *  2. 导入Thymeleaf
     *  3. 使用Thymeleaf
     *  4. 简单测试
     *  5. thymeleaf语法
     *   *  1、th属性
         *  2、标准表达式语法

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

> 本文主要介绍SpringBoot给我们推荐的`Thymeleaf`模板引擎，这是一个高级语言的模板引擎，语法更简单且功能更强大
> 
> 参考：https://www.jianshu.com/p/7c27c50f24ec

# 1. 引入 #

> 在以前，我们通常将前端交给我们的html页面转成jsp页面，通过jsp轻松实现数据的显示，及前后端交互等。

jsp支持非常强大的功能，能写Java代码，但是springboot默认是不支持jsp的

如果直接用纯静态页面的方式，开发会十分麻烦，这就引入了`模板引擎`

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

# 2. 什么是模板引擎？ #

> `模板引擎`是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的\[HTML\]文档；SpringBoot推荐使用模板引擎
> 
> ![ZWPF0M5W\_CR\_NEUY6H46\_\_W][ZWPF0M5W_CR_NEUY6H46_W]

*  模板引擎有非常多，过去的jsp就是一个模板引擎，还有用的比较多的freemarker，包括SpringBoot给推荐的Thymeleaf
 *  模板引擎很多，但原理都是如下所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTczNDA0_size_16_color_FFFFFF_t_70_pic_center]
 *  当我们写一个页面模板，有些值是我们在后台封装的一些数据，是动态的，我们会写一些表达式取出这些值。模板引擎按照这些数据帮你把这表达式解析、填充到我们指定的位置，最终把这个数据生成一个我们想要的内容写出
 *  所有的模板引擎原理都一致，只是不同模板引擎的语法会不同
 *  模板技术并不是什么神秘技术，干的是拼接字符串的体力活。模板引擎就是利用正则表达式识别模板标识，并利用数据替换其中的标识符

**常用模板引擎对比**：  
![image-20200923214737908][]

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

# 3. Thymeleaf #

## 1. 简介 ##

> `Thymeleaf` 的主要目标是将优雅的自然模板带到您的开发工作流程中—HTML能够在浏览器中正确显示，并且可以作为静态原型，从而在开发团队中实现更强大的协作。Thymeleaf能够处理HTML，XML，JavaScript，CSS甚至纯文本。  
> ![image-20200923214427073][]

*  `thymeleaf`可处理六种模板，每种模板称为模板模式：
    
    有两种标记模板模式（HTML、XML）
    
    三个文本模板模式（TEXT、JAVASCRIPT、CSS）
    
    无操作模板模式（RAW）

**Thymeleaf 官网**：[https://www.thymeleaf.org/][https_www.thymeleaf.org]

**Github地址**：[https://github.com/thymeleaf/thymeleaf][https_www.thymeleaf.org]

**官网文档**：[https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html\#what-kind-of-templates-can-thymeleaf-process][https_www.thymeleaf.org_doc_tutorials_3.0_usingthymeleaf.html_what-kind-of-templates-can-thymeleaf-process]

*  可以去[https://www.thymeleaf.org/documentation.html][https_www.thymeleaf.org_documentation.html]下载官方文档  
    ![image-20200923140129720][]

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

## 2. 导入Thymeleaf ##

当前版本为3.x，只需导入下方一个依赖即可

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

导入依赖后，查看jar包是否导入  
![image-20200922231528040][]  
可以发现自动导入了下面两个包（`2.x`的版本需要单独导入以下两个依赖）

<dependency>
    	<groupId>org.thymeleaf</groupId>
    	<artifactId>thymeleaf-spring5</artifactId>
    </dependency>
    <dependency>
    	<groupId>org.thymeleaf.extras</groupId>
    	<artifactId>thymeleaf-extras-java8time</artifactId>
    </dependency>

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

## 3. 使用Thymeleaf ##

> 我们首先得按照SpringBoot的自动配置原理看一下我们这个Thymeleaf的自动配置规则，在按照那个规则，我们进行使用。

我们去找一下Thymeleaf的自动配置类：`ThymeleafProperties`  
![image-20200922232535328][]  
可以看到默认的前缀和后缀，就是`Thymeleaf`的视图解析器

**总结**：使用thymeleaf只需要导入对应的依赖，然后将`html`页面放在`resource`下的`templates`目录即可，thymeleaf就可以帮我们自动渲染了

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

## 4. 简单测试 ##

**1、编写一个TestController**  
![image-20200923212322017][]

package com.zsr.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    public class TestController { 
        @RequestMapping("/test")
        public String TestThymeleaf(Model model) { 
            model.addAttribute("msg", "Hello,Thymeleaf");
            return "test";
        }
    }

**2、编写一个测试页面 test.html 放在 templates 目录下**  
![image-20200923210314616][]

> 首先引入thymeleaf命名空间约束

xmlns:th="http://www.thymeleaf.org"

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>测试Thymeleaf</title>
    </head>
    <body>
    
    <div th:text="${msg}"></div>
    </body>
    </html>

**3、启动项目请求测试**

> 访问`http://localhost:8080/test`  
> ![image-20200923140335602][]

成功取到值

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

## 5. thymeleaf语法 ##

> 参考：https://www.cnblogs.com/itdragon/archive/2018/04/13/8724291.html
> 
> https://www.cnblogs.com/jnba/p/10832878.html

### 1、th属性 ###

`th:text`：文本替换；

`th:utext`：支持html的文本替换。

`th:value`：属性赋值

`th:each`：遍历循环元素

`th:if`：判断条件，类似的还有`th:unless`，`th:switch`，`th:case`

`th:insert`：代码块引入，类似的还有th:replace，th:include，常用于公共代码块提取的场景

`th:fragment`：定义代码块，方便被th:insert引用

`th:object`：声明变量，一般和\*\{\}一起配合使用，达到偷懒的效果。

`th:attr`：设置标签属性，多个属性可以用逗号分隔

### 2、标准表达式语法 ###

`${...}` 变量表达式，Variable Expressions

#常用的内置对象
    `ctx` ：上下文对象
    `vars` ：上下文变量
    `locale`：上下文的语言环境
    `request`：（仅在web上下文）的 HttpServletRequest 对象
    `response`：（仅在web上下文）的 HttpServletResponse 对象
    `session`：（仅在web上下文）的 HttpSession 对象
    `servletContext`：（仅在web上下文）的 ServletContext 对象
    
    #常用的内置方法
    `strings`：字符串格式化方法，常用的Java方法它都有，比如：equals，equalsIgnoreCase，length，trim，toUpperCase，toLowerCase，indexOf，substring，replace，startsWith，endsWith，contains，containsIgnoreCase等
    `numbers`：数值格式化方法，常用的方法有：formatDecimal等
    `bools`：布尔方法，常用的方法有：isTrue，isFalse等
    `arrays`：数组方法，常用的方法有：toArray，length，isEmpty，contains，containsAll等
    `lists`,`sets`：集合方法，常用的方法有：toList，size，isEmpty，contains，containsAll，sort等
    `maps`：对象方法，常用的方法有：size，isEmpty，containsKey，containsValue等
    `dates`：日期方法，常用的方法有：format，year，month，hour，createNow等

`@{...}` 链接表达式，Link URL Expressions

`#{...}` 消息表达式，Message Expressions

`~{...}` 代码块表达式，Fragment Expressions

`*{...}` 选择变量表达式，Selection Variable Expressions

[SpringBoot-web_]: https://blog.csdn.net/qq_45173404/article/details/108721839
[SpringBoot-web_ 1]: https://blog.csdn.net/qq_45173404/article/details/108743904
[ZWPF0M5W_CR_NEUY6H46_W]: /images/20221123/2c13f6b999964b428d2e691f9ab2bc37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTczNDA0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/b481d880a5624244968bf61f7d9c7885.png
[image-20200923214737908]: /images/20221123/12b6ba379e164964aaa07d4b0e98d5bc.png
[image-20200923214427073]: /images/20221123/7c67b5409626459d8a8cca69932877e8.png
[https_www.thymeleaf.org]: https://www.thymeleaf.org/
[https_www.thymeleaf.org_doc_tutorials_3.0_usingthymeleaf.html_what-kind-of-templates-can-thymeleaf-process]: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#what-kind-of-templates-can-thymeleaf-process
[https_www.thymeleaf.org_documentation.html]: https://www.thymeleaf.org/documentation.html
[image-20200923140129720]: /images/20221123/9c718d530082421fa8259386cbd51d72.png
[image-20200922231528040]: /images/20221123/cd26fcada2d7462890aa36b30964ac96.png
[image-20200922232535328]: /images/20221123/6e51a1739cd24b7493d328b43b4261c0.png
[image-20200923212322017]: https://gitee.com/zhong_siru/images/raw/master//img/image-20200923212322017.png
[image-20200923210314616]: https://gitee.com/zhong_siru/images/raw/master//img/image-20200923210314616.png
[image-20200923140335602]: /images/20221123/71dab5e3fd684421a0193e0e5dd2aadb.png