SpringBoot整合Thymeleaf模板引擎

JavaScript SpringBoot CSS · 發表 2019-02-10 14:57:00

摘要：簡單介紹目前在JavaEE領域有幾中比較常用的模板引擎，分別是Jsp、Velocity、Freemarker、Thymeleaf，對Freemark語法不是特別熟悉，不過對於前端頁面渲染效率來說，jsp其實還是最快的，Velocity次之。Thymeleaf雖然渲染效...

簡單介紹

目前在JavaEE領域有幾中比較常用的模板引擎，分別是Jsp、Velocity、Freemarker、Thymeleaf，對Freemark語法不是特別熟悉，不過對於前端頁面渲染效率來說，jsp其實還是最快的，Velocity次之。Thymeleaf雖然渲染效率不是很快，但是語法方面是比較輕巧的，Thymeleaf語法比Velocity輕巧，但是渲染效率不如Velocity

maven配置

因為引入了SpringBoot的parent工程，所以不需要寫版本號

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

application.yml配置

#新增Thymeleaf配置
thymeleaf:
cache: false
prefix: classpath:/templates/
suffix: .html
mode: HTML5
encoding: UTF-8
content-type: text/html

application.yml：

server:
port: 8081
#logging:
#config: classpath:logback_spring.xml.bat
#level:
#com.muses.taoshop: debug
#path: /data/logs

spring:
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簡單例子

遍歷後臺資料

<!--最新上架-->
<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}}"><img th:src="@{${item.imgPath}}" /></a> </p>
<p class="item-buss"><a th:href="@{'/portal/item/toDetail/'+${item.spuId}+'/'+${item.skuId}}"></a></p>
<p class="item-name spec"><a th:href="@{'/portal/item/toDetail/'+${item.spuId}+'/'+${item.skuId}}" 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，

<!--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

<img th:src="@{/static/images/rachange_ad.jpg}" />
連結<a>便籤

靜態資源使用

靜態資源使用

<link th:href="@{/static/css/public.css}" rel="stylesheet" type="text/css" />
<link th:href="@{/static/css/index.css}" 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頁面例子：

<!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="stylesheet" type="text/css" />
<link th:href="@{/static/css/index.css}" 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="#"><img width="727" height="350" th:src="@{/static/images/banner_970x355.jpg}" /></a></li>
<li><a href="#"><img width="727" height="350" th:src="@{/static/images/banner_970x355.jpg}" /></a></li>
<li><a href="#"><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="#" 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}}"><img th:src="@{${item.imgPath}}" /></a> </p>
<p class="item-buss"><a th:href="@{'/portal/item/toDetail/'+${item.spuId}+'/'+${item.skuId}}"></a></p>
<p class="item-name spec"><a th:href="@{'/portal/item/toDetail/'+${item.spuId}+'/'+${item.skuId}}" 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，有需要可以參考

SpringBoot整合Thymeleaf模板引擎

application.yml配置

Thymeleaf簡單例子

您可能也會喜歡…