编程导航会员会员
登录/注册

模板引擎-Thymeleaf与Freemarker

模板引擎


模板引擎：将数据和页面显示分离。


模板文件 + 数据 --> 模板引擎 --> html


通过正则表达式来识别哪些是固定不变的模板，哪些是变化的数据，用已有的API（如：不同的表达式类型）把什么样的数据用什么格式来渲染进去，根据提供好的规则，模板引擎就可以解析出来。


JSP的局限性：


1）springboot内嵌容器时（打成jar包），不支持JSP。

如果要运行JSP需要打成war包，则需要使用外部容器。


2）undertow容器是不支持JSP的。


3）扩展性有限，对于一些默认处理，很难自定义。


4）在容器化技术（如docket）中，对JSP的使用也很繁杂。


因为JSP有这么多的局限性，所以才有了模板引擎


较早的模板引擎：velocity、freemarker

国人开发的模板：beetl


Thymeleaf


自然的模板，动静分离，是一个处理纯文本的模板引擎。


引入thymeleaf命名空间

<!--引入thymeleaf的命名空间，使用时才有提示--><html lang="en" xmlns:th="http://www.thymeleaf.org">


表达式


${} 变量表达式，引用一个变量

{} 选择变量表达式，当我们通过${}拿到一个对象时，可以通过{}拿到这个对象的属性值

#{} 消息表达式，可以通过配置文件拿到某些数据，还可以用来实现国际化效果

@{} 链接表达式

~{} 片段表达式，引用相同的代码片段


字符串的拼接

<p th:text="${person.name} + ' is ' + ${person.age}"></p><!--使用 | 将${}的内容替换成对象，其余的不变--><p th:text="|${person.name} is ${person.age}|"></p>


条件判断


if的使用

<p th:if="${msg=='yes'}">这是第一个msg的取值：</p><p th:text="${msg}" th:if="${msg=='yes'}"></p><p th:if="${msg=='no'}">这是第二个msg的取值：</p><p th:text="${msg}" th:if="${msg=='no'}"></p>

unless的使用

<p th:unless="${msg=='yes'}">这是第一个msg的取值：</p><p th:text="${msg}" th:unless="${msg=='yes'}"></p><!--当msg的值不等于no时进行展示，所以下面的会展示出来--><p th:unless="${msg=='no'}">这是第二个msg的取值：</p><p th:text="${msg}" th:unless="${msg=='no'}"></p>

switch的使用

<div th:switch="${num}"><p th:case="1">1</p><p th:case="2">2</p><p th:case="*">*</p></div>


for循环

th:each

<table><thead><tr><th>名字</th><th>年龄</th></tr></thead><tbody><tr th:each="data:${list}"><td th:text="${data.name}">name</td><td th:text="${data.age}">age</td></tr></tbody></table>


状态变量

默认命名是：参数名+Stat（如上的：dataStat），用来保存迭代状态

自定义的命名是：<tr th:each="data,status:${list}"> 此时状态变量名为status

状态变量的属性：

index 索引，从0开始

count 计数，从1开始

size 集合的大小

current 当前对象

first / last 布尔类型，是否是第一个/最后一个

even / odd 布尔类型，是否是 偶数 / 奇数 个

<table><thead><tr><th>名字</th><th>年龄</th><th>index</th><th>count</th><th>size</th><th>current</th><th>first</th><th>last</th><th>even</th><th>odd</th></tr></thead><tbody><tr th:each="data:${list}"><td th:text="${data.name}">name</td><td th:text="${data.age}">age</td><td th:text="${dataStat.index}">index</td><td th:text="${dataStat.count}">count</td><td th:text="${dataStat.size}">size</td><td th:text="${dataStat.current}">current</td><td th:text="${dataStat.first}">first</td><td th:text="${dataStat.last}">last</td><td th:text="${dataStat.even}">even</td><td th:text="${dataStat.odd}">odd</td></tr></tbody></table>


URL的使用

基础使用

<form th:action="@{/login}" method="post">
username:
<input type="text" name="username">
password:
<input type="password" name="password"><input type="submit" value="提交"></form>


绝对路径

1、基本用法

<a th:href="@{http://cn.bing.com}">外链到：bing</a><!--渲染效果为<a href="http://cn.bing.com">外链到：bing</a>-->

2、协议自动识别补全

**使用方法： 开头用 // **

以引用静态资源举例：

<script type="text/javascript" th:src="@{//code.jquery.com/jquery-3.4.1.min.js}"></script>

渲染结果：

<script type="text/javascript" src="[//code.jquery.com/jquery-3.4.1.min.js](http://code.jquery.com/jquery-3.4.1.min.js)"></script>


相对路径

1、上下文相关的URL

1）基本用法

<form th:action="@{/login}" method="post">

