博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5模板引擎 Thymeleaf 教程(转)
阅读量:7281 次
发布时间:2019-06-30

本文共 3529 字,大约阅读时间需要 11 分钟。

原文:http://www.open-open.com/lib/view/open1383622135586.html

Thymeleaf是一个XML/XHTML/HTML5模板引擎,可用于Web与非Web环境中的应用开发。它是一个开源的Java库,基于Apache License 2.0许可,由Daniel Fernández创建,该作者还是Java加密库Jasypt的作者。

Thymeleaf提供了一个用于整合Spring MVC的可选模块,在应用开发中,你可以使用Thymeleaf来完全代替JSP,或其他模板引擎,如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码,开发者只需将标签属性添加到模板中即可。接下来,这些标签属性就会在DOM(文档对象模型)上执行预先制定好的逻辑。

示例模板:

<table>

  <thead>
    <tr>
      <th th:text="#{msgs.headers.name}">Name</td>
      <th th:text="#{msgs.headers.price}">Price</td>
    </tr>
  </thead>
  <tbody>
    <tr th:each="prod : ${allProducts}">
      <td th:text="${prod.name}">Oranges</td>
      <td th:text="${#numbers.formatDecimal(prod.price,1,2)}">0.99</td>
    </tr>
  </tbody>
</table>

这段介绍下面的实例模板 稍后我会逐一解释

 

使用步骤

第一步 往 html页面加入头文件 相应的schema 就是这个网址

 

1
2
3
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
    
xmlns:th
=
"http://www.thymeleaf.org"
>

第二步就是你的原始模板

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<
table
class
=
"box-table-a"
>
        
<
caption
>thyMeleaf使用教程</
caption
>
        
<
thead
>
            
<
tr
>
                
<
th
scope
=
"col"
>ID</
th
>
                
<
th
scope
=
"col"
>这是标题1</
th
>
                
<
th
scope
=
"col"
>这是标题2</
th
>
                
<
th
scope
=
"col"
>这是标题3</
th
>
                 
            
</
tr
>
        
</
thead
>
        
<
tbody
>
            
<
tr
>
                
<
td
>1</
td
>
                
<
td
>朱遇平</
td
>
                
<
td
>java</
td
>
                
<
td
>程序猿</
td
>
                 
            
</
tr
>
                             
            
<
tr
>
                
<
td
>2</
td
>
                
<
td
>张三</
td
>
                
<
td
>php</
td
>
                
<
td
>程序猿</
td
>
                 
            
</
tr
>
            
<
tr
>
                
<
td
>3</
td
>
                
<
td
>李四</
td
>
                
<
td
>c++</
td
>
                
<
td
>程序猿</
td
>
                 
            
</
tr
>
         
        
</
tbody
>
    
</
table
>

第三部就是怎么采用ThyMeleaf标签替换这些了 而不用改动模板以及样式 thyMeleaf 是一个基于标签 自定义属性实现的一个模板引擎 ,这里怎么配置Thymeleaf先不说 到后面再说,先说说他的标签用法

 

网上有一篇文章 总结的不错 地址 http://www.blogjava.net/bjwulin/archive/2013/02/07/395234.html

这里我想详细的讲下 讲完了 我就把上面的模型改成修改后的

# 代表 获取对象 从 messages bundle 也就是消息的资源本地化文件

$ 表示从model里面获取

# $这2个可以一起用 比如#{'system.'+${model.id}}  -----这相当于 #{system.01}的资源本地化文件中的system.01内容

下面介绍常用的标签

th:fragment=“public” 相当于 include标签

th:each="user : ${users}" 相当于c:foreach  使用时候

如上面

<tr th:each="user : ${users}">

<td th:text="${user.id}">01</td>

<td th:text="${user.name}">朱遇平</td>

<td th:text="${user.xx}">java</td>

<td th:text="${user.xx}">程序员</td>

</tr>

