[JAVA] Erstellen Sie eine einfache CRUD mit SpringBoot + JPA + Thymeleaf ～ ～ Validierung hinzufügen ～

Inhalt

• Fortsetzung von Letztes Mal --Erstellen Sie eine einfache CRUD-App mit Spring Boot
• Überprüfen Sie diesmal den Eingabebereich
• Name und Alter angeben
• Das Alter sollte im Bereich von 0 bis 150 liegen
• Der Teamname kann aus bis zu 20 Zeichen bestehen

Verfahren

1. Fügen Sie der Entität Validierungseinstellungen hinzu
2. Fügen Sie der Steuerung eine Fehlerkontrolle hinzu
3. Fügen Sie der Vorlage eine Fehlermeldung hinzu

1. Fügen Sie der Entität Validierungseinstellungen hinzu

--Validierungseinstellungen kommentieren Variablen der Entitätsklasse

• Bearbeiten Sie 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;

-①: Wenn @ NotEmpty hinzugefügt wird, sind null und leere Zeichen nicht zulässig. -②: Wenn @ NotNull hinzugefügt wird, ist null nicht zulässig. --③: Stellen Sie den Minimalwert mit @ Min und den Maximalwert mit @ Max ein -④: Fügen Sie "@ Size" hinzu, um die Anzahl der Zeichen zu begrenzen

2. Fügen Sie der Steuerung eine Fehlerkontrolle hinzu

• Fügen Sie einen Prozess hinzu, um im Fehlerfall zum ursprünglichen Bildschirm zurückzukehren
• Ändern Sie 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";
    }

-①: Übergeben Sie die Player-Instanz an den neuen Erstellungsbildschirm

• Ohne diesen Inhalt kann der zum Zeitpunkt des Eingabefehlers eingegebene Inhalt nicht beibehalten werden. -②: Durch Hinzufügen von "@ Valid" zu "player" wird es zu einem Validierungsprüfungsziel.
• Die Anmerkungen sind nebeneinander angeordnet, aber "@ Valid" hängt vom "Spieler" ab.

@Valid @ModelAttribute Player player
//↑ und ↓ sind gleich
@Valid
@ModelAttribute
Player player

-②: Wenn ein Fehler vorliegt, werden die Fehlerinformationen in "BindingResult bindingResult" festgelegt. --③: Wenn ein Fehler auftritt, gibt bindingResult.hasErrors () true zurück. In diesem Fall wird der ursprüngliche Bildschirm wiederhergestellt.

3. Fügen Sie der Vorlage eine Fehlermeldung hinzu

new.html

• Zeigen Sie eine Fehlermeldung an, wenn ein Fehler vorliegt und dieser an die Steuerung zurückgegeben wird

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">Name</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">Alter</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">Teamname</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">Verteidigungsposition</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">Erstellen</button>
      </form>

--①: Da der Player jetzt vom Controller empfangen wird, setzen Sie ihn auf th: object.

• So geändert, dass jedes Eingabefeld auch das Feld th: verwendet (siehe ③ von hier) ――Der Grund, warum ich diese Änderung vorgenommen habe, ist, dass ich den Eingabeinhalt auf den Wert zurücksetzen möchte, wenn ein Fehler auftritt und ich zurückgeworfen werde. --②: th: class append =" $ {# fields.hasErrors ('name')}? Has-error " hat has im Klassenattribut, wenn # fields.hasErrors ('name') wahr ist. - Fehler hinzufügen
• Fehlerinformationen sind in "# -Feldern" enthalten
• Wenn Sie dem Klassenattribut einen Has-Fehler hinzufügen, werden Beschriftung und Rahmen gemäß der Bootstrap-Definition rot. --③: Bereich zur Anzeige von Fehlermeldungen
• Elemente mit th: if set werden nur angezeigt, wenn der Wert von th: if wahr ist (in diesem Fall, wenn ein Fehler vorliegt). --th: Errors = "* {name}"zeigt alle für* {name}eingestellten Fehlermeldungen an
• Obwohl dies in diesem Beispiel nicht der Fall ist, werden bei mehreren Fehlern alle mit einem Zeilenumbruch angezeigt.

edit.html

• Die gleiche Verarbeitung wie new.html hinzugefügt

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">Name</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">Alter</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">Teamname</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">Verteidigungsposition</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">aktualisieren</button>
      </form>

Funktionsprüfung

• Mit den bisher vorgenommenen Änderungen ist das Verhalten wie folgt, wenn Sie auf http: // localhost: 8080 / player zugreifen.

nächstes Mal

--Nächster ist hier