spring boot 模板引擎的直接使用--------Thymeleaf 模板引擎的使用

可以李

已于 2022-05-24 16:39:16 修改

阅读量470

点赞数 1

分类专栏：模板引擎 springboot thymeleaf 文章标签： java spring 安全

于 2020-07-19 17:12:54 首次发布

本文链接：https://blog.csdn.net/li1375942531/article/details/107447998

版权

模板引擎同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

springboot

2 篇文章 0 订阅

订阅专栏

thymeleaf

1 篇文章 0 订阅

订阅专栏

特征

Thymeleaf是用来开发Web应用和独立环境项目的服务端Java模版引擎

点这里知道 → 什么是模板引擎

为什么使用Thymeleaf

在之前最开始的时候我们使用的是JSP进行渲染页面，但是，Spring官方所支持的服务渲染模板中，并不包含jsp。

而是Thymeleaf和Freemarker等，而Thymeleaf与SpringMVC的视图技术，及SpringBoot的自动化配置集成非常完美，几乎没有任何成本，你只用关注Thymeleaf的语法即可。

Thymeleaf的特点

动静结合：Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
开箱即用：它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
多方言支持：Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
与SpringBoot完美整合，SpringBoot提供了Thymeleaf的默认配置，并且为Thymeleaf设置了视图解析器，我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别，就是在模板语法上有区别。

语法使用

这里就直接讲语法了，部署非常简单，只需要在springboot的pom文件中引入启动器就行

引入语法库

xmlns:th="http://www.thymeleaf.org

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{/img/logo.ico}" rel="SHORTCUT ICON">
    <title>首页</title>
</head>
<body>
<h1>首页</h1>

</body>
</html>

我们应该会注意到，该文件是HTML5，可以由任何浏览器正确显示，因为它不包括任何⾮HTML标签

我们也可以看到，这个模板并不是⼀个真正有效的HTML5文档，因为HTML5规范，是不允许在HTML标签属性中使⽤th：**这种⾮标准的属性。

事实上，我们在标签中添加了⼀个xmlns：th属性，这也不是HTML5标准：

那么如何使这个HTML5模板有效呢？

HTML5规范中要求⽤户⾃定义属性以data-前缀开头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link data-th-href="@{/img/logo.ico}" rel="SHORTCUT ICON">
    <title>persons</title>
</head>
<body>
    <span data-th-text="${msg}"></span>
</body>
</html>

这两种形式是完全等同的，并且是可互换的

语法

替换原内容

Thymeleaf 最为显著的特征是增强属性，任何属性都可以通过th:xx 来完成交互，例如th:src最终会覆盖src属性。

表达式

变量表达式：${…} → 用来获取属性值或者进行运算

<span data-th-text="${msg}"></span>
<div th:if="${personsIPage != null}" th:text="${personsIPage.getRecords()}"></div>
<div th:text="${1 == 2}"></div>

选择变量表达式：*{…} → 获取对象属性，但是可以先获取对象，是一种简写风格，推荐使用

<form id="userForm" th:object="${user}">
    <input id="id" name="id" th:value="*{id}"/>
    <input id="username" name="username" th:value="*{username}"/>
    <input id="password" name="password" th:value="*{password}"/>
</form>

消息表达式：＃{…} → 用于获取国际化语言翻译值，在获取的时候可以传值

<span data-th-text="#{home.welcome}"></span>
<!--如果传递值需要在properson文件中标识，多个值有索引区分-->
<!--home.welcome = i Beavering a nesta tiena de comestibles {0}!-->
<span data-th-text="#{home.welcome(${msg})}"></span>

链接表达式：@{…} → 直接拿到静态路径

<link th:href="@{/img/logo.ico}" rel="SHORTCUT ICON">
<script th:src="@{/jquery/jquery.js}"></script>
<link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">
<!--携带多参数-->
<a th:href="@{/order/details(id=3)}"></a>
<a th:href="@{/order/details(id=3,action='show_all')}"></a>

片段表达式：〜{…} → 选择页面片段到当前页面，可以是其他的页面，也是是当期页面的代码

