home页面详解

拼搏现实的明天。 2022-03-16 03:38 201阅读 0赞

###  home页面详解 ###

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

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

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

在图中我已经标记了，主要由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="@{/vendor/jquery.form/jquery.form.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的原因。  
我们观察的除了

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

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

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

[代码链接][Link 1]

[项目演示][Link 2]

[thymeleaf]: https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#integrating-thymeleaf-with-spring
[Java_Thymeleaf]: https://www.tianmaying.com/tutorial/using-thymeleaf
[Thymeleaf]: http://blog.webinno.cn/article/view/131
[Thymeleaf 1]: http://v8en.com/news/list/47/0
[template fragments]: http://www.cnblogs.com/lazio10000/p/5603955.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzc0MTc1_size_16_color_FFFFFF_t_70]: /images/20220316/d1f99808df1f4cdba51b7f66b13b948d.png
[Link 1]: https://github.com/yangdongchao/springboot
[Link 2]: http://www.ydc98.club:443/