Thymeleaf语法

时间：2019-08-14 19:42:53 阅读：108 评论：0 收藏：0 [点我收藏+]

一、前言

Thymeleaf 是什么？
Thymeleaf 是 Web 和独立环境的现代服务器端 Java 模板引擎，能够处理HTML，XML，JavaScript，CSS 甚至纯文本。
什么是模板引擎？
模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
类似的模板引擎有哪些？
市面上主流的 Java 模板引擎有：JSP、Velocity、Freemarker、Thymeleaf
模板引擎的作用：
将静态页面和业务数据进行整合，由服务器端渲染之后返回客户端进行显示。不同的模板引擎的区别在于使用不同的语法。
自我认知
从jsp到thymeleaf,再到vue，这是一个前后端逐渐分离的过程。jsp的特点是页面中可以嵌套java代码，这显然很强大，但导致的结果是页面逻辑（一些前端界面元素的显示隐藏，以及动态变化）和业务逻辑（一些需要访问后台的操作，如数据库查询）常常纠缠在一起，代码混乱不堪，可维护性差，前后台人员职责分工不明确，责任难以追踪。到了thymeleaf，情况好了很多，因为thymeleaf支持html界面，无论是不是在服务器环境下，界面都能展示，在界面上直接与后台交互的情况也少了很多。再到现在很火的vue，才算实现了真正意义上的前后端分离，前端人员专注于前台界面，后端人员专注于后台接口。

二、SpringBoot环境下使用thymeleaf

Springboot整合thymeleaf很简单，下面只介绍下几个步骤:
1.导入依赖

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

2.简单配置 application.properties

spring.thymeleaf.enabled=true
spring.thymeleaf.cache=false
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.mode=HTML
spring.thymeleaf.suffix=.html

3.在html界面引入名称空间

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    ......
</html>

三、语法详解

thymeleaf语法都是html标签加th:*的形式

1、文本操作

//输出字符串 thymeleaf
<h2 th:text="'thymeleaf'"></h2>

//输出字符串 thymeleaf
<h2 th:utext="'thymeleaf'"></h2>

th:text和th:utext的区别：

th:utext中的html标签会正常翻译成html标签，而th:text的内容原样输出。如下：

<p th:text="'hello <b>thymeleaf</b>'"></p> //原样输出
<p th:utext="'hello <b>thymeleaf</b>'"></p>  //thymeleaf加粗

输出包含空格的文本：

<h2 th:text="'thymeleaf home page'"></h2>
<h2 th:utext="|thymeleaf home page|"></h2>

所有th:标签都可以用data-th-替换：

<h2 data-th-text="|thymeleaf home page|"></h2>
<h2 data-th-utext="|thymeleaf home page|"></h2>

2、几种常用符号

#号用于国际化
1.在templates文件夹下建立i18n目录，新建messages_zh_CN.properties文件，内容如下：

thymeleaf.welcome=welcome to thymeleaf index page

2.在application.properties中配置：

spring.messages.basename=i18n/messages

3.在界面中使用：

<p th:text="#{thymeleaf.welcome}"></p>

$用于后端取值

后端要向model存入user对象

<div th:text="${user.name}"></div>

* 用于绑定一个对象的属性，与$结合使用

<span th:object="${human}">
    姓名：<span th:text="*{name}"></span> <br>
    爱好：<span th:text="*{favorite}"></span> <br>
    国籍：<span th:text="*{nationality}"></span> <br>
</span>

@用于链接

<!--引入static/css目录中的thymeleaf.css -->
<link rel="stylesheet" href="../static/css/thymeleaf.css" th:href="@{/css/thymeleaf.css}">

<!--超链接 最终路径为/user/find?username=id-->
<a th:href="@{/user/find(username=${human.name})}">查找用户</a> 

<!--最终路径为：/user/find/具体的username-->
<a th:href="@{/user/find/{username}(username=${human.name})}">查找用户</a> <br>

~用于取到项目根路径

<a th:href="@{~/user/find/jack}">查找用户</a>

3、操作html元素

<!--修改value属性-->
<input type="submit" value="提交" th:value="submit">
<br>

<!--等价于-->
<input type="submit" value="提交" th:attr="value='submit'">
<hr>

<!--除了th:value还有很多其它html元素的属性都可用。-->

<!--追加样式一个addStyle样式-->
<input type="text" class="originStyle" th:classappend="'addStyle'">
<hr>

<!--设置选择状态-->
<input type="checkbox" th:checked="${isChecked}">

4、几种表达式

三元表达式

