表单登录 - 登录处理 - 处理登录请求

Java - Web - Spring 《表单登录 - 登录处理 - 处理登录请求》

一、引言

在 Web 应用程序中，用户登录是一个非常常见且重要的功能。Spring 框架为我们提供了强大的支持，使得处理表单登录变得相对简单。本文将详细介绍如何使用 Spring 框架来处理表单登录请求，包括前端表单的创建、后端控制器的编写以及数据验证等方面。

二、项目准备

2.1 环境搭建

我们使用 Spring Boot 来快速搭建项目，你可以通过 Spring Initializr（https://start.spring.io/）来创建一个新的 Spring Boot 项目，添加以下依赖：

Spring Web
Thymeleaf（用于前端页面渲染）

2.2 项目结构

项目的基本结构如下：

src
├── main
│   ├── java
│   │   └── com
│   │       └── example
│   │           └── demo
│   │               ├── controller
│   │               │   └── LoginController.java
│   │               ├── model
│   │               │   └── User.java
│   │               └── DemoApplication.java
│   └── resources
│       ├── static
│       ├── templates
│       │   ├── login.html
│       │   └── welcome.html
│       └── application.properties

三、前端表单创建

在 templates 目录下创建 login.html 文件，代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
</head>
<body>
    <h1>Login</h1>
    <form action="#" th:action="@{/login}" th:object="${user}" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" th:field="*{username}" required><br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" th:field="*{password}" required><br><br>
        <input type="submit" value="Login">
    </form>
</body>
</html>

这个表单包含两个输入框，分别用于输入用户名和密码，点击提交按钮后会将表单数据发送到 /login 接口。

四、后端处理

4.1 创建用户模型

在 model 包下创建 User.java 类，代码如下：

package com.example.demo.model;
public class User {
    private String username;
    private String password;
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
}

这个类用于封装用户输入的用户名和密码。

4.2 创建控制器

在 controller 包下创建 LoginController.java 类，代码如下：

package com.example.demo.controller;
import com.example.demo.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
@Controller
public class LoginController {
    @GetMapping("/login")
    public String showLoginForm(Model model) {
        model.addAttribute("user", new User());
        return "login";
    }
    @PostMapping("/login")
    public String processLogin(User user, Model model) {
        // 模拟验证逻辑
        if ("admin".equals(user.getUsername()) && "password".equals(user.getPassword())) {
            model.addAttribute("username", user.getUsername());
            return "welcome";
        } else {
            model.addAttribute("error", "Invalid username or password");
            return "login";
        }
    }
}

showLoginForm 方法用于处理 GET 请求，返回登录页面，并将一个空的 User 对象添加到模型中。
processLogin 方法用于处理 POST 请求，接收用户输入的用户名和密码，进行简单的验证。如果验证通过，将用户名添加到模型中并返回欢迎页面；否则，添加错误信息并返回登录页面。

4.3 创建欢迎页面

在 templates 目录下创建 welcome.html 文件，代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
</head>
<body>
    <h1>Welcome, <span th:text="${username}"></span>!</h1>
</body>
</html>

这个页面会显示欢迎信息，其中用户名会从模型中获取。

五、运行项目

启动 DemoApplication 类，访问 http://localhost:8080/login，你将看到登录页面。输入用户名 admin 和密码 password，点击登录按钮，将跳转到欢迎页面；输入其他信息将显示错误信息。

六、总结

步骤	描述
前端表单创建	使用 Thymeleaf 创建包含用户名和密码输入框的登录表单，提交到 `/login` 接口
后端模型创建	创建 `User` 类用于封装用户输入的信息
后端控制器编写	编写 `LoginController` 处理 GET 和 POST 请求，实现登录验证逻辑
前端欢迎页面创建	创建 `welcome.html` 页面显示欢迎信息

通过以上步骤，我们实现了一个简单的表单登录功能。在实际项目中，你可以根据需求对验证逻辑进行扩展，例如从数据库中查询用户信息等。希望本文能帮助你理解 Spring 框架中表单登录请求的处理过程。