经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » Java相关 » Java » 查看文章
springboot~thymeleaf页面布局的步骤
来源：cnblogs　　作者：张占岭　　时间：2018/11/23 10:20:39　　对本文有异议

参考：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"/>
  11.         <link href="../../static/css/jquery.dataTables.min.css"
  12.               th:href="@{/css/jquery.dataTables.min.css}"
  13.               rel="stylesheet" media="screen"/>
  15.         <link href="../../static/css/mini_springboot.css"
  16.               th:href="@{/css/mini_springboot.css}"
  17.               rel="stylesheet" media="screen"/>
  19.         <title>SpringBoot</title>
  20.     </head>
  21.     <body>
  22.         <div class="container">
  23.             <div th:fragment="header">
  24.                 <nav class="navbar navbar-default">
  25.                     <div class="container-fluid">
  26.                         <div class="navbar-header">
  27.                             <a class="navbar-brand" href="#" th:href="@{/}">Home</a>
  28.                             <ul class="nav navbar-nav">
  29.                                 <li>
  30.                                     <a href="#" th:href="@{/init}">初始化</a>
  31.                                 </li>
  32.                                 <li>
  33.                                     <a href="#" th:href="@{/customers}">客户列表</a>
  34.                                 </li>
  35.                                 <li>
  36.                                     <a href="#" th:href="@{/customerform}">建立客户</a>
  37.                                 </li>
  38.                             </ul>
  40.                         </div>
  41.                     </div>
  42.                 </nav>
  44.             </div>
  46.             <div class="panel panel-default">
  47.                 <div class="panel-heading">Panel heading without title</div>
  48.                 <div class="panel-body">
  49.                     <div layout:fragment="content">content</div>
  50.                 </div>
  51.             </div>
  53.             <div th:fragment="footer">
  55.                 <div class="footer">大叔直通车:www.lindddd.top</div>
  58.                 <script src="../../static/js/jquery.min.js"
  59.                         th:src="@{/js/jquery.min.js}"></script>
  62.                 <script src="../../static/js/bootstrap.min.js"
  63.                         th:src="@{/js/bootstrap.min.js}"></script>
  65.                 <script src="../../static/js/jquery.dataTables.min.js"
  66.                         th:src="@{/js/jquery.dataTables.min.js}"></script>
  68.                 <script src="../../static/js/mini_springboot.js"
  69.                         th:src="@{/js/mini_springboot.js}"></script>
  71.             </div>
  72.         </div>
  74.     </body>
  75. </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>
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Java热门文章

  • 【IDEA】Application context not configured for this file
  • [IDEA] chapter_reader - idea看小说插件 idea阅读插件 idea摸鱼插件
  • thrift常见异常及原因分析
  • Java 调用 PaddleDetection 模型
  • JVM 详解，大白话带你认识 JVM
  • spring-boot-2.0.3不一样系列之番外篇 - @Configuration、Condition与@Conditional
  • Java Comparator.comparing比较导致空指针异常的解决
  • Java使用EasyExcel进行单元格合并的问题详解
  • 死磕 java集合之ArrayBlockingQueue源码分析
  • Java基础之集合Set详解

    • Java推荐文章

  • 面试场景题：一次关于线程池使用场景的讨论。
  • 前端黑科技：使用 JavaScript 实现网页扫码功能
  • 聊一聊 Netty 数据搬运工 ByteBuf 体系的设计与实现
  • 简单设计一个JAVA并行处理工具类
  • 【杂谈】JPA乐观锁改悲观锁遇到的一些问题与思考
  • 认识netty的基本组件
  • Jenkins如何使用CrumbIssuer防御CSRF攻击
  • 如何平稳地从nacos迁移到r-nacos？
  • 线程池遇到父子任务，有大坑，要注意！
  • Java JVM——12. 垃圾回收理论概述

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号