Question

几年来我一直在开发spring boot应用程序，但是它们一直是每功能一页的交易，我远离动态更新其内容而不刷新的单个页面。我最近关注了有关将Spring Boot后端与具有引导模态形式的单页CRUD前端（https://www.youtube.com/watch?v=lIgFe20dYq4）集成的youtube教程。本教程介绍了如何使用jQuery拦截按钮的get请求，如何使用从单独的请求到后端的值填充模态表单字段以及如何显示模态。这是jQuery代码：

$('.nBtn, .table .eBtn').on('click', function(event)
{
    event.preventDefault();

    var href = $(this).attr('href');
    var id = $(this).attr('id');

    if (id == 'nBtn')
    {
        $('.updateForm #id').val('');
        $('.updateForm #title').val('');
        $('.updateForm #text').val('');
        $('.updateForm #animalType').val('');
        $('.updateForm #animalAge').val('');
        $('.updateForm #sellerName').val('');
        $('.updateForm #sellerPhoneNumber').val('');
        $('.updateForm #sellerEmailAddress').val('');
    }
    else
    {
        $.get(href, function(post, status)
        {
            $('.updateForm #id').val(post.id);
            $('.updateForm #title').val(post.title);
            $('.updateForm #text').val(post.text);
            $('.updateForm #animalType').val(post.animalType);
            $('.updateForm #animalAge').val(post.animalAge);
            $('.updateForm #sellerName').val(post.sellerName);
            $('.updateForm #sellerPhoneNumber').val(post.sellerPhoneNumber);
            $('.updateForm #sellerEmailAddress').val(post.sellerEmailAddress);
        });
    }

此方法最终在控制器中调用以下方法：

@GetMapping("/publications/{id}")
@ResponseBody
public Post findPost(@PathVariable String id)
{
    return postService.findById(UUID.fromString(id));
}

这很好用，我喜欢它的外观，但是它有一个主要缺点：没有任何验证。来自我的背景，我习惯了这样的表单：

<form action="#" th:action="@{/animalTest}" th:object="${animal}" method="post">
        <table>
            <tr hidden="true">
                <td>ID : </td>
                <td><input type="text" th:field="*{id}" /></td>
                <td th:if="${#fields.hasErrors('id')}" th:errors="*{id}">ID Error</td>
            </tr>
            <tr>
                <td>Nom : </td>
                <td><input type="text" th:field="*{name}" /></td>
                <td th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</td>
            </tr>
            <tr>
                <td>Âge : </td>
                <td><input type="text" th:field="*{age}" /></td>
                <td th:if="${#fields.hasErrors('age')}" th:errors="*{age}">Age Error</td>
            </tr>
            <tr>
                <td>Type : </td>
                <td><input type="text" th:field="*{type}" /></td>
                <td th:if="${#fields.hasErrors('type')}" th:errors="*{type}">Type Error</td>
            </tr>
            <tr>
                <td><button type="submit">Submit</button></td>
            </tr>
        </table>
    </form>

保存的后端方法如下所示：

@PostMapping("/animalTest")
public String saveAnimal(@Valid Animal animal, BindingResult bindingResult) 
{
    if (bindingResult.hasErrors()) 
    {
        return "animalForm";
    }

    animalService.save(animal);

    return "redirect:/";
}

我已经尝试了一些方法（请记住，我是thymeleaf，bootstrap和jQuery的新手），但我不知道如何像我以前在该前端上所做的那样集成验证设计。

如果您熟悉由引导程序模态支持的前端，该模版还集成了由bean支持的经过验证的表单，请提供帮助。只要前端的外观没有变化，我就愿意改变自己的方法。这是我正在启动的一个新项目，正在使我的技术现代化和学习新的框架/方法成为必要。最糟糕的是最糟糕的，只要我可以继续使用此前端设计，我就不介意从头开始。

谢谢

如何在引导模态形式上进行bean支持的验证

0 个答案: