简单介绍

目前在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. python基础：条件循环字符串

    一. 完成完整的温度转换程序 使用while True 循环,摄氏度转换为华氏度按1,华氏度转换成摄氏度按2,按其他数字退出循环. while True: a = int(input('摄氏度转换为华 ...

  2. 关于CDN与缓存（浏览器和CDN）

    本文目录:一.引入 二.CDN定义 三.关于缓存 四.浏览器缓存 一.引入 客户端直接从源站点获取数据,当服务器访问量大时会影响访问速度,进而影响用户体验,且无法保证客户端与源站点间的距离足够短,适合 ...

  3. 记一次Struts2 内核问题分析解决

    问题场景描述 生产环境某个处理耗时比较长的接口,吞吐能力极差.客服反馈此功能长期处于毫无响应状态. 具体表现 系统启动后第一次调用耗时极慢,长时间不响应.紧随之后发起的请求也同时没有响应. 等待第一次 ...

  4. Oracle学习——dmp文件(表)导入与导出

    Oracle学习——dmp文件(表)导入与导出 2014-12-28      0个评论    来源:张文康 廊坊师范学院信息技术提高班 第九期   收藏    我要投稿 前言 关于dmp文件我们用的 ...

  5. 高斯混合模型（GMM） - 混合高斯回归（GMR）

    http://www.zhihuishi.com/source/2073.html 高斯模型就是用高斯概率密度函数(正态分布曲线)精确地量化事物,将一个事物分解为若干的基于高斯概率密度函数(正态分布曲 ...

  6. ajax 参数记录

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  7. JB的IDE可视化MongoDB、MySQL数据库信息

    一.问题: 在使用JB的IDE的时候(pycharm.IDEA等)可视化mysql和mongodb的数据库信息,效果如下 MySQL: MongoDB:  可视化数据表关系: 二.方法: 1.MySQ ...

  8. javabean转换为map对象

    在调用第三方接口发现对方使用map进行接收(不包括秘钥等),将bean类属性转换为map,直接贴代码: /** * JavaBean对象转化成Map对象 * * @param javaBean */p ...

  9. MFC选择文件(夹)按钮实现

    MFC选择文件(夹)按钮实现 选择文件(夹) void CFileSelectDlg::OnBnClickedButtonSelect() { if(((CButton*)(GetDlgItem(ID ...

  10. s6 传输层

    标题 s6-1 传输层概述(2019-04-06 21:19) s6-2 UDP(2019-04-07 08:39) s6-3 通信模型(2019-04-07 08:47) s6-4 TCP 数据段( ...