Springboot整合thymeleaf模板

Thymeleaf是个XML/XHTML/HTML5模板引擎,可以用于Web与非Web应用。

Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码,开发者只需将标签属性添加到模板中即可。接下来,这些标签属性就会在DOM(文档对象模型)上执行预先制定好的逻辑。Thymeleaf的可扩展性也非常棒。你可以使用它定义自己的模板属性集合,这样就可以计算自定义表达式并使用自定义逻辑。这意味着Thymeleaf还可以作为模板引擎框架。
Thymeleaf的模板还可以用作工作原型,Thymeleaf会在运行期替换掉静态值。例如下面的html文件,当作为静态文件时,product name显示为Red Chair,当运行在容器中并提供product这个对象时,product name的值会自动替换为product.description对应的值。下面就简单的讲一讲springboot整合thymeleaf模板。
1.引入依赖
在maven(pom.xml)中直接引入:

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

也可以在创建项目时候勾选thymeleaf模板,这样会自动生成。
2.配置视图解析器

(1)默认

spring-boot很多配置都有默认配置,比如默认页面映射路径为

classpath:/templates/*.html 

同样静态文件路径为

classpath:/static/

(2)自定义

在application.properties(或者application.yml)中可以配置thymeleaf模板解析器属性.就像使用springMVC的JSP解析器配置一样

#thymeleaf startspring.thymeleaf.mode=HTML5spring.thymeleaf.encoding=UTF-8spring.thymeleaf.content-type=text/html #开发时关闭缓存,不然没法看到实时页面spring.thymeleaf.cache=false#thymeleaf end

具体可以配置的参数可以查看 org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties 这个类,上面的配置实际上就是注入到该类中的属性值.

3.编写demo来说明使用方法

(1)控制器

@Controllerpublic class HelloController(){@RequestMapping(value = "/")public String index(){return "index";}}

这样会返回一个新的视图页面index.html,当然也可以使用下面的方法

@RequestConteollerpublic class HelloController(){@RequestMapping(value = "/")public ModelAndView index(){return new ModelAndView("index");}}

这样能直接返回整个index页面。
(2)view

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<body><b th:text="hello,world!"><b/>
</body>
</html>

注意,在html标签里一定要引入 xmlns:th=“http://www.thymeleaf.org” ,这样thymeleaf模板才会启用。至于thymeleaf的具体使用方法,以后在讲。

(3)测试

访问 localhost:8080/ 这个地址,会直接跳转到 index.html 页面,并显示如下

在这里插入图片描述
4.基础语法

(1)引入标签

首先要在html标签里引入xmlns:th="http://www.thymeleaf.org"才能使用th:*这样的语法。

(2)获取变量值

通过在标签内部,使用 ${} 来取值,对于javaBean的话,使用 变量名.属性名 来获取,跟EL表达式一样
  注意:只有写在标签内部才会生效,例如: th:text=“hello” 的意思是使用hello来代替p之前的内容,p里原来的值是为了给前端开发展示用的,这样做容易实现前后端分离。

(3)引入URL

thymeleaf对于引入URL是采用@{…}来获取的

例如: 绝对路径 是访问绝对路径下的URL, 相对路径 是访问相对路径下的URL。
      是引入默认的static下的css文件夹下的bootstrap文件,类似的标签有: th:href 和 th:src

(4)字符串替换
例如使用: 或者

                  <span th:text="|Welcome to our application, ${user.name}!|"></span>  都可以实现替换

注意:|…|中只能包含变量表达式${…},不能包含其他常量、条件表达式等。

(5)运算符

在表达式中可以使用各类算术运算符,例如 +, -, *, /, % .例如: th:with=“isEven=(${prodStat.count} % 2 == 0)”
逻辑运算符 >, <, <=,>=,==,!= 都可以使用,唯一需要注意的是使用 <,> 时需要用它的HTML转义符:

th:if="${prodStat.count} &gt; 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"

(6)条件
if/unless th:if是该标签在满足条件的时候才会显示,unless是不成立时候才显示,例如

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

Switch thymeleaf支付switch结构,默认属性(default)用*表示,例如:

 <div th:switch="${user.role}"><p th:case="'admin'">User is an administrator</p><p th:case="#{roles.manager}">User is a manager</p><p th:case="*">User is some other thing</p></div>

(7)循环

th:each是对于结果可以进行遍历的数据集,例如:

<tr th:each="prod : ${prods}"><td th:text="${prod.name}">Onions</td><td th:text="${prod.price}">2.41</td><td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>

(8)Utilities

为了模板更加易用,Thymeleaf还提供了一系列Utility对象(内置于Context中),可以通过#直接访问:

#dates  
#calendars  
#numbers  
#strings  
arrays   
lists  
sets   
maps   
…
${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}
${#dates.createNow()}
${#strings.isEmpty(name)}
${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)}
${#strings.setIsEmpty(nameSet)}
${#strings.startsWith(name,'Don')}                
${#strings.endsWith(name,endingFragment)} 
${#strings.length(str)}
${#strings.equals(str)}
${#strings.equalsIgnoreCase(str)}
${#strings.concat(str)}
${#strings.concatReplaceNulls(str)}
${#strings.randomAlphanumeric(count)}

(8)补充

在spring-boot1.4之后,支持thymeleaf3,可以更改版本号来进行修改支持.
  3相比2极大的提高了效率,并且不需要标签闭合,类似的link,img等都有了很好的支持,按照如下配置即可

<properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><!-- set thymeleaf version --><thymeleaf.version>3.0.0.RELEASE</thymeleaf.version><thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version><!--set java version--><java.version>1.8</java.version></properties>

(9)一些常用标签的使用说明

th:text 替换原来text中的东西
th:value 替换原来value的值
th:object 替换标签的对象,th:object=“对象”
th:field 填充,如图上面又对象,可以直接用*{属性}取值
th:checked 当check的值为true时候为选中,false时为未选中
th:remove 删除
th:href 用@{}替换连接地址
th:if 如果值为true的时候才显示标签,否则不显示
th:unless 不成立的时候才显示
th:each 用户循环遍历结果集
th:style 替换样式
th:action 替换action地址,用@{}取地址
th:alt 用@{}取地址
th:class 替换class的样式
th:fragment 定义一个framemet模板,在后面引用他
(10)实例一:页面的引用与替换

日常开发中,我们经常会讲导航,页尾,菜单单独提取成模板供其他页面使用,在thymeleaf,我们可以使用th:fragment属性来定义一个模板,例如:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head><meta charset="utf-8"/>
</head>
<body>
<div class="container-fluid all"><div class="sidebar"><ul class="nav"><li><a th:href="@{/index}">&nbsp;首页</a></li><li><a th:href="@{/add}">&nbsp;增加用户</a></li><li><a th:href="@{#}">&nbsp;员工信息</a></li><li><a th:href="@{#}">&nbsp;工资信息</a></li><li><a th:href="@{#}">&nbsp;任务信息</a></li><li><a th:href="@{#}">&nbsp;人员调动</a></li><li><a th:href="@{#}">&nbsp;档案管理</a></li><li><a th:href="@{#}">&nbsp;历史记录</a></li></ul></div><div class="maincontent row"><div th:fragment="content"></div></div>
</div>
<a href="#top" id="goTop"><i class="fa fa-angle-up fa-3x"></i></a>
</body>
</html>

1.上面定义了一个叫做content的片段,我们可以使用 th:include 或者 th:replace 属性来使用他,例如我们可以新建一个简单的页尾模板,

新建一个html文件,路径如下:/WEB-INF/templates/footer.html ,然后我们可以在footer.html文件中引入上面的content片段。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"/><title>Title</title>
</head>
<body><div th:include="footer :: content"></div>
</body>
</html>

其中 th:include 中的参数格式为 templatename::[domselector] ,其中templatename是模板名(如footer),domselector是可选的dom选择器。如果只写templatename,不写domselector,则会加载整个模板。我们也可以使用三目表达式来写,例如 :

模板片段可以被包含在任意th:*属性中,并且可以使用目标页面中的上下文变量。

2.不通过th:fragment引用模板,我们可以通过强大的dom选择器,在不添加任何fragment属性的情况定义模板,例如:

<div id="copy-section">&copy; xxxxxx</div>

通过dom选择器来加载模板,如id为copy-section,

3.使用layout布局加载模板

在html标签中引用 xmlns:layout=“http://www.ultraq.net.nz/web/thymeleaf/layout” ,使用layout来进行布局,然后在需要被引用的head页面,要修改的地方添加

片段,例如:

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"><head><meta charset="utf-8"/></head><body><div class="container-fluid all"><div class="sidebar"><ul class="nav"><li><a th:href="@{/index}">&nbsp;首页</a></li><li><a th:href="@{/add}">&nbsp;增加用户</a></li><li><a th:href="@{#}">&nbsp;员工信息</a></li><li><a th:href="@{#}">&nbsp;工资信息</a></li><li><a th:href="@{#}">&nbsp;任务信息</a></li><li><a th:href="@{#}">&nbsp;人员调动</a></li><li><a th:href="@{#}">&nbsp;档案管理</a></li><li><a th:href="@{#}">&nbsp;历史记录</a></li></ul></div><div class="maincontent row"><div th:fragment="content"></div></div></div><a href="#top" id="goTop"><i class="fa fa-angle-up fa-3x"></i></a></body></html>

然后新建一个html文件,在html中引入 layout:decorator=“head” ,然后直接在body里添加

,在新的页面中的div里添加需要的内容,加载出来就是整合了head.html的新页面。例如:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"layout:decorator="head">
<head><meta charset="UTF-8"/><title>添加用户</title>
</head>
<body><div layout:fragment="content" class="col-sm-12">
</div></body>
</html>

在div里添加内容,加载出来的页面会包括head的内容,而新页面div的内容,会显示在head页面中的

中,这样使用布局更方便。

4.th:include与th:replace的区别

th:include 是加载模板的内容,而 th:replace 则会替换当前标签为模板中的标签,例如:

<body> <div th:include="footer :: copy"></div><div th:replace="footer :: copy"></div>
</body>

这样显示的结果为:

<body> <div> &copy; 2016 </div> <footer>&copy; 2016 </footer> </body>

第一个是加载了模板标签内的内容,第二个是替换了整个标签。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/250040.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法】 - 动态规划 + 位运算

题目描述 思路1: 写一个返回2进制中1数量的函数countOne遍历0到num,对每一个数使用countOne,并将结果保存到res中返回 var countBits function (num) {let res new Array(num 1).fill(0);for (let i 0; i < num; i) {res[i] countOne(i.toString(2));}return res; };…

content-type对照表

转载于:https://www.cnblogs.com/mxyr/p/9238329.html

数据结构开发(7):典型问题分析(Bugfix)

0.目录 1.创建异常对象时的空指针问题 2.LinkList 中的数据元素删除 3.LinkList 中遍历操作与删除操作的混合使用 4.StaticLinkList 中数据元素删除时的效率问题 5.StaticLinkList 是否需要提供析构函数&#xff1f; 6.StLib 是否有必要增加多维数组类&#xff1f; 1.创建异常对…

spring boot 使用视图modelandview

1&#xff1a;springboot使用视图解析器&#xff0c;添加依赖 <!-- freemarker模板引擎视图 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-freemarker</artifactId></dependency>&…

题解-BOI 2004 Sequence

Problem bzoj & Luogu 题目大意&#xff1a; 给定序列\(\{a_i\}\)&#xff0c;求一个严格递增序列\(\{b_i\}\)&#xff0c;使得\(\sum \bigl |a_i-b_i\bigr|\)最小 Thought 正序&#xff1a;直接对应 逆序&#xff1a;取中位数&#xff08;证明&#xff1a;“医院设置”&am…

【vscode】编译java时报错乱码

报错如下 解决方案 改变终端的编码格式 chcp 946注意: chcp 65001 UTF-8编码chcp 936 GBK2312代码页

搭建集群架构

环境搭建进行规划(磨刀不误砍柴工). 集群架构组成说明. 负载均衡服务器使用Nginx做搭建,(nginx反向代理软件) Nginx01<-------->Nginx02 3台Web网站服务器,Nginx网站web服务功能 2台负载均衡服务器 (对网站的流量进行分流,减少流量对某台服务器的压力) 3台web服务器, (处…

Model、ModelMap和ModelAndView的使用详解

1.前言 最近SSM框架开发web项目&#xff0c;用得比较火热。spring-MVC肯定用过&#xff0c;在请求处理方法可出现和返回的参数类型中&#xff0c;最重要就是Model和ModelAndView了&#xff0c;对于MVC框架&#xff0c;控制器Controller执行业务逻辑&#xff0c;用于产生模型数据…

【mysql】- 初始化

参考 1、写配置文件 在mysql的根目录下创建 my.ini&#xff0c;根目录的截图和输入的内容如下所示。 my.ini的内容如下 [mysql] default-character-setutf8[mysqld] character-set-serverutf8 default-storage-engineINNODB sql_modeSTRICT_TRANS_TABLES,NO_ZERO_IN_DATE,…

@PathVariable注解使用

PathVariable是spring3.0的一个新功能&#xff1a;接收请求路径中占位符的值 语法&#xff1a; PathVariable("xxx") 通过 PathVariable 可以将URL中占位符参数{xxx}绑定到处理器类的方法形参中PathVariable(“xxx“) RequestMapping(value”user/{id}/{name}”) 请…

JAVA 框架-Spring-AOP面向切面

AOP&#xff08;Aspect Orient Programming&#xff09;&#xff0c;我们一般称为面向方面&#xff08;切面&#xff09;编程&#xff0c;作为面向对象的一种补充&#xff0c;用于处理系统中分布于各个模块的横切关注点&#xff0c;比如事务管理、日志、缓存等等。AOP实现的关键…

互相关和卷积的关系

转载于:https://www.cnblogs.com/seisjun/p/10134021.html

Thymeleaf3语法详解

Thymeleaf是Spring boot推荐使用的模版引擎&#xff0c;除此之外常见的还有Freemarker和Jsp。Jsp应该是我们最早接触的模版引擎。而Freemarker工作中也很常见&#xff08;Freemarker教程&#xff09;。今天我们从三个方面学习Thymeleaf的语法&#xff1a;有常见的TH属性&#x…

SSM+Netty项目结合思路

最近正忙于搬家&#xff0c;面试&#xff0c;整理团队开发计划等工作&#xff0c;所以没有什么时间登陆个人公众号&#xff0c;今天上线看到有粉丝想了解下Netty结合通用SSM框架的案例&#xff0c;由于公众号时间限制&#xff0c;我不能和此粉丝单独沟通&#xff0c;再此写一篇…

THYMELEAF 如何用TH:IF做条件判断

TestController 增加一个布尔值数据&#xff0c;并且放在model中便于视图上获取 package com.how2java.springboot.web; import java.util.ArrayList; import java.util.Date; import java.util.List;import org.springframework.stereotype.Controller; import org.springfr…

Thymeleaf th:include、th:replace使用

最近做到页面数据展示分页的功能&#xff0c;由于每个模块都需要分页&#xff0c;所以每个页面都需要将分页的页码选择内容重复的写N遍&#xff0c;如下所示&#xff1a; 重复的代码带来的就是CtrlC&#xff0c;CtrlV ,于是了解了一下thymeleaf的fragment加载语法以及th:includ…

Thymeleaf select 使用 和多select 级联选择

1.使用select 并且回绑数据; 页面&#xff1a; 状态&#xff1a; <select name"status" th:field"*{status}" id"idstatus" class"input-select" th:value"*{status}"> <option value"">--请选择-…

表达式符号

Thymeleaf对于变量的操作主要有$*#三种方式&#xff1a; 变量表达式&#xff1a; ${…}&#xff0c;是获取容器上下文变量的值.选择变量表达式&#xff1a; *{…}&#xff0c;获取指定的对象中的变量值。如果是单独的对象&#xff0c;则等价于${}。消息表达式&#xff1a; #{……

Java学习的快速入门:10行代码学JQuery

生活在快速发展时代的我们&#xff0c;如果不提速可能稍不留神就被时代淘汰了。快节奏的时代成就了快餐&#xff0c;亦成就了速成教育。尤其是身处互联网行业的我们&#xff0c;更新换代的速度更是迅速&#xff0c;快速掌握一门技术已经成为潮流趋势。怎样才能快速入门学习java…

项目管理

项目先后衔接的各个阶段的全体被称为项目管理流程。项目管理流程对于一个项目能否高效的执行起到事半功倍的效果。接下来我会利用36张的ppt&#xff08;当然了这里我只用部分图片展示要不然就太多图片了&#xff09;&#xff0c;介绍项目管理的整体流程。 1.项目管理的五大过程…