springcloud记录篇10-thymeleaf模板引擎

最新推荐文章于 2021-07-21 18:51:24 发布

liaomin416100569

最新推荐文章于 2021-07-21 18:51:24 发布

阅读量927

点赞数

分类专栏：服务器 Spring

本文链接：https://blog.csdn.net/liaomin416100569/article/details/85554524

版权

Spring 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

服务器

5 篇文章 1 订阅

订阅专栏

一。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-equiv

th: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:wrap

th: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_中文参考手册可以参考其他博客

liaomin416100569

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
springcloud记录篇10-thymeleaf模板引擎

一。thymeleaf简介 Thymeleaf 是一个跟 FreeMarker 类似的模板引擎，它可以完全替代 JSP 。 thymeleaf特征：Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的...
复制链接

扫一扫

专栏目录