Thymleaf介绍

一、读者引言

本教程面向需要学Thymeleaf,维护和开发Web应用的开发人员。 完成本教程的学习之后,您将熟悉并能上手使用Thymeleaf模板。也可以将Thymeleaf用作未来开发应用的一项目技术。

二、为什么使用Thymleaf

JSP的致命缺陷:

前端工程师拿到JSP文件后,没法直接放在浏览器上查看布局、动态效果等等显示效果。所以,基于JSP无法和前端工程师进行协同工作。而Thymeleaf中所有的动态效果都不影响原本HTML标签的显示。当一个前端工程师拿到Thymeleaf文件后,可以直接放在浏览器上查看显示效果,看代码时忽略动态部分即可。

Thymeleaf的主要目标是将优雅的自然模板带到开发工作流程中,并将HTML在浏览器中正确显示,并且可以作为静态原型,让开发团队能更容易地协作。Thymeleaf能够处理HTML,XML,JavaScript,CSS甚至纯文本。

因此使用Thymleaf

三、开始使用Thymleaf

1、配置Thymleaf所需要的环境

①Pom文件添加Thymleaf的依赖(在SpringBoot环境下加入Thymeleaf)

使用springboot环境下需要配置yml

text
1 2 3 4 5
spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    cache: false #开发的时候禁用缓存
text
1 2 3 4
<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

②Pom文件添加Thymleaf的依赖(添加独立Thymleaf)

text
1 2 3 4 5 6
<dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf</artifactId>
            <version>3.0.7.RELEASE</version>
</dependency>

在html上的标签中添加配置名称空间xmlns:th="http://www.thymeleaf.org"

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

2、通过Thymeleaf读取域中的数据

注意:在使用Thymelef之前,必须在服务器端跑起来,如果没有跑起来服务器打开的网页是不可以解析这些标签的!这样的好处可以让前端的页面,后端人员通过更改后,前端在本地基本不会有影响!

一、事先在服务器,存入域数据

javaweb随便存入数据。

二、通过thymeleaf表达式取域数据,并显示在网页上

取域数据的语法

text
1
${属性名}
①、在request域中取出数据
text
1
 <p th:text="${reqAttName}">sss</p>
②、在session域中取出数据
text
1
 <p th:text="${session.sessionAttName}">sss</p>
③、在application域中取出数据
text
1
 <p th:text="${application.sessionAttName}">sss</p>

网页详情图

三、解析URL地址

解析URL地址,最有用的是把开头的“/”解析为ContextPath,让我们能够在页面上动态获取ContextPath值

text
1
 @{/good/morning} 
配置contextPath
text
1 2 3
server
 port:1000#端口号
 context-path:/hello

如果设置contextPath为/hello,那么解析为/hello/good/morning

四、在HTML标签内执行表达式

  • (1) 操作标签体

    在HTML标签内使用th:text属性

  • (2) 重置某个HTML标签本身存在的属性

    在HTML标签内使用th:xxx属性,xxx是想要替换为动态值的属性名

五、分支与迭代

(1)if判断

text
1
th:if="${not #strings.isEmpty(thIf)}
strings是内置对象,调用isEmpty()方法可以用来判断是否为空

(2)迭代

text
1
th:each="声明变量 : 取集合数据的表达式"

六、当前环境切换Thymeleaf版本[p]

text
1 2 3 4 5 6
 <properties>
    <!-- 切换 thymeleaf 版本 -->
    <thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
    <!-- 支持功能的支持程序 thymeleaf3 主程序 layout2 以上的版本 -->
    <thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>
</properties>

妈呀!网页不见了害我重写了一遍!!!!!!有什么错误评论一下,谢谢!!!