SpringBoot零基础集成Thymeleaf模板引擎

最新推荐文章于 2023-12-08 16:11:48 发布

祈望每天自然醒

最新推荐文章于 2023-12-08 16:11:48 发布

阅读量3.9k

点赞数

分类专栏： SpringBoot 文章标签： spring boot java html

本文链接：https://blog.csdn.net/yeahpeng11/article/details/120271970

版权

SpringBoot 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

先启动感受一下Thymeleaf的效果，之后在深入了解学习。

一、SpringBoot快速使用

环境：jdk1.8+，maven，IDEA，internet，… …

在Springboot中使用h2数据库依赖可实现。在 整合h2数据库+mybatis plus的项目（点击跳转搭建） 基础之上，再引入thymeleaf依赖，使用thymeleaf组件。

1.引入启动器

thymeleaf启动器依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

thymeleaf与解析JSP的InternalViewResolver类似，Thymeleaf默认会根据前缀和后缀来确定模板文件的位置：

默认前缀： classpath:/templates/
默认后缀： .html

所以如果我们返回视图： users ，会指向到 classpath:/templates/users.html。

2.Service

UserService

@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;

    public List<User> queryAll() {
        return this.userMapper.selectList(null); // 传入null 表示查询所有数据
    }

}

3.Controller

编写一个请求（all）

@Controller
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping("/all")
    public String all(Model model) {
        List<User> list = userService.queryAll();
        model.addAttribute("users", list);
        // 返回模板名称（就是classpath:/templates/目录下的html文件名）
        return "users";
    }

}

4.users.html

在HTML中使用thymeleaf，需要在html页面当中写入命名空间xmlns:th="http://www.thymeleaf.org"。

users.html是为了展示后端发送过来的数据，所以这里是要循环采用th:each循环标签显示数据。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <style type="text/css">
            table {
                border-collapse: collapse;
                font-size: 14px;
                width: 80%;
                margin: auto
            }
            table, th, td {
                border: 1px solid darkslategray;
                padding: 10px
            }
        </style>
    </head>
<body>
    <div style="text-align: center">
        <span style="color: #0a14ef; font-size: 30px">欢迎光临！</span>
        <hr/>
        <table class="list">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>邮箱</th>
            </tr>
            <tr th:each="user,status:${users}" th:object="${user}">
                <td th:text="${user.id}">-</td>
                <td th:text="*{name}">-</td>
                <td th:text="*{age}">-</td>
                <td th:text="${user.email}">-</td>
                <td>
                    <a th:href="@{/delete(id=${user.id})}">删除</a>
                    <a th:href="|/update/${user.id}|">修改</a>
                    <a th:href="'/approve/' + ${user.id}">审核</a>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

5.启动项目进行测试

访问localhost:8080/all，结果显示如下：

在这里插入图片描述

二、Thymeleaf详解

参看：https://www.jianshu.com/p/76d3d4cb2520

1.Thymeleaf介绍

Thymeleaf 是一个跟 FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下特点：

动静结合，Thymeleaf 在有网络和无网络的环境下皆可运行，无网络显示静态内容，有网络得到后台数据替换静态内容。
它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行。
与SpringBoot完美整合，springboot默认整合thymeleaf。可以快速的实现表单绑定、属性编辑器、国际化等功能。

2.thymeleaf模板缓存机制

Thymeleaf会在第一次对模板解析之后进行缓存，极大的提高了并发处理能力。但是这给我们开发时，修改页面后并不会立刻看到效果，我们开发阶段可以关掉模板缓存（yaml格式，去其他格式配置文件类似）

# 开发阶段关闭thymeleaf的模板缓存
spring:
	thymeleaf:
		cache: false

3.标准表达式语法

标准表发生语法分为四类：

变量表达式
选择或星号表达式
文字国际化表达式
URL表达式

3.1 变量表达式

变量表达式即OGNL表达式或者Spring EL表达式（在spring中用来获取model，attribute的数据）。格式：

${session.user.name}

它将以一个HTML标签的一个属性来表示：

<h5>变量表达式</h5>
<span>${text}</span>
<span th:text="${text}">你好 thymleaf</span>
<li th:each="book:${books}">

3.2 选择（星号）表达式

用一个预先选择的对象来代替上下文变量容器(map)来执行。格式

*{customer.name}

被指定object的由th:object属性定义，比如：

users.html

<tr th:each="user : ${users}" th:object="${user}">
    <td th:text="${user.id}">1</td>
    <td th:text="*{name}">张三</td>
    ...

3.3 文字国际化表达式

文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties)，用Key索引Value，还可以提供一组参数(可选)。格式：

{main.title}
{message.entrycreated(${entryId})}

在模板文件中：

<!--# 内嵌表达式 -->
<th th:text="#{header.address.city}">...</th>  
<th th:text="#{header.address.country}">...</th>

3.4 URL表达式

URL表达式指的是把一个有用的上下文或会话信息添加到URL，这个过程经常被叫做URL重写。格式：

