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 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模板引擎的更多相关文章
- 九、SpringBoot集成Thymeleaf模板引擎
Thymeleaf咋读!??? 呵呵,是不是一脸懵逼...哥用我的大学四级英文知识告诉你吧:[θaimlif]. 啥玩意?不会音标?...那你就这样叫它吧:“赛母李府”,大部分中国人是听不出破绽的.. ...
- 【Springboot】Springboot整合Thymeleaf模板引擎
Thymeleaf Thymeleaf是跟Velocity.FreeMarker类似的模板引擎,它可以完全替代JSP,相较与其他的模板引擎,它主要有以下几个特点: 1. Thymeleaf在有网络和无 ...
- SpringBoot使用thymeleaf模板引擎
(1).添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...
- SpringBoot日记——Thymeleaf模板引擎篇
开发通常我们都会使用模板引擎,比如:JSP.Velocity.Freemarker.Thymeleaf等等很多,那么模板引擎是干嘛用的? 模板引擎,顾名思义,是一款模板,模板中可以动态的写入一些参数, ...
- SpringBoot：2.SpringBoot整合Thymeleaf模板引擎渲染web视图
在Web开发过程中,Spring Boot可以通过@RestController来返回json数据,那如何渲染Web页面?Spring Boot提供了多种默认渲染html的模板引擎,主要有以下几种: ...
- springboot整合Thymeleaf模板引擎
引入依赖 需要引入Spring Boot的Thymeleaf启动器依赖. <dependency> <groupId>org.springframework.boot</ ...
- Springboot与Thymeleaf模板引擎整合基础教程(附源码)
前言 由于在开发My Blog项目时使用了大量的技术整合,针对于部分框架的使用和整合的流程没有做详细的介绍和记录,导致有些朋友用起来有些吃力,因此打算在接下来的时间里做一些基础整合的介绍,当然,可能也 ...
- Springboot系列：Springboot与Thymeleaf模板引擎整合基础教程(附源码)
前言 由于在开发My Blog项目时使用了大量的技术整合,针对于部分框架的使用和整合的流程没有做详细的介绍和记录,导致有些朋友用起来有些吃力,因此打算在接下来的时间里做一些基础整合的介绍,当然,可能也 ...
- SpringBoot使用thymeleaf模板引擎引起的模板视图解析错误
Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as ...
随机推荐
- docker创建镜像及push镜像出错问题
docker build 出错 Got permission denied while trying to connect to the Docker daemon socket at unix:/ ...
- Linux permission denied问题
初试Linux 本来想试一试递归的mkdir -p结果遇到了permission denied,但是自己明明是管理员啊 查了博客,在文件名前加上chmod 777 ,例如chmod 777 temp ...
- lllll
- 分享一个14年写的用户管理类-swift版
AccountManager类 14年设计,从swift 0.9开始,迭代到现在swift4.0版本,总体几乎没什么改动,简单稳定. 其实现的思路主要还是借助之前net反射的经验,实现了自动保存用户信 ...
- nginx简介与配置
nginx简介 nginx(发音同engine x)是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like协议下发行. nginx由俄罗斯的程序 ...
- JSP·随笔
1.简介 > HTML - HTML擅长显示一个静态的网页,但是不能调用Java程序. > Servlet - Servlet擅长调用Java程序和后台进 ...
- 【Selenium】【BugList6】调用IE，未启用保护模式，报：selenium.common.exceptions.WebDriverException: Message: Unexpected error launching Internet Explorer. Protected Mode settings are not the same for all zones.
>>> driver = webdriver.Ie() 解决方法: 1.打开Ie浏览器 , 工具 ->Internet选项 ->安全 2.去掉4个区域的安全保护模式
- Js2WordCloud 词云用法
1.引入 npm 安装: npm install js2wordcloud --save 通过script引入: <script src="dist/js2wordcloud.min. ...
- mybatis-plus 3.X 配置
官网配置参数说明地址:https://mp.baomidou.com/config/#logicdeletevalue 本地配置:yml mybatis-plus: mapper-locations: ...
- Spring流行的十大理由
Spring大概是每个JAVA程序员都听过的框架,但是它为什么能这么流行? 听到咕泡学院的Tom老师的公开课,下面是他总结的阿里为什么选择Spring的十大理由,我觉得这也是Spring能流行的原因: ...