使用Springboot + Thymeleaf + Layout Dialect来实现页面布局的共享化

2 年 ago

韵, 科

3 minutes

我们将尝试通过Layout Dialect来统一布局。

由于Thymeleaf3已经发生了变化，所以我进行了重写。

1. 开发环境

Windows 10 home

2. 构成 –

├─java
│  └─com
│      └─sample
│                  HeloController.java
│                  SampleLayoutApplication.java
│                  ServletInitializer.java
└─resources
    │  application.properties
    ├─static
    └─templates
        │  index.html
        └─commons
                layout.html

常见的页面布局: commos/layout.html
特定的页面: index.html

3. 依赖关系 (yī xi)

dependencies {
    compile('org.springframework.boot:spring-boot-starter-thymeleaf')
    compile('org.springframework.boot:spring-boot-starter-web')
    runtime('org.springframework.boot:spring-boot-devtools')
    compileOnly('org.projectlombok:lombok')
    compile "org.thymeleaf:thymeleaf:3.0.9.RELEASE"
    compile "org.thymeleaf:thymeleaf-spring4:3.0.9.RELEASE"
    compile('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.3.0')
    compile('org.webjars:jquery:3.3.1')
    compile('org.webjars:jquery-ui:1.12.1')
    compile('org.webjars:bootstrap:3.3.7')
    providedRuntime('org.springframework.boot:spring-boot-starter-tomcat')
    testCompile('org.springframework.boot:spring-boot-starter-test')
}

点
compile “org.thymeleaf:thymeleaf:3.0.9.RELEASE”
compile “org.thymeleaf:thymeleaf-spring4:3.0.9.RELEASE”
compile(‘nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.3.0’)

4. 共同布局

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Spring Boot Sample Site</title>
<meta name="description" content="common-meta">
<link th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet" />
<link th:href="@{/webjars/jquery-ui/1.12.1/jquery-ui.min.css}" rel="stylesheet" />
<script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
<script th:src="@{/webjars/jquery-ui/1.12.1/jquery-ui.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
</head>
<body>
    <div class="col-lg-6">
        <div class="bg-primary">
            <form th:action="@{/}" method="post">
                <h2 layout:fragment="header"></h2>
                <button>ログアウト</button>
            </form>
        </div>
        <div layout:fragment="contents"></div>
        <footer style="text-align:right;">共通フッタ</footer>
    </div>
</body>
</html>

在固定的页面中，只需要分别指定标题和单独的表单为”header”和”contents”，可以使所有表单的布局看起来一样。另外，如果将在多个页面中共享的css和javascript写在布局中，就不需要在固定的页面中写了。

5. 常规页面

<!DOCTYPE html>
<html
  xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorate="~{commons/layout}">

<head>
<title>個別ページタイトル</title>
<meta name="description" content="個別metaタグ">
</head>
<body>
    <div layout:fragment="header">タイトルは個別に設定します。</div>
    <div layout:fragment="contents">
        <P>ここから下が、個別のページです</P>
        <div id="hello-text"></div>
        <!-- 個別ページでjquery-uiが正しくうごくか検証します -->
        <input type="text" class="datepicker"/>
        <script>
            $(function() {
                $('#hello-text').text('Hello SpringBoot from JQuery!!');
                $('.datepicker').datepicker();
            });
        </script>
    </div>
</body>
</html>

在Thymeleaf3中，将html标签设为“layout:decorate=”~{commons/layout}”。
※在Thymeleaf2中，设为“layout:decorator=”common/layout””。