@{/order/list}
@{/order/details(id=${orderId})}	传参
@{../documents/report}				相对路径

使用

<!-- 1.链接地址-->
<a href="main.html" th:href="@{/main}"/>

<!-- 2.传递参数-->
<a th:href="@{/delete(id=${user.id}, username=*{username})}">删除</a>

<!-- 3.文本替换-->
<a th:href="|/update/${user.id}|">修改</a>

<!-- 4.字符串拼接-->
<a th:href="'/approve/' + ${user.id}">审核</a>

问： ${…}和*{…}区别？

如果不考虑上下文的情况下，两者没有区别；星号语法评估在选定对象上表达，而不是整个上下文。下面两者等价：

<div th:object="${session.user}">
    <p>Name: <span th:text="*{name}">Sebastian</span></p>
    <p>Name: <span th:text="${session.user.name}">Sebastian</span></p>
</div>

4.常见用法

4.1 赋值、字符串拼接

<a th:href="|/update/${user.id}|">修改</a>
<a th:href="'/approve/' + ${user.id}">审核</a>

4.2 条件判断 If/Unless

th:if判断为假，不显示此标签。th:unless判断为假，显示此标签。

<h5>if指令</h5>
<a th:if="${users.size() > 0}">查询结果存在</a><br>
<a th:if="${users.size() <= 0}">查询结果不存在</a><br>
<a th:unless="${session.user != null}" href="#">登录</a><br>

也可以使用 (if) ? (then) : (else) 语法判断显示的内容。

4.3 each循环

<tr th:each="user, status : ${users}" th:object="${user}" th:class="${status.even} ?
'grey'">
    <td th:text="${user.id}">1</td>
</tr>

status称作状态变量，属性有：

index:当前迭代对象的index（从0开始计算）
count: 当前迭代对象的index（从1开始计算）
size:被迭代对象的大小
current:当前迭代变量
even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
first:布尔值，当前循环是否是第一个
last:布尔值，当前循环是否是最后一个

4.4 内联文本/JS

内联文本：[[…]] ，必须先用th:inline=”text/javascript/none”激活，th:inline可以在父级标签内使用，甚至作为body的标签。

<!-- 1.用内联文本显示model attribute-->
<h5>内联文本</h5>
<div>
    <h6 th:inline="text">[[${text}]]</h6>
    <h6 th:inline="none">[[${text}]]</h6>
    <h6>[[${text}]]</h6>
</div>

<!-- 1.用内联js-->
<h5>内联js</h5>
<script th:inline="javascript">
    var text = '[[${text}]]';
    alert(text);
</script>

尽量用th，少用内联。

4.5 内嵌变量

Thymeleaf还提供了一系列Utility对象（内置于Context中），内嵌变量可以通过#直接访问。

dates ： java.util.Date**的功能方法类。

calendars : 类似#dates，面向java.util.Calendar

numbers : 格式化数字的功能方法类

strings : 字符串对象的功能类，contains,startWiths,prepending/appending等等。

objects: 对objects的功能类操作。

bools: 对布尔值求值的功能方法。

arrays：对数组的功能类方法。

lists: 对lists功能类方法。

…

示例

<!-- 1.dates-->
<h5>内置变量</h5>
<h6 th:text="${#dates.createNow()}">获取当前日期</h6>

<!-- 2.stirngs-->
<h6 th:text="${#strings.substring(text, 6, 9)}">截取字符串</h6>
<h6 th:text="${#strings.length(text)}">获得长度</h6>
<h6 th:text="${#strings.randomAlphanumeric(6)}">随机字符串</h6>

5.使用thymeleaf布局

使用thymeleaf布局非常的方便。

在/resources/templates/目录下创建footer.html，内容如下

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="copy(title)">
    &copy;Copyright 2021
    <span th:text="${title}">title footer</span>
</footer>
</body>
</html>

在页面任何地方引入：

<!-- 1.保留自己的主标签，保留th:fragment的主标签-->
<div th:insert="footer :: copy('彭德华')"></div>

<!-- 2.不保留自己的主标签，保留th:fragment的主标签-->
<div th:replace="footer :: copy('彭德华')"></div>

之后效果就显现出来了。

三、未完待续… …

到这里为止，我都只是整理了关于Thymeleaf很少的一部分知识，以后有机会更新的！！！！

祈望每天自然醒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot零基础集成Thymeleaf模板引擎

文章目录一、SpringBoot快速使用1.引入启动器2.Service3.Controller4.users.html5.启动项目进行测试二、Thymeleaf详解1.Thymeleaf介绍2.thymeleaf模板缓存机制3.标准表达式语法3.1 变量表达式3.2 选择（星号）表达式3.3 文字国际化表达式3.4 URL表达式问： ${...}和*{...}区别？4.常见用法4.1 赋值、字符串拼接4.2 条件判断 If/Unless4.3 each循环4.4 内联文本/JS4.5 内嵌变量5.使用th
复制链接

扫一扫