SpringBoot集成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 

 div 

 h3 最新上架 span 每天都有上新，每天都有惊喜 /span /h3 

 div 

 div 

 li th:each="item : ${items}" 

 p a th:href="@{/portal/item/toDetail/+${item.spuId}+/+${item.skuId}}" img th:src="@{${item.imgPath}}" / /a /p 

 p a th:href="@{/portal/item/toDetail/+${item.spuId}+/+${item.skuId}}" /a /p 

 p a th:href="@{/portal/item/toDetail/+${item.spuId}+/+${item.skuId}}" th:text="${item.itemName}" /a /p 

 p em th:text="${item.mPrice}" /em 元 /p 

 /li 

 /ul 

 /div 

 /div 

 /div 

 /div 

 !--最新上架//-- 

引入文件
Thymeleaf引入另外一个html文件可以使用th:replace或者th:include，

 !--topBar-- 

 div th:replace="/top_bar :: .topBar" /div 

 !--//topBar-- 

 !--headerMain-- 

 div th:replace="/header_main :: .headerMain" /div 

 !--//headerMain-- 

 !--headerNav-- 

 div 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 

 !--topBar-- 

 div th:replace="/top_bar :: .topBar" /div 

 !--//topBar-- 

 !--headerMain-- 

 div th:replace="/header_main :: .headerMain" /div 

 !--//headerMain-- 

 !--headerNav-- 

 div th:replace="/index_header_nav :: .headerNav" /div 

 !--//headerNav-- 

 /header 

 !--//header-- 

 !--container-- 

 div 

 div 

 !--banner-- 

 div 

 div 

 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 

 li /li 

 li /li 

 li /li 

 /ul 

 /div 

 !--//banner-- 

 !--快捷充值-- 

 div 

 div 

 div 

 h2 em /em 话费充值 /h2 

 /div 

 div 

 div 

 label 手机号： /label 

 input placeholder="支持电信" type="text" / 

 label 充值方式： /label 

 label 

 input type="radio" / 

 电信充值卡 /label 

 label 

 input type="radio" / 

 银行卡 /label 

 div a href="#" 立即充值 /a /div 

 /div 

 div img th:src="@{/static/images/rachange_ad.jpg}" / /div 

 /div 

 /div 

 /div 

 !--//快捷充值-- 

 div /div 

 !--最新上架-- 

 div 

 div 

 h3 最新上架 span 每天都有上新，每天都有惊喜 /span /h3 

 div 

 div 

 li th:each="item : ${items}" 

 p a th:href="@{/portal/item/toDetail/+${item.spuId}+/+${item.skuId}}" img th:src="@{${item.imgPath}}" / /a /p 

 p a th:href="@{/portal/item/toDetail/+${item.spuId}+/+${item.skuId}}" /a /p 

 p a th:href="@{/portal/item/toDetail/+${item.spuId}+/+${item.skuId}}" th:text="${item.itemName}" /a /p 

 p em th:text="${item.mPrice}" /em 元 /p 

 /li 

 /ul 

 /div 

 /div 

 /div 

 /div 

 !--最新上架//-- 

 /div 

 /div 

 !--//container-- 

 !--footer-- 

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

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/17044.html