比如说：部署项目的地址 localhost:8080/demo

渲染结果为：

验证方式：在配置文件中增加server.servlet.context-path=/demo

2）引用静态资源的方式

先利用springboot的依赖配置

<dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.4.1</version></dependency>

接着在某个html文件中引用

<script type="text/javascript" th:src="@{/webjars/jquery/3.4.1/jquery.js}"></script>
3）参数的使用

请求中携带参数

a）携带一个参数时，如：/addPerson?id=1

在表达式中使用：@{/addPerson(id=1)}

单个参数的使用，用括号括起来

b）携带多个参数时，如：/addPerson?id=1&name=‘lsq’

在表达式中使用：@{/addPerson(id=1,name=‘lsq’)}

用括号将多个参数括起来，参数之间用逗号隔开

c）当参数是路径的一部分时，如： /addPerson/1?name=‘lsq’

在表达式中使用：@{/addPerson/{id}(id=1,name=‘lsq’)}

支持路径中包含变量 可以使用参数去替换

2、服务器相关URL

<a th:href="@{~/a.html}"></a>

通过 ~ 知道指定的是服务器某个地址，就不是和项目相关的，这样不同的项目可以访问同一个服务器下的某个文件。

渲染结果为：<a href="/a.html">

不会增加上下文路径（项目访问路径），可以访问同一个服务器上的不同项目，访问到固定地址。


补充：




内置对象/内嵌变量

工具类的使用：（使用方式是 加前缀#）

dates、calendars、numbers、strings、objects、bools、arrays、lists、sets、Maps

日期dates

日期格式化：#datas.format()

<!--dates的使用--><p th:text="${date}"></p><p th:text="${#dates.format(date,'yyyy-MM-dd HH:mm:ss')}"></p><!--拿到当前的时间--><p th:text="${#dates.createNow()}"></p><p th:text="${#dates.createToday()}"></p>

strings的使用

<!--strings的使用--><p th:text="${#strings.isEmpty(str)}"></p><p th:text="${#strings.length(str)}"></p><p th:text="${#strings.equals(str,'duing')}"></p>


表达式语言

OGNL：Object-Graph Navigation Language 对象视图导航语言

可以通过表达式语言 来获取Java的对象

在JavaWeb中使用较多

SpEL：基于Spring的表达式语言，提供给我们一种运行时对象的交互能力

本质都是 在视图层和控制层将数据建立联系的方式

<p th:text="${ 1 * 2 + 3 - 4}"></p><p th:text="${list[0].name}"></p><p th:text="${T(java.lang.Math).random()}"></p>


内联表达式

用两个中括号 [ [ ] ] 将一个引用的对象括起来，对象本身还是${} 获取，这样就能将展示的信息与其它字符串拼接起来了。（展示文本的时候简化逻辑）

凡是可以用th:text或th:utext显示的内容都可以用内联表达式来转换。

th:text => [[...]] 转义了，若含有标签，标签效果不起作用

th:utext => [(...)] 不转义，按照标签效果输出

如果文本需要展示含[[]]的数据，可以禁用内联表达式。

<p> 加油，[[${info}]] </p><p> 加油，<span th:text="${info}"></span> </p><!--禁用内联表达式--><p th:inline="none"> 加油，[[<span th:text="${info}"></span>]] </p>

内联JavaScript

当给JavaScript中传一些数据的时候，使用内联JavaScript

<script type="text/javascript" th:inline="javascript">
//var info = [[${info}]];
<!--内联js，同样支持动静分离,使用 /**/ 将动态数据引起来，在其后跟上静态数据，但这样使用之后原来的注释就不能用了，同时还有一个局限性：在外部js文件里不能使用，在html文件中的js代码生效 -->
var info = /*[[${info}]]*/ 123;
console.log(info);
</script>

类似js，同样支持css

<style th:inline="css"></style>


碎片代码

th:fragment，th:include，th:replace，th:insert

有些网页内容，需要在许多网页中使用，可以使用th:fragment在某个独立的（网页）标签中设置碎片代码，并为其命名。

在需要引入碎片代码的网页中使用th:include、th:replace、th:insert等引入

include，replace，insert的区别：

  1. include是只引进碎片代码的内容，不把其标签属性引入（即不引入碎片标签），保留原有的标签属性
  2. replace与include相反，只引入碎片代码的内容，引入碎片标签，不保留原有的标签
  3. insert是即引入碎片标签，也保留原有标签（当样式冲突时，碎片标签属性起作用，看网页源码可知）




Freemarker


一个用java编写的模板引擎，适合作为web项目中的视图层组件，是生成文本的工具。

ftl文件本质也是html格式的

freemarker区分大小写

ftl组成部分：文本（静态的），插值（动态的），标签，注释**<#-- -->**


使用步骤

