[JAVA] Rendre les pages HTML dynamiques avec thymeleaf (spring + gradle)

La dernière fois, j'ai affiché du HTML à l'écran avec Try to display hello world with spring + gradle. Cette fois, je souhaite déplacer l'écran de manière dynamique, je souhaite donc afficher les caractères saisis à l'écran. Ceci est un mémorandum pour les débutants, je vous serais donc reconnaissant de bien vouloir souligner des points étranges!

Cela ressemble à ceci une fois terminé ↓ 入力前.PNG Lorsque vous appuyez sur envoyer 入力後.PNG

Je l'ajouterai tel quel au code utilisé dans l'article précédent, mais pour ceux qui ne regardent que cet article, je publierai l'intégralité du code sans l'omettre.

Ajouter du HTML

Ajoutez un emplacement pour afficher les caractères saisis dans hello.html créé la dernière fois et un champ à saisir.

`hello.html`


<!DOCTYPE html>
	<head>
		<meta charset="UTF-8">
		<title>hello</title>
	</head>
	<body>
		 <h1>Hello World!!</h1>
　　　   //Ajouter d'ici ↓
		 <h1 th:text="${text}"></h1>　---1
		 
		 <form th:method="POST" th:action="changeText"> ---2
		 <input type="text" name="inputText" /> ---3
		 <input type="submit"> ---4
		 </form>
　　　  //Ajouter ici ↑
	</body>
</html>

1. Affiche la valeur saisie. La valeur transmise au texte s'affiche.
Spécifiez la méthode lors de l'envoi avec method, et th: action spécifie l'URL.
Ajout d'un champ de texte. Spécifie le nom de la valeur passée dans name.
C'est un bouton d'envoi.

Qu'est-ce que la feuille de thymel?

th ~ est sorti. Voici comment écrire une feuille de thym. Lire comme feuille de temps. Il s'agit d'un moteur de modèle tel que HTML et est utilisé en standard dans Spring Boot. Lors de l'affichage des données traitées par java à l'écran, il est agréable de pouvoir vérifier à l'écran en cours de développement car il s'agit de HTML.

Vous pouvez l'utiliser en mettant à jour build.gradle avec ce qui suit.

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

Si vous continuez à lire cet article de l'article précédent, vous devriez l'avoir rempli sans l'ajouter car vous avez sélectionné thymeleaf comme dépendance lors de la création du projet.

Comment écrivez-vous dans thymeleaf? Quand cela devient, cet article est très facile à lire => Feuille de Cheet Thymeleaf

Ajouter un contrôleur

Ceci est également ajouté au HelloController créé la dernière fois.

`HelloController.java`


package helloSpring.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class HelloController {
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String hello(Model model) {
    	model.addAttribute("text", "Les caractères saisis ici s'affichent"); //Ajouter --- -1
        return "hello";
    }
    
    @RequestMapping(value = "/changeText", method = RequestMethod.POST) //Ajouter --- 2
    public String changeText(@RequestParam(name = "inputText") String text, Model model) {
    	model.addAttribute("text", text);
        return "hello";
    }
}

1. Définissez le message initial sur <h1 th: text =" $ {text} "> </ h1> ajouté dans hello.html.
Ajoutez une fonction lorsque vous appuyez sur le bouton d'envoi.

@ RequestParam est une annotation pour la réception des paramètres de publication. -Le nom doit être le même que le nom spécifié dans l'entrée HTML et le nom de la variable doit être défini. -Définissez la valeur reçue dans le paramètre de requête sur '$ {text}'.

c'est tout. Ensuite, je voudrais me connecter à la base de données et afficher les données. Suivant => Création