Learn from: Shang Silicon Valley
Simple usage of thymeleaf
Generally used is
| @{} | Use this expression when using links |
|---|---|
| ${} | Use request domain, session domain and object equivalence |
Three not commonly used.
*{},#{},~{}.
If the variable is not in the tag, you need to use inline usage. You need to surround the expression with two brackets.
Simulate login
prepare
Resources to be checked when creating a new project:
Put the static resources you need to use under the static folder:
Put the pages you need to use under the templates folder:
Code of login section
In order to login, we need to create a new User class.
Used lombok@Data Reduce code.
@Data
public class User {
public String userName;
public String password;
}
Next, you need to add some thymeleaf code to the code of the html web page:
If you want to use thymeleaf, you need to add the following declaration in the html tag:
<html lang="en" xmlns="http://www.thymeleaf.org">
Modify the action of the form thymeleaf:
1. Request method and link for modifying form:
<form class="form-signin" action="index.html" method="post" th:action="@{/index}">
Method uses post. Use the th:action and @{} methods to change the action to the / index link. The following java code writes the processing logic of / sending a post request to the index link.
2. Modify, add the name attribute to the input box, and add a prompt box.
<label style="color: red" th:text="${msg}"></label>
<input type="text" name="userName" class="form-control" placeholder="user name" autofocus>
<input type="password" name="password" class="form-control" placeholder="password">
The two names of the input tag need to correspond to the variable names of the two attributes of the User class. And use thymeleaf to pass in an msg to the prompt box. The following code shows how to use model to add MSG.
@Controller
public class IndexController {
// Access to landing pages
@GetMapping(value = {"/", "login"})
public String LoginPage(){
return "Login";
}
// Function to enter the index page after submitting the form
// The verification of account number only uses non empty judgment
// Use redirection to prevent web pages from submitting forms repeatedly
@PostMapping(value = "/index")
public String Main(User user, HttpSession session, Model model){
if(StringUtils.hasLength(user.getUserName()) && StringUtils.hasLength(user.getPassword())){
session.setAttribute("loginUser",user);
return "redirect:index.html";
}else{
model.addAttribute("msg","Wrong account and password!");
return "login";
}
}
// Redirect or refresh web page index
@GetMapping("/index.html")
public String MainPage(HttpSession session, Model model){
if(session.getAttribute("loginUser")!=null){
return "index";
}else{
model.addAttribute("msg","Please login again!");
return "login";
}
}
}
If the account password is blank, the account password error will be displayed:
If you directly visit the index page, it will display please log in again:
3. Change the login name to user name.
In index The HTML page finds the place where the name is placed, and uses the inline writing method to pass the User's userName in the Session to this place.
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<img src="images/photos/user-avatar.png" alt="" />
[[${session.loginUser.userName}]]
<span class="caret"></span>
</a>
In this way, the login name will be the user name.