使用方法：首先通过th:fragment定制片段，然后通过th:replace 填写片段路径和片段名。

<!--使用方法：首先通过 th:fragment 定制片段 ，然后通过 th:replace 填写片段路径和片段名-->

<!--  ~{ viewName } 表示引入完整页面-->
<div th:replace="~{页面的文件名字}"></div>
<!--  在指定页面寻找片段 其中selector可为片段名、jquery选择器等-->
<div th:replace="~{component::nav}"></div>
<!--当前页面引入-->
<div th:replace="~{::new}"></div>
<!--简写-->
<span th:replace="component::logo"></span>
<!--定义一个组件-->
<div th:fragment="new">当前页面的</div>

内置对象

七大基础对象：

${#ctx}: 上下文对象，可用于获取其它内置对象。

${#vars}: 上下文变量。

${#locale}：上下文区域设置。

${#request}: HttpServletRequest对象。

${#response}: HttpServletResponse对象。

${#session}: HttpSession对象。

${#servletContext}: ServletContext对象。

常用工具类

工具类中常用方法后边慢慢增加

#strings：字符串工具类

#lists：List 工具类

#arrays：数组工具类

#sets：Set 工具类

#maps：常用Map方法。

#objects：一般对象类，通常用来判断非空

#bools：常用的布尔方法。

#execInfo：获取页面模板的处理信息。

#messages：在变量表达式中获取外部消息的方法，与使用＃{…}语法获取的方法相同。

#uris：转义部分URL / URI的方法。

#conversions：用于执行已配置的转换服务的方法。

#dates：时间操作和时间格式化等。

#calendars：用于更复杂时间的格式化。

#numbers：格式化数字对象的方法。

#aggregates：在数组或集合上创建聚合的方法。

#ids：处理可能重复的id属性的方法。

条件判断

通常判断是否显示

<div th:if="${1==1}">
    <div>true的时候显示</div>
</div>
<!-- 取反-->
<div th:unless="${1 != 1}">
    <div>false的时候显示</div>
</div>

循环

常用来遍历集合

<!-- 遍历list集合-->
<ul th:each="person : ${personsIPage.getRecords()}">
    <li th:text="${person.toString()}"></li>
</ul>
<!-- 迭代过程状态变量使用-->
<!-- 如果缺省状态变量名，则迭代器会默认帮我们生成以变量名开头的状态变量 xxStat → personsIPageStat-->
<span th:each="personsIPage, start:${personsIPage.getRecords()}">
    index = [[${start.index}]]
    count = [[${start.count}]]
    size = [[${start.size}]]
    <br>
</span>

日期处理

可以通过时间工具类#dates来对日期进行格式化

<input type="text" th:value="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}"/>

内联写法

我们需要在js中使用服务端返回的变量的时候需要使用

标准格式为：[[${xx}]]

<script th:inline="javascript">
//可以读取服务端变量，也可以调用内置对象的方法。例如获取用户变量和应用路径：
    var user = [[${personsIPage}]];`
	var APP_PATH = [[${#request.getContextPath()}]];
    var LANG_COUNTRY = [[${#locale.getLanguage()+'_'+#locale.getCountry()}]];
</script>
<!--
内联表达式仅在页面生效，引入的js中是无效的，因为Thymeleaf只负责解析一级视图，不能识别外部标签JS里面的表达式。
-->

可以李

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
spring boot 模板引擎的直接使用--------Thymeleaf 模板引擎的使用

特征Thymeleaf是用来开发Web应用和独立环境项目的服务端Java模版引擎点这里知道 → 什么是模板引擎为什么使用Thymeleaf在之前最开始的时候我们使用的是JSP进行渲染页面，但是，Spring官方所支持的服务渲染模板中，并不包含jsp。而是Thymeleaf和Freemarker等，而Thymeleaf与SpringMVC的视图技术，及SpringBoot的自动化配置集成非常完美，几乎没有任何成本，你只用关注Thymeleaf的语法即可。Thymeleaf的特点动静结合：Th
复制链接

扫一扫

专栏目录