使用 Thymeleaf、Java 和 Spring MVC 更新 HTML 数据表

Question

我正在使用Java 11、Spring Boot 2.1.2 和Thymeleaf Spring 5 开发一个简单的Planning Poker MVC 应用程序。

所附图片显示了HTML 主页面。登录后，用户提交分数。该请求转到粘贴在下面的控制器方法，其中分数被持久保存到数据库中。然后，从数据库中检索该组的整个分数集作为列表。将用户的个人分数和团体分数列表都添加到模型中，并将用户转发到 poker.html 页面

@PostMapping("/score")
public String submitScores(@Valid SimplePoker simplePoker, BindingResult result, Model model) {
    SimplePoker poker = simplePokerRepository.save(simplePoker);
    model.addAttribute("poker_score", poker);

    Iterable<SimplePoker> scores = simplePokerRepository.findAll();
    model.addAttribute("scores", scores);
    return "poker";
}

在 poker.html 页面上，使用标准 Thymeleaf 模式生成了一个表格，如下所示：-

<div class="container" th:if="${not #lists.isEmpty(scores)}">
    <table class="table table-striped table-hover table-bordered table-responsive-md">
        <thead class="thead-dark">
        <tr>
            <th class="text-center, align-middle">Name</th>
            <th class="text-center, align-middle">Planning</th>
            <th class="text-center, align-middle">Business Risk</th>
            <th class="text-center, align-middle">Chance of Failure</th>
            <th class="text-center, align-middle">Total Risk</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="score: ${scores}">
            <td th:text="${score.name}"></td>
            <td th:text="${score.planningScore}"></td>
            <td th:text="${score.risk1Score}"></td>
            <td th:text="${score.risk2Score}"></td>
            <td th:text="${score.risk3Score}"></td>
        </tr>
        </tbody>
    </table>
</div>

这一切都很好，但当然该表仅代表用户提出请求时的结果。我想在表格下方（黄色突出显示区域）添加一个“更新表格”按钮，用户可以单击该按钮来获取一组新数据并使用最新结果更新页面上的表格。由于我主要是一名后端开发人员，我在这里有点挣扎，非常感谢一些指导。

我想我可以创建一个粗略的解决方案，单击按钮只会刷新整个页面，但如果只更新表格会更顺畅。锦上添花的是，如果表格每隔几秒钟自动更新一次，就不需要用户单击按钮。但作为第一步，实现一个更新表格的按钮会很棒。

非常感谢您阅读我的帖子并提供任何帮助。

Answer 1

您可能想查看htmx。它是一个 JavaScript 库，可以避免自己编写 JavaScript 来做你需要的事情。

您可以像这样添加周期刷新：

<div hx-trigger="every 1s"
     hx-get="/table" >
</div>

您可以在整个页面的初始呈现时将此添加到您的 Thymeleaf 模板中。之后，htmx 将每 1 秒对 /table 执行一次 GET。

在您的控制器中，您应该返回构建表格所需的 HTML。如果表是 Thymeleaf 片段，那么您可以重复使用该片段：

@Controller
public class MyController {
  @GetMapping("/table")
  public String getTable(Model model) {
    // first fill up your model using .addAttribute

    // return the fragment
    return "fragments :: table"
  }
}

This example 做了类似的事情。有关将 Thymeleaf 与 htmx 结合的一些额外背景信息，另请参阅 TodoMVC with Thymeleaf and HTMX。