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

2024-08-05 16:05:25

简单介绍

目前在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+bootstrap实现后台管理系统界面

最近在学spring boot ,学习一个框架无非也就是使用它来做以前做的事情,两者比较才有不同,说一下自己使用的体会. 先来说下spring boot ,微框架.快速开发,相当于零配置,从一个大神那看来的说:spring boot 相当于框架的框架 ,就是集成了很多,用哪个添加哪个的依赖就行,这样的话自己看不到配置,对于习惯了使用配置刚使用spring boot的开发者来说可能还有点不习惯,什么都不用配,看不到配置感觉对项目整体架构有点陌生,再说在spring boot 中使用 thymele
Spring boot搭建web应用集成thymeleaf模板实现登陆

Spring boot 搭建web应用集成了thymeleaf模板实现登陆下面是pom.xml的配置 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schema
spring boot thymeleaf 图片上传web项目根目录操作步骤

thymeleaf介绍简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果.这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式.浏览器解释 html 时会忽略未定义的标签属性,所以 t
Spring Boot 2 Thymeleaf服务器端表单验证实现详解

这篇文章主要介绍了Spring Boot 2 Thymeleaf服务器端表单验证实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下表单验证分为前端验证和服务器端验证. 服务器端验证方面,Java提供了主要用于数据验证的JSR 303规范,而Hibernate Validator实现了JSR 303规范. 项目依赖加入spring-boot-starter-thymeleaf时,默认就会加入Hibernate Validator的依赖. 开
springboot如何使用thymeleaf模板访问html页面

引言在传统的web开发中通常使用jsp页面,首先需要在pom文件中引入springmvc相关的包,然后写springmvc的配置文件(包括访问资源的路径解析),之后还需再web.xml中配置访问路由.这无疑太麻烦了,每次开发前都需要编写大量的配置文件. springboot为此提供了高效便捷的解决方案,只需再pom.xml中添加web开发的依赖,便可进行web开发,省去了繁琐的配置步骤. 下面为web开发引入的依赖 <dependency> <groupId>org.spring
SpringBoot thymeleaf eclipse热部署方案操作步骤

网上找了好多的springboot热部署方案,也尝试了好几种方法,下面是我的成功方案跟大家分享操作步骤 1.pom中添加热部署依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> </dependency&g
SpringBoot引入Thymeleaf的实现方法

1.Thymeleaf简介 Thymeleaf是个XML/XHTML/HTML5模板引擎,可以用于Web与非Web应用 Thymeleaf的主要目标在于提供一种可被浏览器正确显示的.格式良好的模板创建方式,因此也可以用作静态建模,Thymeleaf的可扩展性也非常棒.你可以使用它定义自己的模板属性集合,这样就可以计算自定义表达式并使用自定义逻辑,Thymeleaf还可以作为模板引擎框架. 2.引入Thymeleaf 引入依赖在maven(pom.xml)中直接引入: <dependency>
Spring Boot配置Thymeleaf（gradle）的简单使用

最近项目用到了Spring Boot ,但是在控制器返回html视图并渲染参数的时候,存在了疑问.后面考虑用Thymeleaf ,感觉真的不错,下面分享给大家总共四步: jar 引入控制器参数传递 html标签引入 Thymeleaf 缓存设置一.相关Jar的引用 1.maven的引用方式: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-
Spring Boot集成Thymeleaf模板引擎的完整步骤

简单介绍目前在JavaEE领域有几中比较常用的模板引擎,分别是Jsp.Velocity.Freemarker.Thymeleaf,对Freemark语法不是特别熟悉,不过对于前端页面渲染效率来说,jsp其实还是最快的,Velocity次之.Thymeleaf虽然渲染效率不是很快,但是语法方面是比较轻巧的,Thymeleaf语法比Velocity轻巧,但是渲染效率不如Velocity thymeleaf 支持html5标准:是一种模板引擎框架(TemplateEngine Framework):
详解spring Boot 集成 Thymeleaf模板引擎实例

