Thymeleaf语法

时间 2020-06-22

标签 thymeleaf 语法繁體版

原文原文链接

1、前言

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

2、SpringBoot环境下使用thymeleaf

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

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

2.简单配置 application.propertiescss

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界面引入名称空间html

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

3、语法详解

thymeleaf语法都是html标签加th:*的形式 <br/>前端

一、文本操做

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

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

th:text和th:utext的区别：<br/> th:utext中的html标签会正常翻译成html标签，而th:text的内容原样输出。以下：vue

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

输出包含空格的文本：<br/>java

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

全部th:*标签均可以用data-th-*替换：spring

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

二、几种经常使用符号

#号用于国际化 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>

<code>$</code>用于后端取值

后端要向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>

三、操做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}">

四、几种表达式

三元表达式

<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>

五、条件判断、算数运算

<!--用#引用内置对象判断字符串是否为空-->
<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>

六、循环迭代

<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>

七、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}
什么也不传另外一种写法为 ~{}

八、注释

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

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

九、行内表达式

<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>

4、总结

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

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