参考：https://ultraq.github.io/thymeleaf-layout-dialect/Installation.html

依赖包

注意里面的thymeleaf-layout-dialec就是模板包，必须要安装的，我之前就坑在这里了

  1.  'org.springframework.boot:spring-boot-starter-thymeleaf',
  2.  'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.3.0'

default.html模板页

注意在layout模板里不能再使用其它模板片断了

  1. <!DOCTYPE HTML>
  2. <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.w3.org/1999/xhtml">
  3.     <head lang="en" th:fragment="head">
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  6.         <link href="../../static/css/bootstrap.min.css"
  7.               th:href="@{/css/bootstrap.min.css}"
  8.               rel="stylesheet" media="screen"/>
  10.         <link href="../../static/css/jquery.dataTables.min.css"
  11.               th:href="@{/css/jquery.dataTables.min.css}"
  12.               rel="stylesheet" media="screen"/>
  14.         <link href="../../static/css/mini_springboot.css"
  15.               th:href="@{/css/mini_springboot.css}"
  16.               rel="stylesheet" media="screen"/>
  18.         <title>SpringBoot</title>
  19.     </head>
  20.     <body>
  21.         <div class="container">
  22.             <div th:fragment="header">
  23.                 <nav class="navbar navbar-default">
  24.                     <div class="container-fluid">
  25.                         <div class="navbar-header">
  26.                             <a class="navbar-brand" href="#" th:href="@{/}">Home</a>
  27.                             <ul class="nav navbar-nav">
  28.                                 <li>
  29.                                     <a href="#" th:href="@{/init}">初始化</a>
  30.                                 </li>
  31.                                 <li>
  32.                                     <a href="#" th:href="@{/customers}">客户列表</a>
  33.                                 </li>
  34.                                 <li>
  35.                                     <a href="#" th:href="@{/customerform}">建立客户</a>
  36.                                 </li>
  37.                             </ul>
  39.                         </div>
  40.                     </div>
  41.                 </nav>
  43.             </div>
  45.             <div class="panel panel-default">
  46.                 <div class="panel-heading">Panel heading without title</div>
  47.                 <div class="panel-body">
  48.                     <div layout:fragment="content">content</div>
  49.                 </div>
  50.             </div>
  52.             <div th:fragment="footer">
  54.                 <div class="footer">大叔直通车:www.lindddd.top</div>
  56.                 <script src="../../static/js/jquery.min.js"
  57.                         th:src="@{/js/jquery.min.js}"></script>
  59.                 <script src="../../static/js/bootstrap.min.js"
  60.                         th:src="@{/js/bootstrap.min.js}"></script>
  62.                 <script src="../../static/js/jquery.dataTables.min.js"
  63.                         th:src="@{/js/jquery.dataTables.min.js}"></script>
  65.                 <script src="../../static/js/mini_springboot.js"
  66.                         th:src="@{/js/mini_springboot.js}"></script>
  68.             </div>
  69.         </div>
  71.     </body>
  72. </html>

使用它

  1. <!DOCTYPE HTML>
  2. <html xmlns:th="http://www.thymeleaf.org"
  3.       xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  4.       layout:decorator="~{layout/default}">
  5. <head>
  6.     <title>Spring Boot and Thymeleaf - Greeting with Thymeleaf Layout Dialect!</title>
  7. </head>
  8. <body>
  10. <div layout:fragment="content">
  11.     <div th:if="${not #lists.isEmpty(customers)}">
  12.         <table id="customersTable" class="table table-striped">
  13.             <thead>
  14.             <tr>
  15.                 <th>Name</th>
  16.                 <th>Email</th>
  17.                 <th>Age</th>
  18.                 <th></th>
  19.             </tr>
  20.             </thead>
  22.             <tbody>
  23.             <tr th:each="customer : ${customers}">
  24.                 <td th:text="${customer.id}"></td>
  25.                 <td th:text="${customer.name}"></td>
  26.                 <td th:text="${customer.email}"></td>
  27.                 <td th:text="${customer.age}"></td>
  28.                 <td><a th:href="${'/customerdetail/'+customer.id}">查看</a></td>
  29.             </tr>
  30.             </tbody>
  32.         </table>
  33.     </div>
  34. </div>
  36. </body>
  37. </html>