今天学习了spring boot 集成Thymeleaf模板引擎.发现Thymeleaf功能确实很强大.记录于此,供自己以后使用. Thymeleaf: Thymeleaf是一个java类库,他是一个xml/xhtml/html5的模板引擎,可以作为mvc的web应用的view层. Thymeleaf还提供了额外的模块与Spring MVC集成,所以我们可以使用Thymeleaf完全替代jsp. spring Boot 通过org.springframework.boot.autoconfigu
Spring Boot实战之模板引擎

虽然现在很多开发,都采用了前后端完全分离的模式,即后端只提供数据接口,前端通过AJAX请求获取数据,完全不需要用的模板引擎.这种方式的优点在于前后端完全分离,并且随着近几年前端工程化工具和MVC框架的完善,使得这种模式的维护成本相对来说也更加低一点.但是这种模式不利于SEO,并且在性能上也会稍微差一点,还有一些场景,使用模板引擎会更方便,比如说邮件模板.这篇文章主要讨论Spring boot与模板引擎Thymeleaf.Freemaker以及JSP的集成. 一.集成Thymeleaf 第一步:引
Spring Boot集成Thymeleaf的方法

一.Java模板引擎模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 在java中,主要的模板引擎有JSP.Thymeleaf.FreeMarker.Velocity等. 虽然随着前后端分离的崛起和流行,模板引擎已遭受到冷落,但不少旧项目依然使用java的模板引擎渲染界面,而偶尔自己写一些练手项目,使用模板引擎也比起前后端分离要来的快速. 本系列会分别讲解SpringBoot
spring boot使用thymeleaf模板的方法详解

前言 Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果.这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式.浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以
spring boot配置druid连接池的完整步骤

Druid的简介 Druid首先是一个数据库连接池.Druid是目前最好的数据库连接池,在功能.性能.扩展性方面,都超过其他数据库连接池,包括DBCP.C3P0.BoneCP.Proxool.JBoss DataSource.Druid已经在阿里巴巴部署了超过600个应用,经过一年多生产环境大规模部署的严苛考验.Druid是阿里巴巴开发的号称为监控而生的数据库连接池! Druid的功能 1.替换DBCP和C3P0.Druid提供了一个高效.功能强大.可扩展性好的数据库连接池. 2.可以监控数据库
spring boot + quartz集群搭建的完整步骤

quartz集群能力: quartz集群分为水平集群和垂直集群,水平集群即将定时任务节点部署在不同的服务器,水平集群最大的问题就是时钟同步问题, quartz集群强烈要求时钟同步,若时钟不能同步,则会导致集群中各个节点状态紊乱,造成不可预知的后果,请自行搜索服务器时钟同步, 若能保证时钟同步,水平集群能保证服务的可靠性,其中一个节点挂掉或其中一个服务器宕机,其他节点依然正常服务:垂直集群则是集群各节点部署在同一台服务器, 时钟同步自然不是问题,但存在单点故障问题,服务器宕机会严重影响服务的可用性
Spring Boot+Jpa多数据源配置的完整步骤

关于有时候,随着业务的发展,项目关联的数据来源会变得越来越复杂,使用的数据库会比较分散,这个时候就会采用多数据源的方式来获取数据.另外,多数据源也有其他好处,例如分布式数据库的读写分离,集成多种数据库等等. 下面分享我在实际项目中配置多数据源的案例.话不多说了,来一起看看详细的介绍吧步骤 1.application.yml文件中,配置数据库源.这里primary是主库,secondary是从库. server: port: 8089 # 多数据源配置 #primary spring: pri
SpringMVC中使用Thymeleaf模板引擎实例代码

本文研究的主要是SpringMVC中使用Thymeleaf模板引擎的相关内容,具体介绍如下. Thymeleaf提供了一组Spring集成,允许您将其用作Spring MVC应用程序中全面替代JSP的功能. Maven依赖  <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring4</artifa
Spring Boot 与 kotlin 使用Thymeleaf模板引擎渲染web视图的方法

本篇给大家介绍Spring Boot 与 kotlin 使用Thymeleaf模板引擎渲染web视图. 静态资源访问在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源,使用Spring Boot 与 kotlin如何去支持这些静态资源?,很简单. 默认配置 Spring Boot默认提供静态资源目录位置需置于 classpath 下,目录名需符合如下规则: /static /public /resources /META-INF/resources 举例:我们可以在src/

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

相关推荐

随机推荐