springcloud记录篇10-thymeleaf模板引擎

一。thymeleaf简介

Thymeleaf 是一个跟 FreeMarker 类似的模板引擎，它可以完全替代 JSP 。
thymeleaf特征：

Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

thymeleaf官网：https://www.thymeleaf.org/
以下教程参考自：thymeleaf_3.0.5_中文参考手册

二。springboot继承thymeleaf

1》hellworld案例

springboot继承thymeleaf参考官网spring.io 参考官方文档的sample

继承springboot引用依赖

     <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.5.10.RELEASE</version></parent><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!--取消对html的服务器检测 让浏览器检测--><dependency><groupId>nekohtml</groupId><artifactId>nekohtml</artifactId><version>1.9.6.2</version></dependency></dependencies>

添加thymeleaf配置 application.properties文件

spring.thymeleaf.cache=false  #开发禁用html缓存
spring.thymeleaf.prefix=classpath:/static/ #指定模板的位置 /src/main/resource/static/
server.port=8888
spring.thymeleaf.mode=LEGACYHTML5 #指定不使用用html5（默认模式不满足html规范少了一个结束标签报错）使用legacyhtml5

模板过程一般控制层进入，传入数据到model中模板可以使用这个数据

比如创建控制层ThyController.java

@Controller
public class ThyController {@GetMapping("/index")public String index(Model model,HttpServletRequest request) {Map map=new HashMap();map.put("id",1);map.put("name","张三");model.addAttribute("user",map);User user=new User("2","李四");request.getSession().setAttribute("user1",user);return "idx";}
}

添加一个模板在 /src/main/resource/static/中名字是idx.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"></script>
</head>
<body>  <div th:utext="${user.name}">欢迎饺子光临</div><br/>   <div th:object="${user}"><p th:text="*{name}"></p><p th:text="*{id}"></p><p th:text="${session.user1.userName}"></p></div><br/><p th:text="${session.user1.toString()}"></p>
</body></html>

在模板中所有html元素都可以定义th:开头的属性，这些属性中可以使用el或者ognl表达式
比如th:text替换div中的内容,th:utext转译替换div中的内容
${user.name} 从请求中获取user对象获取name属性
${session.user1.toString()} 从会话中获取user1对象调用toString方法
th:object 表示在这个div中可以直接使用指定对象的属性使用 *{属性}获取值

2》循环迭代案例模板

这里控制器就不给了

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><form  action="per" method=get>新闻： <input id="myKeyWord" type="text" name="keyword" ><input type="submit" value="搜索"/></form><table><tr style='width:100%' ><th>国家</th><th>姓名</th><th>描述</th><th>描述</th></tr><!--循环请求 ${personList}  临时变量person  iterStat是一个状态变量包含当前索引，奇偶等--><tr style='width:100%' th:each="person,iterStat : ${personList}"th:style="${iterStat.odd}?'background-color:red':''"><td th:text="${person.country}"></td><td th:text="${person.name}"></td><td th:text="${person.desc}"></td><td th:text="${iterStat.odd}"></td></tr> </table></body></html>

3》包含例子

定义header.html模板

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title></head>
<body><div th:fragment="myheader" >新闻 视频 图片 军事 体育 NBA 娱乐 财经 科技 时尚 汽车 房产 教育 文化 游戏 星座
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script></div>
</body></html>

定义模板包含header

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><div th:include="header :: myheader"></div><script>alert($);</script>由中共中央宣传部、中央广播电视总台联合制作的十八集大型电视纪录片《我们一起走过——致敬改革开放40周年》<br/>在央视综合频道12月2日—10日20:00档播出，每天播出两集，央视财经频道12月3日—20日21:18每天重播一集。<br/>该片以改革开放40年取得的历史性成就和发生的历史性变革为基础，选取我国经济社会各个领域的发展变迁故事<br/>，呈现40年来中国改革开放的宏伟实践。
</body></html>

三。thymeleaf语法

在idea中添加thymeleaf依赖直接提示thymeleaf
eclipse在eclipse markerplace搜索thymeleaf插件，安装
eclipse输入 th:多按几下alt+/切换到 thymeleaf的Template Proposals就可以提示或者设置Template Proposals自行百度
支持的th标签

