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

2019-11-26 09:17:02

字体：大中小

来源：转载

供稿：网友

简单介绍

目前在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工程，所以不需要写版本号

<!-- 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/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简单例子

遍历后台数据

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

静态资源使用

<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>电商门户网站</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，有需要可以参考

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对武林网的支持。

上一篇：Spring Cloud原理详解

下一篇：Mybatis延迟加载和缓存深入讲解