java - 使用 Spring 和 Thymeleaf 进行编辑

Question

我正在尝试编辑类别。这是通过单击编辑按钮并显示一个弹出窗口来完成的。 Java 代码是...

@GetMapping(path = "/category/edit/{id}")
    public String showEditUserCategoryForm(@PathVariable("id") Long id, Model model) {
        Optional<UserCategory> selectedCategory = userCategoryService.findById(id);
        model.addAttribute("newCategory", new UserCategoryForm());
        model.addAttribute("selectedCategory", selectedCategory.get());
        return "redirect:/categories";
    }

    @PostMapping(path = "/category/edit/{id}/complete")
    public String submitEditedUserCategoryForm(@PathVariable("id") Long id,
                                               @ModelAttribute("newCategory")
                                               @Valid UserCategoryForm userCategoryForm,
                                               @SessionAttribute("selectedCategory")
                                                           UserCategory selectedCategory,
                                               @SessionAttribute User user,
                                               BindingResult bindingResult,
                                               Model model) {
        userCategoryForm.setName(selectedCategory.getName());
        String newName = userCategoryForm.getName();
        userCategoryService.updateCategoryNameById(newName, selectedCategory.getId());
        return "redirect:/categories";
    }

弹出窗口的 HTML 代码是...

<div id="ex4" class="modal">
        <h3 class="display-4">Update Category</h3>
        <form th:action="@{/category/edit/}" th:object="${newCategory}" method="post">
            <div class="form-group">
                <label th:for="name">Category Name</label>
                <input type="text"
                       th:field="*{name}"
                       placeholder="Category Name"
                       class="form-control"
                       aria-describedBy="Enter category name" />
            </div>
            <button type="submit" id="submit" class="btn btn-outline-primary">
                Update category name
            </button>
        </form>
    </div>

并编辑...

<a class="mdi mdi-pencil" th:href="@{/category/edit/{id} (id=${category.id})}"
                 href="#ex4" rel="modal:open"></a>

问题是我不知道是否使用#ex4或上述 anchor 标记中的编辑链接。另外，对于表单操作，我想要类别的 ID，因为这就是 Controller 中的内容，但它不允许这样做。请建议我需要进行哪些更改以及任何其他代码改进。

Answer 1

您的代码中有很多内容需要更新。但在此之前，让我先澄清一些有关情态动词的事情。

模态框是客户端组件，这意味着不会向服务器发送用于显示/关闭模态框的请求。也就是说，它们始终是父页面的一部分，并且父页面由服务器提供服务。

让我列出解决这个问题所涉及的步骤:

1. 包含模态框的父页面 - 我们将其称为category-detail.html(我在这里使用 Bootstrap 4 版本)

<h1>[[|${category.name}|]]</h1>
<button type="button" class="btn btn-primary"
        data-toggle="modal" data-target="#editCategoryModal">
    Edit Category
</button>

<!-- Edit category modal  -->
<div class="modal fade" id="editCategoryModal" tabindex="-1"
     role="dialog" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editCategoryModalLabel">Edit Category</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form th:object="${category}" th:action="@{|/category/*{id}|}" method="post">
                    <div class="form-group">
                        <label for="catName">Name</label>
                        <input type="text" class="form-control" id="catName"
                               placeholder="Category Name" name="name" th:value="*{name}">
                    </div>
                    <button type="submit" class="btn btn-primary">Save Category</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div><!-- End of Modal -->

以上 HTML 必须包含在您的 Thymeleaf 模板中。它显示类别详细信息，并带有一个用于在模式中编辑类别的按钮。

到达类别详细信息页面的 Controller 方法:我们需要添加一个 Controller 方法，该方法将采用 categoryId 并填充模型对象中的类别详细信息，并返回要呈现的模板名称，如下所示:

String categoryName = "Information technology";

@GetMapping("/category/{categoryId}")
public String category(@PathVariable Long categoryId, ModelMap modelMap){
    modelMap.put("categoryId", categoryId);
    //try to get the category detail object from DB
    Category category = new Category();
    category.setId(categoryId);
    category.setName(categoryName);

    modelMap.put("category", category);
    return "category-detail";
}

处理表单提交以编辑类别的 Controller 方法:在上面的 HTML 中，我们看到 form 元素绑定(bind)到操作 /category/${id} 并使用 HTTP 方法 POST。因此我们需要在 Controller 中创建一个方法来处理这个 URL:

@PostMapping("/category/{categoryId}")
public String categoryEdit(
    @PathVariable Long categoryId,
    @RequestParam(name = "name") String categoryName){

    log.info("Category Id {}, Category Name {}", 
        categoryId, categoryName);
    this.categoryName = categoryName;
    //you can update the database here
    return "redirect:/category/"+categoryId;
}

现在您已经实现了完整的流程。