首页 > 其他分享 >Thymeleaf模板引擎入门

Thymeleaf模板引擎入门

时间:2023-12-07 10:33:06浏览次数:26  
标签:入门 Thymeleaf thymeleaf 引擎 模板 th 表达式

一、什么是模板引擎

我们看一下百度百科怎么介绍的:

模板引擎是为了使程序实现界面与数据分离,业务代码与逻辑代码的分离,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。

我的理解就是我们获取到接口的数据后,通过规定的模板进行填充,生成 HTML 等格式代码,Thymeleaf 既可以直接使用浏览器打开,查看页面的静态效果,也可以通过 Web 应用程序进行访问,查看动态页面效果。

JAVA中常见的模板引擎有以下几种:

  • FreeMarker:FreeMarker是一款流行的模板引擎,它使用简单,支持多种数据源,能够生成HTML、XML等多种格式的文档。
  • Thymeleaf:Thymeleaf是一款自然模板语法的模板引擎,能够处理HTML、XML、JavaScript、CSS等多种格式,支持国际化。
  • Velocity:Velocity是一款快速而灵活的模板引擎,具有高性能和可扩展性。
  • JSP:JSP是Java应用程序中广泛使用的模板技术,它使用Java代码和HTML混合的方式生成动态页面。

基本使用

我们要使用 thymeleaf 需要在html 标签中声明名称空间:

<html lang="en" xmlns:th="http://www.thymeleaf.org">

二、Thymeleaf语法规则

1、表达式语法

Thymeleaf 模板引擎支持多种表达式

1.1 变量表达式:$

变量表达式一般用于获取我们的对象及属性。
比如我们有一个 user 对象如下:

{
  "username": "snow",
  "age": 18
}

我们可以通过变量表达式来获取对象的属性值

<h5>${user.username}</h5>

${ }表达式还可以获取ctx,vars,locale,request,response,session,servletContext内置对象。
例如:

