springboot集成thymeleaf及thymeleaf 模板布局

最新推荐文章于 2023-11-25 16:05:35 发布

溪岚画

最新推荐文章于 2023-11-25 16:05:35 发布

阅读量1k

点赞数 1

分类专栏： Spring Boot项目实战 thymeleaf

本文链接：https://blog.csdn.net/qq_32719215/article/details/93642953

版权

Spring Boot项目实战同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

thymeleaf

2 篇文章 0 订阅

订阅专栏

1、在项目中添加pom.xml中依赖或在创建项目时根据创建指导选择thymeleaf的模板引擎

<!--  thymeleaf 模板引擎  -->
 <dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-thymeleaf</artifactId>
     <version>2.1.4.RELEASE</version>
 </dependency>

2.开发时一般将spring.thymeleaf.cache设置为false，其他保持默认值即可。

3.引入模板引擎后controller控制器视图层默认路径为src\main\resources\templates\目录下

 @RequestMapping("/index")
 public String index(Model model) throws Exception {
        
        return "index";
    }

4.1 第一种方式使用thymeleaf 自带的模板布局方式

主要使用两个标签[th:include、th:fragment ]实现

创建基础布局模板layout1.html

在这里使用到了 th:include 标签，写法如 th:include="::xxx"，用作标记在子页面中调用

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:include="::topTitle"></title>
    <script src="/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/theme_blue/css/app.css">
    <link rel="stylesheet" href="/common/default.css">
    <link rel="stylesheet" href="/theme_blue/css/app-extend.css">
    <link rel="icon" type="image/x-icon" href="/common/images/favicon.ico">
    <script type="text/javascript" th:include="::pageScript"></script>
</head>
<body class="app" data-menu="layoutTop">

      <div class="card-body overflow-y-auto" th:include="::content">
                <!--    正文内容      -->
       </div>

    <footer class="app-footer"  th:include="::bottomfooter">
    </footer>
</body>
</html>

4.2 创建子页面调用 index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
        th:replace="layout1">

    <title th:fragment="topTitle">查看人员</title>
    <script th:fragment="pageScript">
            function x(){
        }
    </script>
    <header th:fragment="appHeader">人员列表</header>
    <div th:fragment="content">
        
        <table  class="table">
                
        </table>
    </div>
    <footer th:fragment="bottomfooter">页脚</footer>
</html>

在这里注意主要使用了标签 th:replace 和 th:fragment，

子页面中通过th:replace 引入父模板值为模板路径，

th:fragment 向模板中对应的标签中写入内容；

这里注意：这种方式子页面中必须将父模板中标记的th:include 的标签实现。否则检查出错。

这种模板布局适合简单固定的布局。不灵活。推荐使用第二种布局方式。

5.1 第二种布局方式需要使用另外的一个layout依赖【推荐】

 <!--  thymeleaf 模板引擎layout页面布局  -->
        <dependency>
            <groupId>nz.net.ultraq.thymeleaf</groupId>
            <artifactId>thymeleaf-layout-dialect</artifactId>
            <version>2.2.2</version>
        </dependency>

创建基础布局模版layout2.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title layout:fragment="topTitle"></title>
    <script src="/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/theme_blue/css/app.css">
    <link rel="stylesheet" href="/common/default.css">
    <link rel="stylesheet" href="/theme_blue/css/app-extend.css">
    <link rel="icon" type="image/x-icon" href="/common/images/favicon.ico">
    <script type="text/javascript" layout:fragment="pageScript"></script>
</head>
<body class="app" data-menu="layoutTop">

      <div class="card-body overflow-y-auto" layout:fragment="content">
                <!--    正文内容      -->
       </div>

    <footer class="app-footer"  layout:fragment="bottomfooter">
    </footer>
</body>
</html>

这个基础布局页面中头部新增了 xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"

同时使用布局标签也变为 layout:fragment

5.2创建子页面调用index2.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout2">

    <title layout:fragment="topTitle">查看人员</title>
    <script layout:fragment="pageScript">
            function x(){
        }
    </script>
    <header layout:fragment="appHeader">人员列表</header>
    <div layout:fragment="content">
        
        <table  class="table">
                
        </table>
    </div>
    
</html>

这是子页面布局，与第一种方式不同的是这用布局，不需要完全实现父模版中的所有布局如：<footer layout:fragment="bottomfooter">页脚</footer>就没有实现，页面也会正常显示。

这样在需要的页面引入需要的标签，这种方式更加灵活。

以上就是thymeleaf 的两种页面布局方式，这两种布局方式都会实现子页面对父页面的 js、css的继承。

溪岚画

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
springboot集成thymeleaf及thymeleaf 模板布局

1、在项目中添加pom.xml中依赖或在创建项目时根据创建指导选择thymeleaf的模板引擎 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-st...
复制链接

扫一扫

专栏目录