Thymeleaf入门

作者: ikonan | 来源:发表于2018-03-29 22:45 被阅读230次

Thymeleaf介绍

Thymeleaf是Web和独立环境的现代服务器端Java模板引擎，能够处理HTML，XML，JavaScript，CSS甚至纯文本。
Thymeleaf的主要目标是提供一种优雅和高度可维护的创建模板的方式。为了实现这一点，它建立在自然模板的概念上，将其逻辑注入到模板文件中，不会影响模板被用作设计原型。这改善了设计的沟通，弥补了设计和开发团队之间的差距。
Thymeleaf也从一开始就设计了Web标准 - 特别是HTML5 - 允许您创建完全验证的模板，如果这是您需要的
springboot 用thymeleaf 还是挺不错的

Thymeleaf 基本语法

在html文件使用thymeleaf 标签需要再头文件中加入命名空间

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

基础表达式

变量表达式${...}
html示例

<input type="text" name="userName"
value="James" th:value="${person.name}" />

java示例

@RequestMapping("basicExpression")
public String basicExpression(Model model){
    model.addAttribute("person",this.getPerson());
    return "basic_expression";
}

选择/星号表达式*{...}
注：需要配合th:object标签使用

html示例

<div th:object="${person}">
    <p>Name:
    <span th:text="*{name}">Saturn</span>.
    </p>
    <p>Age:
        <span th:text="*{age}">30</span>.
    </p>
    <p>Phone:
        <span th:text="*{phone}">1350992····</span>.
    </p>
    <p>Address:
        <span th:text="*{address}">广州**科技</span>.
    </p>
</div>

java示例

@RequestMapping("selectExpression")
public String selectExpression(Model model){
    model.addAttribute("person",this.getPerson());
    return "basic_expression_selection";
}

文字国际化表达式 #{…}

Thymeleaf文字国际化需要springmvc的支持
在资源目录 resources 下创建文件夹 spring-i18n 作为国际化文件的根目录，创建各种语言的
.properties文件存储需要使用的内容

URL表达式 @{…}
@{…}支持绝对路径和相对路径。其中相对路径又支持跨上下文调用url和协议的引用。
html 代码

//相对路径
<img th:width="100px" th:src="@{../images/{imageUrl}(imageUrl=${image})}">

//绝对路径
<img th:width="100px" th:src="@{/images/{imageUrl}(imageUrl=${image})}">

Thymeleaf 常用标签

普通标签
Thymeleaf中大部分标签都是与html原有属性对应的，比如html中script标签的src属性，在Thymeleaf中对应th:src标签，这样通过静态解析的时候，浏览器会读取src属性对应的js，而通过动态解析访问的时候，浏览器拿到的src即为th:src中的内容。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>常用普通标签-ThymeLeaf 模板引擎</title>
</head>
<body>
    <!--  Thymeleaf中大部分标签都是与html原有属性对应的，
  比如html中script标签的src属性，在Thymeleaf中对应th:src标签-->

    <!-- 引入iuput标签 -->
    <input type="text" name="name" 
    th:value="ThymeleafValue" value="HtmlValue">

    <!-- 引入img标签 -->
    <img src="../images/001.jpg" width="200px" 
    th:width="100px" th:src="@{../images/001.jpg}">

    <!-- 引用javascript标签 -->
    <script type="text/javascript" src="../js/myThymeleaf.js"
    th:src="@{/js/myThymeleaf.js}"></script>
</body>
</html>

常用标签

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>常用普通标签-ThymeLeaf 模板引擎</title>
</head>
<body>
    <!--Thymeleaf中大部分标签都是与html原有属性对应的，
    比如html中script标签的src属性，在Thymeleaf中对应th:src标签-->
    <p>简单数据转换：</p>
    <dt>年龄</dt>

    <!-- 此示例表示保留两位小数位，整数位1位，不够位自动补0-->
    <dd th:text="${#numbers.formatDecimal(person.age, 1, 2)}">25</dd>
    <dt>生日</dt>
    <dd th:text="${#dates.format(person.birthday, 'yyyy-MM-dd')}">2014-12-01</dd>
    <p>字符串拼接</p>
    <dt>地址</dt>
    <dd th:text="${'广东省'+person.address}">越秀区</dd>
    <p>表单</p>
    <form th:action="@{/vic/person}" th:object="${person}" 
      method="post" th:method="post">
        <!-- th:field常用于表单字段绑定。
         通常与th:object一起使用。 属性绑定、集合绑定 -->
        <dt>姓名：<input type="text"  th:field="*{name}"/></dt>
        <dt>年龄：<input type="text" th:field="*{age}"/></dt>
        <dt>电话：<input type="text" th:field="*{phone}"/></dt>
        <dt>地址：<input type="text" th:field="*{address}"/></dt>
        <dt>生日：<input type="text" th:field="*{birthday}"/></dt>
        <dt><input type="submit"/>
    </form>
