thymeleaf教程

本教程涵盖了常见的前端操作，比如，判断，循环，引入模板，常用函数（日期格式化，字符串操作）下拉，js和css中使用，基本可以应对一般场景。

怎么使用？

前端html页面标签中引入如下：

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

表达式

简单表达式
- 可用值表达式(后台设置): ${…}
- 所有可用值表达式: *{…}
比如*{name} 从可用值中查找name，如果有上下文，比如上层是object，则查object中的name属性。
消息表达式: #{…}

国际化时使用，也可以使用内置的对象，比如date格式化数据
链接表达式: @{…}
用来配合link src href使用的语法
片段表达式: ~{…}
用来引入公共部分代码片段，并进行传值操作使用的语法。
文字
- 文本： ‘one text’,’another text’,…
- 数字： 1,2,1.2，…
- 布尔: true,false
- 空值：null
- 单词: something,main,name,…
文本操作
- 链接：+
- 替换：|The name is ${name}|
  html <a href="" th:href="@{|/name/${test.size()}|}">链接地址：</a> //渲染后的结果 <a href="/name/3">链接地址：</a>
数学操作
- 二元操作：+, - , * , / , %
- 一元操作: - （负）
布尔操作
- 一元 : and or
- 二元 : !,not
比较
- 比较：> , < , >= , <= ( gt , lt , ge , le )
- 等于：== , != ( eq , ne )
条件
- If-then: (if) ? (then)
- If-then-else: (if) ? (then) : (else)
- Default: (value) ?: (defaultvalue)
无操作
使用_ 来禁止转义。

支持的操作

html5的操作支持：

th:abbr          th:accept             th:accept-charset

th:accesskey             th:action             th:align

th:alt             th:archive             th:audio

th:autocomplete             th:axis             th:background

th:bgcolor             th:border             th:cellpadding

th:cellspacing             th:challenge             th:charset

th:cite             th:class             th:classid

th:codebase             th:codetype             th:cols

th:colspan             th:compact             th:content

th:contenteditable             th:contextmenu             th:data

th:datetime             th:dir             th:draggable

th:dropzone             th:enctype             th:for

th:form             th:formaction             th:formenctype

th:formmethod             th:formtarget             th:fragment

th:frame             th:frameborder             th:headers

th:height             th:high             th:href

th:hreflang             th:hspace             th:http-equiv

th:icon             th:id             th:inline

th:keytype             th:kind             th:label

th:lang             th:list             th:longdesc

th:low             th:manifest             th:marginheight

th:marginwidth             th:max             th:maxlength

th:media             th:method             th:min

th:name            th:onabort            th:onafterprint

th:onbeforeprint            th:onbeforeunload            th:onblur

th:oncanplay            th:oncanplaythrough            th:onchange

th:onclick            th:oncontextmenu            th:ondblclick

th:ondrag            th:ondragend            th:ondragenter

th:ondragleave            th:ondragover            th:ondragstart

th:ondrop            th:ondurationchange            th:onemptied

th:onended            th:onerror            th:onfocus

th:onformchange            th:onforminput            th:onhashchange

th:oninput            th:oninvalid            th:onkeydown

th:onkeypress            th:onkeyup            th:onload

th:onloadeddata            th:onloadedmetadata            th:onloadstart

th:onmessage            th:onmousedown            th:onmousemove

th:onmouseout            th:onmouseover            th:onmouseup

th:onmousewheel            th:onoffline            th:ononline

th:onpause            th:onplay            th:onplaying

th:onpopstate            th:onprogress            th:onratechange

th:onreadystatechange            th:onredo            th:onreset

th:onresize            th:onscroll            th:onseeked

th:onseeking            th:onselect            th:onshow

th:onstalled            th:onstorage            th:onsubmit

th:onsuspend            th:ontimeupdate            th:onundo

th:onunload            th:onvolumechange            th:onwaiting

th:optimum            th:pattern            th:placeholder

th:poster            th:preload            th:radiogroup

th:rel            th:rev            th:rows

th:rowspan            th:rules            th:sandbox

th:scheme            th:scope            th:scrolling

th:size            th:sizes            th:span

th:spellcheck            th:src            th:srclang

th:standby            th:start            th:step

th:style            th:summary            th:tabindex

th:target            th:title            th:type

th:usemap            th:value            th:valuetype

th:vspace            th:width            th:wrap

th:vspace            th:width            th:wrap

th:xmlbase            th:xmllang            th:xmlspace

布尔类型

th:async th:autofocus th:autoplay

th:checked th:controls th:declare

th:default th:defer th:disabled

th:formnovalidate th:hidden th:ismap

th:loop th:multiple th:novalidate

