** This is a continuation of Last time. ** **
-This time, we will implement it as a login screen. However, since the authentication function is not implemented, ** If you press a button from the login screen, the screen will change regardless of the contents of the form **.
-The file configuration image is as follows. I wrote the comment as Zura, so please delete it if you don't need it.
-The code is as follows.
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";
}
//Press Submit on the Form to request the Post method. This method is activated when the request of the URL written in () is received.
@PostMapping("/login")
public String postSignUp(Model model) {
/*
This time we will use redirects. Use redirect when crossing files such as screen transitions.
You can think of it as calling the Get method.
Normal forward without redirecting to try(return "xxx";)Then the screen itself will be displayed, but the URL will not change.
If you do this, you may not be able to receive the data you want to receive at the transition destination, so it is better to use redirect.
*/
return "redirect:/userList";
}
}
:templates/login.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
</head>
<body>
<!--Content part-->
<div>
<!-- method="post"You can issue a post request by setting. th:Specify the method to process Post in action by URL.-->
<form method="post" th:action="@{/login}">
<div>
<label>Username:</label>
<!--Although it is not used in this implementation, the name attribute is specified. It will be used later for authentication.-->
<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>
・ Once you have written the code, check the app on your browser. ** URL changes ** → http: // localhost: 8080 / login When the page is displayed, press the Login button and confirm that you are transitioning to the userList. Make sure that the URL has changed at this time.
・ It's OK if you can make a transition like a video!
From now on, it will be the main part of this article. The volume is likely to increase here as well, so turn it off once. Continued here.
Recommended Posts