为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 SpringBoot集成Thymeleaf模板引擎

SpringBoot集成Thymeleaf模板引擎

标签：
SpringBoot

简单介绍
目前在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/logsspring:
  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:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{${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:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{/static/images/rachange_ad.jpg}" />链接<a>便签

<a th:href="@{'/portal/item/toDetail/'+{item.spuId}+'/'+{item.skuId}}"><img th:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{${item.imgPath}}" /></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:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{/static/js/jquery-1.3.2.min.js}"></script>
    <script type="text/javascript" th:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{/static/js/html5.js}"></script>
    <script type="text/javascript" th:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{/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:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{/static/js/jquery-1.3.2.min.js}"></script>
    <script type="text/javascript" th:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{/static/js/html5.js}"></script>
    <script type="text/javascript" th:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{/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:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{/static/images/banner_970x355.jpg}" /></a></li>
                    <li><a href="#"><img width="727" height="350" th:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{/static/images/banner_970x355.jpg}" /></a></li>
                    <li><a href="#"><img width="727" height="350" th:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{/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:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{/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:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{${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>



作者：smileNicky
链接：https://www.jianshu.com/p/3abe63de4cbf


点击查看更多内容
发表于 2019.02.15 22:55， 共 2322 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

慕码人8056858

手记
篇
粉丝
350
获赞与收藏
1323

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消