html5的操作支持：th:abbr          th:accept             th:accept-charset
th:accesskey             th:action             th:align
th:alt             th:archive             th:audio
th:autocomplete             th:axis             th:background
th:bgcolor             th:border             th:cellpadding
th:cellspacing             th:challenge             th:charset
th:cite             th:class             th:classid
th:codebase             th:codetype             th:cols
th:colspan             th:compact             th:content
th:contenteditable             th:contextmenu             th:data
th:datetime             th:dir             th:draggable
th:dropzone             th:enctype             th:for
th:form             th:formaction             th:formenctype
th:formmethod             th:formtarget             th:fragment
th:frame             th:frameborder             th:headers
th:height             th:high             th:href
th:hreflang             th:hspace             th:http-equivth:icon             th:id             th:inline
th:keytype             th:kind             th:label
th:lang             th:list             th:longdesc
th:low             th:manifest             th:marginheight
th:marginwidth             th:max             th:maxlength
th:media             th:method             th:min
th:name            th:onabort            th:onafterprint
th:onbeforeprint            th:onbeforeunload            th:onblur
th:oncanplay            th:oncanplaythrough            th:onchange
th:onclick            th:oncontextmenu            th:ondblclick
th:ondrag            th:ondragend            th:ondragenter
th:ondragleave            th:ondragover            th:ondragstart
th:ondrop            th:ondurationchange            th:onemptied
th:onended            th:onerror            th:onfocus
th:onformchange            th:onforminput            th:onhashchange
th:oninput            th:oninvalid            th:onkeydown
th:onkeypress            th:onkeyup            th:onload
th:onloadeddata            th:onloadedmetadata            th:onloadstart
th:onmessage            th:onmousedown            th:onmousemove
th:onmouseout            th:onmouseover            th:onmouseup
th:onmousewheel            th:onoffline            th:ononline
th:onpause            th:onplay            th:onplaying
th:onpopstate            th:onprogress            th:onratechange
th:onreadystatechange            th:onredo            th:onreset
th:onresize            th:onscroll            th:onseeked
th:onseeking            th:onselect            th:onshow
th:onstalled            th:onstorage            th:onsubmit
th:onsuspend            th:ontimeupdate            th:onundo
th:onunload            th:onvolumechange            th:onwaiting
th:optimum            th:pattern            th:placeholder
th:poster            th:preload            th:radiogroup
th:rel            th:rev            th:rows
th:rowspan            th:rules            th:sandbox
th:scheme            th:scope            th:scrolling
th:size            th:sizes            th:span
th:spellcheck            th:src            th:srclang
th:standby            th:start            th:step
th:style            th:summary            th:tabindex
th:target            th:title            th:type
th:usemap            th:value            th:valuetype
th:vspace            th:width            th:wrapth:vspace            th:width            th:wrap
th:xmlbase            th:xmllang            th:xmlspace布尔类型th:async th:autofocus th:autoplay
th:checked th:controls th:declare
th:default th:defer th:disabled
th:formnovalidate th:hidden th:ismap
th:loop th:multiple th:novalidate
th:nowrap th:open th:pubdate
th:readonly th:required th:reversed
th:scoped th:seamless th:selected

其他操作参考 thymeleaf_3.0.5_中文参考手册可以参考其他博客

springcloud记录篇10-thymeleaf模板引擎相关推荐

【第十篇】Thymeleaf模板引擎
1.1 Thymeleaf 介绍传统的JSP+JSTL 组合是已经过去了,Thymeleaf是现代服务端的模板引擎,与传统的 JSP不同,Thymeleaf可以使用浏览器直接打开,因为可以忽略掉拓展 ...
thymeleaf模板引擎详解1
做了几年的java web开发,我使用最多的模板引擎应该是freemarket和JSP了,不过最近公司开始引入springboot作为开发的框架,这让我接触到了一个新的模板引擎,也就是thymelea ...
九、SpringBoot集成Thymeleaf模板引擎
Thymeleaf咋读!??? 呵呵,是不是一脸懵逼...哥用我的大学四级英文知识告诉你吧:[θaimlif]. 啥玩意?不会音标?...那你就这样叫它吧:"赛母李府",大部分中国 ...
java 模板引擎_SpringBoot入门系列（四）如何整合Thymeleaf模板引擎
前面介绍了Spring Boot的优点,然后介绍了如何快速创建Spring Boot 项目.不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/ ...
Spring Boot集成Thymeleaf模板引擎
一.Thymeleaf 模板介绍 Spring Boot 推荐使用Thymeleaf 来代替传统开发中的JSP,那么什么是Thymeleaf 模板引擎呢?下面就来简单的介绍一下. Thymeleaf ...
java 模板引擎_Spring Boot 如何快熟整合Thymeleaf模板引擎
前面介绍了Spring Boot的优点,然后介绍了如何快速创建Spring Boot 项目.不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/ ...
【SpringBoot】3、SpringBoot中整合Thymeleaf模板引擎
SpringBoot 为我们提供了 Thymeleaf 自动化配置解决方案,所以我们在 SpringBoot 中使用 Thymeleaf 非常方便一.简介 Thymeleaf是一个流行的模板引擎,该 ...
玩转springboot：thymeleaf模板引擎入门程序
一.前言常用的模板引擎有:JSP.Velocity.Freemarker.Thymeleaf 但是,Springboot默认是不支持JSP的,默认使用thymeleaf模板引擎.而且,语法更简单,功 ...
Java Mail+Thymeleaf模板引擎实现发送HTML格式邮件
Java Mail+Thymeleaf模板引擎实现发送HTML格式邮件基于Spring boot 1.5,Spring boot 2.x请使用Spring boot mail 1.依赖坐标 // b ...
thymeleaf模板引擎
文章目录前言一.thymeleaf是什么? 二.使用步骤 1.导入坐标 2.Spring Boot项目中创建controller 3.分析源码 4.配置success.html 5.启动主配置文件 ...

springcloud记录篇10-thymeleaf模板引擎

springcloud记录篇10-thymeleaf模板引擎相关推荐

最新文章

热门文章