[JAVA] [Introduction à Spring Boot] Vérification de la validation du formulaire

Objectif

Pour ceux qui ont fini de travailler sur Spring Quickstart Guide, ceux qui ont commencé à apprendre Spring Boot et ceux qui veulent revoir

Nous partagerons ce que nous avons appris en travaillant réellement sur le guide officiel Validating Form Input.

Le formulaire rempli est ici.

Il existe un formulaire pour saisir le nom et l'âge,

Si le bouton Soumettre est enfoncé avec une valeur non valide saisie, un message d'erreur s'affiche et

Si une valeur valide est saisie, nous la mettrons en œuvre afin que vous puissiez passer à un autre écran.

L'environnement de développement et l'examen jusqu'à présent sont les suivants.

Environnement de développement

Système d'exploitation: macOS Mojave version 10.14.6
Éditeur de texte: Visual Studio Code (ci-après VSCode)
Java: 11.0.2

Cliquez ici pour consulter le guide de démarrage rapide Cliquez ici pour un examen de la création d'un service Web RESTful Cliquez ici pour un examen de la consommation d'un service Web RESTful Cliquez ici pour un examen de l'accès aux données avec JPA Cliquez ici pour un examen de la soumission du formulaire de traitement

1. Commençons le projet Spring Boot!

Tout d'abord, accédez à spring initializr.

1. Cliquez sur le bouton AJOUTER DES DÉPENDANCES et ajoutez «Spring Web» et «Thymeleaf». 2.Artifact, nom changé en validating-form-input.
2. Remplacez Java par 11.

Cliquez ensuite sur le bouton GENERATE pour télécharger le fichier Zip.

Extrayez le fichier Zip téléchargé et vous êtes prêt à partir.

2. Ajoutez du code!

Ouvrez le dossier précédent avec VS Code. Nous vous recommandons d'installer le Java Extension Pack pour les extensions. Il est dit que vous devez l'installer.

Créons PersonForm.java!

Créez un fichier PersonForm.java dans src / main / java / com / example / validatingforminput /.

Ajoutez le code faisant référence à la formule.

PersonForm.java

package com.example.validatingforminput;

import javax.validation.constraints.Min;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;

public class PersonForm {

  @NotNull
  @Size(min=2, max=30)
  private String name;

  @NotNull
  @Min(18)
  private Integer age;

