thymeleaf页面框架模板的使用

最新推荐文章于 2024-07-21 22:31:16 发布

平凡的L同学

最新推荐文章于 2024-07-21 22:31:16 发布

阅读量3.9k

点赞数

分类专栏： Spring Boot 文章标签： thymeleaf springboot web j2ee spring

本文链接：https://blog.csdn.net/yalishadaa/article/details/60982480

版权

Spring Boot 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

首先我们可以定义一个模板页面:

<!DOCTYPE html >
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      th:fragment="mymodel">

    <head th:fragment="head">
    <title>后台首页</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="icon" type="image/x-icon" href="/static/favicon.png"/>
    <!-- 默认360 兼容模式 -->
    <meta name="renderer" content="webkit|ie-comp|ie-stand"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <script type="text/javascript" src="/basic/js-lib/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="/basic/bootstrap3/js/bootstrap.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/basic/bootstrap3/css/bootstrap.min.css"/>

    <script type="text/javascript" src="/basic/admin/myself/public.js"></script>

    <!-- Font Awesome-->
    <link rel="stylesheet" href="/basic/font-awesome-4.7.0/css/font-awesome.min.css" />

    <script type="text/javascript" src="/basic/admin/myself/delete.js"></script>
    <script type="text/javascript" src="/basic/admin/myself/auth.js"></script>
    <script type="text/javascript" src="/basic/admin/myself/cms.admin.js"></script>
    <script type="text/javascript" src="/basic/admin/myself/my_filter.js"></script>

    <link type="text/css" rel="stylesheet" href="/basic/admin/main.css"/>
    <link type="text/css" rel="stylesheet" href="/basic/admin/form-page.css"/>
    <link type="text/css" rel="stylesheet" href="/basic/admin/list-page.css"/>
    <link type="text/css" rel="stylesheet" href="/basic/admin/nav.css"/>
    <script type="text/javascript" src="/basic/admin/main.js"></script>

    <script type="text/javascript">
        $(function() {
            $(".logout-href").deleteFun({title:'退出提示',msg:'确定退出系统吗？'});
        });
    </script>
</head>
<body>
<div class="container-fluid model-head">
    <div class="logo">
        <i class="fa fa-cloud-upload"></i>
        <b>后台管理</b>
    </div>
    <div class="right">
        <i class="fa fa-user-circle-o"></i>
        <b th:text="${session.LOGIN_USER.user.nickname}"></b>
        <a href="/admin/updatePwd" title="修改信息" class="btn btn-info">改密</a>
        <a href="/logout" title="退出系统" class="logout-href btn btn-danger">退出</a>
    </div>
</div>

<div class="container-fluid" style="padding:0px;">
    <div class="main-left">
        <div th:replace="fragments/nav :: content"></div>
        <div class="nav-bottom"><span class="show-copy"></span><span th:text="${session.appConfig.contant}"></span></div>
    </div>
    <div class="main-right">
        <div th:include="this :: content" style="margin:10px;"></div>
    </div>
</div>

<div id="userAuthHref" style="display: none;">
    <div th:each="authTmp : ${session.LOGIN_USER.authList}" th:remove="tag">
        <span th:text="'('+${authTmp}+')'" th:remove="tag"></span>
    </div>
</div>
<div th:each="arg : ${args}" class="search-filter-div">
    <input th:value="${arg.value}" type="hidden" th:attr="targetId=${arg.key}"/>
</div>
</body>
</html>

如果我们在其他的页面中需要使用这个模板的时候就可以通过:

<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="fragments/adminModel">

来加载这个模板页面