springboot整合模板引擎

最新推荐文章于 2025-06-11 13:33:13 发布

原创最新推荐文章于 2025-06-11 13:33:13 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了SpringBoot中Freemarker和Thymeleaf的整合方法及使用技巧，包括依赖引入、配置、模板语法和常见标签应用，适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

springboot整合freemarker

引入依赖
在这里插入图片描述
在配置文件中加入

接下来创建文件夹

而index.ftl就是HTML

接下来的使用就是跟jsp是一样的

springboot整合thymeleaf

首先引入依赖
在这里插入图片描述
在配置文件中加入

此时controller

th：text为el表达式，表示h1的内容为表达式的值，这个也就是全后端分离开发时候使用，当前端人员开发时，由于不知道后端的数据，所以写了一个th测试，当后端人员使用时，他就可以直接加上像如图的th:text把后端的输入动态加入进去

thymeleaf常用标签的使用方法

基本的使用方式：
接下来看着段代码

<input th:id="${person.name}" th:name="${person.name}" th:value="${person.name}" th:xx="${person.name}"/>

编译后结果为：
在这里插入图片描述
对象引用方式：
我们除了可以${对象名.属性名}引用以为，还可以通过th:object来引用

<div th:object="${person}">
<!--注意使用了th:object，其内部就不在用$而是*-->
用户姓名：<input  th:value="*{name}" />
<br/>
用户生日：<input th:value="*{#dates.format(birthday,'yyyy-mm-dd')}" style="width:200px;">
</div>

结果：
在这里插入图片描述
form的使用

<form th:action="@{/post}" th:object="${person}" th:method="post">
<input type="text" th:field="*{name}">
<input type="submit">
</form>

th:field作用如图：
在这里插入图片描述
时间类型转换：
接下来看如下代码：

<input th:value="${person.birthday}" style="width:200px;">

结果：
在这里插入图片描述
这样的结果显然是不好的，我们除了可以后端修改也可以在前端加入#dates.format

<input th:value="${#dates.format(person.birthday,'yyyy-mm-dd')}" style="width:200px;">

结果：
在这里插入图片描述
text与utext：
这两个标签的区别在于text是原封不动的输出，而utext会根据内容进行输出
看如下代码：
在后端处

person.setDesc("<font color='blue'>你好帅</font>");

前端

<h1 class='h' th:text="${person.desc}">th</h1>
<h1 class='h' th:utext="${person.desc}">th</h1>

结果：
在这里插入图片描述

URL
传统的引入链接方式：

<a href='http://www.baidu.com'>网站链接</a>

thymeleaf方式为：

<a th:href='@{http://www.baidu.com}'>网站链接</a>

** <th:if> 的使用**

<div th:if="${person.age} == 18">十八岁的天空</div>
<div th:if="${person.age} gt 18">你老了</div>
<div th:if="${person.age} ge 18">大于等于</div> 
<div th:if="${person.age} lt 18">你很年轻</div>
<div th:if="${person.age} le 18">小于等于</div>

gt：大于18
ge：大于等于18
lt：小于18
le：小于等于18
th：unless：这个标签相当于 !th:if
** <th:selected>的使用**

<select>
<option>选择框</option>
<option th:selected="${person.name eq 'lee'}">lee</option>
<option th:selected="${person.name eq 'tiger'}">tiger</option>
</select>

这个标签作用在于会选择tiger为初始值（此时person.name=‘tiger’）
<th:each>的使用
相当于jstl的foreach
在这里插入图片描述
th:each的值第一个person相当于jstl的var，${uerList}相当于jstl的items
<th:switch>的使用

这里#{roles.manager}是html对静态资源的使用。
首先在配置文件配置如下：

在创建对应的文件