[JAVA] Machen Sie HTML-Seiten mit Thymeleaf dynamisch (Frühling + Gradle)
Beim letzten Mal habe ich HTML auf dem Bildschirm mit Versuchen Sie, Hallo Welt mit Frühling + Gradle anzuzeigen angezeigt. Dieses Mal möchte ich den Bildschirm dynamisch verschieben, damit ich die eingegebenen Zeichen auf dem Bildschirm anzeigen kann. Dies ist ein Memorandum für Anfänger, daher wäre ich Ihnen dankbar, wenn Sie auf merkwürdige Punkte hinweisen könnten!
Es sieht nach Abschluss ↓ so aus
Wenn Sie Senden drücken
Ich werde es so wie es ist zu dem Code hinzufügen, der im vorherigen Artikel verwendet wurde, aber für diejenigen, die nur diesen Artikel betrachten, werde ich den gesamten Code veröffentlichen, ohne ihn wegzulassen.
HTML hinzufügen
Fügen Sie einen Ort hinzu, an dem die zuletzt in hello.html eingegebenen Zeichen angezeigt werden, und ein Feld, das eingegeben werden soll.
hello.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<h1>Hello World!!</h1>
//Von hier aus hinzufügen ↓
<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>
//Addiere hier ↑
</body>
</html>
-
- Zeigt den eingegebenen Wert an. Der an Text übergebene Wert wird angezeigt.
- Geben Sie die Methode beim Senden mit "method" an, und "th: action" gibt die URL an.
- Hinzufügen eines Textfeldes. Gibt den Namen des in
nameübergebenen Werts an. - Es ist eine Schaltfläche zum Senden.
Was ist Thymeleaf?
th ~ ist herausgekommen. So schreibt man Thymeleaf. Als Zeitblatt lesen. Es ist eine Vorlagen-Engine wie HTML und wird standardmäßig in Spring Boot verwendet. Wenn Sie von Java verarbeitete Daten auf dem Bildschirm anzeigen, ist es hilfreich, sie während der Entwicklung auf dem Bildschirm überprüfen zu können, da es sich um HTML handelt.
Sie können es verwenden, indem Sie "build.gradle" wie folgt aktualisieren.
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
Wenn Sie diesen Artikel aus dem vorherigen Artikel weiterhin lesen, sollten Sie ihn ausgefüllt haben, ohne ihn hinzuzufügen, da Sie beim Erstellen des Projekts Thymeleaf als Abhängigkeit ausgewählt haben.
Wie schreibt man in Thymeleaf? Wenn es wird, ist dieser Artikel sehr einfach zu lesen => Thymeleaf Cheet Sheet
Controller hinzufügen
Dies wird auch dem zuletzt erstellten HelloController hinzugefügt.
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", "Die hier eingegebenen Zeichen werden angezeigt"); //Addiere --- -1
return "hello";
}
@RequestMapping(value = "/changeText", method = RequestMethod.POST) //Addiere --- 2
public String changeText(@RequestParam(name = "inputText") String text, Model model) {
model.addAttribute("text", text);
return "hello";
}
}
-
- Setzen Sie die erste Nachricht auf "
</ h1>", hinzugefügt in "hello.html".
- Setzen Sie die erste Nachricht auf "
- Fügen Sie eine Funktion hinzu, wenn die Sendetaste gedrückt wird.
- @ RequestParam ist eine Anmerkung zum Empfangen von Post-Parametern. -Der Name sollte mit dem in der HTML-Eingabe angegebenen Namen übereinstimmen und der Variablenname sollte definiert sein.
- Setzen Sie den im Anforderungsparameter empfangenen Wert auf '$ {text}'.
das ist alles. Als nächstes möchte ich eine Verbindung zur Datenbank herstellen und die Daten anzeigen. Weiter => Erstellen
Recommended Posts