${#session.getAttribute('map')}
${session.map}
1.2 选择变量表达式:*

与变量表达式类似,不过可以配置 th:object使用, th:object 存储一个对象后,我们可以在其后代中使用选择变量表达式({...})获取该对象中的属性,其中,“”即代表该对象。

<form action="#" th:action="@{/user/save}" th:object="${user}" method="post">
    <input type="text" th:field="*{username}" />
    <input type="text" th:field="*{age}" />
    <button type="submit">保存</button>
</form>
1.3 链接表达式:@

不管是静态资源的引用,form表单的请求,凡是链接都可以用@{…}。它可以自动根据当前的上下文环境,生成相对或绝对的URL地址,即便项目名变了,依然可以正常访问。

可以引入css、调用接口等操作:

<link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">

<a th:href="@{/user/list}">用户列表</a>

<!-- 还可以携带参数 -->
<a th:href="@{/user/edit(id=${user.id})}">编辑用户</a>
1.4 国际化表达式:#

一般用于国际化的场景。

1.5 片段引用表达式:~

片段引用表达式用于在模板页面中引用其他的模板片段

<div th:insert="fragments/header :: navigation"></div>

2、th属性

thymeleaf提供了很多的 th 属性,可以实现各种功能。这里就列举一下常用的 th 属性。

属性 描述 示例
th:text 文本替换 <h1 th:text="hello,bianchengbang" >hello</h1>
th:value 替换 value 属性 <input th:value = "${user.name}" />
th:if 根据条件判断是否需要展示此标签 <a th:if ="${userId == 1}">
th:each 遍历,支持 Iterable、Map、数组等
th:src 替换 src 属性 <img th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" />
th:action 替换表单提交地址 <form th:action="@{/user/login}" th:method="post"></form>

三、SpringBoot整合Thymeleaf

SpringBoot整合Thymeleaf比较方便,我们只需要引入 thymeleaf 依赖即可。

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

thymeleaf 源码中默认html存储路径为resources/templates目录,我们可以在 yaml 文件中进行配置

spring:
  thymeleaf:
    prefix: classpath:/static/
    suffix: .html

参考链接:
https://c.biancheng.net/spring_boot/thymeleaf.html

标签:入门,Thymeleaf,thymeleaf,引擎,模板,th,表达式
From: https://www.cnblogs.com/Snowclod/p/17880941.html

相关文章

  • P6入门:项目初始化9-项目详情之资源Resource
    前言使用项目详细信息查看和编辑有关所选项目的详细信息,在项目创建完成后,初始化项目是一项非常重要的工作,涉及需要设置的内容包括项目名,ID,责任人,日历,预算,资金,分类码等等,在接下来的博文中,我将结合官方帮助介绍这些基本设置,希望给对P6感兴趣的人带来帮助。涉及P6 项目详情设置包括:G......
  • P6入门:项目初始化5-项目支出计划Spending Plan
    前言使用项目详细信息查看和编辑有关所选项目的详细信息,在项目创建完成后,初始化项目是一项非常重要的工作,涉及需要设置的内容包括项目名,ID,责任人,日历,预算,资金,分类码等等,在接下来的博文中,我将结合官方帮助介绍这些基本设置,希望给对P6感兴趣的人带来帮助。涉及P6 项目详情设置包括:G......
  • P6入门:项目初始化3-项目详情之记事本Notebook
    前言使用项目详细信息查看和编辑有关所选项目的详细信息,在项目创建完成后,初始化项目是一项非常重要的工作,涉及需要设置的内容包括项目名,ID,责任人,日历,预算,资金,分类码等等,在接下来的博文中,我将结合官方帮助介绍这些基本设置,希望给对P6感兴趣的人带来帮助。涉及P6 项目详情设置包括:G......
  • P6入门:项目初始化4-项目详情之预算日志及汇总Budget
    前言使用项目详细信息查看和编辑有关所选项目的详细信息,在项目创建完成后,初始化项目是一项非常重要的工作,涉及需要设置的内容包括项目名,ID,责任人,日历,预算,资金,分类码等等,在接下来的博文中,我将结合官方帮助介绍这些基本设置,希望给对P6感兴趣的人带来帮助。涉及P6 项目详情设置包括:G......
  • Golang flag包:命令行参数解析入门代码示例
    以下是一个示例代码,展示了如何使用flag包处理命令行参数:packagemainimport( "flag" "fmt")funcmain(){ //定义命令行参数对应的变量 varnamestring varageint varisAdminbool //绑定命令行参数与变量 flag.StringVar(&name,"name","","En......
  • 科研绘图与学术图表绘制:从入门到精通
    ......
  • Spring入门03Spring核心概念、DI、IOC入门案例
    Spring核心概念IoC/DIIoC容器Bean IOC入门案例IoC入门案例思路分析  IoC入门案例实现   DI入门案例 DI入门案例思路分析DI入门案例实现  ......
  • ctfshow-web入门-信息收集
    Web1:​ Ctrl+U或者F12查看页面源代码.Web2:​ JS禁用F12,Ctrl+U查看源代码Web3:​ 前端未泄露,抓包查看返回包发现FlagWeb4:​ robots.txt文件泄露Web5:​ phps源码泄露,phps存放着php源码,可通过尝试访问/index.phps读取,或者尝试扫描工具扫描读取phps即为PHPSource。......
  • 【SpringBootWeb入门-6】请求响应-请求参数-数组集合参数&Json参数&路径参数
    这篇我们接着上一篇的请求参数来讲解另外几个常见参数的接收以及封装:数组集合参数、Json参数、路径参数。数组集合参数1、数组参数:请求参数名与形参数组名称相同且请求参数为多个,定义数组类型形参即可接收参数在Postman接口测试新建测试,获取请求数组参数type。然后新建参数处......
  • 因果推断入门14-16 乘积分解法则、混淆变量、习题
    https://www.bilibili.com/video/BV1Mv411v7zC/?p=14&spm_id_from=pageDriver前面的章节我们学了一些基本个因果图模型,以及一些基本的规则。我们可以根据这些规则,把复杂的问题进行化简;当我们知道图的结构以及随机变量,和随机变量之间的联合分布;联合分布可以用其密度函数来表达,如......