Thymeleaf 模板引擎

最新推荐文章于 2023-04-17 15:25:25 发布

pu33ycat

最新推荐文章于 2023-04-17 15:25:25 发布

阅读量133

点赞数

文章标签： java

本文链接：https://blog.csdn.net/pu33ycat/article/details/126573616

版权

Thymeleaf 模板引擎

Thymeleaf：是使用java开发的模板技术，在服务器端运行。把处理后的数据发送给浏览器。

模板是作视图层工作的。显示数据的。 Thymeleaf是基于Html语言。 Thymleaf语法是应用在

html标签中。 SpringBoot框架集成Thymealeaf, 使用Thymeleaf代替jsp。

Thymeleaf 的官方网站：http://www.thymeleaf.org
Thymeleaf 官方手册：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

1 表达式

标准变量表达式

语法： ${key}

作用：获取key对于的文本数据， key 是request作用域中的key ，使用request.setAttribute(), model.addAttribute()

在页面中的 html标签中，使用 th:text=“${key}”

<div style="margin-left: 400px">
    <h3>标准变量表达式:  ${key}</h3>
    <p th:text="${site}">key不存在</p>
    <br/>
    <p>获取SysUser对象 属性值</p>
    <p th:text="${myuser.id}">id</p>
    <p th:text="${myuser.name}">姓名</p>
    <p th:text="${myuser.sex}">姓名：m男</p>
    <p th:text="${myuser.age}">年龄</p>
    <p th:text="${myuser.getName()}">获取姓名使用getXXX</p>
</div>

选择变量表达式（星号变量表达式）

语法： *{key}

作用：获取这个key对应的数据， *{key}需要和th:object 这个属性一起使用。

目的是简单获取对象的属性值。

<p>使用 *{} 获取SysUser的属性值</p>
<div th:object="${myuser}">
    <p th:text="*{id}"></p>
    <p th:text="*{name}"></p>
    <p th:text="*{sex}"></p>
    <p th:text="*{age}"></p>

</div>
<p>使用*{}完成的表示 对象的属性值</p>
<p th:text="*{myuser.name}" ></p>

链接表达式

语法： @{url}

作用：表示链接，可以

 <script src="..."> , <link href="..."> <a href=".."> ,<form action="..."> <img src="...">

2 Thymeleaf属性

属性是放在html元素中的，就是html元素的属性，加入了th前缀。属性的作用不变。加入上th，属性的值由模板引擎处理了。在属性可以使用变量表达式

例如：

<form action="/loginServlet" method="post"></form>

<form th:action="/loginServlet" th:method="${methodAttr}"></form>

3 each

each循环，可以循环List，Array

语法：

在一个html标签中，使用th:each

<div th:each="集合循环成员,循环的状态变量:${key}">
    <p th:text="${集合循环成员}" ></p>
</div>

集合循环成员,循环的状态变量:两个名称都是自定义的。 “循环的状态变量”这个名称可以不定义，默认是"集合循环成员Stat"

each循环Map

在一个html标签中，使用th:each

<div th:each="集合循环成员,循环的状态变量:${key}">
    <p th:text="${集合循环成员.key}" ></p>
    <p th:text="${集合循环成员.value}" ></p>
</div>

集合循环成员,循环的状态变量:两个名称都是自定义的。 “循环的状态变量”这个名称可以不定义，默认是"集合循环成员Stat"

key:map集合中的key
value：map集合key对应的value值

4 th:if

“th:if” : 判断语句，当条件为true，显示html标签体内，反之不显示没有else语句

语法：
<div th:if=" 10 > 0 "> 显示文本内容 </div>

还有一个 th:unless 和 th:if相反的行为

语法：
<div th:unless=" 10 < 0 "> 当条件为false显示标签体内容 </div>

例子：if

<div style="margin-left: 400px">
        <h3> if 使用</h3>
        <p th:if="${sex=='m'}">性别是男</p>
        <p th:if="${isLogin}">已经登录系统</p>
        <p th:if="${age > 20}">年龄大于20</p>
        <!--""空字符是true-->
        <p th:if="${name}">name是“”</p>
        <!--null是false-->
        <p th:if="${isOld}"> isOld是null</p>
 </div>

