Thymeleaf入门之常用的基本语法

最新推荐文章于 2024-05-29 17:20:28 发布

龟兔赛跑

最新推荐文章于 2024-05-29 17:20:28 发布

阅读量441

点赞数

分类专栏： Thymeleaf前端框架文章标签： Thymeleaf使用 Thymeleaf常用

本文链接：https://blog.csdn.net/qq_42908340/article/details/94382857

版权

Thymeleaf前端框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Thymeleaf入门之常用的基本语法

Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

创建HTML文件时写
<html xmlns:th="http://www.thymeleaf.org">
这样，下文才能正确使用th:*形式的标签！

1. 展示type为text文本、标签为p、span 的数据 th:value

<input type="text" class="form-control" name="coreName" th:value="${coreName}" readonly>

2 . 展示 textarea 文本域数据 th:text

<textarea id="riskRemark" class="form-control risk" th:text="${signProject.riskRemark}" name="riskRemark"></textarea>

3. 展示时间格式化数据例如 2018-09-09 02:03:02 展示成 2018-09-09

<td th:if="${#lists.isEmpty(item.repaymentTime)}" th:text=null></td>
<td th:if="${not #lists.isEmpty(item.repaymentTime)}" th:text="${#dates.format(item.repaymentTime,'yyyy-MM-dd HH:mm:ss')}"></td>
//上面一行必须写，判断是否为空，若为空，则使用null在表格中的一列占位，不判断就会报错，空指针

4. 展示数字千分位数据例如387524 展示成397,524

 <input id="account" placeholder="请输入(元)" name="account"
       class="form-control" type='text' th:value="${#numbers.formatDecimal(borrowApplyVO.account,3,'COMMA',2,'POINT')}" readonly>

5. 展示拼接数据例如a=3 b=天如何展示成3天

 th:value="${midProductVO.productTimeLimit} +'天'"

6. 后台传递过来的list数据前台怎么判断是否为空

 <td th:if="${#lists.isEmpty(item.repaymentTime)}" th:text=null></td>

7. 后台传递一个判断标识前台怎么根据这个做展示例如flag=1时展示到期日 flag=2时展示期限

<label class="col-sm-2 control-label">是否上市：</label>
<div class="col-sm-3" th:unless="${customCompanyDo.companyLaunch}">
    <input value="" name="companyLaunch" class="form-control" type="text">
</div>
<div class="col-sm-3" th:if="${customCompanyDo.companyLaunch} eq ''">
    <input value="" name="companyLaunch" class="form-control" type="text">
</div>
<div class="col-sm-3" th:if="${customCompanyDo.companyLaunch} eq 0">
    <input value="是" name="companyLaunch" class="form-control" type="text">
</div>
<div class="col-sm-3" th:if="${customCompanyDo.companyLaunch} eq 1">
    <input value="否" name="companyLaunch" class="form-control" type="text">
</div>

注释：上述分别是customCompanyDo.companyLaunch等于0、1、空、以及不是这三种情况的数据，th:unless于th:if恰好相反，只有表达式中的条件不成立，才会显示其内容。

8. 后台传递的List里若DO中的属性age为null 怎么展示
方法一：

<label class="col-sm-3 control-label">选择产品模板：</label>
 <div class="col-sm-8">
     <select data-placeholder="--选择类别--" name="templateId" id="type"  class="form-control chosen-select" tabindex="2"  onchange="getfocus()" required>
         <option value="">请选择</option>
         <option th:each="list : ${list}" th:value="${list.id}" th:text="${list.name}" th:selected="${list.id eq templateId}"> </option>
     </select>
</div>

方法二：

<select data-placeholder="--选择类别--" name="type" id="type" class="form-control chosen-select" tabindex="2">
    <option value="">-- 选择类别 --</option>
    <option th:each="oaNotifyType : ${oaNotifyTypes}" th:value="${oaNotifyType.value}" th:text="${oaNotifyType.name}" th:if="${oaNotifyType.remarks == checked}"  th:selected="selected"></option>
</select>

注释：selected中可以放一个等值判断"${list.id eq templateId}"，也可以放“selected”

9. 使用thymeleaf如何循环？ th:each

<select data-placeholder="--选择类别--" name="type" id="type" class="form-control chosen-select" tabindex="2">
    <option value="">-- 选择类别 --</option>
    <option th:each="oaNotifyType : ${oaNotifyTypes}" th:value="${oaNotifyType.value}" th:text="${oaNotifyType.name}" th:if="${oaNotifyType.remarks == checked}"  th:selected="selected"></option>
</select>

注释：

（01）oaNotifyTypes是后台传过来的，前后台参数必须同名，使用oaNotifyType
（02）获取属性，th:value = “${oaNotifyType.value}”用来存储数据
th:text="${oaNotifyType.name}"用来在前台展示
（03）判断th:if="${oaNotifyType.remarks == checked}"， oaNotifyType
的属性remarks值为checked时，将oaNotifyType 在下拉框中默认选中

10. 使用thymeleaf如何使用switch？ th:switch

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p>
</div>

11. 使用thymeleaf如何使用超链接？ th:href/th:src
用来配合link、src、href使用的语法，类似的标签有:th:href和th:src

使用情况一：用于引入css文件 @{…}

  `<link href="/css/plugins/select2/select2.min.css"  th:href="@{/css/plugins/select2/select2.css}"    rel="stylesheet">`

使用情况二：跳转超链接 ${…}

  `<a href="graph_echarts.html" class="J_menuItem" th:href="${cmenu.attributes.url}">
<i class="fa fa fa-bar-chart-o" th:class="${cmenu.attributes.icon}"></i>
<span class="nav-label" th:text="${cmenu.text}">基础信息</span>
</a>`

12. 使用thymeleaf跳转页面？ th:onclick

<td id="href"><a href="javascript:void(0)"  th:onclick="'javascript:subRepayment('+${item.assetId}+')' "th:text="${item.assetName}" style="color: #1C86EE;"></a></td>//点击超链接，跳转到js页面中的subRepayment方法

龟兔赛跑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf入门之常用的基本语法

ThymeleafThymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf ...
复制链接

扫一扫

专栏目录