Spring Boot 与 Thymeleaf 和 Bootstrap
作者：互联网
Thymeleaf 和 Bootstrap 是开发现代 Web 应用程序的强大技术。在本文中，我们将展示将 Thymeleaf 和 Bootstrap 添加到 Spring Boot 应用程序的步骤。
完整的设置也可以直接在 Bootify Builder 中创建。只需使用open project打开一个项目，选择您的首选项并选择Thymeleaf + Bootstrap作为前端堆栈。如果您不选择前端，则可以手动执行以下所有步骤。
将 Themeleaf 添加到我们的应用程序中
Thymeleaf 是 Spring Boot 最常用的模板引擎。由于模板是用有效的 HTML 代码编写的，因此也可以在没有服务器端渲染的情况下打开它们。要设置引擎和所有推荐的实用程序，首先将以下两个依赖项添加到我们的应用程序中。
implementation('org.springframework.boot:spring-boot-starter-thymeleaf')
implementation('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect')
为 Thymeleaf 添加新的依赖项
该模块spring-boot-starter-thymeleaf将自动集成模板引擎 - 在下面的控制器中我们已经可以看到它是如何工作的。建议thymeleaf-layout-dialect大多数生产应用程序使用此布局，以便多个页面可以使用相同的布局。我们不需要在这里提供任何版本，因为它们是 Spring Boot 依赖管理插件的一部分。
@Controller
@RequestMapping("/todo")
public class TodoController {
// ...
@GetMapping
public String list(final Model model) {
model.addAttribute("todos", todoService.findAll());
return "todo/list";
}
}一个简单的 MVC 控制器
我们的简单端点仅显示待办事项列表。为此，所有当前待办事项都会首先从服务加载并添加到模型中。模板"todo/list"已src/main/resources/templates/todo/list.html加载。除非我们进行其他配置，否则该template文件夹是从中选取模板的默认文件夹。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout}">
<head>
<title>[[#{todoList.list.headline}]]</title>
</head>
<body>
<div layout:fragment="content">
<!-- ... -->
<div th:if="${todoLists.empty}">[[#{todoList.list.empty}]]</div>
<div th:if="${!todoLists.empty}" class="table-responsive">
<table class="table table-striped table-hover align-middle">
<thead>
<tr>
<th scope="col">[[#{todoList.name.label}]]</th>
<th><!-- --></th>
</tr>
</thead>
<tbody>
<tr th:each="todo : ${todos}">
<td>[[${todo.name}]]</td>
<td>
<div class="float-end text-nowrap">
<a th:href="@{/todos/edit/{id}(id=${todo.id})}" class="btn btn-sm btn-info">[[#{todo.list.edit}]]</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>一个简单的 Thymeleaf 模板
添加模板后list.html，我们已经成功使用 Thymeleaf 和 Bootstrap 类 - 稍后将显示唯一缺少的布局。为了在开发过程中实现真正的热重载，仅仅关闭模板缓存是不够的。本文介绍如何直接从文件系统读取 HTML 文件。
使用 WebJars 进行引导集成
Bootstrap 是目前最流行的 CSS 框架，可以使用 WebJars 直接集成到我们的 Spring Boot 应用程序中。为此，我们首先需要另一个依赖项。
implementation('org.webjars:bootstrap:5.3.3')现在，我们可以将 Bootstrap 的 JavaScript 和 CSS 文件包含在我们的代码中，layout.html如下所示。如果需要的src/main/resources/static/js话，可以额外提供我们自己的 JS 或 CSS src/main/resources/static/css。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- ... -->
<link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet" />
<link th:href="@{/css/app.css}" rel="stylesheet" />
<script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}" defer></script>
<script th:src="@{/js/app.js}" defer></script>
</head>
<body>
<main class="my-5">
<div class="container">
<!-- ... -->
<div layout:fragment="content" />
</div>
</main>
</body>
</html>将 Bootstrap 文件集成到最小化版本中
使用 Webpack 进行 Bootstrap 集成
或者，还可以使用 Webpack 集成 Bootstrap，以定义如何向前端提供 CSS 和 JS 的更复杂的规则。如果Webpack已经准备好了，只需要一条命令就可以添加Bootstrap。
npm i --save bootstrap @popperjs/core
但是，由于使用 npm 和 DevServer 设置 Webpack 需要大量解释，因此请查看有关使用 Webpack 设置 Spring Boot 的文章。使用 Webpack 提供了许多优势 - 但也带来了更高的集成工作成本。
在 Bootify 的免费计划中，可以直接在浏览器中初始化包括前端堆栈的 Spring Boot 应用程序，无需注册。带有 Bootstrap 的 Thymeleaf 可以直接通过 WebJars 或通过 Webpack 获得。
标签：Bootstrap,Thymeleaf,Spring Boot 来源：