springboot+thymeleaf 用户登陆成功跳转到主页,显示当前用户的头像
时间: 2024-01-02 09:04:06 浏览: 173
实现这个需求,我们可以采用以下步骤:
1. 创建一个登陆页面,用户在该页面输入用户名和密码以进行登陆。例如,我们可以创建一个名为`login.html`的Thymeleaf模板文件。
2. 创建一个Controller处理用户登陆请求。该Controller应该包含两个方法,一个用于显示登陆页面,另一个用于处理用户提交的登陆请求。在处理登陆请求时,我们需要检查用户输入的用户名和密码是否正确。如果正确,则将用户信息存储到Session中,并重定向到主页。
3. 创建一个主页,用于显示当前用户的头像。例如,我们可以创建一个名为`index.html`的Thymeleaf模板文件。
4. 在主页中,我们需要通过Session获取当前用户的信息,包括用户名和头像。然后,我们可以将头像以图片的形式展示在页面上。
下面是一个示例代码:
1. `login.html`模板文件:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<form action="/login" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</div>
<button type="submit">Login</button>
</form>
</body>
</html>
```
2. `UserController`类:
```java
@Controller
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/login")
public String showLoginPage() {
return "login";
}
@PostMapping("/login")
public String login(@RequestParam String username, @RequestParam String password, HttpSession session) {
User user = userService.login(username, password);
if (user != null) {
session.setAttribute("user", user);
return "redirect:/";
} else {
return "login";
}
}
}
```
3. `index.html`模板文件:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<h1>Welcome, <span th:text="${user.username}"></span>!</h1>
<img th:src="@{/images/${user.avatar}}"/>
</body>
</html>
```
在这个示例中,我们通过Thymeleaf的`@{/}`表达式来加载头像图片。`${user.avatar}`表示当前用户的头像地址,`@{/images/}`表示图片资源的根路径。在实际应用中,我们需要将用户头像上传到服务器,并将头像地址保存到数据库中。
阅读全文