** Dies ist eine Fortsetzung von Letztes Mal. ** ** **
-Dieses Mal werden wir es als Anmeldebildschirm implementieren. Da die Authentifizierungsfunktion jedoch nicht implementiert ist, ** Wenn Sie im Anmeldebildschirm eine Schaltfläche drücken, ändert sich der Bildschirm unabhängig vom Inhalt des Formulars **.
-Das Kompositionsbild der Datei ist wie folgt. Ich habe den Kommentar als Zura geschrieben. Bitte löschen Sie ihn, wenn Sie ihn nicht benötigen.
・ Der Code lautet wie folgt.
java:SpringLogin.app.controller/LoginController.java
package SpringLogin.app.controller;
import org.springframework.beans.factory.annotation.Autowired;
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;
//import SpringLogin.app.service.UserService;
@Controller
public class LoginController {
// @Autowired
// UserService userService;
@GetMapping("/login")
public String getSignUp(Model model) {
return "login";
}
//Klicken Sie im Formular auf Senden, um die Post-Methode anzufordern. Diese Methode wird aktiviert, wenn eine Anfrage nach der in () geschriebenen URL eingeht.
@PostMapping("/login")
public String postSignUp(Model model) {
/*
Dieses Mal verwenden wir die Umleitung. Verwenden Sie die Umleitung, wenn Sie Dateien wie Bildschirmübergänge kreuzen.
Sie können sich das als Aufruf der Get-Methode vorstellen.
Normal vorwärts ohne Umleitung, um es zu versuchen(return "xxx";)Dann wird der Bildschirm selbst angezeigt, aber die URL ändert sich nicht.
In diesem Fall können Sie möglicherweise nicht die Daten empfangen, die Sie am Übergangsziel empfangen möchten. Verwenden Sie daher besser die Umleitung.
*/
return "redirect:/userList";
}
}
:templates/login.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
</head>
<body>
<!--Inhaltsteil-->
<div>
<!-- method="post"Sie können eine Post-Anfrage stellen, indem Sie einstellen. th:Geben Sie die Methode zum Verarbeiten von Post in Aktion nach URL an.-->
<form method="post" th:action="@{/login}">
<div>
<label>Username:</label>
<!--Obwohl es in dieser Implementierung nicht verwendet wird, wird das Attribut name angegeben. Es wird später zur Authentifizierung verwendet.-->
<input type="text" name="username" />
</div>
<div>
<label>Password:</label>
<input type="password" name="password" />
</div>
<button type="submit">login</button>
</form>
</div>
</body>
</html>
・ Wenn Sie den Code geschrieben haben, überprüfen Sie die App in Ihrem Browser. ** URL-Änderungen ** → http: // localhost: 8080 / login Wenn die Seite angezeigt wird, drücken Sie die Anmeldetaste und bestätigen Sie, dass Sie zur Benutzerliste wechseln. Stellen Sie sicher, dass sich die URL zu diesem Zeitpunkt geändert hat.
・ Es ist in Ordnung, wenn Sie einen Übergang wie ein Video vornehmen können!
Von nun an wird es der Hauptteil dieses Artikels sein. Die Lautstärke wird wahrscheinlich auch hier zunehmen. Schalten Sie sie daher einmal aus. Fortsetzung hier.