vlambda
2022-04-11

微服务框架【第2期】--SpringBoot整合Thymeleaf

微服务框架【第3期】--SpringBoot整合Thymeleaf

导读:

大家好，我是老田。今天我们看下SpringBoo如何整合Thymeleaf。SpringBoot建议模板引擎，避免使用JSP。并且SpringBoot建议前后端分离。

1.SpringBoot静态资源访问

默认配置Spring Boot默认提供静态资源目录位置需置于classpath下，目录名需符合如下规则：

/static
/public
/resources
/META-INF/resources

自定义配置

 spring.resources.static-locations=classpath:templates/

在配置时涉及到两个概念：

classpath: 通俗来讲classpath对应的项目中：src\main\resources 文件目录。如：“classpath: templates/” 即是将resources目录下的templates文件夹设置为静态文件目录。更深一步讲classpath路径为：文件编译后在target/classes目录下的文件。
静态文件目录：通俗理解为存放包括：.html；.jsp；CSS；js；图片；文本文件等类型文件的目录。这些文件都可以通过浏览器url进行访问。同时controller中转发的文件目录也必须被设置为静态文件目录

spring.resources.static-location参数默认设置为：

 {"classpath:/META-INF/resources/", "classpath:/resources/", "classpath:/static/", "classpath:/public/"}

spring.mvc.view.prefix/suffix：可以修改控制层跳转页面的默认前缀后缀

 spring.mvc.view.prefix=html/
 spring.mvc.view.suffix=.html
 
 #thymeleaf默认设置的就是classpath:/templates/
 spring.thymeleaf.prefix=classpath:/templates/

模板引擎

Spring Boot提供了默认配置的模板引擎主要有以下几种：

Thymeleaf
FreeMarker
Velocity
Groovy
Mustache

Spring Boot建议使用模板引擎，避免使用JSP。使用模板引擎时默认的模板配置路径为src/main/resources/templates。

2.Thymeleaf简介

【官网】的介绍

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

Thymeleaf's main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.

With modules for Spring Framework, a host of integrations with your favourite tools, and the ability to plug in your own functionality, Thymeleaf is ideal for modern-day HTML5 JVM web development — although there is much more it can do.

Thymeleaf是一个现代的服务器端 Java 模板引擎，适用于 Web 和独立环境。

Thymeleaf 的主要目标是为您的开发工作流程带来优雅的自然模板——HTML可以在浏览器中正确显示，也可以用作静态原型，从而在开发团队中实现更强大的协作。

借助 Spring Framework 的模块、与您最喜欢的工具的大量集成以及插入您自己的功能的能力，Thymeleaf 是现代 HTML5 JVM Web 开发的理想选择，当然它可以做的更多。

简单说：Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点：

Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 Thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
Thymeleaf 开箱即用的特性。它提供标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL表达式效果，避免每天套模板、改 Jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
Thymeleaf 提供 Spring 标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

3.Thymeleaf引入

引入thymeleaf

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

配置全局文件

 #thymeleaf 配置
 spring.thymeleaf.mode=HTML5
 spring.thymeleaf.encoding=UTF-8
 spring.thymeleaf.servlet.content-type=text/html
 #缓存设置为false, 这样修改之后马上生效，便于调试
 spring.thymeleaf.cache=false

具体可以配置的参数可以查看org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties这个类,上面的配置实际上就是注入到该类中的属性值.

使用thymeleaf必须在html中引入

 <html xmlns:th="http://www.thymeleaf.org">

4.Thymeleaf表达式语法

Thymeleaf 是一个可扩展性极强的模板引擎（实际上它可以称为模板引擎框架），它允许您定义和自定义处理模板的方式，以达到精细的细节水平。

大多数Thymeleaf属性允许将它们的值设置为或包含表达式，由于它们使用的方言，我们将其称为标准表达式。这些表达式可以有五种类型:

${...} : 变量表达式。
*{...} : 选择表达式。
#{...} : 消息 (i18n) 表达式。
@{...} : 链接 (URL) 表达式。
~{...} : 片段表达式。

5.变量表达式

变量表达式即 OGNL 表达式或 Spring EL 表达式(在 Spring 术语中也叫 model attributes)。如下所示：

 ${session.user.name}

它们将以HTML标签的一个属性来表示：

 <span th:text="${book.author.name}">

 <li th:each="book : ${books}">

这里${books}从上下文中选择名为books的变量，并在th:each中使用循环将其评估为迭代器。

5.选择表达式

选择表达式就像变量表达式一样，它们不是整个上下文变量映射上执行，而是在先前选择的对象。它们看起来像这样:

 *{customer.name}

它们所作用的对象由th:object属性指定:

 <div th:object="${book}">
  ...
   <span th:text="*{title}">...</span>
  ...
 </div>

6.消息(i18n)表达式

消息表达式(通常称为文本外部化，国际化或i18n)允许从外部源(如:.properties)文件中检索特定于语言环境的消息，通过键来引用这引用消息。

在Spring应用程序中，它将自动与Spring的MessageSource机制集成。如下

 #{main.title}
 #{message.entrycreated(${entryId})}

以下是在模板中使用它们的方式:

 <table>
  ...
   <th th:text="#{header.address.city}">...</th>
   <th th:text="#{header.address.country}">...</th>
  ...
 </table>

请注意，如果希望消息键由上下文变量的值确定，或者希望将变量指定为参数，则可以在消息表达式中使用变量表达式:

 #{${config.adminWelcomeKey}(${session.user.name})}

7.链接(URL)表达式

URL 表达式指的是把一个有用的上下文或回话信息添加到 URL，这个过程经常被叫做 URL 重写。

 @{/order/list}

