简单介绍

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

SpringBoot集成Thymeleaf模板引擎的更多相关文章

  1. 九、SpringBoot集成Thymeleaf模板引擎

    Thymeleaf咋读!??? 呵呵,是不是一脸懵逼...哥用我的大学四级英文知识告诉你吧:[θaimlif]. 啥玩意?不会音标?...那你就这样叫它吧:“赛母李府”,大部分中国人是听不出破绽的.. ...

  2. 【Springboot】Springboot整合Thymeleaf模板引擎

    Thymeleaf Thymeleaf是跟Velocity.FreeMarker类似的模板引擎,它可以完全替代JSP,相较与其他的模板引擎,它主要有以下几个特点: 1. Thymeleaf在有网络和无 ...

  3. SpringBoot使用thymeleaf模板引擎

    (1).添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...

  4. SpringBoot日记——Thymeleaf模板引擎篇

    开发通常我们都会使用模板引擎,比如:JSP.Velocity.Freemarker.Thymeleaf等等很多,那么模板引擎是干嘛用的? 模板引擎,顾名思义,是一款模板,模板中可以动态的写入一些参数, ...

  5. SpringBoot：2.SpringBoot整合Thymeleaf模板引擎渲染web视图

    在Web开发过程中,Spring Boot可以通过@RestController来返回json数据,那如何渲染Web页面?Spring Boot提供了多种默认渲染html的模板引擎,主要有以下几种: ...

  6. springboot整合Thymeleaf模板引擎

    引入依赖 需要引入Spring Boot的Thymeleaf启动器依赖. <dependency> <groupId>org.springframework.boot</ ...

  7. Springboot与Thymeleaf模板引擎整合基础教程(附源码)

    前言 由于在开发My Blog项目时使用了大量的技术整合,针对于部分框架的使用和整合的流程没有做详细的介绍和记录,导致有些朋友用起来有些吃力,因此打算在接下来的时间里做一些基础整合的介绍,当然,可能也 ...

  8. Springboot系列：Springboot与Thymeleaf模板引擎整合基础教程(附源码)

    前言 由于在开发My Blog项目时使用了大量的技术整合,针对于部分框架的使用和整合的流程没有做详细的介绍和记录,导致有些朋友用起来有些吃力,因此打算在接下来的时间里做一些基础整合的介绍,当然,可能也 ...

  9. SpringBoot使用thymeleaf模板引擎引起的模板视图解析错误

    Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as ...

随机推荐

  1. vue中部分api解释 （$nextTick）

    1:this.$nextTick(function(){ }) 传如的参数是一个函数 这个API主要是获取dom元素 为什么需要这个api,在vue框架开发中,更新dom是一个异步操作,如果更新完do ...

  2. 31. pt-variable-advisor

    pt-variable-advisor h=192.168.100.101,P=3306,u=admin,p=admin mysqladmin var>/root/test/pt-variabl ...

  3. 用JDOM和DOM4J解析节点名节点值

    1.用JDOM解析节点名和节点值 1.创建一个SAXBuilder对象 2.创建一个输入流, 将xml文件加载到文件中 3.   通过saxBuilder的方法,将输入流加载到saxBuilder 4 ...

  4. DataTables warning : Requested unknown parameter '0' from the data source for row 0错误

    在做datatables的项目,从后台取得数据后,返回给datatables界面时会报下面的错误: DataTables warning : Requested unknown parameter ' ...

  5. mysql伪列

      <!-- NOTE:internal_name_trim使用的是伪列,而不是数据库返回的数据 --><select id="listByStoreIdAndPartsN ...

  6. pytest框架之fixture详细使用

    本人之前写了一套基于unnitest框架的UI自动化框架,但是发现了pytest框架之后觉得unnitest太low,现在重头开始学pytest框架,一边学习一边记录,和大家分享,话不多说,那就先从p ...

  7. squid故障汇总

    1.COSS will not function without large file support (off_t is 4 bytes long. Please reconsider recomp ...

  8. 20175316盛茂淞 2018-2019-2 《Java程序设计》第6周学习总结

    20175316盛茂淞 2018-2019-2 <Java程序设计>第6周学习总结 教材学习内容总结 第7章 内部类与异常类 1.使用 try.catch Java中所有信息都会被打包为对 ...

  9. 安装 redis 拓展

    PHP API 20121113 PHP Extension 20121212 Zend Extension 220121212 Zend Extension Build API220121212,T ...

  10. vue路由独享守卫beforeEnter

    在某个路由中,使用beforeEnter()方法,参数是to,from,next 和全局路由守卫的用法是一样的 例子: import Vue from 'vue' import Router from ...