簡單介紹
目前在javaee領(lǐng)域有幾中比較常用的模板引擎，分別是jsp、velocity、freemarker、thymeleaf，對freemark語法不是特別熟悉，不過對于前端頁面渲染效率來說，jsp其實還是最快的，velocity次之。thymeleaf雖然渲染效率不是很快，但是語法方面是比較輕巧的，thymeleaf語法比velocity輕巧，但是渲染效率不如velocity
thymeleaf 支持html5標準；是一種模板引擎框架（templateengine framework）；thymeleaf 頁面無須部署到servlet開發(fā)到服務(wù)器上，直接通過瀏覽器就能打開。它可以完全替代 jsp 。
特點：
1.thymeleaf 在有網(wǎng)絡(luò)和無網(wǎng)絡(luò)的環(huán)境下皆可運行，即它可以讓美工在瀏覽器查看頁面的靜態(tài)效果，也可以讓程序員在服務(wù)器查看帶數(shù)據(jù)的動態(tài)頁面效果。這是由于它支持 html 原型，然后在 html 標簽里增加額外的屬性來達到模板+數(shù)據(jù)的展示方式。瀏覽器解釋 html 時會忽略未定義的標簽屬性，所以 thymeleaf 的模板可以靜態(tài)地運行；當有數(shù)據(jù)返回到頁面時，thymeleaf 標簽會動態(tài)地替換掉靜態(tài)內(nèi)容，使頁面動態(tài)顯示。
2.它提供標準和spring標準兩種方言，可以直接套用模板實現(xiàn)jstl、 ognl表達式效果。
3.thymeleaf 提供spring標準方言和一個與 springmvc 完美集成的可選模塊，可以快速的實現(xiàn)表單綁定、屬性編輯器、國際化等功能。
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: # 主數(shù)據(jù)源 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 # 連接池設(shè)置 druid: initial-size: 5 min-idle: 5 max-active: 20 # 配置獲取連接等待超時的時間 max-wait: 60000 # 配置間隔多久才進行一次檢測，檢測需要關(guān)閉的空閑連接，單位是毫秒 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 # 配置監(jiān)控統(tǒng)計攔截的filters，去掉后監(jiān)控界面sql無法統(tǒng)計，'wall'用于防火墻 filters: stat,wall,slf4j # 通過connectproperties屬性來打開mergesql功能；慢sql記錄 connection-properties: druid.stat.mergesql=true;druid.stat.slowsqlmillis=5000 # 合并多個druiddatasource的監(jiān)控數(shù)據(jù) 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文件都丟在這里，靜態(tài)資源文件也丟在resources資源文件夾下面
新建一個html文件，然后注意加上<html xmlns:th="http://www.thymeleaf.org">
注意thymeleaf語法要求比較嚴格 <meta charset="utf-8" > ，不如這樣寫是不可以的，必須加上斜杠的， <meta charset="utf-8" />
thymeleaf簡單例子
遍歷后臺數(shù)據(jù)
|
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>便簽
靜態(tài)資源使用
|
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>電商門戶網(wǎng)站</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，有需要可以參考
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對服務(wù)器之家的支持。
原文鏈接：http://www.cnblogs.com/mzq123/p/10359234.html