  public String getName() {
    return this.name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public Integer getAge() {
    return age;
  }

  public void setAge(Integer age) {
    this.age = age;
  }

  public String toString() {
    return "Person(Name: " + this.name + ", Age: " + this.age + ")";
  }
}

Nous approfondirons le code ajouté.

① @ NotNull et @ Size

PersonForm.java

@NotNull
@Size(min=2, max=30)
private String name;

Deux annotations de validation sont ajoutées à la variable de nom de type String au moment de la déclaration.

@ NotNull n'autorise pas ** null **. Veuillez noter que les valeurs nulles ne sont pas autorisées, mais que les caractères vides et les espaces sont autorisés.

@ Size vérifie s'il est ** min ou plus ** et ** max ou moins ** spécifié dans (). Cette fois, c'est @Size (min = 2, max = 30), donc une erreur se produira à moins qu'elle ne soit 2 ou plus et 30 ou moins.

②@Min

PersonForm.java

@NotNull
@Min(18)
private Integer age;

Deux annotations de validation sont ajoutées lors de la déclaration d'une variable d'âge de type Integer. (L'un est «@ NotNull» mentionné ci-dessus)

@ Min est vérifié s'il est inférieur à la valeur décrite dans (). Cette fois, il s'agit de «@ Min (18)», donc moins de 18 entraînera une erreur.

③ Getter / setter, méthode toString

PersonForm.java

public String getName() {
  return this.name;
}

public void setName(String name) {
  this.name = name;
}

public Integer getAge() {
  return age;
}

public void setAge(Integer age) {
  this.age = age;
}

public String toString() {
  return "Person(Name: " + this.name + ", Age: " + this.age + ")";
}

Il définit une méthode getter / setter pour obtenir et modifier les valeurs du nom et de l'âge des variables. Il définit également une méthode toString pour afficher le nom et l'âge sous forme de chaînes. (Je ne pense pas que je l'utilise cette fois, mais est-ce pour le débogage?)

Ajoutons une dépendance de validation à pom.xml!

Bien que cela n'ait pas été mentionné dans le guide officiel, lorsque Spring Boot 2.3 ou supérieur, ʻImport javax.validation.constraints. 〇〇 of PersonForm.java` entraînera une erreur. (Spring Boot2.3 Relealse Notes)

Ajoutez ce qui suit aux dépendances.

pom.xml

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-validation</artifactId>
</dependency>

Créons WebController.java!

Créez un fichier WebController.java dans src / main / java / com / example / validatingforminput /.

Ajoutez le code faisant référence à la formule.

WebController.java

package com.example.validatingforminput;

import javax.validation.Valid;

import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@Controller
public class WebController implements WebMvcConfigurer {

  @Override
  public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/results").setViewName("results");
  }

  @GetMapping("/")
  public String showForm(PersonForm personForm) {
    return "form";
  }

  @PostMapping("/")
  public String checkPersonInfo(@Valid PersonForm personForm, BindingResult bindingResult) {

    if (bindingResult.hasErrors()) {
      return "form";
    }

    return "redirect:/results";
  }
}

Nous approfondirons le code ajouté.

① Interface WebMvcConfigurer et méthode addViewControllers

WebController.java

@Controller
public class WebController implements WebMvcConfigurer {

  @Override
  public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/results").setViewName("results");
  }

 //Ce qui suit est omis
}

Implémente l'interface WebMvcConfigurer, en remplaçant la méthode addViewControllers.

Il est interprété que l'URL «http: // localhost: 8080 / results» est définie pour faire référence au modèle ** results.html **. Il semble que l'URL et le modèle soient mappés. L'implémentation de results.html se fera plus tard.

② méthode showForm

WebController.java

@GetMapping("/")
public String showForm(PersonForm personForm) {
  return "form";
}

@ GetMapping est une annotation pour appeler la méthode showForm quand il y a une requête GET à http: // localhost: 8080 /. Je reçois un PersonForm comme argument. Vous pouvez associer PersonForm à l'attribut form de form.html, qui est la valeur de retour de la méthode. L'implémentation de form.html se fera plus tard.

③ méthode checkPersonInfo

WebController.java

@PostMapping("/")
public String checkPersonInfo(@Valid PersonForm personForm, BindingResult bindingResult) {

  if (bindingResult.hasErrors()) {
    return "form";
  }

  return "redirect:/results";
}

@ PostMapping est une annotation pour appeler la méthode checkPersonInfo quand il y a une requête POST à http: // localhost: 8080 /. Le premier argument, @Valid PersonForm personForm, valide les données d'entrée. Le deuxième argument, BindingResult bindingResult, est une annotation pour contenir les données d'entrée et le résultat de la validation (s'il y a une erreur).

L'instruction if avec bindingResult.hasErrors () vérifie les erreurs. S'il y a une erreur, redessinez form.html avec le message d'erreur et la valeur saisie.

S'il n'y a pas d'erreur, vous serez redirigé vers http: // localhost: 8080 / results.

Créons form.html!

Créez un fichier form.html dans src / main / resources / templates /.

Ajoutez le code faisant référence à la formule.

form.html

<html xmlns:th="http://www.thymeleaf.org">
  <body>
      <form action="#" th:action="@{/}" th:object="${personForm}" method="post">
        <table>
          <tr>
            <td>Name:</td>
            <td><input type="text" th:field="*{name}" /></td>
            <td th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</td>
          </tr>
          <tr>
            <td>Age:</td>
            <td><input type="text" th:field="*{age}" /></td>
            <td th:if="${#fields.hasErrors('age')}" th:errors="*{age}">Age Error</td>
          </tr>
          <tr>
            <td><button type="submit">Submit</button></td>
          </tr>
        </table>
      </form>
  </body>
</html>

C'est un écran de formulaire pour entrer le nom et l'âge.

Nous approfondirons la description de thymeleaf dans le code ajouté.

thymeleaf est un moteur de template qui peut être géré par springboot. Th: Décrivez comme 〇〇. [Tutoriel Thymeleaf] écrit en japonais (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#thymeleaf%E3%81%AE%E7%B4%B9%E4%BB% Il y a aussi 8B)!

th:action

Remplace le contenu de l'attribut action de la balise form. La méthode de description est th: action =" @ {} ". Depuis method = "post", la méthode checkPersonInfo de WebController est appelée lorsque le bouton Soumettre est enfoncé.

th:object

L'objet est spécifié par «th: object». Cela vous permet de faire référence à des variables dans des objets comme * {name} au lieu de personForm.name.

th:field

Écrivez th: field =" * {variable name} " pour afficher les variables dans l'objet spécifié par th: object. Cette fois, comme il y a un nom et un âge dans la classe PersonForm, ce sera th: field =" * {name} ", th: field =" * {age} ". De plus, le nom de la variable décrit dans th: field =" * {variable name} " est l'attribut id et l'attribut name de l'entrée.

th:if

Écrivez th: if = condition. Si true, la balise et les éléments enfants sont affichés. Cette condition sera vraie s'il y a une erreur.

th:errors

Écrivez th: errors =" * {variable name} ". Un message d'erreur s'affichera s'il y a une erreur. Il semble que vous ayez sécurisé une zone pour afficher les messages d'erreur en vérifiant les erreurs avec th: if et th: errors.

Créons results.html!

Créez un fichier results.html dans src / main / resources / templates /.

Ajoutez le code faisant référence à la formule.

results.html

<html>
  <body>
    Congratulations! You are old enough to sign up for this site.
  </body>
</html>

Si aucune valeur invalide n'est saisie sur l'écran du formulaire, l'écran passera à cet écran.

3. Lançons-le!

Maintenant que l'application est prête à fonctionner, vérifions.

Entrez la commande suivante dans le terminal et appuyez sur Entrée.

Terminal

$ ./mvnw spring-boot:run

Ensuite, lorsque vous accédez à http: // localhost: 8080 /, vous devriez voir l'écran du formulaire ci-dessous. (Form.html s'affiche)

** Entrez un caractère pour le nom et un nombre de moins de 18 ans pour l'âge, et appuyez sur le bouton Soumettre pour afficher un message d'erreur. ** **

** Si vous appuyez sur le bouton Soumettre sans rien saisir d'âge, un message d'erreur s'affiche. ** **

** Entrez 2 caractères ou plus pour le nom et 18 ou plus pour l'âge, et appuyez sur le bouton Soumettre pour afficher l'écran des résultats (result.html). ** **

Je vous remercie pour votre travail acharné! terminé!

Site de référence

** Vérification de la valeur d'entrée avec Spring Boot ** ** Si c'est un contrôleur qui renvoie simplement le nom de la vue, vous n'avez pas besoin d'un contrôleur séparé! ** ** Validation et message d'erreur **