[JAVA] [Einführung in Spring Boot] Senden Sie ein Formular mit thymeleaf
Zweck
Für diejenigen, die mit der Arbeit an Spring Quickstart Guide fertig sind, diejenigen, die angefangen haben, Spring Boot zu lernen, und diejenigen, die eine Überprüfung durchführen möchten
Teilen Sie mit, was Sie gelernt haben, indem Sie tatsächlich am offiziellen Leitfaden Übermittlung von Formularen gearbeitet haben.
Das ausgefüllte Formular finden Sie hier.
Wir werden den Prozess der Anzeige des auf dem Formularbildschirm eingegebenen Werts auf dem Ergebnisbildschirm implementieren.
Die Entwicklungsumgebung und die Überprüfung sind wie folgt.
Entwicklungsumgebung
Betriebssystem: macOS Mojave Version 10.14.6
Texteditor: Visual Studio Code (im Folgenden VSCode)
Java: 11.0.2
Klicken Sie hier, um eine Übersicht über die Kurzanleitung zu erhalten. Klicken Sie hier, um eine Übersicht über das Erstellen eines RESTful-Webdiensts zu erhalten. Klicken Sie hier, um eine Übersicht über den Verbrauch eines RESTful-Webdienstes zu erhalten. Klicken Sie hier, um eine Übersicht über den Zugriff auf Daten mit JPA zu erhalten.
1. Starten Sie das Spring Boot Projekt!
Greifen Sie zunächst auf spring initial izr zu.
- Klicken Sie auf die Schaltfläche ADD DEPENDENCIES und fügen Sie "Spring Web" und "Thymeleaf" hinzu. 2.Artifact, Name geändert in "Handling-Form-Submission".
- Ändern Sie Java in 11.
Klicken Sie dann auf die Schaltfläche "GENERATE", um die Zip-Datei herunterzuladen.
Extrahieren Sie die heruntergeladene Zip-Datei und Sie können loslegen.
2. Code hinzufügen!
Öffnen Sie den vorherigen Ordner mit VS Code. Wir empfehlen, das Java Extension Pack für Erweiterungen zu installieren. Es wird gesagt, dass Sie es installieren sollten.
Lassen Sie uns GreetingController.java erstellen!
Erstellen Sie eine GreetingController.java-Datei in src / main / java / com / example / handleformsubmission /.
Fügen Sie den Code hinzu, der sich auf die Formel bezieht.
GreetingController.java
package com.example.handlingformsubmission;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
@Controller
public class GreetingController {
@GetMapping("/greeting")
public String greetingForm(Model model) {
model.addAttribute("greeting", new Greeting());
return "greeting";
}
@PostMapping("/greeting")
public String greetingSubmit(@ModelAttribute Greeting greeting) {
return "result";
}
}
Wir werden uns eingehender mit dem hinzugefügten Code befassen.
①@Controller
GreetingController.java
@Controller
public class GreetingController {
//Kürzung
}
SpringBoot behandelt diese Klasse als Controller, indem es sie mit "@ Controller" kommentiert. Da der Übergang zu Ansicht und HTML erstellt wird, muss Ansicht als Rückgabewert der später beschriebenen Methode angegeben werden.
Obwohl es diesmal nicht angezeigt wird, wird die Annotation "@ RestController" ebenfalls als Controller behandelt, aber der Rückgabewert der Methode ist der Inhalt der Antwort, ohne zu "View" zu wechseln.
② greetingForm-Methode
GreetingController.java
@GetMapping("/greeting")
public String greetingForm(Model model) {
model.addAttribute("greeting", new Greeting());
return "greeting";
}
1.@GetMapping
Durch Hinzufügen dieser Anmerkung wird die Methode aufgerufen, die angegeben wird, wenn eine GET-Anforderung mit der in () beschriebenen URL vorliegt.
Diesmal ist es "@GetMapping (" / greeting ")". Wenn daher unter http: // localhost8080 / greeting eine GET-Anforderung vorliegt, wird die` greetingForm-Methode aufgerufen. ``
2.model.addAttribute Es erhält das Argument "Modellklasse" als Argument der Methode. Hiermit legen Sie die Daten fest, die an die Ansichtsseite übergeben werden sollen. Daten werden mit der Methode "addAttribute (erstes Argument, zweites Argument)" an die Ansichtsseite übergeben. Sie können Daten im zweiten Argument festlegen und diese Daten auf der Ansichtsseite mit dem Namen des ersten Arguments verwenden.
Dieses Mal übergebe ich das "instanziierte Begrüßungsobjekt" an die Ansicht mit dem Namen "Begrüßung". Die Begrüßung wird später implementiert.
** 3. Methodenrückgabewert ** View wird als Rückgabewert der Methode angegeben. Diesmal kehren wir zur Begrüßung zurück. Das heißt, Sie benötigen greeting.html. Es wird später implementiert.
② greetingSubmit-Methode
GreetingController.java
@PostMapping("/greeting")
public String greetingSubmit(@ModelAttribute Greeting greeting) {
return "result";
}
1.@PostMapping
Durch Hinzufügen dieser Anmerkung wird die Methode aufgerufen, die angegeben wird, wenn eine POST-Anforderung mit der in () beschriebenen URL vorliegt.
Diesmal ist es "@PostMapping (" / greeting ")". Wenn daher eine POST-Anforderung unter "http: // localhost8080 / greeting" vorliegt, wird die Methode "greetingSubmit" aufgerufen. ``
2.@ModelAttribute
Diese Anmerkung im Argument der Methode dient zum Festlegen des von POST an die angegebene Klasse gesendeten Werts.
Dieses Mal wird der an die Variable "Begrüßung" gesendete Wert gespeichert und der Wert für jede Variable der Klasse "Begrüßung" festgelegt.
** 3. Methodenrückgabewert ** View wird als Rückgabewert der Methode angegeben. Diesmal geben wir "Ergebnis" zurück. Das heißt, Sie benötigen result.html. Es wird später implementiert.
Lassen Sie uns Greeting.java erstellen!
Erstellen Sie eine Greeting.java-Datei in src / main / java / com / example / handleformsubmission /.
Fügen Sie den Code hinzu, der sich auf die Formel bezieht.
Greeting.java
package com.example.handlingformsubmission;
public class Greeting {
private long id;
private String content;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
Wir werden uns eingehender mit dem hinzugefügten Code befassen.
** 1. Deklaration von Variablen **
Greeting.java
private long id;
private String content;
Es werden zwei Variablen deklariert: long type id und String type content.
Da der Zugriffsmodifikator "privat" ist, kann nur innerhalb derselben Klasse auf ihn zugegriffen werden.
** 2. Definition von Getter- und Setter-Methoden **
Greeting.java
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
Bereiten Sie eine Getter- und Setter-Methode zum Speichern und Abrufen des im Formular gesendeten Werts vor.
Lassen Sie uns greeting.html erstellen!
Erstellen Sie eine Datei greeting.html in src / main / resources / templates /.
Diese HTML-Datei dient zur Anzeige des Formularbildschirms.
Fügen Sie den Code hinzu, der sich auf die Formel bezieht.
greeting.html
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Getting Started: Handling Form Submission</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Form</h1>
<form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post">
<p>Id: <input type="text" th:field="*{id}" /></p>
<p>Message: <input type="text" th:field="*{content}" /></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</form>
</body>
</html>
Wir werden uns eingehender mit der Beschreibung von Thymeleaf im hinzugefügten Code befassen.
thymeleaf ist eine Template-Engine, die von springboot verarbeitet werden kann. Th: Beschreibe als 〇〇. [Thymeleaf-Tutorial] in japanischer Sprache (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#thymeleaf%E3%81%AE%E7%B4%B9%E4%BB%) Es gibt auch 8B)!
th:action
Ersetzt den Inhalt des Aktionsattributs des Formular-Tags. Die Beschreibungsmethode lautet th: action =" @ {} ".
Da method = "post" ist, wird die greetingSubmit-Methode von GreetingController aufgerufen, wenn die Submit-Taste gedrückt wird.
th:object
Das Objekt wird durch th: object angegeben. Auf diese Weise können Sie auf Variablen in Objekten wie * {id} anstatt auf greeting.id verweisen.
th:field
Schreiben Sie th: field =" * {Variablenname} ", um die Variablen in dem durch th: object angegebenen Objekt anzuzeigen.
Dieses Mal ist es, da die Begrüßungsklasse ID und Inhalt enthält, "th: field =" * {id} "", "th: field =" * {content} "".
Außerdem ist der in th: field =" * {Variablenname} " beschriebene Variablenname das ID-Attribut und das Namensattribut der Eingabe.
Lassen Sie uns result.html erstellen!
Erstellen Sie eine result.html-Datei in src / main / resources / templates /.
Diese HTML-Datei dient zur Anzeige des vom Formularbildschirm gesendeten Ergebnisses.
Fügen Sie den Code hinzu, der sich auf die Formel bezieht.
result.html
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Getting Started: Handling Form Submission</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Result</h1>
<p th:text="'id: ' + ${greeting.id}" />
<p th:text="'content: ' + ${greeting.content}" />
<a href="/greeting">Submit another message</a>
</body>
</html>
Wir werden uns eingehender mit der Beschreibung von Thymeleaf im hinzugefügten Code befassen.
th:text
Variablen können als Text angezeigt werden, indem th: text =" {Variablenname} " gesetzt wird.
Wenn Sie eine Mischung aus Zeichenketten anzeigen, können Sie die Zeichenketten und Variablen kombinieren, indem Sie die Zeichenketten mit "" einschließen und mit "+" verketten.
Dieses Mal werden die ID und der Inhalt der im Formular gesendeten Begrüßungsklasse angezeigt
th: text =" 'id:' + $ {greeting.id} ", th: text =" 'content:' + $ {greeting.content} ".
3. Lass es uns laufen!
Nachdem die Anwendung nun ausgeführt werden kann, überprüfen wir sie.
Geben Sie den folgenden Befehl in das Terminal ein und drücken Sie die Eingabetaste.
Terminal
$ ./mvnw spring-boot:run
Wenn Sie dann auf "http: // localhost: 8080 / greeting" zugreifen, sollte der folgende Formularbildschirm angezeigt werden. (Greeting.html wird angezeigt)
Geben Sie einen beliebigen Wert für ID und Nachricht ein und klicken Sie auf die Schaltfläche Senden. Sie sollten den Ergebnisbildschirm sehen. (Result.html wird angezeigt)
erledigt! Danke für deine harte Arbeit.
Referenzseite
** Use @ModelAttribute ** ** Verwendung von Thymeleaf ** ** Hinweise zur Verwendung von Thymeleaf mit Spring Boot **
Recommended Posts