</body>
</html>

常用工具
工具对象表达式。常用于日期、集合、数组对象的访问。这些工具对象就像是java对象，可以访问对应java对象的方法来进行各种操作。有#maps、#dates、#calendars、#numbers、#lists等

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>工具对象-ThymeLeaf 模板引擎</title>
</head>
<body>
    <p>工具对象表达式。常用于日期、集合、数组对象的访问。
       这些工具对象就像是java对象，可以访问对应java对象的方法来进行各种操作。</p>
    <p>#maps、#dates、#calendars、#numbers、#lists等</p>
    <p>简单数据转换：</p>
    <dt>#numbers：年龄</dt>
    <dd th:text="${#numbers.formatDecimal(person.age, 1, 2)}">25</dd>
    <dt>#dates：生日</dt>
    <dd th:text="${#dates.format(person.birthday, 'yyyy-MM-dd')}">2014-12-01</dd>
    <dt>#calendars：生日</dt>
    <dd th:text="${#calendars.format(person.birthday, 'dd MMMM yyyy')}">2014-12-01</dd>
    <div th:if="${#maps.isEmpty(persons)}">
        <p>#maps:判断对象是否为空</p>
    </div>
    <div>
        #lists:<span th:text="${#lists.size(personList)}"></span>
    </div>
    <!-- 变量必须在里面使用，否则无效 -->
    <div th:with="sizes=${#lists.size(personList)}">
        <h3>当前数据长度：<span th:text="${sizes}"></span></h3>
    </div>
    <div>
        <!-- 此参数必须经过地址栏传到 -->
        #httpServletRequest: 
        <span th:text="${#httpServletRequest.getParameter('ids')}">    </span>
    </div>
</body>
</html>

循环、IF、Switch

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>IF/EACH/SWITCH-ThymeLeaf 模板引擎</title>
</head>
<body>
    <div>
        <span th:if="${switch > 8}"> 判断大于8 显示</span>
        <span th:if="${switch > 32}"> 判断大于32 不显示</span>
    </div>
    --------------------------------------------------
    <div>
        <span th:unless="${switch > 8}"> 判断大于8 显示</span>
        <span th:unless="${switch > 32}"> 判断大于32 不显示</span>
    </div>
    <div th:switch="${switch}">
        <p th:case="'admin'">User is an administrator</p>
        <p th:case="30">User is a manager</p>
        <p th:case="20">User is a manager</p>
        <!--默认情况-->
        <p th:case="*">User is some other thing</p>
    </div>

    -- 循环 --
    <div th:if="${personList!=null}">
        <table>
            <tr th:each="person : ${personList}">
                <td th:text="${person.name}"></td>
                <td th:text="${person.age}"></td>
                <td th:text="${person.address}"></td>
            </tr>
        </table>
    </div>
</body>
</html>

项目中被用到的 Thymeleaf 标签 - 片段（th:fragment）
这是我在裂变工具中看到的熟悉的代码，类似于 jsp:include 之类的：
editUser.html 定义一个片段

<!-- 用户编辑模态框开始 -->
<div th:fragment="editUserFragment">
….内容
</div>

userCenter.html 引用一个片段

<div th:replace="userManager/editUser::editUserFragment"></div>

没错，上面就是我在项目中经常到的所谓类似于包含的标签。我们经常会想要包含在模板片段来自其他模板。
常见的用途是页脚、标题、菜单等。为了做到这一点,Thymeleaf需要我们定义包含可用的片段,我们可以通过使用th:fragment标签
userManager/editUser是要引入页面的路劲加上去掉后缀的名称
editUserFragment就是dom选择器，即为th:fragment中的值
通过使用th:include or th:replace or th:insert 属性之一都可以使用片段

对于片段的灵活运用，那么就是对它进行参数传递
定义一个片段

<meta charset="utf-8" pageEncoding="utf-8"/>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!-- 用户编辑模态框开始 -->
<div th:fragment="params(one,two)">
    <p th:text="${one}"></p>
    <p th:text="${two}"></p>
</div>

引用一个片段

<div th:replace="param::params(${dataOne},${dataTwo})"></div>

Thymeleaf入门

Thymeleaf介绍

Thymeleaf 基本语法

基础表达式

Thymeleaf 常用标签

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读