Themleaf模板基础语法使用介绍
Themleaf模板基础语法使用介绍
项目首页地址:https://blog.csdn.net/weixin_45019350/article/details/108869025
一、 Thymeleaf 是什么
Thymeleaf是一个模板引擎,主要用于编写动态页面。
Thymeleaf是SpringBoot官方所推荐使用的动态页面技术。
二、Thymeleaf的作用
问题:动态页面技术已经有JSP,为什么还要用Thymeleaf?
主要原因包括以下几点:
- 使用模块引擎来编写动态页面,让开发人员无法在页面上编写 Java 代码,使得java代码和前端代码绝对的分离。
- SpringBoot默认整合Thymeleaf,不需要任何配置直接整合成功,打jar包发布不需要做任何配置。
- Thymeleaf相对于其他的模板引擎(如:Freemaker、velocity),有强大的工具支持。
- 相对于Jsp页面,执行效率高。
总结:所有JSP可以使用的地方,Thymeleaf都可以使用,并根据Thymeleaf的优势,可以得出结论:Thymeleaf的作用就是取代JSP。
三、Springboot整和Thymeleaf
1、添加Thymeleaf依赖
要想使用Thhymeleaf,首先要在pom.xml文件中单独添加Thymeleaf依赖。
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2、自定义Thymeleaf文件配置
注: Spring Boot默认存放模板页面的路径在src/main/resources/templates或者src/main/view/templates,这个无论是使用什么模板语言都一样,当然默认路径是可以自定义的,不过一般不推荐这样做。另外Thymeleaf默认的页面文件后缀是.html。
也可以在配置文件中指定自己的模板,这里通过yml配置修改:
spring:thymeleaf:prefix: classpath:/templates/check-template-location: truecache: falsesuffix: .htmlencoding: UTF-8content-type: text/htmlmode: HTML5
prefix:指定模板所在的目录
check-tempate-location: 检查模板路径是否存在
cache: 是否缓存,开发模式下设置为false,避免改了模板还要重启服务器,线上设置为true,可以提高性能。
encoding&content-type:这个大家应该比较熟悉了,与Servlet中设置输出对应属性效果一致。
mode:这个还是参考官网的说明吧,并且这个是2.X与3.0不同。
四、Thymeleaf基本语法介绍
Thymeleaf的主要作用是把model中的数据渲染到html中,因此其语法主要是如何解析model中的数据。
1、属性介绍
在使用Thymeleaf时页面要引入名称空间: xmlns:th=“http://www.thymeleaf.org”
html有的属性,Thymeleaf基本都有,而常用的属性大概有七八个。其中th属性执行的优先级从1~8,数字越低优先级越高。
1)th:text:设置当前元素的文本内容,相同功能的还有th:utext,两者的区别在于前者不会转义html标签,后者会。优先级不高:order=7
2)th:value:设置当前元素的value值,类似修改指定属性的还有th:src,th:href。优先级不高:order=6
3)th:each:遍历循环元素,和th:text或th:value一起使用。注意该属性修饰的标签位置,详细往后看。优先级很高:order=2
4)th:if:条件判断,类似的还有th:unless,th:switch,th:case。优先级较高:order=3
5)th:insert:代码块引入,类似的还有th:replace,th:include,三者的区别较大,若使用不恰当会破坏html结构,常用于公共代码块提取的场景。优先级最高:order=1
6)th:fragment:定义代码块,方便被th:insert引用。优先级最低:order=8
7)th:object:声明变量,一般和*{}一起配合使用,达到偷懒的效果。优先级一般:order=4
8)th:attr:修改任意属性,实际开发中用的较少,因为有丰富的其他th属性帮忙,类似的还有th:attrappend,th:attrprepend。优先级一般:order=5
2、表达式介绍
2.1 ~{…} 代码块表达式:
作用:用代码块片段操作页面代码。
代码块表达式需要配合th属性(th:insert,th:replace,th:include)一起使用。
th:insert:将代码块片段整个插入到使用了th:insert的HTML标签中
th:replace:将代码块片段整个替换使用了th:replace的HTML标签中
th:include:将代码块片段包含的内容插入到使用了th:include的HTML标签中
2.2 @{…} 链接表达式
作用:提交请求,访问资源。
链接表达式好处:不管是静态资源的引用,form表单的请求,凡是链接都可以用@{…} 。这样可以动态获取项目路径,即便项目名变了,依然可以正常访问。
案例:
<!--引入内部图片资源-->
th:src="@{/images/weChatInn.jpg}"
<!--引入外部资源-->
<link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet"><!--引入本地资源-->
<link th:href="@{/main/css/itdragon.css}" rel="stylesheet"><!--表单提交路径-->
<form class="form-login" th:action="@{/user/login}" th:method="post" ><!--超链接跳转路径附带参数-->
<a class="btn btn-sm" th:href="@{/login.html(l='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/login.html(l='en_US')}">English</a>
2.3 ${…}变量表达式(最常用)
作用:从web作用域里面取到对应的值,作用域包括 request、session、application。
变量表达式有丰富的内置方法(request,response,session等),使其更强大,更方便。
1、后台代码 :返回不同作用域的数据到前端。
@GetMapping("/index")
public String showPage(HttpServletRequest request, HttpSession session) {User user1 = new User(1L, "zhangsan", "333333");request.setAttribute("user1", user1);User user2 = new User(2L, "lisi", "444444");session.setAttribute("user2", user2);User user3 = new User(3L, "wangwu", "555555");ServletContext application = request.getServletContext();application.setAttribute("user3", user3);return "index";
}
2、 页面代码:接收后台传回来不同作用域的数据。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>request: <br/>
<div>编号: <label th:text="${user1.id}"></label><br/>用户名:<label th:text="${user1.username}"></label> <br/>密码:<label th:text="${user1.password}"></label><br/>
</div>session:<br/>
<div>编号: <label th:text="${session.user2.id}"></label><br/>用户名:<label th:text="${session.user2.username}"></label> <br/>密码:<label th:text="${session.user2.password}"></label><br/>
</div>application:<br/>
<div>编号:<label th:text="${application.user3.id}"></label><br/>用户名:<label th:text="${application.user3.username}"></label><br/>密码:<label th:text="${application.user3.password}"></label><br/>
</div></body>
</html>
2.4 *{…} 选择变量表达式
作用:避免书写重复引用代码,指定对象的方式获取变量。
问题:使用变量表达式来取request、session、application作用域上的属性时,可以发现,我们需要重复编写user1、session.user2和application.use3三次,如果user对象的属性有十几个怎么办?
显然写十几次相同的代码不是我们想要解决方案。针对这种问题,Thymeleaf提供了选择变量表达式来解决。
th:object="${user1}:指定对象为user1
th:text="*{id}:获取user1中的id
*就代表对象object
使用前:
request: <br/>
<div>编号: <label th:text="${user1.id}"></label><br/>用户名:<label th:text="${user1.username}"></label> <br/>密码:<label th:text="${user1.password}"></label><br/>
</div>session:<br/>
<div>编号: <label th:text="${session.user2.id}"></label><br/>用户名:<label th:text="${session.user2.username}"></label> <br/>密码:<label th:text="${session.user2.password}"></label><br/>
</div>
等用于:
使用后:request: <br/>
<div th:object="${user1}">编号: <label th:text="*{id}"></label><br/>用户名:<label th:text="*{username}"></label> <br/>密码:<label th:text="*{password}"></label><br/>
</div>session:<br/>
<div th:object="${session.user2}">编号: <label th:text="*{id}"></label><br/>用户名:<label th:text="*{username}"></label> <br/>密码:<label th:text="*{password}"></label><br/>
</div>
2.5 #{…} 消息表达式
作用:就是用于对国际化功能的支持。所谓的国际化功能就是指,根据浏览器的编码,返回对应编码的内容的支持。
1、配置步骤
第一步:创建编写国际化支持配置文件
国际化配置文件名称命名规范:
1、默认名:xxx.properties 指定国家编码的名称:xxx_语言编码_国家编号.properties
如:
2、默认声明:message.properties
home.welcome=HelloWorld
————————————————————————
中文支持声明:message_brick_CN.properties
home.welcome=你好世界
第二步:配置 SpringBoot 配置文件 (application.properties中)
注意:配置的message就是国际化文件名字名,不需要写语言国家编号以及后缀。
配置国际化支持
spring.messages.basename=message
第三步:Thymeleaf 对国际化的支持,消息表达式(取值)
方法一:标签消息表达式取值:<span th:text="#{home.welcome}"></span><br />
方法二:内嵌消息表达式取值:[[#{home.welcome}]]
3、常用方法介绍
1.1. Thymeleaf支持四种判断:
th:if/th:unless、
逻辑运算符(and、or、not)、
三目运算符、
switch
1) 第一种:if & unless
<!-- 如果条件为真,执行标签内的内容 -->
<div th:if="${false}">天天18
</div><!-- 如果添加为假,执行标签内的内容 -->
<div th:unless="${false}">别做梦
</div>
2)第二种:and、or、not
<div th:if="${true or false}">真的18岁
</div><div th:if="${not false}">真的别做梦
</div>
3)第三种:三目运算符
<span th:text="true ? '今年不是18岁' : '总算清醒了'"></span>
4)第四种:switch
<div th:switch="${21}"><div th:case="16">我今年16岁</div><div th:case="17">我今年17岁</div><div th:case="18">我今年18岁</div><div th:case="*">我年年18岁</div>
</div>
1.2. 循环
Thymeleaf使用th:each来实现循环遍历。
页面代码:后端传回数据 model.addAttribute(“users”, users);
<h3>需求:输出用户信息</h3>
<table border="1" cellspacing="0"><tr><th>编号</th><th>姓名</th><th>密码</th></tr><tr th:each="user, iterStat:${users}"><td th:text="${user.id}"></td><td th:text="${user.username}"></td><td th:text="${user.password}"></td></tr>
</table><h3>需求:输出用户信息,声明状态对象</h3>
<table border="1" cellspacing="0"><tr><td>当前迭代索引</td><td>当前迭代序号</td><td>编号</td><td>姓名</td><td>密码</td></tr><tr th:each="user, iter:${users}"><td th:text="${iter.index}"></td><td th:text="${iter.count}"></td><td th:text="${user.id}"></td><td th:text="${user.username}"></td><td th:text="${user.password}"></td></tr>
</table>
1.3 时间格式化
<span th:text="${#dates.format(user.date, 'yyyy-MM-dd')}">4564546</span> 或者
<span th:text="${#dates.format(billingForm.startTime,'yyyy-MM-dd HH:mm:ss')}">4564546</span>
1.4 请求带参数
//带一个参数
<a href="#" th:href="@{/quartz/pause(name=${job.name})}">暂停</a>
//带两个参数
<a href="#" th:href="@{/quartz/pause(name=${job.name},group=${job.group})}">暂停</a>
Themleaf模板基础语法使用介绍已讲解完毕,上面是我对此模板引擎的一些学习笔记和心得,如有不足的地方还请指正,共同交流与学习!
Themleaf模板基础语法使用介绍相关推荐
- Java基础编程——基础语法及介绍
Java基础编程--基础语法及介绍 介绍 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由James Gosling和同事们共 ...
- 【WY】数据分析 — Pandas 阶段一 :基础语法 一 —— 介绍
版权声明:本文为博主原创文章,未经博主允许不得转载. 文章目录 一.简介 二.课程介绍 一.简介 Pandas:基于Numpy 构建,为数据分析而存在,数据分析核心工具包 一维数组 Series + ...
- 【WY】数据分析 — Numpy 阶段一 :基础语法 一 —— 介绍
版权声明:本文为博主原创文章,未经博主允许不得转载. 文章目录 一.介绍 二.特点 一.介绍 Numpy :Python 开源的科学计算包,高级的数值编程工具 二.特点 强大的 N 维数组对象:nda ...
- 【WY】数据分析 — Gis 阶段一 :基础语法 一 —— 介绍
版权声明:本文为博主原创文章,未经博主允许不得转载. 文章目录 一.空间数据 1.1概念 1.2 分类 1.2.1 POI 数据 1.2.2 OSM 数据 1.2.3 影像图数据 二.空间数据分析 2 ...
- 【C++快速入门】基础语法篇
C++基础语法 C++介绍 cin.cout 函数重载(Overload) 默认参数 extern "C" #pragma once 内联函数(inline function) 内 ...
- C#基础编程——简介及基础语法
C#基础编程--简介及基础语法 百科介绍 C#是微软公司发布的一种由C和C++衍生出来的面向对象的编程语言.运行于.NET Framework和.NET Core(完全开源,跨平台)之上的高级程序设计 ...
- 1 Java基础后端-基础语法
1 Java基础后端-基础语法 编程语言介绍 java介绍 文章目录 1 Java基础后端-基础语法 1.1. 计算机语音发展 1.2. Java和C比较 1.3. windows常用DOS 1.4. ...
- php入门级基础语法知识
文章目录 基础语法 php介绍 变量 常量 变量作用域 可变变量 运算符 数组 数值数组 关联数组 多维数组 控制语句 函数 创建PHP函数 函数返回值 预定义变量及魔术常量 php表单 PHP表单处 ...
- openresty开发系列13--lua基础语法2常用数据类型介绍
openresty开发系列13--lua基础语法2常用数据类型介绍 一)boolean(布尔) 布尔类型,可选值 true/false: Lua 中 nil 和 false 为"假" ...
最新文章
- sklearn使用FeatureHasher处理字符串特征
- idea如何删除java里面工程,Java开发工具IntelliJ IDEA配置项目系列教程(七):卸载模块...
- ASP.NET 2.0 – 如何巢状化GridView控件
- 阿里云容器服务新增支持Kubernetes编排系统,性能重大提升
- 什么是浏览器跨域访问操作,js如何实现?
- Tornado 自定义session,与一致性哈希 ,基于redis 构建分布式 session框架
- javascript技巧参考
- PHP: stdclass, 数组转成对象
- 唐山师范学院计算机科学与技术地址,2021年唐山师范学院有几个校区,大一新生在哪个校区...
- Windows Server 2008 R2托管服务账户(MSA)的功能
- GitLab5.3修改项目仓库名称后wiki不能访问
- CentOS添加swap分区
- 系统集成项目管理工程师(中级)常用英语汇总
- 微信app支付 服务器接口,iOS微信支付——APP调用微信支付接口
- 那些年我们追过的网络小说
- UIView的bounds、frame、center/position、anchorPoint的关系
- google地图图标 google map图库资源
- java 计算毫秒差值,关于时间的操作(Java版)——获取给定时间与目前系统时间的差值(以毫秒为单位)...
- C语言路漫漫,其修远兮
- 要想成为一个开发组长,我个人认为要注意一下几点