这些静态数据不要管他 当运行时候自动替换

上面注意到th:text="${user.id}" 这是代表着运行时候动态设置标签为用户的id属性的值

th:href="@{/users/delete(id=${u.id})}"> 

这是动态设置url属性参考上面的文章总结

在表单的环境下 有时候我们可能需要动态数据绑定

OK thymeleaf 也有相关标签 

首先了解的是

<form action="#" th:action="@{/users/add}" th:object="${myuser}" method="post">

这里th:Object表示表单与 改myuser注入的实体映射,

在表单 th:field="*{id} 则表示 该表单的值 与 myuser的id绑定 

这里注意到 我上面的遍历表格只改了一个 其他的三个 你不是说可以不用改模板的 的 那该怎么办啊

th:remove="all"  使用了该标签 将在运行时候移除所有的元素

<tr th:remove="all">

</tr>

上面的其他几行 就直接相当于忽略他了

趁着中午的时间 更新下。这里先讲到这里了 有时间补充更新 它的配置 以及 spring整合

有人问我该怎么呢使用if 突然想到 我上面好像忘了讲这个

经常有由td 表格展示某一行要判断的情况

 
1
<
td
class
=
"status"
th:if
=
"${#strings.isEmpty(status)}"
th:text
=
"这状态为空"
>这里显示状态不为空</
td
>

同理 

1
${not #strings.isEmpty(status)}

换p标签 只要把td改成p标签即可

这里要提一下strings哪里来的 上面我们引用的那篇博文上的一段话

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
表达式基本对象:
#ctx:context object
#root或者#vars
#locale
#httpServletRequest
#httpSession
 
表达式功能对象:
#dates:java.util.Date的功能方法类。
#calendars:类似#dates,面向java.util.Calendar
#numbers:格式化数字的功能方法类。
#strings:字符串对象的功能类,contains,startWiths,prepending/appending等等。
#objects:对objects的功能类操作。
#bools:对布尔值求值的功能方法。
#arrays:对数组的功能类方法。
#lists:对lists功能类方法
#sets
#maps
#aggregates:对数组或者集合创建聚合的功能方法,
th:text="${#aggregates.sum(o.orderLines.{purchasePrice * amount})}"
 
#messages:在变量表达式中获取外部信息的功能类方法。
#ids:处理可能重复的id属性的功能类方法。

看到strings了没 

转载于:https://www.cnblogs.com/mochaMM/p/5035632.html

你可能感兴趣的文章
如何在 Swift 3 中用 SpriteKit 框架编写游戏 (Part 1)
查看>>
零售业无线技术应用--IP导航
查看>>
java解析XML之DOM解析和SAX解析(包含CDATA的问题)
查看>>
很多开发人员的毛病
查看>>
云应用程序很慢?原因在应用,而不是云
查看>>
Linux下Git安装及配置
查看>>
量子纠缠:从量子物质态到深度学习
查看>>
多家银行手机转账现高危漏洞 ,用户资金或被非法窃取
查看>>
火币网徐宝龙谈大数据网络攻防与区块链
查看>>
企业并购中值得留意的10个陷阱
查看>>
布线须知:皮线光缆的特点
查看>>
软件定义网络对我们有多重要?
查看>>
黑客组织APT6入侵美国政府网络长达数年,奥巴马造吗?
查看>>
《中国人工智能学会通讯》——2.5 智能汽车人机交互与人机协同技术 的研究进展...
查看>>
从比特币说起, “区块链”到底是什么
查看>>
《数字视频和高清:算法和接口》一1.9标清和高清
查看>>
黑客攻击频发 网络安全公司借机争相IPO
查看>>
《VMware Virtual SAN权威指南》一1.3 超融合/服务器SAN解决方案
查看>>
《中国人工智能学会通讯》——7.19 挑战与机遇
查看>>
飞康发布业界首个标准化融合数据服务平台FreeStor
查看>>