Thymeleaf 首发教程

最新推荐文章于 2024-05-16 01:29:25 发布

tanlinbo_T

最新推荐文章于 2024-05-16 01:29:25 发布

阅读量2.3k

点赞数

分类专栏： web前端 thymleaf

web前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

thymleaf

2 篇文章 0 订阅

订阅专栏

今天看到一个讨论群里说，每天套模板改这些jstl 该标签改起来麻烦死了，有没有不用改模板，直接套用模板实现JSTL ognl表达式效果的技术呢？肯定是有那就是Thymeleaf

http://www.oschina.net/p/thymeleaf 介绍

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<!DOCTYPE html>
 
    2<html xmlns="http://www.w3.org/1999/xhtml"
 
    3    xmlns:th="http://www.thymeleaf.org">

第二步就是你的原始模板

 
    01<table class="box-table-a">
 
    02        <caption>thyMeleaf使用教程</caption>
 
    03        <thead>
 
    04            <tr>
 
    05                <th scope="col">ID</th>
 
    06                <th scope="col">这是标题1</th>
 
    07                <th scope="col">这是标题2</th>
 
    08                <th scope="col">这是标题3</th>
 
    09                 
 
    10            </tr>
 
    11        </thead>
 
    12        <tbody>
 
    13            <tr>
 
    14                <td>1</td>
 
    15                <td>朱遇平</td>
 
    16                <td>java</td>
 
    17                <td>程序猿</td>
 
    18                 
 
    19            </tr>
 
    20                             
 
    21            <tr>
 
    22                <td>2</td>
 
    23                <td>张三</td>
 
    24                <td>php</td>
 
    25                <td>程序猿</td>
 
    26                 
 
    27            </tr>
 
    28            <tr>
 
    29                <td>3</td>
 
    30                <td>李四</td>
 
    31                <td>c++</td>
 
    32                <td>程序猿</td>
 
    33                 
 
    34            </tr>
 
    35         
 
    36        </tbody>
 
    37    </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:text="${user.id}" 这是代表着运行时候动态设置标签为用户的id属性的值

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

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

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

OK thymeleaf 也有相关标签

首先了解的是

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

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

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

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哪里来的上面我们引用的那篇博文上的一段话

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

看到strings了没

感谢大家的支持

附加有同学疑问怎么映入js css

我一般都是 <head th:fragment="header">
  <meta charset="UTF-8" />
  <title th:text="#{head.title}"></title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="shortcut icon" th:href="@{/static/img/favicon.gif}" type="image/gif" />

  <link rel="stylesheet" th:href="@{/resources/css/bootstrap.min.css}" />
  <link rel="stylesheet" th:href="@{/resources/css/jquery.ui.all.css}" />
<link rel="stylesheet" th:href="@{/resources/css/jquery.ui.customer.css}" />
  <script th:src="@{/resources/js/jquery-1.9.1.min.js}"></script>
  <script th:src="@{/resource/js/bootstrap.min.js}"></script>
</head>
下面在你要的页面引入这个片段就行<head th:include="theme/fragments::header" /> 他就相当于jsp 中我们常用的