URL还可以设置参数：

 @{/order/details(id=${orderId})}

相对路径：

 @{../documents/report}

让我们看这些表达式：

 <form th:action="@{/createOrder}"> 
 <a href="main.html" th:href="@{/main}">

8.片段表达式

片段表达式是一种简单的方法用来表示标记的片段并将其移动到模板中。由于这些表达式，片段可以被复制，传递给其他模板的参数等等。

代码块表达式的使用：代码块表达式需要配合th属性（th:insert，th:replace，th:include）一起使用

th:insert：将代码块片段整个插入到使用了th:insert的HTML标签中
th:replace：将代码块片段整个替换使用了th:replace的HTML标签中
th:include：将代码块片段包含的内容插入到使用了th:include的HTML标签中

引入片段时支持两种语法结构：

推荐：~{templatename::fragmentname}
支持：~{templatename::#id}

9.表达式支持的语法

字面（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)

10.常用th标签

html有的属性，Thymeleaf基本都有，而常用的属性大概有七八个。其中th属性执行的优先级从1~8，数字越低优先级越高。

th:text ：设置当前元素的文本内容，相同功能的还有th:utext，两者的区别在于前者不会转义html标签，后者会。优先级不高：order=7
th:value：设置当前元素的value值，类似修改指定属性的还有th:src，th:href。优先级不高：order=6
th:each：遍历循环元素，和th:text或th:value一起使用。注意该属性修饰的标签位置，详细往后看。优先级很高：order=2
th:if：条件判断，类似的还有th:unless，th:switch，th:case。优先级较高：order=3
th:insert：代码块引入，类似的还有th:replace，th:include，三者的区别较大，若使用不恰当会破坏html结构，常用于公共代码块提取的场景。优先级最高：order=1
th:fragment：定义代码块，方便被th:insert引用。优先级最低：order=8
th:object：声明变量，一般和*{}一起配合使用，达到偷懒的效果。优先级一般：order=4
th:attr：修改任意属性，实际开发中用的较少，因为有丰富的其他th属性帮忙，类似的还有th:attrappend，th:attrprepend。优先级一般：order=5

使用Thymeleaf属性需要注意点以下五点：

若要使用Thymeleaf语法，首先要声明名称空间：
```
 xmlns:th="http://www.thymeleaf.org"
```
设置文本内容 th:text，设置input的值 th:value，循环输出 th:each，条件判断 th:if，插入代码块 th:insert，定义代码块 th:fragment，声明变量 th:object
th:each 的用法需要格外注意，打个比方：如果你要循环一个div中的p标签，则th:each属性必须放在p标签上。若你将th:each属性放在div上，则循环的是将整个 div。
变量表达式中提供了很多的内置方法，该内置方法是用#开头，请不要与#{}消息表达式弄混。
th:insert，th:replace，th:include 三种插入代码块的效果相似，但区别很大。

11.内联语法

前端网页利用thymeleaf模板引擎获取数据，可以在html标签内可通过th标签加${}表达式访问model里的对象数据。但如果不想通过th标签而是简单地访问model对象数据，或是想在javascript代码块里访问model中的数据，则要使用内联的方法。

内联：th:inline，值有三种：text,javascript,none

th:inline="text"文本内联

 <p th:inline="text">Hello, [[${session.user.name}]]!</p>

th:inline="javascript"脚本内联

 <script th:inline="javascript">
     ...
     var username = [[${session.user.name}]];
     ...
 </script>

th:inline="none"禁用内联

12.表达式对象

为了模板更加易用，Thymeleaf 还提供了一系列内置对象（内置于 Context 中），可以通过 # 直接访问：

dates ：java.util.Date的功能方法类。
calendars : 类似#dates，面向java.util.Calendar
numbers : 格式化数字的功能方法类
strings : 字符串对象的功能类，contains,startWiths,prepending/appending等等。
objects: 对objects的功能类操作。
bools: 对布尔值求值的功能方法。
arrays：对数组的功能类方法。
lists: 对lists功能类方法
sets
maps

内置对象具体的使用方式可以参考Thymeleaf官网的学习文档。

 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-a-expression-basic-objects

博观而约取，厚积而薄发！

--END--

vlambda博客
学习文章列表

微服务框架【第2期】--SpringBoot整合Thymeleaf

微服务框架【第3期】--SpringBoot整合Thymeleaf

1.SpringBoot静态资源访问

2.Thymeleaf简介

3.Thymeleaf引入

4.Thymeleaf表达式语法

5.变量表达式

5.选择表达式

6.消息(i18n)表达式

7.链接(URL)表达式

8.片段表达式

9.表达式支持的语法

10.常用th标签

11.内联语法

12.表达式对象

标签:

推荐阅读

相关文章

Mysql百万文章导入ES springboot毫秒级的搜索响应

源码分析springboot自定义jackson序列化，默认null值个性化处理返回值

vlambda博客 学习文章列表

微服务框架【第2期】--SpringBoot整合Thymeleaf

微服务框架【第3期】--SpringBoot整合Thymeleaf

1.SpringBoot静态资源访问

2.Thymeleaf简介

3.Thymeleaf引入

4.Thymeleaf表达式语法

5.变量表达式

5.选择表达式

6.消息(i18n)表达式

7.链接(URL)表达式

8.片段表达式

9.表达式支持的语法

10.常用th标签

11.内联语法

12.表达式对象

标签:

推荐阅读

相关文章

Mysql百万文章导入ES springboot毫秒级的搜索响应

源码分析springboot自定义jackson序列化，默认null值个性化处理返回值

vlambda博客
学习文章列表