1. 云图网首页
  2. 技术专区
  3. 编程笔记

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

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

赞 (0)
0
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论