springboot~thymeleaf页面布局的步骤的更多相关文章

  1. Thymeleaf利用layout.html文件生成页面布局框架

    1.layout.html文件 生成布局 <!DOCTYPE html> <html lang="zh-CN" xmlns:th="http://www ...

  2. SpringBoot thymeleaf模板页面没提示，SpringBoot thymeleaf模板插件安装

    SpringBoot thymeleaf模板插件安装 SpringBoot thymeleaf模板Html页面没提示 SpringBoot  thymeleaf模板页面没提示 SpringBoot t ...

  3. Springboot+JdbcTemplate +thymeleaf 页面 做迷你版的bug系统

    https://www.cnblogs.com/qianjinyan/p/10065160.html  在我上一篇随笔中介绍了关于要做的系统的数据结构,连接如上 今天实现连接mssql server, ...

  4. 解决thymeleaf layout布局不生效

    今天使用thymeleaf layout布局时总是不生效,特此把解决问题的步骤和几个关键点记录下来备忘. 一.检查依赖 1.thymeleaf必备maven依赖: <dependency> ...

  5. springboot: thymeleaf 使用详解

    springboot:thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4.0中推荐使用thymeleaf来做前端模版引擎 ...

  6. springboot thymeleaf【转】【补】

    thymeleaf模板 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 1.引入thymeleaf依赖 <!-- ...

  7. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  8. CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  9. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

随机推荐

  1. 【codeforces 718 C&D】C. Sasha and Array&D. Andrew and Chemistry

    C. Sasha and Array 题目大意&题目链接: http://codeforces.com/problemset/problem/718/C 长度为n的正整数数列,有m次操作,$o ...

  2. POJ_2653_Pick-up sticks_判断线段相交

    POJ_2653_Pick-up sticks_判断线段相交 Description Stan has n sticks of various length. He throws them one a ...

  3. BZOJ_2343_[Usaco2011 Open]修剪草坪 _单调队列_DP

    BZOJ_2343_[Usaco2011 Open]修剪草坪 _单调队列_DP 题意: N头牛,每头牛有一个权值,选择一些牛,要求连续的不能超过k个,求选择牛的权值和最大值 分析: 先考虑暴力DP,f ...

  4. 配置(迁移)Laravel的注意事项

    1.如果Laravel是在Linux下运行,如果权限不足,会报错 2.如果是从git上clone下来的项目,需要安装composer,切到项目根目录下 composer install compose ...

  5. Uiautomator--出现报错“urllib3.exceptions.ProtocolError:<'Connection aborted.',error<10054,''>>”的解决方式！

    在运行uiautomator时,出现报错"urllib3.exceptions.ProtocolError:<'Connection aborted.',error<10054, ...

  6. 文本离散表示（三）：TF-IDF结合n-gram进行关键词提取和文本相似度分析

    这是文本离散表示的第二篇实战文章,要做的是运用TF-IDF算法结合n-gram,求几篇文档的TF-IDF矩阵,然后提取出各篇文档的关键词,并计算各篇文档之间的余弦距离,分析其相似度. TF-IDF与n ...

  7. 安卓开发笔记（二十六）：Splash实现首页快速开屏功能

    我们在进行安卓开发的时候,首页开有两种方式,一种是利用handler将一个活动进行延时,时间到达之后软件则会跳转到第二个活动当中.而另一种方法则是更加常用的方法,利用splash实现首页的快速开屏,这 ...

  8. 一份完整的阿里云 Redis 开发规范，值得收藏！

    来源:yq.aliyun.com/articles/531067 作者:付磊-起扬 本文主要介绍在使用阿里云Redis的开发规范,从下面几个方面进行说明. 键值设计 命令使用 客户端使用 相关工具 通 ...

  9. MySQL 复制 - 性能与扩展性的基石 3：常见问题及解决方案

    主备复制过程中有很大可能会出现各种问题,接下来我们就讨论一些比较普遍的问题,以及当遇到这些问题时,如何解决或者预防问题发生. 1 数据损坏或丢失 问题描述:服务器崩溃.断电.磁盘损坏.内存或网络错误等 ...

  10. Mybatis之旅第六篇-关联查询

    一.引言 通过动态SQL我们可以进行复杂SQL的编写,但之前的例子都是单表查询,在实际开发中,当然不可能都是单表,很多时候我们需要进行关联多表查询(有些公司为了性能还是尽量的使用单表查询),表与表之间 ...