PERN栈下如何处理异步POST请求？登录功能故障求助

后端核心问题 #

1. 未处理数据库查询异步性：db.query是异步操作，返回Promise，直接赋值const result = db.query(...)无法拿到实际查询结果，导致result.rows为undefined。
2. 循环逻辑错误：遍历用户列表时，result.rows.email[i]写法错误，应为result.rows[i].email；且循环内多次调用res.send()会触发重复响应，导致服务器报错。
3. 请求体解析缺失：若未配置express.json()或body-parser，req.body会是undefined，无法获取前端传递的邮箱和密码。

修复后的后端代码 #

// 先配置请求体解析，确保能读取req.body
app.use(express.json());

app.post("/api/login", async (req, res) => {
  try {
    // 等待数据库查询完成，获取实际结果
    const result = await db.query("SELECT id , email , password FROM users");
    const { email, password } = req.body;
    
    // 校验请求参数是否存在
    if (!email || !password) {
      return res.status(400).send("邮箱或密码不能为空");
    }

    // 查找匹配的用户
    const matchedUser = result.rows.find(user => user.email === email && user.password === password);
    
    // 仅返回一次响应
    res.send(!!matchedUser);
  } catch (err) {
    // 错误时返回500状态码和错误信息
    res.status(500).send(err.message);
  }
});

前端优化点 #

前端逻辑本身无错误，但可优化handleSubmit为async/await写法，移除未使用的apiCall函数：

import React from "react";
import axios from "axios";
import FormPart from "../components/FormParts";

const Login = () => {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const res = await axios.post("http://localhost:5000/api/login", { email, password });
      console.log(res.data);
      // 可在此添加登录成功后的逻辑，如页面跳转
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <FormPart
          label="Email"
          type="email"
          name="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <FormPart
          label="Password"
          type="password"
          name="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <div>
          <button type="submit">Log In</button>
        </div>
      </form>
    </div>
  );
};

export default Login;

额外注意事项 #

• 密码安全：实际项目禁止明文存储密码，需用bcrypt等库对密码哈希后存入数据库，验证时也需哈希比对。
• CORS配置：前后端端口不同时，需在后端添加cors中间件：app.use(cors())。
• 查询效率优化：避免查询所有用户，应通过WHERE条件精准查询目标邮箱：db.query("SELECT id, email, password FROM users WHERE email = $1", [email])。

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