Complete steps for Spring Boot to integrate the Thymeleaf template engine
- 2021-06-28 12:31:28
- OfStack
Brief introduction
There are currently several templates engines commonly used in the JavaEE field, Jsp, Velocity, Freemarker, Thymeleaf. They are not very familiar with Freemark syntax, but jsp is actually the fastest for front-end page rendering efficiency, followed by Velocity.Thymeleaf rendering efficiency is not very fast, but the syntax is lighter, Thymeleaf syntax is lighter than Velocity, but rendering efficiency is not as efficient as Velocity
thymeleaf supports the html5 standard;Is a template engine framework (TemplateEngine Framework);The thymeleaf page does not have to be deployed to the servlet development server to open directly through a browser.It can completely replace JSP.
Characteristic:
1.Thymeleaf works in both network and non-network environments, that is, it allows artists to view the static effect of a page in a browser, and programmers to view dynamic page effects with data in a server.This is because it supports the html prototype and then adds additional attributes to the html tag to achieve the template+data presentation.Undefined tag properties are ignored when the browser interprets html, so the thymeleaf template can run statically.When data is returned to the page, the Thymeleaf tag dynamically replaces static content to make the page display dynamically.
2. It provides two dialects, the standard and the spring standard, and can directly apply templates to achieve the effect of JSTL and OGNL expressions.
3. Thymeleaf provides the spring standard dialect and an optional module that integrates perfectly with SpringMVC, enabling fast form binding, property editor, internationalization and other functions.
maven Configuration
Since the parent project for SpringBoot was introduced, it is not necessary to write a version number
<!-- Themeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>application.yml Configuration
# Add to Thymeleaf To configure
thymeleaf:
cache: false
prefix: classpath:/templates/
suffix: .html
mode: HTML5
encoding: UTF-8
content-type: text/htmlapplication.yml:
server:
port: 8081
#logging:
# config: classpath:logback_spring.xml.bat
# level:
# com.muses.taoshop: debug
# path: /data/logs
spring:
datasource:
# Master Data Source
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
# Connection pool settings
druid:
initial-size: 5
min-idle: 5
max-active: 20
# Configure how long to wait for a connection to timeout
max-wait: 60000
# Configuration interval how long to proceed 1 Secondary check to detect idle connections that need to be closed in milliseconds
time-between-eviction-runs-millis: 60000
# To configure 1 Minimum lifetime of connections in pool, in milliseconds
min-evictable-idle-time-millis: 300000
# Oracle Please use select 1 from dual
validation-query: SELECT 'x'
test-while-idle: true
test-on-borrow: false
test-on-return: false
# open PSCache And specify on each connection PSCache Size
pool-prepared-statements: true
max-pool-prepared-statement-per-connection-size: 20
# Configuring monitoring statistics intercept filters , removes the monitor interface sql Unable to count, 'wall' For firewalls
filters: stat,wall,slf4j
# adopt connectProperties Property to open mergeSql Functions;slow SQL Record
connection-properties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=5000
# Merge multiple DruidDataSource Monitoring data
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
# Add to Thymeleaf To configure
thymeleaf:
cache: false
prefix: classpath:/templates/
suffix: .html
mode: HTML5
encoding: UTF-8
content-type: text/html
#Jedis To configure
# jedis :
# pool :
# host : 127.0.0.1
# port : 6379
# password : redispassword
# timeout : 0
# config :
# maxTotal : 100
# maxIdle : 10
# maxWaitMillis : 100000
Add html file
Create a new templates folder under the resources resource folder, where all html files are dropped and static resource files are dropped under the resources resource folder
Create a new html file and note that the
<html xmlns:th="http://www.thymeleaf.org">
Note that Thymeleaf syntax is strict
<meta charset="utf-8" >
It is impossible to write like this. Slash must be added.
<meta charset="utf-8" />
A simple example of Thymeleaf
Traversing background data
<!-- new arrival -->
<div class="first-pannel clearfix">
<div class="index-f clearfix">
<h3 class="index-f-head"> new arrival <span> Every day new, every day surprise </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> element </p>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- new arrival //-->
Introducing Files
Thymeleaf introduces another html file that can use th:replace or 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 Note src
<img th:src="@{/static/images/rachange_ad.jpg}" />link < a > Note
Static Resource Usage
<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>Give an example of an html page:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title> E-Commerce Portal </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-->
<!-- Fast charging -->
<div class="index-fast-recharge">
<div class="recharge-body">
<div class="recharge-head">
<h2><em class="icon-phone"></em> Prepaid Refill </h2>
</div>
<div class="recharge-con">
<div class="recharge-form">
<p>
<label class="name"> Cell-phone number: </label>
<input placeholder=" Support Telecommunications " type="text" class="text-box" />
</p>
<p>
<label class="name"> Charging method: </label>
<label>
<input type="radio" class="rd" />
Telecom recharge card </label>
<label>
<input type="radio" class="rd" />
Bank card </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"> Recharge immediately </a> </div>
</div>
<div class="recharge-ad"> <img th:src="@{/static/images/rachange_ad.jpg}" /> </div>
</div>
</div>
</div>
<!--// Fast charging -->
<div class="clearfix"></div>
<!-- new arrival -->
<div class="first-pannel clearfix">
<div class="index-f clearfix">
<h3 class="index-f-head"> new arrival <span> Every day new, every day surprise </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> element </p>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- new arrival //-->
</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);
}
// Mouse Move In Stops Playing
demo.mouseover(function(){
clearInterval(t);
});
demo.mouseout(function(){
autoSlide();
});
});
</script>
</body>
</html>Code taken from an individual open source project: https://github.com/u014427391/taoshop, available for reference if needed
summary