如何将React JS前端登录模块的参数传递到Spring Boot后端

第一步：改造React前端登录逻辑 #

你当前的LoginUser方法仅在控制台打印参数，需要新增HTTP POST请求将账号密码发送到后端接口，推荐将登录逻辑整合到表单提交事件中，符合原生表单交互规范。修改后的完整代码如下：

import { useState } from 'react';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

export default function Login() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [loginMsg, setLoginMsg] = useState("");

  function validateForm() {
    return username.length > 0 && password.length > 0;
  }

  async function handleSubmit(event) {
    event.preventDefault();
    try {
      // 向后端发送请求，替换为你自己的后端接口地址
      const res = await fetch("http://localhost:8080/api/auth/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          username: username,
          password: password
        })
      });
      const result = await res.json();
      if (res.ok) {
        setLoginMsg("登录成功");
        // 登录成功后的逻辑，比如存储token、跳转到首页等
      } else {
        setLoginMsg(result.msg || "登录失败，请检查账号密码");
      }
    } catch (e) {
      setLoginMsg("请求异常，请检查后端服务是否正常");
      console.error("登录请求错误：", e);
    }
  }

  return (
    <div className="Login">
      <Form onSubmit={handleSubmit}>
        <Form.Group size="lg" controlId="username">
          <Form.Label>Username</Form.Label>
          <Form.Control
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </Form.Group>
        <Form.Group size="lg" controlId="password">
          <Form.Label>Password</Form.Label>
          <Form.Control
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </Form.Group>
        {loginMsg && <p className="login-tip">{loginMsg}</p>}
        <Button block size="lg" type="submit" disabled={!validateForm()} >
          Login
        </Button>
      </Form>
    </div>
  );
}

你也可以使用axios库发送请求，代码写法更简洁，需要先执行npm install axios安装依赖后替换请求部分的逻辑即可。

第二步：编写Spring Boot后端登录接口 #

2.1 创建登录参数接收DTO #

// UserLoginDTO.java
public class UserLoginDTO {
    private String username;
    private String password;

    // 必须添加getter、setter方法，框架才能正常解析参数
    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; }
}

2.2 编写登录接口Controller #

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.CrossOrigin;
import java.util.HashMap;
import java.util.Map;

// 跨域注解，origins填你的前端访问地址，开发环境可以写*允许所有来源
@CrossOrigin(origins = "*")
@RestController
@RequestMapping("/api/auth")
public class AuthController {

    @PostMapping("/login")
    public Map<String, Object> login(@RequestBody UserLoginDTO loginDTO) {
        Map<String, Object> result = new HashMap<>();
        // 这里写你的账号密码校验逻辑，比如从数据库查询匹配
        if ("admin".equals(loginDTO.getUsername()) && "123456".equals(loginDTO.getPassword())) {
            result.put("code", 200);
            result.put("msg", "登录成功");
            // 生产环境可以返回jwt token等凭证
            result.put("token", "xxxxxxx");
        } else {
            result.put("code", 400);
            result.put("msg", "账号或密码错误");
        }
        return result;
    }
}

注意事项 #

• 确保前后端的接口路径、请求方式、参数名完全匹配，否则会出现参数接收失败的问题
• 生产环境必须使用HTTPS协议传输敏感信息，密码需要加密后再存储到数据库，不要明文传输或存储
• 如果需要做状态保持，可以在登录成功后返回JWT凭证，后续前端请求携带凭证即可验证登录状态

内容的提问来源于stack exchange，提问作者bindu shree