Spring Boot集成Thymeleaf模板引擎的完整步骤
简单介绍
目前在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/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}}" 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 Boot集成Thymeleaf模板引擎的完整步骤
-
详解Spring Boot工程集成全局唯一ID生成器 UidGenerator的操作步骤
-
详解spring Boot 集成 Thymeleaf模板引擎实例
-
Spring boot搭建web应用集成thymeleaf模板实现登陆
-
Spring Boot整合Redis的完整步骤
-
Spring Boot+Jpa多数据源配置的完整步骤
-
spring boot配置读写分离的完整实现步骤
-
spring boot配置druid连接池的完整步骤
-
Spring Boot集成Thymeleaf模板引擎的完整步骤
-
Spring Boot整合Swagger2的完整步骤详解