Как выполнить проверку на основе бина в модальной форме начальной загрузки - PullRequest
Новая
       7

Как выполнить проверку на основе бина в модальной форме начальной загрузки

0 голосов
/ 14 января 2019

Я занимаюсь разработкой весенних загрузочных приложений уже несколько лет, но они всегда заключали соглашение на одну страницу за функцию, где я держался подальше от одной страницы, динамически изменяющей ее содержимое без обновления. Недавно я следовал учебному пособию по YouTube, посвященному интеграции пружинного загрузочного бэкенда с одностраничным веб-интерфейсом CRUD с поддержкой начальной загрузки (https://www.youtube.com/watch?v=lIgFe20dYq4).). В этом учебном пособии показано, как использовать 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:/";
}

Я попробовал несколько вещей (имея в виду, что я новичок в тимелеф, начальной загрузке и, в некоторой степени, также в jQuery), но я не могу понять, как интегрировать валидацию, как я привык делать в этом интерфейсе дизайн.

Пожалуйста, помогите, если вы знакомы с внешним интерфейсом, основанным на моделях начальной загрузки, который также включает в себя проверенные формы на основе бина. Я открыт, чтобы изменить свой подход, пока внешний вид внешнего интерфейса не меняется. Это новый проект, который я начинаю, и я делаю необходимым модернизировать мои методы и изучать новые фреймворки / методы. Худшее приходит к худшему, я не против начинать с нуля, пока я могу продолжать использовать этот дизайн интерфейса.

Спасибо

...