欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

springboot~thymeleaf页面布局的步骤

程序员文章站 2023-03-28 08:43:00
参考：https://ultraq.github.io/thymeleaf layout dialect/Installation.html 依赖包 注意里面的thymeleaf layout dialec就是模板包，必须要安装的，我之前就坑在这里了 default.html模板页 注意在layou ......

参考：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>

上一篇： Confluence 6 配置 MySQL 服务器的步骤教程

下一篇： 冬天的被窝简直就是霸道总裁

推荐阅读