Spring Boot集成Thymeleaf模板引擎的完整步驟

更新時間：2019年02月11日 10:11:16 作者：javahih

這篇文章主要給大家介紹了關于Spring Boot集成Thymeleaf模板引擎的完整步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

簡單介紹

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

thymeleaf 支持html5標準；是一種模板引擎框架（TemplateEngine Framework）；thymeleaf 頁面無須部署到servlet開發(fā)到服務器上，直接通過瀏覽器就能打開。它可以完全替代 JSP 。

特點：

1.Thymeleaf 在有網(wǎng)絡和無網(wǎng)絡的環(huán)境下皆可運行，即它可以讓美工在瀏覽器查看頁面的靜態(tài)效果，也可以讓程序員在服務器查看帶數(shù)據(jù)的動態(tài)頁面效果。這是由于它支持 html 原型，然后在 html 標簽里增加額外的屬性來達到模板+數(shù)據(jù)的展示方式。瀏覽器解釋 html 時會忽略未定義的標簽屬性，所以 thymeleaf 的模板可以靜態(tài)地運行；當有數(shù)據(jù)返回到頁面時，Thymeleaf 標簽會動態(tài)地替換掉靜態(tài)內容，使頁面動態(tài)顯示。

2.它提供標準和spring標準兩種方言，可以直接套用模板實現(xiàn)JSTL、 OGNL表達式效果。

3.Thymeleaf 提供spring標準方言和一個與 SpringMVC 完美集成的可選模塊，可以快速的實現(xiàn)表單綁定、屬性編輯器、國際化等功能。

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:

 # 主數(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

 # 連接池設置
 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
  # 配置監(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ù)

<!--最新上架-->
  <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，

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

靜態(tài)資源使用

<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頁面例子：

<!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，有需要可以參考

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

Maven dependency中的scope案例講解
Maven的一個哲學是慣例優(yōu)于配置(Convention Over Configuration), Maven默認的依賴配置項中,scope的默認值是compile,本文給大家介紹Maven dependency中的scope案例講解,感興趣的朋友跟隨小編一起看看吧
2024-02-02
在springboot中使用p6spy方式
這篇文章主要介紹了在springboot中使用p6spy方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
Spring?Boot項目中遇到`if-else`語句七種具體使用方法解析
當在Spring?Boot項目中遇到大量if-else語句時,優(yōu)化這些代碼變得尤為重要,因為它們不僅增加了維護難度,還可能影響應用程序的可讀性和性能,以下是七種具體的方法,用于在Spring?Boot項目中優(yōu)化和重構if-else語句,感興趣的朋友一起看看吧
2024-07-07
ThreadLocal線程在Java框架中的應用及原理深入理解
這篇文章主要介紹了ThreadLocal在Java框架中的應用及原理深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2024-01-01
Java操作XML轉JSON數(shù)據(jù)格式詳細代碼實例
在Java中我們可以使用一些現(xiàn)成的庫來實現(xiàn)XML到JSON的轉換,下面這篇文章主要給大家介紹了關于Java操作XML轉JSON數(shù)據(jù)格式的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-04-04
Java 如何優(yōu)雅的拷貝對象屬性
這篇文章主要介紹了Java 如何優(yōu)雅的拷貝對象屬性，幫助大家更好的理解和學習Java，感興趣的朋友可以了解下
2020-11-11
使用SpringCloudAlibaba整合Dubbo
這篇文章主要介紹了使用SpringCloudAlibaba整合Dubbo，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-10-10
詳解如何將JAR包發(fā)布到Maven中央倉庫
這篇文章主要介紹了詳解如何將JAR包發(fā)布到Maven中央倉庫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
Java實現(xiàn)雪花算法的示例代碼
SnowFlow算法是Twitter推出的分布式id生成算法，主要核心思想就是利用64bit的long類型的數(shù)字作為全局的id。本文將用Java語言實現(xiàn)雪花算法，感興趣的可以學習一下
2022-03-03
spring boot 命令行啟動的方式
這篇文章主要介紹了spring boot 命令行啟動的方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-03-03