[JAVA] Créez un CRUD simple avec SpringBoot + JPA + Thymeleaf ③ ～ Ajouter une validation ～

Contenu

-Suite de Dernière fois --Créez une application CRUD simple avec Spring Boot --Cette fois, validez la zone de saisie --Faire le nom et l'âge requis

• L'âge doit être compris entre 0 et 150
• Le nom de l'équipe peut comporter jusqu'à 20 caractères

procédure

1. Ajouter des paramètres de validation à l'entité
2. Ajouter un contrôle d'erreur au contrôleur
3. Ajoutez un message d'erreur au modèle

1. Ajouter des paramètres de validation à l'entité

• Les paramètres de validation annotent les variables de la classe d'entité --Modifier Player.java

src/main/java/com/example/baseball/domain/Player.java

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    @NotEmpty // ①
    private String name;
    @NotNull // ②
    @Min(value = 0) // ③
    @Max(value = 150)
    private Integer age;
    @Size(max = 20) // ④
    private String team;
    private String position;

-①: Si @ NotEmpty est ajouté, les caractères nuls et vides ne seront pas autorisés. -②: Si @ NotNull est ajouté, null ne sera pas autorisé. --③: Réglez la valeur minimale avec @ Min et la valeur maximale avec @ Max -④: Ajoutez @ Size pour limiter le nombre de caractères

2. Ajouter un contrôle d'erreur au contrôleur

--Ajouter un processus pour revenir à l'écran d'origine en cas d'erreur --Modifier PlayerController.java

src/main/java/com/example/baseball/controller/PlayerController.java

    @GetMapping("new")
    public String newPlayer(Model model) {
        // ①
        Player player = new Player();
        model.addAttribute("player", player);
        return "players/new";
    }

    @PostMapping
    public String create(@Valid @ModelAttribute Player player, BindingResult bindingResult) { // ②
        if(bindingResult.hasErrors()) return "players/new"; // ③
        playerService.save(player);
        return "redirect:/players";
    }

    @PutMapping("{id}")
    public String update(@PathVariable Long id, @Valid @ModelAttribute Player player, BindingResult bindingResult) {
        if(bindingResult.hasErrors()) return "players/edit";
        player.setId(id);
        playerService.save(player);
        return "redirect:/players";
    }

-①: Passez l'instance Player au nouvel écran de création --Sans cela, le contenu saisi au moment de l'erreur de saisie ne peut pas être conservé. -②: En ajoutant «@ Valid» au «player», il devient une cible de contrôle de validation. --Bien que les annotations soient disposées côte à côte, «@ Valid» dépend du «joueur».

@Valid @ModelAttribute Player player
//↑ et ↓ sont les mêmes
@Valid
@ModelAttribute
Player player

--②: S'il y a une erreur, les informations d'erreur sont définies dans BindingResult bindingResult. --③: S'il y a une erreur, bindingResult.hasErrors () renvoie true, donc dans ce cas, il est renvoyé à l'écran d'origine.

3. Ajoutez un message d'erreur au modèle

new.html

--Affiche un message d'erreur lorsqu'il y a une erreur et qu'il est renvoyé au contrôleur

src/main/resources/templates/players/new.html

      <!-- ① -->
      <form th:action="@{/players}" th:method="post" th:object="${player}">
        <!-- ② -->
        <div class="form-group" th:classappend="${#fields.hasErrors('name')}? has-error">
          <label class="control-label">Nom</label>
          <input class="form-control" type="text" th:field="*{name}" />
          <!-- ③ -->
          <span class="text-danger" th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></span>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('age')}? has-error">
          <label class="control-label">âge</label>
          <input class="form-control" type="number" th:field="*{age}" />
          <span class="text-danger" th:if="${#fields.hasErrors('age')}" th:errors="*{age}"></span>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('team')}? has-error">
          <label class="control-label">Nom de l'équipe</label>
          <input class="form-control" type="text" th:field="*{team}" />
          <span class="text-danger" th:if="${#fields.hasErrors('team')}" th:errors="*{team}"></span>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('position')}? has-error">
          <label class="control-label">Position défensive</label>
          <input class="form-control" type="text" th:field="*{position}" />
          <span class="text-danger" th:if="${#fields.hasErrors('position')}" th:errors="*{position}"></span>
        </div>
        <button class="btn btn-default" type="submit">Créer</button>
      </form>

--①: Puisque le lecteur est maintenant reçu du contrôleur, réglez-le sur th: object. --Modifié pour que chaque champ d'entrée utilise également th: field (voir ③ de here) ―― La raison pour laquelle j'ai effectué cette modification est que je souhaite réinitialiser le contenu d'entrée à la valeur lorsqu'une erreur se produit et que je suis renvoyé. --②: th: class append =" $ {# fields.hasErrors ('name')}? Has-error " signifie a à l'attribut class lorsque # fields.hasErrors ('name') est vrai. -Ajouter une erreur

• Les informations d'erreur sont contenues dans # champs --Si vous ajoutez has-error à l'attribut class, l'étiquette et le cadre deviendront rouges selon la définition Bootstrap. --③: zone d'affichage des messages d'erreur
• Les éléments avec th: if set ne sont affichés que lorsque la valeur de th: if est vraie (dans ce cas, en cas d'erreur). --th: errors = "* {name}"affiche tous les messages d'erreur définis pour* {name} --Bien que cela ne se produise pas dans cet exemple, s'il y a plusieurs erreurs, toutes seront affichées avec une pause.

edit.html

--Ajout du même traitement que new.html

src/main/resources/templates/players/edit.html

      <form th:action="@{/players/{id}(id=*{id})}" th:method="put" th:object="${player}">
        <div class="form-group" th:classappend="${#fields.hasErrors('name')}? has-error">
          <label class="control-label">Nom</label>
          <input class="form-control" type="text" th:field="*{name}" />
          <span class="text-danger" th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></span>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('age')}? has-error">
          <label class="control-label">âge</label>
          <input class="form-control" type="number" th:field="*{age}" />
          <span class="text-danger" th:if="${#fields.hasErrors('age')}" th:errors="*{age}"></span>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('team')}? has-error">
          <label class="control-label">Nom de l'équipe</label>
          <input class="form-control" type="text" th:field="*{team}" />
          <span class="text-danger" th:if="${#fields.hasErrors('team')}" th:errors="*{team}"></span>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('position')}? has-error">
          <label class="control-label">Position défensive</label>
          <input class="form-control" type="text" th:field="*{position}" />
          <span class="text-danger" th:if="${#fields.hasErrors('position')}" th:errors="*{position}"></span>
        </div>
        <button class="btn btn-default" type="submit">mise à jour</button>
      </form>

Contrôle de fonctionnement

• Avec les modifications apportées jusqu'à présent, lorsque vous accédez à http: // localhost: 8080 / players, le comportement est le suivant.

la prochaine fois

• Le suivant est ici