博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
新一代Java模板引擎Thymeleaf
阅读量:4089 次
发布时间:2019-05-25

本文共 4356 字,大约阅读时间需要 14 分钟。

 新一代模板引擎Thymeleaf 发表在

是一款用于渲染XML/XHTML/HTML5内容的模板引擎。类似JSP,Velocity,FreeMaker等,它也可以轻易的与等Web框架进行集成作为Web应用的模板引擎。与其它模板引擎相比,Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个Web应用。

Thymeleaf初探

相比于其他的模板引擎,Thymeleaf最大的特点是通过HTML的标签属性渲染标签内容,以下是一个Thymeleaf模板例子:

      Good Thymes Virtual Grocery    

Welcome to our grocery store!

这是一段标准的HTML代码,这也就意味着通过浏览器直接打开它是可以正确解析它的结构并看到页面的样子。相比去其他的模板引擎在指定的位置通过${}等表达式进行渲染,Thymeleaf则是一种针对HTML/XML定制的模板语言(当然它可以被扩展),它通过标签中的th:text属性来填充该标签的一段内容。上例中,<p th:text="#{home.welcome}">Welcome to our grocery store!</p>意味着<p>标签中的内容会被表达式#{home.welcome}的值所替代,无论模板中它的内容是什么,之所以在模板中“多此一举“地填充它的内容,完全是为了它能够作为原型在浏览器中直接显示出来。

标准表达式语法

变量

Thymeleaf模板引擎在进行模板渲染时,还会附带一个Context存放进行模板渲染的变量,在模板中定义的表达式本质上就是从Context中获取对应的变量的值:

Today is: 13 february 2011.

假设today的值为2015年8月14日,那么渲染结果为:<p>Today is: 2015年8月14日.</p>。可见Thymeleaf的基本变量和JSP一样,都使用${.}表示获取变量的值。

URL

URL在Web应用模板中占据着十分重要的地位,需要特别注意的是Thymeleaf对于URL的处理是通过语法@{...}来处理的。Thymeleaf支持绝对路径URL:

Thymeleaf

同时也能够支持相对路径URL:

  • 当前页面相对路径URL——user/login.html,通常不推荐这样写。
  • Context相关URL——/static/css/style.css

另外,如果需要Thymeleaf对URL进行渲染,那么务必使用th:hrefth:src等属性,下面是一个例子

view
view
view

几点说明:

  • 上例中URL最后的(orderId=${o.id})表示将括号内的内容作为URL参数处理,该语法避免使用字符串拼接,大大提高了可读性
  • @{...}表达式中可以通过{orderId}访问Context中的orderId变量
  • @{/order}是Context相关的相对路径,在渲染时会自动添加上当前Web应用的Context名字,假设context名字为app,那么结果应该是/app/order

字符串替换

很多时候可能我们只需要对一大段文字中的某一处地方进行替换,可以通过字符串拼接操作完成:

一种更简洁的方式是:

当然这种形式限制比较多,|...|中只能包含变量表达式${...},不能包含其他常量、条件表达式等。

运算符

在表达式中可以使用各类算术运算符,例如+, -, *, /, %

th:with="isEven=(${prodStat.count} % 2 == 0)"

逻辑运算符><<=',>===,!=都可以使用,唯一需要注意的是使用<,>`时需要用它的HTML转义符:

th:if="${prodStat.count} > 1"th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"

循环

渲染列表数据是一种非常常见的场景,例如现在有n条记录需要渲染成一个表格<table>,该数据集合必须是可以遍历的,使用th:each标签:

  

Product list

NAME PRICE IN STOCK
Onions 2.41 yes

Return to home

可以看到,需要在被循环渲染的元素(这里是<tr>)中加入th:each标签,其中th:each="prod : ${prods}"意味着对集合变量prods进行遍历,循环变量是prod在循环体中可以通过表达式访问。

条件求值

If/Unless

Thymeleaf中使用th:ifth:unless属性进行条件判断,下面的例子中,<a>标签只有在th:if中条件成立时才显示:

Login

th:unlessth:if恰好相反,只有表达式中的条件不成立,才会显示其内容。

Switch

Thymeleaf同样支持多路选择Switch结构:

User is an administrator

User is a manager

默认属性default可以用*表示:

User is an administrator

User is a manager

User is some other thing

Utilities

为了模板更加易用,Thymeleaf还提供了一系列Utility对象(内置于Context中),可以通过#直接访问:

  • #dates
  • #calendars
  • #numbers
  • #strings
  • arrays
  • 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)}

页面即原型

在Web开发过程中一个绕不开的话题就是前端工程师与后端工程师的写作,在传统Java Web开发过程中,前端工程师和后端工程师一样,也需要安装一套完整的开发环境,然后各类 IDE中修改模板、静态资源文件,启动/重启/重新加载应用服务器,刷新页面查看最终效果。

但实际上前端工程师的职责更多应该关注于页面本身而非后端,使用JSP,Velocity等传统的Java模板引擎很难做到这一点,因为它们必须在应用服务器中渲染完成后才能在浏览器中看到结果,而Thymeleaf从根本上颠覆了这一过程,通过属性进行模板渲染不会引入任何新的浏览器不能识别的标签,例如JSP中的<form:input>,不会在Tag内部写表达式。整个页面直接作为HTML文件用浏览器打开,几乎就可以看到最终的效果,这大大解放了前端工程师的生产力,它们的最终交付物就是纯的HTML/CSS/JavaScript文件。

更多文章请访问

你可能感兴趣的文章
骚操作:Uber 开源 "食人鱼" 工具,专吃落后代码!
查看>>
超酷炫!教你如何用 Python 实现动态可视化交互大屏图...
查看>>
数据惊人!揭秘网络黑色产业链到底有多赚钱...
查看>>
推荐一位 Python 大佬,全网 26 万粉丝,原创 300 多篇干货!
查看>>
百度重磅开源!这款高效率 AI 开发者工具,我爱了...
查看>>
WTF?GitHub 疑似遭受大范围中间人攻击?!
查看>>
天秀!只用 280 字,把一条推特长度的代码玩出花...
查看>>
天秀!GitHub 硬核项目:动漫生成器让照片秒变手绘日漫风!!!
查看>>
面试了 15 位来自 985/211 高校的 2020 届研究生,我熬夜赶出了这篇文章
查看>>
连苹果都在用的开源库:core-js 作者被判入狱 18 个月!
查看>>
没用过这些 IDEA 插件?怪不得你写代码头疼...
查看>>
这款超级搜索神器,我爱了!
查看>>
太赞了,RTC 2020 编程挑战赛终于正式开启!
查看>>
不用一行代码,就写了个爬虫!这款谷歌插件已经打包好了!
查看>>
Chrome,你够了!
查看>>
嫌官方文档太烂?TensorFlow 开源工具书,助你快速上手开发!
查看>>
Java 依然很牛逼
查看>>
从罗永浩抖音带货一晚成交 1.1 个亿,我看到了未来应届生这几个新求职机遇......
查看>>
这个 Python 代码自动补全神器搞得我卧槽卧槽的!
查看>>
卧槽!为鼓励民众居家隔离,国外这些计算机学习资源将免费对外开放!
查看>>