springboot~thymeleaf页面布局的步骤

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

依赖包

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

 'org.springframework.boot:spring-boot-starter-thymeleaf',

 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.3.0'

default.html模板页

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

<!DOCTYPE HTML>

<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.w3.org/1999/xhtml">

    <head lang="en" th:fragment="head">

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <link href="../../static/css/bootstrap.min.css"

              th:href="@{/css/bootstrap.min.css}"

              rel="stylesheet" media="screen"/>

        <link href="../../static/css/jquery.dataTables.min.css"

              th:href="@{/css/jquery.dataTables.min.css}"

              rel="stylesheet" media="screen"/>

        <link href="../../static/css/mini_springboot.css"

              th:href="@{/css/mini_springboot.css}"

              rel="stylesheet" media="screen"/>

        <title>SpringBoot</title>

    </head>

    <body>

        <div class="container">

            <div th:fragment="header">

                <nav class="navbar navbar-default">

                    <div class="container-fluid">

                        <div class="navbar-header">

                            <a class="navbar-brand" href="#" th:href="@{/}">Home</a>

                            <ul class="nav navbar-nav">

                                <li>

                                    <a href="#" th:href="@{/init}">初始化</a>

                                </li>

                                <li>

                                    <a href="#" th:href="@{/customers}">客户列表</a>

                                </li>

                                <li>

                                    <a href="#" th:href="@{/customerform}">建立客户</a>

                                </li>

                            </ul>

                        </div>

                    </div>

                </nav>

            </div>

            <div class="panel panel-default">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    <div layout:fragment="content">content</div>

                </div>

            </div>

            <div th:fragment="footer">

                <div class="footer">大叔直通车:www.lindddd.top</div>

                <script src="../../static/js/jquery.min.js"

                        th:src="@{/js/jquery.min.js}"></script>

                <script src="../../static/js/bootstrap.min.js"

                        th:src="@{/js/bootstrap.min.js}"></script>

                <script src="../../static/js/jquery.dataTables.min.js"

                        th:src="@{/js/jquery.dataTables.min.js}"></script>

                <script src="../../static/js/mini_springboot.js"

                        th:src="@{/js/mini_springboot.js}"></script>

            </div>

        </div>

    </body>

</html>

使用它

<!DOCTYPE HTML>

<html xmlns:th="http://www.thymeleaf.org"

      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

      layout:decorator="~{layout/default}">

<head>

    <title>Spring Boot and Thymeleaf - Greeting with Thymeleaf Layout Dialect!</title>

</head>

<body>

<div layout:fragment="content">

    <div th:if="${not #lists.isEmpty(customers)}">

        <table id="customersTable" class="table table-striped">

            <thead>

            <tr>

                <th>Name</th>

                <th>Email</th>

                <th>Age</th>

                <th></th>

            </tr>

            </thead>

            <tbody>

            <tr th:each="customer : ${customers}">

                <td th:text="${customer.id}"></td>

                <td th:text="${customer.name}"></td>

                <td th:text="${customer.email}"></td>

                <td th:text="${customer.age}"></td>

                <td><a th:href="${'/customerdetail/'+customer.id}">查看</a></td>

            </tr>

            </tbody>

        </table>

    </div>

</div>

</body>

</html>

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

Thymeleaf利用layout.html文件生成页面布局框架
1.layout.html文件生成布局 <!DOCTYPE html> <html lang="zh-CN" xmlns:th="http://www ...
SpringBoot thymeleaf模板页面没提示，SpringBoot thymeleaf模板插件安装
SpringBoot thymeleaf模板插件安装 SpringBoot thymeleaf模板Html页面没提示 SpringBoot thymeleaf模板页面没提示 SpringBoot t ...
Springboot+JdbcTemplate +thymeleaf 页面做迷你版的bug系统
https://www.cnblogs.com/qianjinyan/p/10065160.html 在我上一篇随笔中介绍了关于要做的系统的数据结构,连接如上今天实现连接mssql server, ...
解决thymeleaf layout布局不生效
今天使用thymeleaf layout布局时总是不生效,特此把解决问题的步骤和几个关键点记录下来备忘. 一.检查依赖 1.thymeleaf必备maven依赖: <dependency> ...
springboot: thymeleaf 使用详解
springboot:thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4.0中推荐使用thymeleaf来做前端模版引擎 ...
springboot thymeleaf【转】【补】
thymeleaf模板 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 1.引入thymeleaf依赖 <!-- ...
CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

随机推荐

转载：selenium webdriver定位不到元素的五种原因及解决办法
1.动态id定位不到元素for example: //WebElement xiexin_element = driver.findElement(By.id("_mail_c ...
CSS float:right 在IE浏览器下换行
在换行的html标签内加如下样式 style="right: 0px; position: absolute;"
upload.go
package api import ( "os" "bytes" "mime/multipart" &qu ...
BZOJ_1598_[Usaco2008 Mar]牛跑步_A*
BZOJ_1598_[Usaco2008 Mar]牛跑步_A* Description BESSIE准备用从牛棚跑到池塘的方法来锻炼. 但是因为她懒,她只准备沿着下坡的路跑到池塘, 然后走回牛棚. B ...
BZOJ_1026_[SCOI2009]windy数_数位DP
BZOJ_1026_[SCOI2009]windy数_数位DP 题意:windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道, 在A和B之 ...
Micropython TPYBoard ADC的使用方法
基本用法 import pybadc = pyb.ADC(Pin('Y11')) # create an analog object from a pinadc = pyb.ADC(pyb.Pin.b ...
再谈async与await
回顾C#5.0是如何进行异步编程的 static void Main(string[] args) { string url = "https://docs.microsoft.com/zh ...
appium 常用API使用总结！
将常用函数进行适用总结,后期在使用的过程中直接查找调用即可获取界面属性.控件属性 1.current_activity:获取activity名称 device.current_activity 2. ...
微服务架构 - SpringBoot整合Jooq和Flyway
在一次学习分布式跟踪系统zipkin中,发现了jooq这个组件,当时不知这个组件是干嘛的,后来抽空学习了一下,感觉这个组件还挺用的.它主要有以下作用: 通过DSL(Domain Specific La ...
《k8s-1.13版本源码分析》- Scheduler启动前逻辑
本文原始地址(gitbook格式):https://farmer-hutao.github.io/k8s-source-code-analysis/core/scheduler/before-sche ...

springboot~thymeleaf页面布局的步骤

依赖包

default.html模板页

使用它

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

随机推荐

热门专题