21.0、springboot-fragment组件化插入

澜色海湾

已于 2022-03-12 15:38:16 修改

阅读量652

点赞数

分类专栏： springboot学习总结文章标签： spring boot java 后端

于 2022-03-09 11:08:11 首次发布

本文链接：https://blog.csdn.net/m0_52433668/article/details/123372533

版权

springboot学习总结专栏收录该内容

37 篇文章 3 订阅

订阅专栏

本文介绍了如何在 SpringBoot 项目中利用 Thymeleaf 的 fragment 特性进行页面组件化，提高代码复用。通过在 template 文件夹下创建 commons 文件夹，建立一个 commons.html 文件存放通用组件，如头部导航栏，并在 main.html 文件中使用 th:insert 指令插入这些组件，实现了页面的模块化开发。

摘要由CSDN通过智能技术生成

21.0、springboot-fragment组件化插入

在web开发的过程中我们需要实现代码的复用可以采取springboot中的fragment和insert

我们可以在template文件夹下创建一个commons文件夹，在里面创建一个commons.html文件，在这个文件里专门的放置我们需要复用的fragment组件即可。

例如：
commons.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--头部导航栏-->
<div class="container-fluid" th:fragment="Headernavigationbar">
    <div class="row-fluid">
        <div class="span12">
            <form class="form-search">
                <input class="input-medium search-query" type="text" /> <button type="submit" class="btn">查找</button>
            </form>
            <ul class="nav nav-list">
                <li class="nav-header">
                    列表标题
                </li>
                <li class="active">
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">库</a>
                </li>
            </ul>
        </div>
    </div>
</div>
</html>

main.html文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<div th:insert="~{commons/commons::Headernavigationbar}"></div>
</body>
</html>

在这里用th:insert="~{commons/commons::Headernavigationbar}"即可插入使用