th:nowrap th:open th:pubdate

th:readonly th:required th:reversed

th:scoped th:seamless th:selected

判断操作

thymeleaf提供了几种判断，if、switch

后台数据

public class TestVo {

    private String name;

    private  Integer Score;

    private  Integer male;

    private Date birthday;

    public TestVo(String name, Integer score, Date birthday, Integer male) {

        this.name = name;

        Score = score;

        this.male = male;

        this.birthday = birthday;

    }

@RequestMapping("/test01")

    public String thymeleaf(ModelMap map){

        List<TestVo> testVos=new ArrayList<>();

        testVos.add(new TestVo("数学",10,new Date(),1));

        testVos.add(new TestVo("数学0001",70,new Date(),2));

        testVos.add(new TestVo("数学01",100,new Date(),3));

        map.put("test",testVos);

        return "/back/import/test";

    }

前端语法

  <table>

       <thead>

           <th></th>

       </thead>

       <tbody>

            <tr th:each="test:${test}">

                <!--判断成绩-->

                <td th:if="${test.Score} gt 0 and ${test.Score} lt 60">差</td>

                <td th:if="${test.Score} ge 60 and ${test.Score} le 70">中</td>

                <td th:if="${test.Score} gt 70 and ${test.Score} le 80">良</td>

                <td th:if="${test.Score} gt 80 and ${test.Score} le 90">优</td>

                <td th:if="${test.Score} gt 90 and ${test.Score} le 100">超级优秀</td>

            </tr>

            <br>

            <tr th:each="test:${test}">

                <!--判断成绩   一般只有两种情况的时候可以使用这种方式-->

                <td th:if="${test.Score} gt 0 and ${test.Score} lt 60">差</td>

                <!--除了这些条件之外的-->

                <td th:unless="${test.Score} gt 0 and ${test.Score} lt 60">及格</td>

            </tr>

            <tr th:each="test:${test}">

                <td th:switch="${test.male}">

                    <span th:case="1">男</span>

                    <span th:case="2">女</span>

                    <!--其他情况-->

                    <span th:case="*">未知</span>

                </td>

            </tr>

       </tbody>

   </table>

结果

差
中
超级优秀

差
及格
及格

男
女

模板操作

主要引入公共头部和底部相关代码使用，当然也可以其他地方使用
- 示例

底部模板代码

<!DOCTYPE html>

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

<body>

<div th:fragment="footer">

    © 2016 xxx

</div>

</body>

</html>

Springboot整合引入模块

<!--写入绝对路径即可引入 -->

<div th:include="/back/import/footer :: footer"></div>

文本和带格式文本

用来输入内容到标签内部，而不是attr中。分为th:text和th:utext两种，后者可以渲染文本中的标签。
- th:utext

    map.put("msgutext","<b>1111</b>");

<div th:utext="${msgutext}"></div>

结果：被渲染了

th:text

<div th:text="${msgutext}"></div>

结果:原样输出到页面。

外围包裹–block

有时候需要在代码外部加层条件，但写div之类的又影响样式，此情况下你可以用下面这种方式:

    <th:block th:with="score=${test.Score}">

        <td th:if="${score} ge 60">及格啦</td>

    </th:block>

循环

遍历元素

示例：

 <tr th:each="test:${test}">

    <td th:text="${test.Score}"></td>

 </tr>

循环下标判断

 List<String> list=new ArrayList<String>();

        list.add("1s");

        list.add("2s");

        list.add("3s");

        map.put("list",list);

<th:block th:each="mylist,iterStat:${list}">

    111

    <span th:text="${mylist}"></span>

        <th:block th:if="${iterStat.index le 1}">

            <span th:text="${mylist}"></span>

        </th:block>

</th:block>

常用操作

日期格式化

 <td th:text="${#dates.format(content.createDate,'yyyy-MM-dd HH:mm:ss')}"  ></td>

字符截取长度

<td th:if="${#strings.length(content.title) gt 5 } "  th:text="${#strings.substring(content.title,0,5) + '…'}"></td>

下拉选择

 <select name="subId" id="subId" lay-verify="" >

            <option value="">请选择</option>

            <option th:each="channelsub:${subchannels}" th:selected="${channelsub.id == subId}"    th:value="${channelsub.id}" th:text="${channelsub.name}"></option>

        </select>

js取值

有时候需要传递参数到js中，按如下方式：

  <script th:inline="javascript"  >

        var size= [[${test.size()}]];

        console.info(size)

    </script>

进阶
ps: 下面涉及到thymeleaf的语法出，可以替换成其他thymeleaf的语法来用

 <script th:inline="javascript"  >

        //尺寸等于3时打印日志..

        /*[# th:if="${test.size() eq 3}"]*/

