2020-01-16 从零开始用Spring Boot开发一个个人网站（5）使用Thymeleaf进行页面模块化

写在前面

我曾经特别喜欢Vue.js，一开始做个人网站时甚至想用Nuxt.js做Vue的服务端渲染，原因就是它可以很方便地进行组件化开发。前端组件化开发的好处大家应该都是知道的——页面中重复出现的部分可以提取成组件，这样每个页面直接引用这些组件，并且给组件传参来适应不同的页面，就可以大大减小开发的难度和复杂度。

本来我以为Java Web前后端不分离的模板引擎技术中没有这样的技术，但是后来我了解到，Thymeleaf其实是可以实现组件化开发的。现在我们搭建好了Spring Boot项目，可以开始做页面的处理了。事不宜迟，咱们马上开始！

使用Thymeleaf进行组件化开发

其实我也不清楚这个应该叫什么，但我觉得它跟Vue的组件化开发有一定的相似性，所以就叫它“Thymeleaf的组件化开发”了。

Thymeleaf中，与组件化开发相关的有以下属性/标签：

th:fragment
th:replace
th:insert
th:include
th:block
...

接下来我们根据案例，一个一个来讲它们：

使用th:fragment定义一个组件

添加了th:fragment属性的标签就变成了一个组件（其实我也不知道这个东西的正确称呼是什么。直译的话，难道是“碎片”？“片段”？但我觉得“组件”可能更合适一些，也方便理解，在下文中就称呼它为“组件”了）。比如，页面头部的导航条、包含背景图的头部可以作为一个组件提取出来，因为在每一页中它都是不变的：

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>NavBar And Head</title>
</head>
<body>

<div th:fragment="navbarAndHeader">
    <!-- Head -->
    <div class="header">
        <h1>江文｜WenDev</h1>
        <h4>不想当切图仔的接口仔不是好架构师</h4>
    </div>

    <!-- Start Navigation Bar -->
    <nav class="navbar navbar-default" style="position: fixed; top: 0; width: 100%">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="/">江文 | WenDev</a>
            </div>

            <!-- NavBar Body -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <!-- Drop Down Menu -->
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                           role="button" aria-haspopup="true" aria-expanded="false">
                            Article
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">
                                <span class="glyphicon glyphicon-list"
                                      style="margin: 5px"></span>
                                    Types
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                <span class="glyphicon glyphicon-tags"
                                      style="margin: 5px"></span>
                                    Tags
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                <span class="glyphicon glyphicon-folder-open"
                                      style="margin: 5px"></span>
                                    Archive
                                </a>
                            </li>

                            <li role="separator" class="divider"></li>
                            <li>
                                <a href="#">
                                <span class="glyphicon glyphicon-link"
                                      style="margin: 5px"></span>
                                    Friends
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <!-- End Drop Down Menu -->

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" class="dropdown-toggle">About Me</a></li>
                </ul>

                <!-- NavBar Search -->
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <label for="nav-search"></label>
                        <input type="text" id="nav-search" class="form-control" placeholder="Search">
                    </div>
                    <a type="submit" class="btn btn-default">
                        Submit
                    </a>
                </form>
                <!-- End NavBar Search -->
            </div>
            <!-- End NavBar Body -->
        </div>
    </nav>
    <!-- End Navigation Bar -->
    <!-- End Head -->
</div>

</body>
</html>

组件是被放在一个HTML文件中的，它是HTML文档的一部分，可以用div、span等HTML标签标记，也可以用th:block来标记一个没有上级标签的块。

可以把所有的组件都放在一个HTML里，但我还是一个组件一个HTML，将它们放在一个统一的文件夹（components）下。因为这样直观一些，比较方便维护。

有时候组件的内容也不是不变的，比如每个页面head部分的内容。因为每个页面的标题、引入的CSS文件都不一样，所以这部分内容需要使用参数进行控制。

传参也很简单，像方法传参一样定义就行了。需要用到参数的地方，用th:replace属性进行标记。

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title, css)">
    <!-- Page Info -->
    <meta charset="UTF-8">
    <title th:replace="${title}">Title</title>

    <!-- Start Bootstrap -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- End Bootstrap -->

    <!-- Google Code Prettify -->
    <link href="https://cdn.bootcss.com/prettify/r298/prettify.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/prettify/r298/prettify.js"></script>
    <!-- End Google Code Prettify -->

    <!-- My Stylesheets -->
    <link rel="stylesheet" th:replace="${css}">
    <!-- End My Stylesheets -->
</head>
<body>

</body>
</html>

在页面中使用一个组件

使用组件可以用th:replace、th:insert和th:include。

三者用起来差别不是很大，但是有一些细微的差别：

th:insert：将组件整个插入到使用了th:insert的HTML标签中
th:replace：将组件整个替换使用了th:replace的HTML标签中
th:include：将组件包含的内容插入到使用了th:include的HTML标签中

我们在这个项目中统一用th:replace。

以页面头部为例：

<!-- Header -->
<div th:replace="components/navbar_and_head :: navbarAndHeader"></div>
<!-- End Header -->

这样写，就可以把这个div替换为一个组件了。

th:replace的写法是有一定规则的：

首先是组件所在文件的路径和文件名（文件路径：@/templates/components/navbar_and_head.html），注意不需要写.html。然后是选择器，也就是我们使用th:fragment定义的组件名。

渲染效果：

与没有组件化之前是一模一样的。

给组件传参

前面提到了定义带参数的组件，那应该如何给组件传参呢？

传参的写法略微复杂一些，但是也是很好理解的。以页面的head部分为例：

<head th:replace="components/head :: head(~{:: title}, ~{:: link})">
    <title>WenDev</title>
    <link rel="stylesheet" th:href="@{css/wen.css}">
</head>

前面的写法与没有参数的一样，后面括号里是参数。参数是一个代码块表达式，::前面什么都不写表示当前页面，后面是选择器，这个选择器就不是组件选择器了，而是元素选择器——选择页面上所有的元素。这个选择器也支持id选择器，不过需要跟CSS的id选择器一样加上#号。

这样写，就把页面中的title标签和link标签都传给组件了，也就实现了不同页面的动态变化。