当应用程序执行潜在的关键操作(例如编辑、保存或从数据库中删除数据)时,建议通知用户操作的成功或失败。这篇文章介绍了如何在 Thymeleaf 模板中显示通知的基本解决方案。
假设读者具备 Spring Boot、Thymeleaf 和 Bootstrap 的一般知识来应用这些内容。
这个想法是在应用程序中为通知分配一个显示区域,并仅在应该显示通知时激活该区域,让用户可以选择在阅读后关闭通知。该区域可以创建为片段并包含在所需的模板中,或者包含在与应用程序视图关联的所有模板中。
需要一个变量来充当显示或不显示这些通知的“键”。由于从控制器的每个路由管理器发送消息有些费力,因此我将使用 http 会话过滤器,在其中保存消息的值和要显示的消息类型。
最后,使用消息处理程序,我将管理消息的删除,以便它停止显示。
创建了一个名为的代码片段messageAlert.html,并将其包含在fragments资源模板的文件夹中。这是一个可以随意修改的示例,以使其设计适应将要使用的应用程序。
<div th:fragment="messageAlert" th:if="${session.message != ''}" class="container"> <form th:action="@{/message}" method="POST"> <input type="hidden" th:name="returnUrl" th:value="${returnUrl}"> <div class="alert alert-dismissible fade show" th:classappend="${session.messageType} == 'danger'? 'alert-danger' : 'alert-info'" role="alert"> <div> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" /> </svg> <span class="align-middle" th:text="${session.message}"></span> </div> <button type="submit" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button> </div> </form> </div> |
要将此片段包含在我想要显示通知的视图中,我使用:
通过 th:if="${session.message != ''}",我可以确定是否显示该代码段。如果名为 message 的会话变量值为空,则不显示任何内容,否则将显示该代码段。
通过 我通过表单响应向控制器指出,在执行操作后我应该去哪个页面。这将允许我在处理完信息删除后返回到原来的页面。我使用 returnUrl 来通用地指示路径,是因为它在调用表单时非常有用,例如,在本例中,我想知道表单内容发送完毕后我应该去哪里。例如,如果我们的应用程序要处理影院,并且要添加、编辑或删除影院,那么使用 returnUrl,我就可以告诉 @PostMapping 方法在执行这些操作后要显示哪个视图。为了做到这一点,当我使用创建、编辑或删除视图时,我在模型中添加了这个变量: model.addAttribute("returnUrl", "cinemas");
其中,cinemas 是处理完我们要去的路径的形式后要到达的路径。举个例子
@GetMapping("/create") public String createForm(Model model) { model.addAttribute("cinema", new Cinema()); model.addAttribute("returnUrl", "cinemas"); return "cinema/cinema-form"; } |
让我们继续。通过 th:classappend="${session.messageType} == 'danger'? 'alert-danger' : 'alert-info'" role="alert,我可以确定要显示哪种类型的 Boostrap 警报,是用于通知(蓝色背景框)还是用于提示错误(红色背景框)。这是通过 messageType 会话变量实现的。
在警报中显示 SVG 图标后,在 span 标记内使用 th:text="${session.message}" 加入通知信息。
通过 type="submit "按钮,我将信息表单发送到控制器,控制器将按照表单中指定的路径删除信息: