[JAVA] [Introduction à Spring Boot] Soumettez un formulaire à l'aide de thymeleaf
Objectif
Pour ceux qui ont fini de travailler sur Spring Quickstart Guide, ceux qui ont commencé à apprendre Spring Boot et ceux qui veulent revoir
Partagez ce que vous avez appris en travaillant réellement sur le guide officiel Handling Form Submission.
Le formulaire rempli est ici.
Nous mettrons en œuvre le processus d'affichage de la valeur saisie sur l'écran Formulaire sur l'écran Résultat.
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
1. Commençons le projet Spring Boot!
Tout d'abord, accédez à spring initial izr.
- Cliquez sur le bouton AJOUTER DES DÉPENDANCES et ajoutez «Spring Web» et «Thymeleaf».
2.Artifact, le nom a été changé en
handling-form-submit. - Changez Java en 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 GreetingController.java!
Créez un fichier GreetingController.java dans src / main / java / com / example / handlingformsubmission /.
Ajoutez le code faisant référence à la formule.
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";
}
}
Nous approfondirons le code ajouté.
①@Controller
GreetingController.java
@Controller
public class GreetingController {
//réduction
}
SpringBoot traite cette classe comme un contrôleur en l'annotant avec @ Controller.
Étant donné que la transition vers View et HTML est créée, View doit être spécifié comme valeur de retour de la méthode décrite plus loin.
Bien qu'elle n'apparaisse pas cette fois, l'annotation @ RestController sera également traitée comme un contrôleur, mais la valeur de retour de la méthode sera le contenu de la réponse sans passer à View.
② méthode GreetForm
GreetingController.java
@GetMapping("/greeting")
public String greetingForm(Model model) {
model.addAttribute("greeting", new Greeting());
return "greeting";
}
1.@GetMapping
En ajoutant cette annotation, la méthode donnée lorsqu'il y a une requête GET avec l'URL décrite dans () sera appelée.
Cette fois, c'est @GetMapping (" / salutation "). Par conséquent, lorsqu'il y a une requête GET sur http: // localhost8080 / salutation, la méthode` greetForm est appelée. ''
2.model.addAttribute
Il reçoit l'argument de Model class comme argument de la méthode. Il s'agit de définir les données à transmettre du côté Vue.
Les données sont passées du côté Vue en utilisant la méthode ʻaddAttribute (premier argument, deuxième argument) `.
Vous pouvez définir des données dans le deuxième argument et utiliser ces données du côté Affichage avec le nom du premier argument.
Cette fois, je passe l'objet «Message d'accueil instancié» à la vue avec le nom «salut». Le message d'accueil sera mis en œuvre plus tard.
** 3. Valeur de retour de la méthode ** View est spécifié comme valeur de retour de la méthode. Cette fois, nous retournons "salutation". Cela signifie que vous avez besoin de salut.html. Il sera mis en œuvre plus tard.
② méthode GreetSubmit
GreetingController.java
@PostMapping("/greeting")
public String greetingSubmit(@ModelAttribute Greeting greeting) {
return "result";
}
1.@PostMapping
En ajoutant cette annotation, la méthode donnée quand il y a une requête POST avec l'URL décrite dans () sera appelée.
Cette fois, c'est @PostMapping (" / salut "). Par conséquent, lorsqu'il y a une requête POST sur http: // localhost8080 / salutation, la méthode` greetSubmit est appelée. ''
2.@ModelAttribute
Cette annotation dans l'argument de la méthode sert à définir la valeur envoyée par POST à la classe spécifiée.
Cette fois, la valeur envoyée à la variable Greeting est stockée et la valeur est définie pour chaque variable de la classe Greeting.
** 3. Valeur de retour de la méthode ** View est spécifié comme valeur de retour de la méthode. Cette fois, nous retournons "result". Cela signifie que vous avez besoin de result.html. Il sera mis en œuvre plus tard.
Créons Greeting.java!
Créez un fichier Greeting.java dans src / main / java / com / example / handlingformsubmission /.
Ajoutez le code faisant référence à la formule.
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;
}
}
Nous approfondirons le code ajouté.
** 1. Déclaration des variables **
Greeting.java
private long id;
private String content;
Deux variables sont déclarées: «long type id» et «String type content». Puisque le modificateur d'accès est «privé», il ne peut être accédé qu'à partir de la même classe.
** 2. Définition des méthodes getter et setter **
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;
}
Préparez une méthode getter et setter pour stocker et récupérer la valeur envoyée dans le formulaire.
Créons Greet.html!
Créez un fichier salut.html dans src / main / resources / templates /
Ce fichier html sert à afficher l'écran du formulaire.
Ajoutez le code faisant référence à la formule.
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>
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 GreetingSubmit de GreetingController 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 * {id} au lieu de Greet.id.
th:field
Écrivez th: field =" * {variable name} " pour afficher les variables dans l'objet spécifié par th: object.
Cette fois, puisque l'id et le contenu sont dans la classe Greeting, ce sera th: field =" * {id} ", th: field =" * {content} ".
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.
Créons result.html!
Créez un fichier result.html dans src / main / resources / templates /.
Ce fichier html sert à afficher le résultat envoyé depuis l'écran du formulaire.
Ajoutez le code faisant référence à la formule.
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>
Nous approfondirons la description de thymeleaf dans le code ajouté.
th:text
Les variables peuvent être affichées sous forme de texte en définissant th: text =" {variable name} ".
Lors de l'affichage d'un mélange de chaînes de caractères, vous pouvez combiner les chaînes de caractères et les variables en entourant les chaînes de caractères avec '' et en les concaténant avec `` + ''.
Cette fois, l'id et le contenu de la classe Greeting envoyée dans le formulaire sont affichés, donc
th: text =" 'id:' + $ {salut.id} ", th: text =" 'contenu:' + $ {message.contenu} ".
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 / salutation, vous devriez voir l'écran de formulaire ci-dessous. (Greeting.html s'affiche)
Entrez une valeur quelconque pour Id et Message et cliquez sur le bouton Soumettre. Vous devriez voir l'écran Résultat. (Result.html s'affiche)
terminé! Je vous remercie pour votre travail acharné.
Site de référence
** Utilisez @ModelAttribute ** ** Comment utiliser Thymeleaf ** ** Notes sur l'utilisation de Thymeleaf avec Spring Boot **
Recommended Posts