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

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模式生成table，如下图：-

<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>

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

我想我可以创建一个粗略的解决方案，点击按钮只会刷新整个页面，但如果能够只更新 table 会更流畅。锦上添花的是 table 每几秒自动更新一次，无需用户单击按钮。但作为第一步，实现一个按钮来更新 table 会很棒。

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

Answer 1

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

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

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

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

在您的控制器中，您应该 return 构建 table 所需的 HTML。如果 table 是 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 does something similar. See also TodoMVC with Thymeleaf and HTMX 了解有关结合 Thymeleaf 与 htmx 的一些额外背景信息。

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

Updating an HTML data table using Thymeleaf, Java and Spring MVC

html

java

jquery

thymeleaf

spring-boot