        console.info('Welcome admin');

        /*[/]*/

    </script>

css取值

首先需要后台设置classname、align的值，之后按如下方式：

<style th:inline="css">

.[[${classname}]] {

text-align: [[${align}]];

}

</style>

结语

thymeleaf还有很多其他的语法，这里只是做个入门，方便上手，详细教程请参阅官方教程。当然也可以加群交流。

thymeleaf教程的更多相关文章

Thymeleaf教程【转】
作者:不做浮躁的人转自:http://www.blogjava.net/bjwulin/archive/2013/02/07/395234.html PS:其他推荐教程地址 http://blog. ...
thymeleaf教程-springboot项目中实现thymeleaf自定义标签
转载: http://www.9191boke.com/466119140.html 91博客网开始: 在使用thymeleaf的过程中有时候需要公共部分渲染页面,这个时候使用自定义标签实现自 ...
HTML5模板引擎 Thymeleaf 教程（转）
原文:http://www.open-open.com/lib/view/open1383622135586.html Thymeleaf是一个XML/XHTML/HTML5模板引擎,可用于Web与非 ...
Thymeleaf教程入门到深入1:基础介绍
1 介绍 1.1 简介 Thymeleaf是一个用于Web和独立Java环境的模板引擎,能够处理HTML.XML.JavaScript.CSS甚至纯文本.能轻易的与Spring MVC等Web框架进行 ...
thymeleaf 教程
html页面添加 <html xmlns:th="http://www.thymeleaf.org" > html原有标签都可以用thymeleaf标签替换 1.t ...
Thymeleaf+Spring整合
前言这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...
FreeMarker与Thymeleaf
FreeMarker 是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯 Java 编写,FreeMarker 被设计用来生成 HTML Web 页面,特别是基于 MVC 模式的应用程序,虽然 ...
Thymeleaf前后端传值页面取值与js取值
参考: Thymeleaf前后端传值页面取值与js取值 Thymeleaf 与 Javascript Thymeleaf教程 (十二) 标签内,js中使用表达式目的: 后端通过Model传值到前端 ...
spring+thymeleaf实现表单验证数据双向绑定
前言这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...

随机推荐

Objective-C中3种枚举比较及KVC两个小技巧
Objective-C中3种枚举比较及KVO两个小技巧一:oc的3种枚举 for循环 for in 枚举块如代码 NSUInteger totalCount = 10000; NSMutableA ...
Jquery重新学习之九[Ajax运用总结C]
前两篇文章主要介绍Jquery如何利用Ajax进行操作数据,主要介绍调用的方法:其中Jquery.ajax()是Jquery中最底层的方法:Jquery还定义的一个方法跟几个事件为Jquery.aja ...
IDEA中同窗口导入新的maven项目
创建请看这个:http://www.cnblogs.com/oskyhg/p/6649266.html 下边开始导入: 完毕. 结果展示:
如何连接oracle,mysql, SQL Server数据库（Java版）
先添加上连接oracle,MySQL的驱动路径和数据库连接URL: MySQL: final String DBDRIVER = "org.gjt.mm.mysql.Driver" ...
解析drupal_render()
drupal_render()函数接收一个结构化的数组作为参数,然后调用theme()输出HTML. function drupal_render(&$elements) { ... ... ...
【PHP】在目标字符串指定位置插入字符串
PHP如何在指定位置插入相关字符串,例子:123456789变为1_23_456789插入"_"到指定的位置! (可以用作换行或者其他处理) 插入示例,具体思路在代码中有注释: & ...
C# 判断是否是节假日
1.引用Newtonsoft.Json.dll 2. /// <summary> /// 判断是不是节假日,节假日返回true /// </summar ...
Linux的内存映像导出接口—kcore
发表于 2012-4-10 15:00 /proc/kcore文件提供了整个机器的内存映像,和vmcore不同的是,它提供了一个运行时的内存映像,为此和vmcore一样,内核提供了一个类似的但是稍 ...
Dapper 中使用sql in 关键字查询
传统 sql in 写法是 SELECT * FROM dbo.Users s WHERE s.id IN (1,2,3) 在dapper因为安全性,不能直接用sql接接要采用参数化, 开始我 ...
[翻译] C# 8.0 新特性 Redis基本使用及百亿数据量中的使用技巧分享（附视频地址及观看指南）【由浅至深】redis 实现发布订阅的几种方式 .NET Core开发者的福音之玩转Redis的又一傻瓜式神器推荐
[翻译] C# 8.0 新特性 2018-11-13 17:04 by Rwing, 1179 阅读, 24 评论, 收藏, 编辑原文: Building C# 8.0[译注:原文主标题如此,但内容 ...