1）引入freemarker依赖

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

2）增加自定义的配置文件

#旧的使用方式# 文件位置#spring.mvc.view.prefix=/templates# 文件后缀#spring.mvc.view.suffix=.ftl
#新的使用方式# 文件位置spring.freemarker.template-loader-path=classpath:/templates# 文件后缀spring.freemarker.suffix=.ftl

3）编写controller及ftl文件



字符串的使用

定义变量：<#assign info1 = ‘how are you?’>

字符串的拼接：

Hello ${info + info1}

字符串的内嵌函数：（调用时使用 字符串名? ）

${info1?substring(0,3)}

<#--左闭右开-->

${info1?length}

Hello ${info}

<#–定义变量–>
<#assign info1 = ‘how are you?’>
<#–字符串的拼接–>
Hello ${info + info1}
<#--字符串的内嵌函数-->
${info1?substring(0,3)}
<#--左闭右开-->
${info1?length}


条件判断

<#assign num = 666>
<#if num == 666>
<p>666</p>
<#elseif num == 888>
<p>888</p>
<#else>
<p>000</p>
</#if>
<#switch num>
<#case 666>
<p>666</p>
<#break>
<#case 888>
<p>888</p>
<#break>
<#default>
<p>000</p>
</#switch>


列表

<#assign myList = [1,3,5,7,10,9]>
<h5>无序数组：</h5>
<#list myList as item>
${item}
</#list>
<br><h5>有序数组：</h5>
<#list myList?sort as item>
${item}
</#list>
<br>
<#list [1,2,3] as item>
${item}
</#list>
<br>
<#list 1..3 as item>
${item}
</#list>
<br>
<#--元素的别名 缀上 _index 代表下标-->
<#list 1..3 as item>
${item_index} <#--获取索引-->
, ${item}<br>
</#list>
<#list 1..3 as item>
<#--判断是否有下一项-->
<#if item_has_next>
${item}
</#if>
</#list>


判断变量是否为空

<#--判断变量是否为空：通过 ! 来判断-->
<#--<#assign str = 'str'>-->
${str!"default"}


引入其它文件的值

在一个html中引入另一个html中的一些变量的值，不仅能读取，还能修改

<#import 'other.ftl' as otherFtl>
${otherFtl.name} <br>
<#--不仅可以读取到它的值，还能修改它的值-->
<#assign name = 'welcome ftl is here' in otherFtl>
${otherFtl.name}



更好的阅读体验可移步到：模板引擎-Thymeleaf与Freemarker - 编程导航 (code-nav.cn)


#模板引擎# #Thymeleaf# #Freemarker# #知识碎片# #CodeGeeX活动#

知识碎片
CodeGeeX活动
FreeMarker
0个评论
全部评论
点击登录，快来和大家讨论吧～
表情
图片
暂无评论
千帆
千帆
等级
内容推荐
更多
#知识碎片# 遍历文件夹以及子文件
17
Vue3快速实现文件上传OSS
23
前端项目分享：Q Maker——仿问卷星低代码项目
25
携手 2023，逐梦 2024：我的年终总结与新年规划
16
通过windows脚本执行打包操作具体可参考：https://www.yuque.com/alldsff/xvnqa3/pviirvgxm300uwuh?singleDoc# 《通过windows脚本执行打包操作》#知识碎片#
11
作者分享
更多
Day 21 ✅ 今天做了：继续学习AI智能体项目，了解MCP相关概念
2
Day 20 ✅ 今天做了：继续学习AI智能体的工具调用，了解SpringAI如何实现工具开发及几个主流工具开发（文件操作、联网搜索、网页抓取、终端操作、资源下载、PDF生成等）
1
Day 19 ✅ 今天做了：学习AI智能体项目的工具调用篇，了解什么是工具调用、工作原理、工具调用的流程。
2
Day 18 ✅ 今天做了：学习了解RAG的四种架构： 1、自纠错RAG：先检索⁡文档，生成初步回答，然后验证回答中的每个事⁡实陈述，发现错误就立即纠正并重新生成。 2、自省式RAG：解决了 “‌并非所有问题都需要⁡检索” 的问题。 3、检索树RAG：先把大问题分؜解成小问题，分别解决每个小‎问题，然后将答案整合起来。 4、多智能体RAG系统：组合拥有各‌类特长的智能体，通过⁡明确的通信协议交换信⁡息，实现复杂任务的协؜同处理。
1
Day 17 ✅ 今天做了： 1、了解RAG应用评估：检索质量、生成质量、系统性能、用户体验 RAG评估流程：生成评估数据集、运行评估检索过程、评估回答质量、综合分析与优化 2、看了一部分《Agentic Design Patterns》中文翻译版https://github.com/ginobefun/agentic-design-patterns-cn
1
下载 APP