home页面详解

最新推荐文章于 2024-05-20 10:33:01 发布

untilyouydc

最新推荐文章于 2024-05-20 10:33:01 发布

阅读量6.1k

点赞数

分类专栏： springboot springboot从入门到实战

本文链接：https://blog.csdn.net/qq_40774175/article/details/87932812

版权

springboot从入门到实战同时被 2 个专栏收录

14 篇文章 13 订阅

订阅专栏

springboot

10 篇文章 1 订阅

订阅专栏

home页面详解

网上有很多讲thymeleaf的，都讲的很好，这里我不在讲述thymleaf的基础知识。可以参考这些网站。
thymeleaf官方网站
 新一代Java模板引擎Thymeleaf
这是Thymeleaf官网指导文章的翻译!
Thymeleaf基础语法
 模板（template fragments）

home页面主要是利用thymeleaf fragment实现的。
home页面非常的简洁，代码只有下面一点。

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorate="lay">
<head th:include="lay :: htmlhead" th:with="title='favorites'"></head>
<body>
<section layout:fragment="content">
    <!--<div id="content"></div>-->

</section>
</body>
</html>

但是，实践的页面却是这样的。
在这里插入图片描述

在图中我已经标记了，主要由3部分构成，分别是left,header,footer。
我们想要的效果是什么呢？
我们想要点击任何一项功能，left,header,footer这三部分都不变化，变化的只有中间空白的部分。如何做到？
首先一个很暴力的思想就是，我任何一个页面都加上这三个部分，再把想要显示的页面放在中间就行。这个方法可以实现，但是太麻烦了。
既然header,left,footer都是不变的，那我们为什么不将其做成一个模板，每次想点击一个新的页面都将这个模板先引入，然后将新的页面放中间就行。

为了实现这个功能我们利用到了thymeleaf的fragment。
注意到我们home.html页面先引入了一个 layout:decorate=“lay” ，这是什么意思？decorate是装饰的意思，也就是说我们引进lay这个页面来对home页面进行装饰。好了，现在我们来看看lay.html是怎么实现的。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml">
<head th:fragment="htmlhead">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="icon" href="/img/ourIcon.ico" type="image/x-icon" />
    <title >SHUE | 让考试更简单</title>
    <link rel="stylesheet" th:href="@{/vendor/fontawesome/css/font-awesome.min.css}" />
    <link rel="stylesheet" th:href="@{/vendor/simple-line-icons/css/simple-line-icons.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/animate.css/animate.min.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/toastr/toastr.min.css}"/>
    <link rel="stylesheet" th:href="@{/media/css/bootstrap.css}" />
    <link rel="stylesheet" th:href="@{/media/css/app.css}" />
    <link rel="stylesheet" th:href="@{/media/css/theme-i.css}" />
</head>
<body class="layout-fixed">
<div th:fragment="navbar"  class="wrapper"  role="navigation">
    <div th:replace="header :: header">Header</div>
    <div th:replace="left :: left">left</div>
    <div th:replace="sidebar::sidebar">sidebar</div>
    <div layout:fragment="content" id="content" ></div>
    <div th:replace="footer :: footer">footer</div>
</div>
<div th:replace="alert::alert">alert</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="http:cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!--<script th:src="@{https://code.jquery.com/jquery-3.3.1.min.js}"></script>-->
<script th:src="@{/vendor/jquery.form/jquery.form.min.js}"></script>
<!--<script th:src="@{https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js}"></script>-->
<script th:src="@{/vendor/modernizr/modernizr.custom.js}" ></script>
<script th:src="@{/vendor/jQuery-Storage-API/jquery.storageapi.js}" ></script>
<script th:src="@{/media/js/app.js}" ></script>
<script th:src="@{/vendor/parsleyjs/dist/parsley.min.js}"></script>
<script th:src="@{/vendor/toastr/toastr.min.js}"></script>
<script th:src="@{/js/comm.js}" ></script>
<script th:src="@{/js/layout.js}" ></script>
<script th:src="@{/js/collect.js}" ></script>
<script th:src="@{/js/letter.js}" ></script>
<script th:src="@{/js/follow.js}"></script>
</body>
</html>

其中重要的部分就是这个：

<body class="layout-fixed">
<div th:fragment="navbar"  class="wrapper"  role="navigation">
    <div th:replace="header :: header">Header</div>
    <div th:replace="left :: left">left</div>
    <div th:replace="sidebar::sidebar">sidebar</div>
    <div layout:fragment="content" id="content" ></div>
    <div th:replace="footer :: footer">footer</div>
</div>

它在这个页面里面引入了我们需要的header,left,footer。这就是为什么，我们在打开home页面就可以看到header,left,footer的原因。
我们观察的除了

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

以外，其他都是用了th:replace，看了thymeleaf基础知识的应该都知道它的作用了。
也就是说，这个页面除了content以外，都已经被其他页面替代了。简而言之，你只需要写content页面就行了。
现在我们再回到home.html页面，我们发现：

<section layout:fragment="content">
    <!--<div id="content"></div>-->

</section>

这里刚好重写了content页面，但是里面啥都没有，所以目前home页面的中间应该显示为空。你不妨可以在content里面写几个字，再次运行，你会发现除了中间多了几个子以外，header,left,footer都没有变过.

当然，header,left,footer页面如何写，还得你自己来。我这个是直接引用了"纯洁的微笑"的，他应该是在网上找到了一个叫app的主题。不过这个主题比较老，用的jquery是1.9.1的，想要使用的可以直接copy代码。

代码链接

项目演示

untilyouydc

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
home页面详解

home页面详解网上有很多讲thymeleaf的，都讲的很好，这里我不在讲述thymleaf的基础知识。可以参考这些网站。thymeleaf官方网站新一代Java模板引擎Thymeleaf这是Thymeleaf官网指导文章的翻译!Thymeleaf基础语法模板（template fragments）home页面主要是利用thymeleaf fragment实现的。home页面非常的...
复制链接

扫一扫