Thymeleaf2-使用介绍

最新推荐文章于 2024-06-05 00:03:30 发布

weixin_33690367

最新推荐文章于 2024-06-05 00:03:30 发布

阅读量129

点赞数

文章标签： python java javascript ViewUI

原文链接：https://my.oschina.net/sandant/blog/1571086

版权

2019独角兽企业重金招聘Python工程师标准>>>

[TOC]

简介(thymeleaf2)

支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式
thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示

表达式支持

信息(Messages)

信息使用表达式'#{}'的方式调用
主要用于做国际化

示例

例如在国际化文件(messages_zh_CN.properties)中的内容如下:

index.welcome=欢迎使用 {0}
index.bye=再见!

使用TH调用的代码为:

<div class="content">
    <h2>Messages</h2>
    <div>
        <label th:text="#{index.welcome('thymeleaf')}">welcome</label>
    </div>
    <div>
        <label th:text="#{index.bye}">?</label>
    </div>
</div>

展示的结果为：

欢迎使用thymeleaf
再见!

变量(Variables)

Thymeleaf中使用OGNL表达式
也可以使用SpringEL表达式
在Web环境下 ${#httpServletRequest.getAttribute('')} ${#vars.get('xxx')} ${xxx} 都可以获取参数值

示例

例如在后台传入的数据为

PersionDto persion = new PersionDto();
persion.setName("张三");
persion.setIdNo("000001");
persion.setAge(25);
view.addObject("persion", persion);

在TH中的的代码为:

<div class="content">
    <h2>Variables</h2>
    <div>
        <label>姓名: </label><span th:text="${persion.name}">xxx</span>
    </div>
    <div>
        <label>Id号: </label><span th:text="${#vars.get('persion').idNo}"></span>
    </div>
    <div>
        <label>年龄: </label><span th:text="${#httpServletRequest.getAttribute('persion').age}">xxx</span>
    </div>
    <div>
        <label>当前语言: </label><span th:text="${#locale.language}">xxx</span>
    </div>
    <div>
        <label>参数type: </label><span th:text="${param.type==null?'not found':param.type[0]}">xxx</span>
    </div>
</div>

展示的结果为:

姓名: 张三
Id号: 000001
年龄: 25
当前语言: zh
参数type: not found

内置对象

//-- 基本对象
#ctx      : org.thymeleaf.context.IWebContext
#locale   : java.util.Locale
#vars     : org.thymeleaf.context.VariablesMap

//-- Web参数
param       : param.xxx size() isEmpty() containsKey('xxx')
session     : session.xxx size() isEmpty() containsKey('xxx')
application : application.xxx size() isEmpty() containsKey('xxx')

//-- Web对象
#httpServletRequest  : javax.servlet.http.HttpServletRequest
#httpSession         : javax.servlet.http.HttpSession

//-- Spring对象
#themes   : provides the same features as the Spring spring:theme JSP tag.

//-- Spring beans
@beanName : ${@authService.getUserName()}

内置工具类

#dates      : org.thymeleaf.expression.Dates
#calendars  : org.thymeleaf.expression.Calendars
#numbers    : org.thymeleaf.expression.Numbers
#strings    : org.thymeleaf.expression.Strings
#objects    : org.thymeleaf.expression.Objects
#bools      : rg.thymeleaf.expression.Bools
#arrays     : org.thymeleaf.expression.Arrays
#lists      : org.thymeleaf.expression.Lists
#sets       : org.thymeleaf.expression.Sets
#maps       : org.thymeleaf.expression.Maps
#aggregates : org.thymeleaf.expression.Aggregates
#messages   : org.thymeleaf.expression.Messages #{xxx}
#ids        : org.thymeleaf.expression.Ids

选择表达式(selections)

用于简化参数表达式的使用

例如在后台传入的数据为

PersionDto persion = new PersionDto();
persion.setName("张三");
persion.setIdNo("000001");
persion.setAge(25);
view.addObject("persion", persion);

在TH中的的代码为:

<div class="content">
    <h2>Expressions on selections (asterisk syntax)</h2>
    <div th:object="${persion}">
        <div>
            <label>姓名: </label><span th:text="*{name}">xxx</span>
        </div>
        <div>
            <label>Id号: </label><span th:text="*{idNo}"></span>
        </div>
        <div>
            <label>年龄: </label><span th:text="${persion.age}">xxx</span>
        </div>
    </div>
</div>

展示的结果为:

姓名: 张三
Id号: 000001
年龄: 25

链接表达式(Link URLs)

使用@{}的格式表示可以为有context-path的server自动增加context-path 参数可以使用(a=xx,b=yy)的格式表示参数

示例

例如当前应用server server.context-path=/sbemp 在TH中的的代码为:

<div class="content">
    <h2>Link URLs</h2>
    <div>
        <div>
            <label>相对页面(Page-relative): </label><span th:text="@{detail.html(id='001')}"></span>
        </div>
        <div>
            <label>相对上下文(Context-relative): </label><span th:text="@{/welcome.html}"></span>
        </div>
        <div>
            <label>绝对服务(Server-relative): </label><span th:text="@{~/sbemp1/welcome.html}"></span>
        </div>
        <div>
            <label>相对协议(Protocol-relative): </label><span th:text="@{//code.jquery.com/jquery-2.0.3.min.js}"></span>
        </div>
    </div>
</div>

展示的结果为:

相对页面(Page-relative): detail.html?id=001
相对上下文(Context-relative): /sbemp/welcome.html
绝对服务(Server-relative): /sbemp1/welcome.html
相对协议(Protocol-relative): //code.jquery.com/jquery-2.0.3.min.js

字面(Literals)

文本支持字符串拼接数字支持基本运算: + , - , * , / , % 支持比较运算: gt ( > ), lt ( < ), ge ( >= ), le ( <= ), not ( ! ). Also eq ( == ),neq / ne ( != ). 支持条件(三目)运算支持表达式预处理，即将表达式的值作为表达式使用

示例

例如后台传入的数据为

PersionDto persion = new PersionDto();
persion.setName("张三");
persion.setIdNo("000001");
persion.setAge(25);
persion.setAdmin(true);
persion.setMarks(null);
persion.setExpression("${persion.admin}?'yes':'no'");
view.addObject("persion", persion);

在TH中的的代码为:

<div class="content">
    <h2>Literals</h2>
    <div>
        <div>
            <label>文本: </label><span th:text="'@文本.@'"></span>
        </div>
        <div>
            <label>文本1: </label><span th:text="|hello${persion.name}|"></span>
        </div>
        <div>
            <label>文本2: </label><span th:text="'hello'+${persion.name}"></span>
        </div>
        <div>
            <label>文本3: </label><span th:text="'hello'+${persion.name}"></span>
        </div>
        <div>
            <label>文本3: </label><span th:text="__${persion.name}__"></span>
        </div>
        <div>
            <label>数字: </label><span th:text="2017+3"></span>
        </div>
        <div>
            <label>布尔: </label><span th:text="${persion.admin}==true"></span>
        </div>
        <div>
            <label>null: </label><span th:text="${persion.marks}==null"></span>
        </div>
        <div>
            <label>Expression: </label><span th:text="__${persion.expression}__"></span>
        </div>
    </div>
</div>

展示的结果为:

文本: @文本.@
文本1: hello张三
文本2: hello张三
文本3: hello张三
文本3: 张三
数字: 2020
布尔: true
null: true
Expression: yes

属性

支持大部分标签的属性
不支持的特殊标签使用attr标签进行设置支持属性的前后拼接

示例

在TH中的的代码为:

<div class="content">
    <h2>Setting Attribute Values</h2>
    <div>
        <div>
            <label class="lb" th:classappend="name">姓名: </label>
            <input th:id="|name_${persion.idNo}|" th:value="${persion.name}" />
            <label class="lb" th:attrappend="class=' age'" th:attrprepend="class='second '">年龄: </label>
            <input th:attr="value=${persion.age}" />
        </div>
    </div>
</div>

编译之后的Html代码为：

<div class="content">
    <h2>Setting Attribute Values</h2>
    <div>
        <div>
            <label class="lb name">姓名: </label>
            <input id="name_000001" value="张三" />
            <label class="second lb age">年龄: </label>
            <input value="25" />
        </div>
    </div>
</div>

条件控制

循环(Iteration)

支持实现了java.util.Iterable接口的类支持实现了java.util.Map接口的类支持数组循环时可使用状态对象，对象中包含index count size current even/odd first last等

示例

例如后台传入的数据为：

PersionDto p1 = new PersionDto();
p1.setName("name01");
p1.setIdNo("000001");
p1.setAge(21);
PersionDto p2 = new PersionDto();
p2.setName("name02");
p2.setIdNo("000002");
p2.setAge(22);
PersionDto p3 = new PersionDto();
p3.setName("name03");
p3.setIdNo("000003");
p3.setAge(23);
List<PersionDto> persions = new ArrayList<PersionDto>();
persions.add(p1);
persions.add(p2);
persions.add(p3);
view.addObject("persions", persions);

在TH中的的代码为:

<div class="content">
    <h2>Iteration</h2>
    <div>
        <div>
            <ul>
                <li th:each="persion,stat : ${persions}">
                    <span th:text="${stat.index}"></span>-<span th:text="${persion.name}+'['+${stat.current.idNo}+']'"></span>
                </li>
            </ul>
        </div>
    </div>
</div>

展示的结果为:

    0-name01[000001]
    1-name02[000002]
    2-name03[000003]

判断(if/unless)

if属性可以用来控制标签的是否显示 unless = not if

示例

例如后台传入的数据为：

PersionDto persion = new PersionDto();
persion.setName("张三");
persion.setIdNo("000001");
persion.setAge(25);
persion.setAdmin(true);
view.addObject("persion", persion);

TH中的代码为：

<div class="content">
    <h2>if unless</h2>
    <div>
        <div>
            <span th:if="${persion.admin}" th:text="'管理员'">Y</span>
            <span th:unless="${persion.admin}" th:text="'非管理员'">N</span>
        </div>
    </div>
</div>

编译后的代码为：

<div class="content">
    <h2>if unless</h2>
    <div>
        <div>
            <span>管理员</span>
            
        </div>
    </div>
</div>

switch

switch 的case中通过 '*' 匹配 default

示例

例如后台传入的数据为：

PersionDto persion = new PersionDto();
persion.setName("张三");
persion.setIdNo("000001");
persion.setAge(25);
persion.setAdmin(true);
view.addObject("persion", persion);

TH中的代码为：

<div class="content">
    <h2>Switch</h2>
    <div>
        <div th:switch="${persion.admin}">
            <span th:case="true" th:text="'管理员'">Y</span>
            <span th:case="false" th:text="'非管理员'">N</span>
        </div>
    </div>
</div>

编译后的代码为：

<div class="content">
    <h2>Switch</h2>
    <div>
        <div>
            <span>管理员</span>
            
        </div>
    </div>
</div>

模板布局

引用格式为 '模板路径 :: fragmet' 引用本文件中的代码时，模板名称为空支持inclue 和 replace两种引用模式模板引用时可以传参数模板引用也可以通过标签ID的方式引入

示例

例如模板文件路径为 thymeleaf/footer.html
HT中的代码为：

<div class="content">
    <h2>Template</h2>
    <div th:fragment="fra0">
        <span th:text="'Hello Fragement'"></span>
    </div>
    <div>
        <div th:include=":: fra0"></div>

        <div class="frag" th:include="thymeleaf/footer :: fra1"></div>

        <div class="frag" th:replace="thymeleaf/footer :: fra1"></div>

        <div class="frag" th:include="thymeleaf/footer :: #fra2"></div>

        <div class="frag" th:include="thymeleaf/footer :: fra3('YYY YYY')"></div>
    </div>
</div>

翻译后的代码为：

<div class="content">
    <h2>Template</h2>
    <div>
        <span>Hello Fragement</span>
    </div>
    <div>
        <div>
            <span>Hello Fragement</span>
        </div>

        <div class="frag">
            &copy; 2017 XXX XXX
        </div>

        <div class="footer">
            &copy; 2017 XXX XXX
        </div>

        <div class="frag">
            &copy; 2018 XXX XXX
        </div>

        <div class="frag">
            <span>© 2019 YYY YYY</span>
        </div>
    </div>
</div>

转载于:https://my.oschina.net/sandant/blog/1571086