小工具      在线工具  汉语词典  css  js  c++  java

Thymeleaf简介

# Java Web,java,spring boot 额外说明

收录于:102天前

Thymeleaf简介

Thymeleaf 是一种流行的模板引擎。模板引擎采用Java语言开发。模板引擎是一个技术术语,是一个跨领域、跨平台的概念。除了thymeleaf之外,Java语言体系下还有Velocity、FreeMarker等模板引擎。发动机,功能类似。

结合Spring Boot

  • 添加依赖项
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

  • 修改springboot配置文件
# 开发阶段,建议关闭thymeleaf的缓存
spring.thymeleaf.cache=false
#使用遗留的html5以去掉对html标签的校验
spring.thymeleaf.mode=LEGACYHTML5

thymeleaf会严格验证html中的标签。如果html标签缺少结束标签,thymeleaf就会报错。我们可以通过以下方式去掉thymeleaf的验证并添加依赖:

<dependency>
      <groupId>net.sourceforge.nekohtml</groupId>
      <artifactId>nekohtml</artifactId>
      <version>1.9.22</version>
  </dependency> 
  • 第一个百里香计划

编写html页面:在resources/templates里面创建一个index.html,填写下面内容,注意添加这个xmlns:th=“http://www.thymeleaf.org”:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> 
<head>
    <meta charset="UTF-8">
    <title>thymeleaf</title>
</head>
<body>
<h1 th:text="${name}">Spring boot集成 Thymeleaf</h1>
</body>
</html>

编写控制器控制器:

@Controller
public class ThymeleafCtrl {
    
    @GetMapping("/")
    public String hello(Model model){
    
        model.addAttribute("name","jack");
        return "index";
    }
}

注意:这里返回使用的默认前缀和后缀是thymeleaf模板。默认前缀是resources下的templates目录,后缀是html;其他情况,前缀是resources下的static目录,后缀是html。 maven构建工具是webapp和jsp。

== Springboot使用thymeleaf作为视图展示时,我们将模板文件放在resource/templates目录下,将静态资源放在resource/static目录下。 ==

thymeleaf表达式

  1. 标准变量表达式${},th:text用来获取controller中返回的数据。
//定义接口
@GetMapping("/thymeleaf/one")
    public String one(Model model){
    
        User user=new User();
        user.setUsername("zhansan");
        user.setPassword("123456");
        model.addAttribute("user",user);
        model.addAttribute("message","this is a message");
        return "one";
    }
<!--前端获取数据的的方法,通过getter,或者 Object.property -->
<p th:text="${user.getUsername()}">username</p>
<p th:text="${user.getPassword()}">password</p>
<p th:text="${user.username}">username</p>
<p th:text="${user.password}">password</p>

<!--如果这里直接接收user,就相当于toString,是一段字符串,拿不到具体数据-->

2.选择变量表达式*{},单独用和标准量一样,结合用相当于是先使用th:object将user对象取出,然后在里面的th:text中获取user对象中的属性值。

<table>
    <tr th:text="${user}">
        <td th:text="*{user.password}"></td>
        <td th:text="*{user.username}"></td>
    </tr>
</table>
  1. url表达式@{...}:将后台传入的数据拼接到url中
<!--引用绝对 URL-->
<script type="text/javascript" th:src="@{http://localhost:8080/hello.js}"></script>
	<!--等价于:-->
<script type="text/javascript" src="http://localhost:8080/hello.js"></script>

<!-----------------分割------------------>

<!--上下文相关的 URL-->
	<!--application.properties 中配置 Spring Boot 的上下文,以便于测试: server.servlet.context-path=/app引用路径:-->
<script type="text/javascript" th:src="@{/hello.js}"></script>
	<!--等价于:-->
<script type="text/javascript" src="/app/hello.js"></script>

<!------------------分割----------------->
<!--相对 URL-->
	<!--自动补上上下文-->
<script type="text/javascript" th:src="@{~/hello.js}"></script>

<!------------------分割------------------>

<!--带参数的 URL-->
<script type="text/javascript" th:src="@{/hello.js(name='javaboy',age=99)}"></script>
	<!--等价于:-->
<script type="text/javascript" th:src="/hello.js?name=javaboy&age=99"></script>
	<!--动态参数用标准表达式替换即可-->
  1. 国际化表达式,常用国际化属性:#{…} 用于获取国际化语言翻译值。即有关文件的信息,例如属性
# 在 resources 目录下新建两个文件:messages.properties
message = thymeleaf 中引用 message,系统会根据浏览器的语言环境显示不同的值:

<div th:text="#{message}"></div>
  1. 表达式变量

文本字面量:‘one text’, ‘Another one!’,…
数字字面量:0, 34, 3.0, 12.3,…
布尔字面量:true, false
Null字面量:null
字面量标记:one, sometext, main

文本可以使用+进行拼接。如果字符串包含变量,您还可以使用另一种称为文字替换的简单方法,即使用 |而不是‘…’ + ‘…’,如下:

<div th:text="'recived message is'+${message}"></div>
<div th:text="|recived message is ${message}|"></div>

算术运算有:+、-、*、/ 和 %。

布尔运算: 二元运算符:and、or 布尔 not(一元运算符):!、not

比较操作:表达式中的值可以使用>、<、>=和<=符号进行比较。 == 和 != 运算符用于检查相等性。

​ 它们也有符号:gt (>); lt(<); ge (>=);乐(<=);不是 (!)。还有 eq (==)、neq/ne (!=)。

三元运算: th:text="(username eq ‘zhansan’ ) ? true : false "

  1. 内置对象
// 注意: 下面的一个#是thymeleaf的语法,多个#是注释
#ctx:上下文对象。
#vars: 上下文变量。
#locale:上下文区域设置。
#request:(仅在 Web 上下文中)HttpServletRequest 对象。
#response:(仅在 Web 上下文中)HttpServletResponse 对象。
#session:(仅在 Web 上下文中)HttpSession 对象。
#servletContext:(仅在 Web 上下文中)ServletContext 对象。

##########

###### 在页面可以访问到上面这些内置对象:
<div th:text='${
    #session.getAttribute("name")}'></div>
###### 和在java中用法一致,通过.调用属性或方法。
	
##########

###### 还有以下内置对象

#execInfo:有关正在处理的模板的信息。
#messages:在变量表达式中获取外部化消息的方法,与使用#{...}语法获得的方式相同。
#uris:转义URL / URI部分的方法
#conversions:执行配置的转换服务(如果有)的方法。
#dates:java.util.Date对象的方法:格式化,组件提取等
#calendars:类似于#dates但是java.util.Calendar对象。
#numbers:用于格式化数字对象的方法。
#strings:String对象的方法:contains,startsWith,prepending / appending等
#objects:一般对象的方法。
#bools:布尔评估的方法。
#arrays:数组方法。
#lists:列表的方法。
#sets:集合的方法。
#maps:地图方法。
#aggregates:在数组或集合上创建聚合的方法。
#ids:处理可能重复的id属性的方法
  1. 遍历

数组/集合/Map/Enumeration/Iterator等的遍历也是很常见的需求。 Thymeleaf 通过 th:each 实现遍历。

<table border="1"> 
    <tr th:each="u : ${users}"> 
        <td th:text="${u.username}"></td> <td th:text="${u.address}"></td> 
    </tr>
</table>
<!--users 是要遍历的集合/数组,u 则是集合中的单个元素。-->

在遍历的时候,我们可能需要获取遍历的状态,Thymeleaf也对此提供了支持:

index:当前的遍历索引,从0开始。
count:当前的遍历索引,从1开始。
size:被遍历变量里的元素数量。
current:每次遍历的遍历变量。
even/odd:当前的遍历是偶数次还是奇数次。
first:当前是否为首次遍历。
last:当前是否为最后一次遍历。
  1. 分支语句

条件分支使用th:if,除了布尔类型,非0数字,字符都为true,其他状态为false。

<table border="1"> 
    <tr th:each="u : ${users}" th:if="${u.status}"> 
        <td th:text="${u.username}"></td> <td th:text="${u.address}"></td> 
    </tr>
</table>

th:unlessth:if完全相反。

选择分支使用th:swithth:case联合使用。

  1. 局部变数

在thymeleaf也可以定义局部变量,使用 th:with可以定义一个本地变量.

  1. 内嵌文本

