简单介绍
目前在javaee领域有几中比较常用的模板引擎，分别是jsp、velocity、freemarker、thymeleaf，对freemark语法不是特别熟悉，不过对于前端页面渲染效率来说，jsp其实还是最快的，velocity次之。thymeleaf虽然渲染效率不是很快，但是语法方面是比较轻巧的，thymeleaf语法比velocity轻巧，但是渲染效率不如velocity
thymeleaf 支持html5标准；是一种模板引擎框架（templateengine framework）；thymeleaf 页面无须部署到servlet开发到服务器上，直接通过浏览器就能打开。它可以完全替代 jsp 。
特点：
1.thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
2.它提供标准和spring标准两种方言，可以直接套用模板实现jstl、 ognl表达式效果。
3.thymeleaf 提供spring标准方言和一个与 springmvc 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
maven配置
因为引入了springboot的parent工程，所以不需要写版本号
|
1
2
3
4
5
|
<!-- themeleaf --> <dependency> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-starter-thymeleaf</artifactid> </dependency> |
application.yml配置
|
1
2
3
4
5
6
7
8
|
#添加thymeleaf配置 thymeleaf: cache: false prefix: classpath:/templates/ suffix: .html mode: html5 encoding: utf-8 content-type: text/html |
application.yml：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
server: port: 8081#logging:# config: classpath:logback_spring.xml.bat# level:# com.muses.taoshop: debug# path: /data/logsspring: datasource: # 主数据源 shop: url: jdbc:mysql://127.0.0.1:3306/taoshop?autoreconnect=true&useunicode=true&characterencoding=utf8&charactersetresults=utf8&usessl=false username: root password: root driver-class-name: com.mysql.jdbc.driver type: com.alibaba.druid.pool.druiddatasource # 连接池设置 druid: initial-size: 5 min-idle: 5 max-active: 20 # 配置获取连接等待超时的时间 max-wait: 60000 # 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒 time-between-eviction-runs-millis: 60000 # 配置一个连接在池中最小生存的时间，单位是毫秒 min-evictable-idle-time-millis: 300000 # oracle请使用select 1 from dual validation-query: select 'x' test-while-idle: true test-on-borrow: false test-on-return: false # 打开pscache，并且指定每个连接上pscache的大小 pool-prepared-statements: true max-pool-prepared-statement-per-connection-size: 20 # 配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙 filters: stat,wall,slf4j # 通过connectproperties属性来打开mergesql功能；慢sql记录 connection-properties: druid.stat.mergesql=true;druid.stat.slowsqlmillis=5000 # 合并多个druiddatasource的监控数据 use-global-data-source-stat: true# jpa:# database: mysql# hibernate:# show_sql: true# format_sql: true# ddl-auto: none# naming:# physical-strategy: org.hibernate.boot.entity.naming.physicalnamingstrategystandardimpl# mvc:# view:# prefix: /web-inf/jsp/# suffix: .jsp #添加thymeleaf配置 thymeleaf: cache: false prefix: classpath:/templates/ suffix: .html mode: html5 encoding: utf-8 content-type: text/html #jedis配置# jedis :# pool :# host : 127.0.0.1# port : 6379# password : redispassword# timeout : 0# config :# maxtotal : 100# maxidle : 10# maxwaitmillis : 100000 |
添加html文件
在resources资源文件夹下面新建一个templates文件夹，所有的html文件都丢在这里，静态资源文件也丢在resources资源文件夹下面
新建一个html文件，然后注意加上<html xmlns:th="http://www.thymeleaf.org">
注意thymeleaf语法要求比较严格 <meta charset="utf-8" > ，不如这样写是不可以的，必须加上斜杠的， <meta charset="utf-8" />
thymeleaf简单例子
遍历后台数据
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!--最新上架--> <div class="first-pannel clearfix"> <div class="index-f clearfix"> <h3 class="index-f-head"> 最新上架 <span>每天都有上新，每天都有惊喜</span> </h3> <div class="index-f-body"> <div class="top-sales newproduct"> <ul class="top-sales-list clearfix"> <li class="top-sales-item newproduct" th:each="item : ${items}"> <p class="item-img"> <a th:href="@{'/portal/item/todetail/'+${item.spuid}+'/'+${item.skuid}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img th:src="@{${item.imgpath}}" /></a> </p> <p class="item-buss"><a th:href="@{'/portal/item/todetail/'+${item.spuid}+'/'+${item.skuid}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a></p> <p class="item-name spec"><a th:href="@{'/portal/item/todetail/'+${item.spuid}+'/'+${item.skuid}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" th:text="${item.itemname}"></a></p> <p class="item-price spec"><em th:text="${item.mprice}"></em>元</p> </li> </ul> </div> </div> </div> </div> <!--最新上架//--> |
引入文件
thymeleaf引入另外一个html文件可以使用th:replace或者th:include，
|
1
2
3
4
5
6
7
8
9
10
|
<!--topbar--> <div class="topbar" th:replace="/top_bar :: .topbar"></div> <!--//topbar--> <!--headermain--> <div class="headermain layout clearfix" th:replace="/header_main :: .headermain"></div> <!--//headermain--> <!--headernav--> <div class="headernav" th:replace="/index_header_nav :: .headernav"></div> <!--//headernav--> |
img便签src
|
1
|
<img th:src="@{/static/images/rachange_ad.jpg}" /> |
链接<a>便签
静态资源使用
|
1
2
3
4
5
|
<link th:href="@{/static/css/public.css}" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" /> <link th:href="@{/static/css/index.css}" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" /> <script type="text/javascript" th:src="@{/static/js/jquery-1.3.2.min.js}"></script> <script type="text/javascript" th:src="@{/static/js/html5.js}"></script> <script type="text/javascript" th:src="@{/static/js/popbox.js}"></script> |
给出一个html页面例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="utf-8" /> <title>电商门户网站</title> <link th:href="@{/static/css/public.css}" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" /> <link th:href="@{/static/css/index.css}" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" /> <script type="text/javascript" th:src="@{/static/js/jquery-1.3.2.min.js}"></script> <script type="text/javascript" th:src="@{/static/js/html5.js}"></script> <script type="text/javascript" th:src="@{/static/js/popbox.js}"></script> <style type="text/css"> .item-list { display: none; position: absolute; width: 705px; min-height: 200px; _height: 200px; background: #fff; left: 198px; box-shadow: 0px 0px 10px #dddddd; border: 1px solid #ddd; top: 3px; z-index: 1000000; } /* remove float */ .clear { display: block; height: 0; overflow: hidden; clear: both; } .clearfix:after { content: '\20'; display: block; height: 0; clear: both; } .clearfix { *zoom:1; } .hover { position: relative; z-index: 1000000000; background: #fff; border-color: #ddd; border-width: 1px 0px; border-style: solid; } </style></head><body><!--header--><header class="header"> <!--topbar--> <div class="topbar" th:replace="/top_bar :: .topbar"></div> <!--//topbar--> <!--headermain--> <div class="headermain layout clearfix" th:replace="/header_main :: .headermain"></div> <!--//headermain--> <!--headernav--> <div class="headernav" th:replace="/index_header_nav :: .headernav"></div> <!--//headernav--></header><!--//header--><!--container--><div class="container"> <div class="layout clearfix"> <!--banner--> <div class="banner"> <div class="banner-img"> <ul> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img width="727" height="350" th:src="@{/static/images/banner_970x355.jpg}" /></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img width="727" height="350" th:src="@{/static/images/banner_970x355.jpg}" /></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img width="727" height="350" th:src="@{/static/images/banner_970x355.jpg}" /></a></li> </ul> </div> <ul class="banner-btn"> <li class="current"></li> <li></li> <li></li> </ul> </div> <!--//banner--> <!--快捷充值--> <div class="index-fast-recharge"> <div class="recharge-body"> <div class="recharge-head"> <h2><em class="icon-phone"></em>话费充值</h2> </div> <div class="recharge-con"> <div class="recharge-form"> <p> <label class="name">手机号：</label> <input placeholder="支持电信" type="text" class="text-box" /> </p> <p> <label class="name">充值方式：</label> <label> <input type="radio" class="rd" /> 电信充值卡</label> <label> <input type="radio" class="rd" /> 银行卡</label> </p> <div class="recharge-sub-btn"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-red">立即充值</a> </div> </div> <div class="recharge-ad"> <img th:src="@{/static/images/rachange_ad.jpg}" /> </div> </div> </div> </div> <!--//快捷充值--> <div class="clearfix"></div> <!--最新上架--> <div class="first-pannel clearfix"> <div class="index-f clearfix"> <h3 class="index-f-head"> 最新上架 <span>每天都有上新，每天都有惊喜</span> </h3> <div class="index-f-body"> <div class="top-sales newproduct"> <ul class="top-sales-list clearfix"> <li class="top-sales-item newproduct" th:each="item : ${items}"> <p class="item-img"> <a th:href="@{'/portal/item/todetail/'+${item.spuid}+'/'+${item.skuid}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img th:src="@{${item.imgpath}}" /></a> </p> <p class="item-buss"><a th:href="@{'/portal/item/todetail/'+${item.spuid}+'/'+${item.skuid}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a></p> <p class="item-name spec"><a th:href="@{'/portal/item/todetail/'+${item.spuid}+'/'+${item.skuid}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" th:text="${item.itemname}"></a></p> <p class="item-price spec"><em th:text="${item.mprice}"></em>元</p> </li> </ul> </div> </div> </div> </div> <!--最新上架//--> </div></div><!--//container--><!--footer--><footer class="footer" th:replace="footer :: .footer"></footer><!--//footer--><script type="text/javascript"> //banner $(document).ready(function(){ var demo = $(".banner"); var btn = $(".banner-btn li"); var slide = $(".banner-img ul"); var slideitem = slide.find("li"); var c = 0, speed = 4000 , t; btn.each(function(number){ $(this).click(function(){ $(this).addclass("current").siblings().removeclass("current"); slide.animate({"left":-slideitem.width()*number},300); c = number; }); }); if(btn.size()>1){ autoslide(); } function timedcount() { c = c + 1; if(c>=btn.size())c = 0; btn.eq(c).click(); } function autoslide(){ t = setinterval(function(){timedcount();},speed); } //鼠标移入停止播放 demo.mouseover(function(){ clearinterval(t); }); demo.mouseout(function(){ autoslide(); }); });</script></body></html> |
代码取自个人的开源项目：https://github.com/u014427391/taoshop，有需要可以参考
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对服务器之家的支持。
原文链接：http://www.cnblogs.com/mzq123/p/10359234.html