<div th:object="${user}">
    <div th:text="*{username} == null ? 'username is not defined' : *{username}"></div>
</div>

三元表达式省略写法，表达式为真，值为*{favorite}，否则,值为后面的字符串

<div th:object="${user}">
    <div th:text="*{username}?:'username attribute is not defined'"></div>
</div>

三元表达式省略写法,表达式为真，会给标签加上customStyle样式，为假，返回null，什么也不执行

<div th:class="${customStyleOn} ? 'customStyle'"></div>

switch表达式

<div th:switch="${usernames.get(1)}">
    username:
    <p th:case="'Lorem'">lorem</p>
    <p th:case="'ipsum'">ipsum</p>
    <p th:case="'dolor'">dolor</p>
    <p th:case="*">whatever</p>  <!--都不匹配时执行-->
</div>

5、条件判断、算数运算

<!--用#引用内置对象判断字符串是否为空-->
<div th:if="${not #strings.isEmpty('lorem')}">lorem</div>

<div th:unless="${ #strings.isEmpty('lorem')}">lorem</div>

<div th:text="33 + 22"></div>

<div th:text="${number} + 22 > 30"></div>

6、循环迭代

<ul>
   <!--遍历user对象，如果是第偶数个则加上自定义样式，如果是奇数，加上详情连接-->
    <li th:each="user : ${users}" th:classappend="${userStat.even}?'m-list-even'">
        <span th:text="${user}"></span>
        <a th:href="@{/user/find/{username}(username=${user})}" th:if="${userStat.odd}">view detail</a>
    </li>
</ul>

7、fragment的使用

fragment类似于jsp的jsp:include，用于重用一些页面。
在templates目录下建立一个footer.html用于存放通用的版权片段：内容如下：

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--copyright是片段的名字-->
<footer th:fragment="copyright">
    <div>
        &copy;2019-2020 Designed by Oamha, Glad to receive your reply
    </div>
</footer>
</html>

下面就可以将其引入到其它界面中了：

<!--footer是片段所在的文件名，copyright是片段名-->
<div th:insert="footer :: copyright"></div>

<!--上面等价于-->
<div th:insert="~{footer :: copyright}"></div>

<!--引入片段也可以用th:replace-->
<div th:replace="footer :: copyright"></div>

<!--还可以用th:include-->
<div th:include="footer :: copyright"></div>

th:insert保留当前页面的div根标签，也保留copyright片段的footer根标签
th:replace只保留copyright片段的footer根标签,div被替换掉了
th:include保留当前界面的div，但只包含copyright片段的里的内容，不再包含footer根标签

片段还可以传参数：比如有一个navbar片段，所在文件templates/nav.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="navbar(span, role, username)">
    <span th:replace="${span}"></span>
    <span th:text="${role}"></span>
    <span th:text="${username}"></span>
</div>
</html>

在其他界面引入：

<!--第一个参数传入当前界面的span标签，第二个参数是字符串，第三个参数代表什么也不传-->
<div th:replace="nav :: navbar (~{::span}, 'admin', _)">
    <span>这个span将替换片段中的span</span>
</div>

传当前界面的标签也可以用 ~{this:span}
什么也不传另一种写法为 ~{}

8、注释

<table>
    <!--/*/<th:block th:each="user : ${users}">/*/-->
        <tr>
            <td th:text="${user}">oamha</td>
        </tr>
    <!--/*/</th:block>/*/-->
</table>

thymeleaf注释格式为 
内容部分在浏览器直接打开时会被当成注释，只有在服务器环境下才会被模板引擎正确解析

9、行内表达式

<th:block th:with="str='hello <strong>thymeleaf</strong>'">
    <p>[[${str}]]</p>
    <p>[(${str})]</p>
</th:block>

th:block 相当于一个容器，但是不会产生具体的标签
th:with 为str变量赋值
[[]]相当于th:text
[()]相当于th:utext

有时我们需要在JavaScript代码中访问session中的
值，也可以用行内表达式

<!--取出session中的user-->
<script th:inline="javascript">
    var user = [[${session.user}]]
</script>

四、总结

thymeleaf的常用语法就这些，还有一些内置对象的使用，遇到的话可以查阅文档。

Thymeleaf语法

原文：https://www.cnblogs.com/wotoufahaiduo/p/11354142.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

Thymeleaf语法

一、前言

二、SpringBoot环境下使用thymeleaf

三、语法详解

1、 文本操作

2、几种常用符号

3、操作html元素

4、几种表达式

5、条件判断、算数运算

6、循环迭代

7、fragment的使用

8、注释

9、行内表达式

四、总结

1、文本操作