例子： unless

 <div style="margin-left: 400px">
        <h3>unless: 判断条件为false，显示标签体内容</h3>
        <p th:unless="${sex=='f'}">性别是男的</p>
        <p th:unless="${isLogin}">登录系统</p>
        <p th:unless="${isOld}"> isOld是null </p>
 </div>

5 th:switch

th:switch 和 java中的swith一样的

语法：
<div th:switch="要比对的值">
    <p th:case="值1">
        结果1
    </p>
    <p th:case="值2">
        结果2
    </p>
    <p th:case="*">
        默认结果
    </p>
    以上的case只有一个语句执行
    
</div>

6 th:inline

内联text：在html标签外，获取表达式的值

语法：

<p>显示姓名是：[[${key}]]</p>

 <div style="margin-left: 400px">
        <h3>内联 text, 使用内联表达式显示变量的值</h3>
        <div th:inline="text">
            <p>我是[[${name}]]，年龄是[[${age}]]</p>
            我是<span th:text="${name}"></span>,年龄是<span th:text="${age}"></span>
        </div>

        <div>
            <p>使用内联text</p>
            <p>我是[[${name}]],性别是[[${sex}]]</p>
        </div>
</div>

内联javascript

例子：
 <script type="text/javascript" th:inline="javascript">
         var myname = [[${name}]];
         var myage = [[${age}]];

         //alert("获取的模板中数据 "+ myname + ","+myage)

        function fun(){
            alert("单击事件，获取数据 "+ myname + ","+ [[${sex}]])
        }
    </script>

7 字面量

例子：

 <div style="margin-left: 400px">
       <h3>文本字面量: 使用单引号括起来的字符串</h3>
       <p th:text="'我是'+${name}+',我所在的城市'+${city}">数据显示</p>

       <h3>数字字面量</h3>
        <p th:if="${20>5}"> 20大于 5</p>

        <h3>boolean字面量</h3>
        <p th:if="${isLogin == true}">用户已经登录系统</p>

        <h3>null字面量</h3>
        <p th:if="${myuser != null}">有myuser数据</p>
    </div>

8 字符串连接

连接字符串有两种语法

1）语法使用单引号括起来字符串，使用 + 连接其他的字符串或者表达式

  <p th:text="'我是'+${name}+',我所在的城市'+${city}">数据显示</p>

2）语法：使用双竖线， |字符串和表达式|

<p th:text="|我是${name},我所在城市${city|">
    显示数据
</p>

例子：

    <div style="margin-left: 400px">
       <h3>字符串连接方式1：使用单引号括起来的字符串</h3>
       <p th:text="'我是'+${name}+',我所在的城市'+${city}">数据显示</p>
        <br/>
        <br/>
        <h3>字符串连接方式2：|字符串和表达式|</h3>
        <p th:text="|我是${name},所在城市${city},其他人${myuser.name}|"></p>
    </div>

9 运算符

算术运 算： + , - - , * , / , %
关系比较 : > , < , >= , <= ( gt , lt , ge , le )
相等判断： == , != ( eq , ne )


<div style="margin-left: 400px">
        <h3>使用运算符</h3>
        <p th:text="${age > 10}">年龄大于 10 </p>
        <p th:text="${ 20 + 30 }">显示运算结果</p>
        <p th:if="${myuser == null}">myuser是null</p>
        <p th:if="${myuser eq null}">myuser是null</p>
        <p th:if="${myuser ne null}">myuser不是null</p>

        <p th:text="${isLogin == true ? '用户已经登录' : '用户需要登录'}"></p>
        <p th:text="${isLogin == true ? ( age > 10 ? '用户是大于10的' : '用户年龄比较小') : '用户需要登录'}"></p>

    </div>

三元运算符：
 表达式  ？ true的结果 : false的结果

三元运算符可以嵌套