Thymeleaf在一个页面嵌入另一个页面

用法

向一个页面嵌入其它页面的情况一般有两种：

被嵌入页面的名称不确定

这种情况需要后端的介入，被嵌入页面的名称由后端传入，一般情况下使用Thymeleaf的项目都有一个主页面（要嵌入其它页面的页面，通常命名为index.html），我们可以在主页面上引入各种CSS、JS文件，被嵌入的页面也可以使用这些CSS、JS文件，这样做的好处是：统一管理CSS、JS文件
被嵌入页面的名称已确定

这种情况不需要后端，被嵌入页面的名称直接写在要嵌入页面的页面上，如果多个页面上都有一部分代码是相同的，那么我们就可以将相同的代码抽取出来放到一个新页面上（也就是被嵌入的页面），然后在要嵌入的页面上嵌入新页面即可，这样做的好处是：使用嵌入页面前如果需要修改就要修改多个地方，而使用嵌入页面后只需要修改一个地方即可

实现过程

名称不确定

主页面index.html（要嵌入页面的页面）

<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
    <link rel="short icon" th:href="@{/static/images/favicon.ico}">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/static/css/hint.css}">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script th:src="@{/static/js/my.js}"></script>
    <script type="text/javascript" th:src="@{/static/ckeditor/ckeditor.js}"></script>
</head>
<body>
<div style="width: 92%;margin-left: 4%">
    <div th:include="${mainPage}::${mainPageKey}"></div>
</body>
</html>

登录页面login.html（被嵌入的页面）

<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="b">
    
</div>
</body>
</html>

java代码

mainPage为被嵌入页面路径及名称，mainPageKey为被嵌入页面的<div>标签的id，index为主页面index.html的名称（省略后缀名即可）

/**
 * 跳转到用户登录界面
 *
 * @return
 */
@RequestMapping("/toLoginPage")
public ModelAndView toLoginPage() {
    ModelAndView mav = new ModelAndView();
    mav.addObject("title", "用户登录--LeDao校园二手交易平台");
    mav.addObject("mainPage", "page/login");
    mav.addObject("mainPageKey", "#b");
    mav.setViewName("index");
    return mav;
}

名称已确定

要嵌入页面的页面（menuPersonalHubs为被嵌入页面的名称）

<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="b">
    <div class="row" style="margin-top: 5px">
        <div class="col-md-3">
            <div th:include="common/menuPersonalHubs::#m"></div>
        </div>
        <div class="col-md-9">
            
        </div>
    </div>
</div>
</body>
</html>

menuPersonalHubs.html（被嵌入的页面）

<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="m">
  
</div>
</body>
</html>