前端登录表单数据如何传至后端？附Express代码求助

你的代码存在几个关键问题，导致无法正确传输表单数据，以下是修正后的代码和详细说明：

后端 server.js 修正 #

const express = require("express");
const app = express();
const port = 2009;

app.use(express.static("public"));
app.use(express.json());

// 根路由用于测试服务状态
app.get("/", (req, res) => {
  res.status(200).json({ info: "服务已启动" });
});

// 改用语义化的登录路由
app.post("/login", (req, res) => {
  // 直接提取表单所需字段
  const { username, password, email } = req.body;

  // 验证字段完整性
  if (!username || !password || !email) {
    return res.status(400).json({ 
      status: "failed", 
      message: "用户名、密码、邮箱不能为空" 
    });
  }

  // 此处可添加后续逻辑（如存入数据库、用户验证等）
  console.log("收到登录数据：", { username, password, email });

  res.status(200).json({ 
    status: "received", 
    message: "数据已接收" 
  });
});

app.listen(port, () => console.log(`server.js 运行在端口：${port}`));

后端修改点： #

• 将POST路由改为/login，避免与根路由冲突，语义更清晰
• 直接从req.body提取表单字段，不再使用parcel包裹
• 增加字段完整性验证，返回明确的错误提示
• 统一使用json()返回JSON格式响应，规范前后端交互
• 添加控制台日志，方便调试查看接收的数据

前端 script.js 修正 #

const submitBtn = document.getElementById("submit");
const userNameInput = document.getElementById("user");
const passwordInput = document.getElementById("pass");
const emailInput = document.getElementById("mail");

const baseUrl = "http://localhost:2009";

// 绑定提交按钮的点击事件
submitBtn.addEventListener("click", postLoginData);

async function postLoginData(e) {
  e.preventDefault(); // 阻止表单默认提交行为

  // 获取并清理输入值
  const username = userNameInput.value.trim();
  const password = passwordInput.value.trim();
  const email = emailInput.value.trim();

  // 前端预验证
  if (!username || !password || !email) {
    alert("请填写完整信息");
    return;
  }

  try {
    const res = await fetch(`${baseUrl}/login`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json" // 声明请求体格式
      },
      body: JSON.stringify({ username, password, email }) // 转换为JSON字符串
    });

    const result = await res.json();
    console.log("后端响应：", result);

    // 根据响应结果处理
    if (result.status === "received") {
      alert("登录数据提交成功");
    } else {
      alert("提交失败：" + result.message);
    }
  } catch (error) {
    console.error("请求出错：", error);
    alert("网络请求失败，请检查服务是否运行");
  }
}

前端修改点： #

• 添加按钮点击事件监听，确保提交时触发数据发送
• 修正请求URL，与后端/login路由匹配
• 增加前端字段预验证，提前过滤空值
• 设置Content-Type请求头，将表单数据转为JSON格式放入请求体
• 添加try-catch捕获网络异常，提升用户体验
• 解析后端JSON响应并给出对应提示
• 增加控制台日志，方便调试

测试步骤 #

1. 项目目录下执行npm install express安装依赖
2. 启动后端服务：node server.js
3. 将包含表单的HTML文件放入public目录
4. 浏览器访问http://localhost:2009，填写表单提交后查看控制台和后端日志

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