SpringBoot集成Thymeleaf模板引擎

 2020-08-01 13:18  阅读(767)
文章分类:Spring boot

简单介绍
目前在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>便签

![Image 1][]

静态资源使用

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

[Image 1]:


来源:https://www.cnblogs.com/mzq123

点赞(2)
版权归原创作者所有,任何形式转载请联系作者; Java 技术驿站 >> SpringBoot集成Thymeleaf模板引擎

相关推荐