Thymeleaf新手使用教程

最新推荐文章于 2024-04-19 22:19:55 发布

yinger_0131

最新推荐文章于 2024-04-19 22:19:55 发布

阅读量2k

点赞数

分类专栏： java 文章标签： thymeleaf

本文链接：https://blog.csdn.net/yinger_0131/article/details/82189752

版权

java 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Thymeleaf 基本语法

在 html 文件中使用 Thymelead 标签需要在头文件中加入,否则无法使用它的标签

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

**1 基础表达式
1.1 变量表达式 ${……}**

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

以上是 html 内容，以下是 java 后台传送数据到前台

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

1.2 选择/星号表达式 *{……}

<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>

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

1.3 文字国际化表达式 #{……}
Thymeleaf文字国际化需要springmvc的支持
1. 在资源目录 resources 下创建文件夹 spring-i18n 作为国际化文件的根目录，创建各种语言的 .properties文件存储需要使用的内容
2. 在 spring 配置文件中加入资源

<!--配置thymeleaf文字国际化 -->
<bean id="messageSource"
     class="org.springframework.context.support.ResourceBundleMessageSource">
   <!-- 资源文件路径 -->
   <property name="basename" value="spring-i18n/messages"></property>
   <property name="defaultEncoding" value="UTF-8"/>
</bean>

3.properties 文件内容

message.title=\u8fd9\u662f\u4e00\u4e2a\u6807\u9898

4.加入 html 代码

<h1 th:utext="#{message.title}">Hello World</h1>

@RequestMapping("i18nExpression")
public String i18nExpression(){
    return "i18n_expression";
}

1.4URL表达式 @{……}

**URL点击 ：<a href="details.html" th:href="@{myThymeleaf(orderId=${id})}">view</a></br>
相对路径：<img th:width="100px" th:src="@{../images/{imageUrl}(imageUrl=${image})}"></br>
绝对路径：<img th:width="100px" th:src="@{/images/{imageUrl}(imageUrl=${image})}"></br>
<!-- 无效链接 -->
其他路径：<img th:width="100px" th:src="@{images/{imageUrl}(imageUrl=${image})}">**

@RequestMapping("urlExpression")
public String urlExpression(Model model){
    model.addAttribute("id",10);
    model.addAttribute("image","001.jpg");
    return "url_expression";
}

2 Thymeleaf 常用标签
2.1 普通标签
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}"></br>
    <!-- 引用javascript标签 -->
    <script type="text/javascript" src="../js/myThymeleaf.js" th:src="@{/js/myThymeleaf.js}"></script>
</body>
</html>

2.2 常用标签

<!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>

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

<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>

2.3 循环、IF、Switch

<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>

项目中被用到的 Thymeleaf 标签 - 片段（th:fragment）

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

userCenter.html 引用一个片段

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

yinger_0131

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Thymeleaf新手使用教程

Thymeleaf 基本语法在 html 文件中使用 Thymelead 标签需要在头文件中加入,否则无法使用它的标签&lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"&gt;**1 基础表达式 1.1 变量表达式 ${……}**姓名：...
复制链接

扫一扫