springboot登录静态页面
时间: 2023-07-01 14:10:32 浏览: 50
首先,在Spring Boot中,静态页面应该放在`src/main/resources/static`目录下。
其次,为了实现登录功能,您需要使用一个表单来收集用户的用户名和密码,并将这些信息提交到后端。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<form method="post" action="/login">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
```
在这个表单中,我们定义了两个输入框,一个用于输入用户名,一个用于输入密码。当用户点击“提交”按钮时,表单将会被提交到`/login`地址。
接下来,您需要在后端实现`/login`地址的处理逻辑,以验证用户的身份。以下是一个简单的示例:
```java
@Controller
public class LoginController {
@PostMapping("/login")
public String login(@RequestParam("username") String username,
@RequestParam("password") String password,
HttpSession session) {
if ("admin".equals(username) && "123456".equals(password)) {
session.setAttribute("username", username);
return "redirect:/home";
} else {
return "redirect:/login?error";
}
}
@GetMapping("/login")
public String login() {
return "login";
}
@GetMapping("/home")
public String home(HttpSession session) {
String username = (String) session.getAttribute("username");
if (username != null) {
return "home";
} else {
return "redirect:/login";
}
}
}
```
在这个控制器中,我们定义了三个请求处理方法:
- `login()`方法用于返回登录页面的视图。
- `login()`方法用于处理用户提交的表单数据,并验证用户名和密码是否正确。如果验证通过,我们将`username`存储到`HttpSession`中,并重定向到`/home`地址。否则,我们将用户重定向回`/login`地址,并在URL中添加一个`error`参数,以提示用户登录失败。
- `home()`方法用于返回主页面的视图。如果用户已经登录(即`username`存在于`HttpSession`中),我们将返回主页面的视图。否则,我们将用户重定向回`/login`地址。
最后,您可以在`src/main/resources/templates`目录下创建`login.html`和`home.html`两个视图文件,分别用于显示登录页面和主页面的内容。以下是这两个文件的示例代码:
```html
<!-- login.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<form method="post" action="/login">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
<p th:if="${param.error}">Invalid username or password.</p>
</body>
</html>
```
```html
<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<h2>Welcome, <span th:text="${session.username}"></span>!</h2>
<a href="/logout">Logout</a>
</body>
</html>
```
在这些HTML文件中,我们使用了`thymeleaf`模板引擎来渲染动态内容。在`login.html`中,我们使用了`${param.error}`来检查是否有`error`参数被添加到URL中,并在页面上显示相应的错误消息。在`home.html`中,我们使用了`${session.username}`来获取`HttpSession`中存储的用户名,并欢迎用户到达主页面。
希望这可以帮助您实现登录静态页面。