除了使用th:text等,在属性中接收数据外,也可以将数据内联```[[…]]``:

<div>hello [[${user.username}]]</div>

[[...]]对应于 th:text(结果会是转义的 HTML),[(...)]对应于 th:utext,它不会执行任何的 HTML 转义。

内联方法有问题。使用Thymeleaf的优点之一就是我们可以直接在浏览器中看到显示效果,无需动态渲染。当我们使用属性配置时确实是这样,但是如果我们使用内联方法,各种表达式就会直接显示在静态网页中。

也可以在 js 或者 css 中使用内联th:inline="javascript":

<script th:inline="javascript"> var username=[[${
    user.username}]] console.log(username)</script>

  1. 引用静态资源

引用静态资源文件,CSS使用th:href,js使用使用th:src,链接URL使用th:href

  1. 百里香叶布局

通过th:fragrent定义代码片段

通过th:includeth:replace引用代码片段

  1. 常用关键词
关键词 功能 案件
th:id 替换ID <input th:id="'xxx' + ${collect.id}"/>
th:文本 文本替换 <p th:text="${collect.description}">description</p>
th:utext 支持html文本替换 <p th:utext="${htmlcontent}">conten</p>
th:对象 替换对象 <div th:object="${session.user}">
th:值 财产转让 <input th:value="${user.name}" />
th:与 变量赋值操作 <div th:with="isEven=${prodStat.count}%2==0"></div>
th:风格 设置风格 th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick 点击事件 th:onclick="'getCollect()'"
th:每个 财产转让 tr th:each="user,userStat:${users}">
th:如果 分析条件 <a th:if="${userId == collect.userId}" >
th:除非 与th:if判断相反 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:href 链接地址 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:开关 与 th:case 一起使用的多重选择 <div th:switch="${user.role}">
th:案例 th:switch 的一个分支 <p th:case="'admin'">User is an administrator</p>
th:片段 布局标签定义了一个代码片段,方便在其他地方引用 <div th:fragment="alert">
th:包括 布局标签,将内容替换到导入的文件中 <head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:替换 布局标签,将整个标签替换到导入的文件中 <div th:replace="fragments/header :: title"></div>
th:已选择 选定的选择框已选定 th:selected="(${xxx.id} == ${configObj.dd})"
th:源代码 图片地址介绍 <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
细线 可以使用变量来定义js脚本 <script type="text/javascript" th:inline="javascript">
th:动作 表格提交地址 <form action="subscribe.html" th:action="@{/subscribe}">
th:删除 删除属性 <tr th:remove="all">1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。
行动 表格提交地址 <form action="subscribe.html" th:action="@{/subscribe}">
th:删除 删除属性 <tr th:remove="all">1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。
th:属性 设置标签属性,多个属性可以用逗号分隔 比如th:attr="src=@{/image/aa.jpg},title=#{logo}",此标签不太优雅,一般用的比较少。
. . .

相关推荐

额外说明

Jmeter-安装、配置和使用

文章目录 前言 Jmeter 汉化配置 Jmeter 启动 Jmeter 使用 添加线程组 配置线程并发数 添加Http取样 配置取样 启动 前言 最近做压测,测试服务器接口性能,发现博客中少了 Jmeter 的配置和使用说明。特意增加补充。 Jmete

额外说明

查看Keil工程是用哪个版本编译的

keil4.72 版本信息 查看链接器版本 查看map文件,显示Linker是 V5.03 查看编译器版本 使用winhex打开一个.o文件,显示编译器是 V5.03 从上面可以看出这个工程是keil4.72编写与编译的

额外说明

MiniRBT中文小型预训练模型:结合了全词掩码(Whole Word Masking)技术和两段式知识蒸馏(Knowledge Distillation)技术,加快推理速度

项目设计集合(人工智能方向):助力新人快速实战掌握技能、自主完成项目设计升级,提升自身的硬实力(不仅限NLP、知识图谱、计算机视觉等领域):汇总有意义的项目设计集合,助力新人快速实战掌握技能,助力用户更好利用 CSDN 平台,自主完成项目设计升级,提升自

额外说明

漏洞复现-YXcms

YXcms 前台XSS 参考手册:https://www.kancloud.cn/yongheng/yxcms/308086 前台XSS <svg/onload=alert(1)> https://xz.aliyun.com/t/11008

额外说明

mq中消息消费的几种方式

mq系列文章 本章内容 从消费者的角度出发,分析一下消息消费的两种方式: push方式 pull方式 push方式 消息消费的过程: mq接收到消息 mq主动将消息推送给消费者(消费者需提供一个消费接口) mq属于主动方,消费者属于一种被动消费,一旦有消

额外说明

linux(ubuntu/debx(ubuntu/debian)的软件相关操作

关于权限: 对软件操作时常会涉及到权限,有两种方法: sudo -s切换到管理员账户 在每个命令前加sudo提权 关于apt和apt-get: apt是apt-get的进化版,apt加了进度条,另外apt还加入了apt-cache和apt-config的

额外说明

java使用rabbitmq

前言: 消息中间件,或消息队列的作用总结起来,可以用几个关键词描述,“异步”,“解耦”,“分布式”,“分流”,当然,其他的好处也是围绕这几个关键词展开论述。 分布式:在流行分布式开发的今天,随着开发的团队规模越来越大,业务分布范围越来越广,如何将开发工作

额外说明

【Python 随练】学习使用按位取反操作符 ~

题目: 学习使用按位取反操作符 ~ 简介: 在本篇博客中,我们将介绍Python中的按位取反操作符 ~ 的使用方法。按位取反操作用于对一个数的二进制表示进行位运算,并返回一个新的数值,每个位上的值取反。我们将通过详细的说明和代码示例来展示按位取反操作符的

额外说明

爬虫工具八爪鱼初体验

爬虫工具八爪鱼初体验 1、登录八爪鱼 2、尝试简易采集 3、选择【豆瓣】—— 豆瓣图书爬虫

额外说明

【Go】form表单读取

http中如何解析body参数 body 参数中存在多种类型,其中两种编码类型表单参数 multipart/form-data 这种编码类型适用于上传文件或包含大型二进制数据的表单。在 multipart/form-data 编码中,表单数据被拆分为多个

ads via 小工具