锐客网

  1. 首页 > it技术 > >

Spring|Spring Boot(四)（Thymeleaf 使用详解）

在上篇文章Spring Boot (二)：Web 综合开发中简单介绍了一下 Thymeleaf，这篇文章将更加全面详细的介绍 Thymeleaf 的使用。Thymeleaf 是新一代的模板引擎，在 Spring4.0 中推荐使用 Thymeleaf 来做前端模版引擎。
Thymeleaf 介绍 简单说，Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点：

  • 1.Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 Thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
  • 2.Thymeleaf 开箱即用的特性。它提供标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL表达式效果，避免每天套模板、改 Jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
  • 3.Thymeleaf 提供 Spring 标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
标准表达式语法 它们分为四类：
  • 1.变量表达式
  • 2.选择或星号表达式
  • 3.文字国际化表达式
  • 4.URL 表达式
变量表达式 变量表达式即 OGNL 表达式或 Spring EL 表达式(在 Spring 术语中也叫 model attributes)。如下所示：
${session.user.name}
它们将以HTML标签的一个属性来表示：

    • 选择(星号)表达式 选择表达式很像变量表达式，不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行，如下：
    *{customer.name}
    被指定的 object 由 th:object 属性定义：
    ... ... ...

    文字国际化表达式 文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties)，用 Key 索引 Value，还可以提供一组参数(可选).
    #{main.title} #{message.entrycreated(${entryId})}

    可以在模板文件中找到这样的表达式代码：
    ... ...
    ... ...

    URL 表达式 URL 表达式指的是把一个有用的上下文或回话信息添加到 URL，这个过程经常被叫做 URL 重写。
    @{/order/list}
    URL还可以设置参数：
    @{/order/details(id=${orderId})}
    相对路径：
    @{../documents/report}
    让我们看这些表达式：

    变量表达式和星号表达有什么区别吗？ 如果不考虑上下文的情况下，两者没有区别；星号语法评估在选定对象上表达，而不是整个上下文
    什么是选定对象？就是父标签的值，如下：
    Name: Sebastian.
    Surname: Pepper.
    Nationality: Saturn.

    这是完全等价于：
    Name: Sebastian.
    Surname: Pepper.
    Nationality: Saturn.

    当然，美元符号和星号语法可以混合使用：
    Name: Sebastian.
    Surname: Pepper.
    Nationality: Saturn.

    表达式支持的语法 字面（Literals）
    • 文本文字（Text literals）:'one text', 'Another one!',…
    • 数字文本（Number literals）:0, 34, 3.0, 12.3,…
    • 布尔文本（Boolean literals）:true, false
    • 空（Null literal）:null
    • 文字标记（Literal tokens）:one, sometext, main,…
    文本操作（Text operations）
    • 字符串连接(String concatenation):+
    • 文本替换（Literal substitutions）:|The name is ${name}|
    算术运算（Arithmetic operations）
    • 二元运算符（Binary operators）:+, -, *, /, %
    • 减号（单目运算符）Minus sign (unary operator):-
    布尔操作（Boolean operations）
    • 二元运算符（Binary operators）:and, or
    • 布尔否定（一元运算符）Boolean negation (unary operator):!, not
    比较和等价(Comparisons and equality)
    • 比较（Comparators）:>, <, >=, <= (gt, lt, ge, le)
    • 等值运算符（Equality operators）:==, != (eq, ne)
    条件运算符（Conditional operators）
    • If-then:(if) ? (then)
    • If-then-else:(if) ? (then) : (else)
    • Default: (value) ?:(defaultvalue)
      所有这些特征可以被组合并嵌套：
    'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))

    常#用th标签都有那些？
    关键字 功能介绍 案例
    th:id 替换id
    th:text 文本替换 【Spring|Spring Boot(四)（Thymeleaf 使用详解）】description
    th:utext 支持html的文本替换 conten
    th:object 替换对象
    th:value 属性赋值
    th:with 变量赋值运算
    th:style 设置样式 th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
    th:onclick 点击事件 th:onclick="'getCollect()'"
    th:each 属性赋值 tr th:each="user,userStat:${users}">
    th:if 判断条件
    th:unless 和th:if判断相反 Login
    th:href 链接地址 Login />
    th:switch 多路选择 配合th:case 使用
    th:case th:switch的一个分支 User is an administrator
    th:fragment 布局标签，定义一个代码片段，方便其它地方引用
    th:include 布局标签，替换内容到引入的文件 />
    th:replace 布局标签，替换整个标签到引入的文件
    th:selected selected选择框 选中 th:selected="(${xxx.id} == ${configObj.dd})"
    th:src 图片类地址引入 Spring|Spring Boot(四)（Thymeleaf 使用详解）
    文章图片
    th:inline 定义js脚本可以使用变量
    js 附加代码：
    /*[+ var msg = 'This is a working application'; +]*/

    js 移除代码：
    /*[- */ var msg = 'This is a non-working template'; /* -]*/

    6、内嵌变量 为了模板更加易用，Thymeleaf 还提供了一系列 Utility 对象（内置于 Context 中），可以通过 # 直接访问：
    • dates ： java.util.Date的功能方法类。
    • calendars : 类似#dates，面向java.util.Calendar
    • numbers : 格式化数字的功能方法类
    • strings : 字符串对象的功能类，contains,startWiths,prepending/appending等等。
    • objects: 对objects的功能类操作。
    • bools: 对布尔值求值的功能方法。
    • arrays：对数组的功能类方法。
    • lists: 对lists功能类方法
    • sets
    • maps
      …
      下面用一段代码来举例一些常用的方法：
    dates
    /* * Format date with the specified pattern * Also works with arrays, lists or sets */ ${#dates.format(date, 'dd/MMM/yyyy HH:mm')} ${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')} ${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')} ${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}/* * Create a date (java.util.Date) object for the current date and time */ ${#dates.createNow()}/* * Create a date (java.util.Date) object for the current date (time set to 00:00) */ ${#dates.createToday()}

    strings
    /* * Check whether a String is empty (or null). Performs a trim() operation before check * Also works with arrays, lists or sets */ ${#strings.isEmpty(name)} ${#strings.arrayIsEmpty(nameArr)} ${#strings.listIsEmpty(nameList)} ${#strings.setIsEmpty(nameSet)}/* * Check whether a String starts or ends with a fragment * Also works with arrays, lists or sets */ ${#strings.startsWith(name,'Don')}// also array*, list* and set* ${#strings.endsWith(name,endingFragment)}// also array*, list* and set*/* * Compute length * Also works with arrays, lists or sets */ ${#strings.length(str)}/* * Null-safe comparison and concatenation */ ${#strings.equals(str)} ${#strings.equalsIgnoreCase(str)} ${#strings.concat(str)} ${#strings.concatReplaceNulls(str)}/* * Random */ ${#strings.randomAlphanumeric(count)}

    使用 Thymeleaf 布局 Spring Boot 2.0 将布局单独提取了出来，需要单独引入依赖：thymeleaf-layout-dialect。
    org.springframework.boot spring-boot-starter-thymeleaf nz.net.ultraq.thymeleaf thymeleaf-layout-dialect

    定义代码片段
    © 2019

    在页面任何地方引入：

    th:insert 和 th:replace 区别，insert 只是加载，replace 是替换。Thymeleaf 3.0 推荐使用th:insert 替换 2.0 的 th:replace。
    返回的 HTML 如下：
    © 2019
    © 2019

    下面是一个常用的后台页面布局，将整个页面分为头部，尾部、菜单栏、隐藏栏，点击菜单只改变 content 区域的页面
    Header left sidebarfooter

    任何页面想使用这样的布局值只需要替换中见的 content 模块即可
    ...

    也可以在引用模版的时候传参

    layout 是文件地址，如果有文件夹可以这样写fileName/layout:htmlhead，htmlhead 是指定义的代码片段 如th:fragment="copy"
    文章示例项目
    示例代码-github
    示例代码-码云
    文章内容已经升级到 Spring Boot 2.x
    参考 thymeleaf官方指南
    新一代Java模板引擎Thymeleaf
    Thymeleaf基本知识
    thymeleaf总结文章
    Thymeleaf 模板的使用
    thymeleaf 学习笔记
    转载自：http://www.ityouknow.com/springboot/2016/05/01/spring-boot-thymeleaf.html

      推荐阅读


      上一篇：【20180608晨读感悟】读书，一辈子都应该坚持的事情

      下一篇：如果你的女人出现了这九个“当”，你离失去她已经不远了