Node.js向MongoDB提交表单出现空数据问题求助

问题描述 #

使用Node.js结合Express与MongoDB开发注册功能时，表单提交后MongoDB存入空数据，尝试5天未解决，求解决方案及修正代码。

问题根源 #

1. 前端表单错误设置enctype="multipart/form-data"，该编码仅用于文件上传，普通表单提交应使用默认的application/x-www-form-urlencoded，而Express的urlencoded中间件无法解析multipart/form-data格式，导致req.body为空。
2. 后端重复引入并使用express.urlencoded和body-parser.urlencoded，Express 4.16+已内置body-parser核心功能，无需单独依赖。
3. Mongoose连接代码逻辑错误，try/catch未包裹异步的mongoose.connect，无法正确捕获连接异常。
4. 表单输入框存在拼写错误，虽不影响数据入库，但会影响用户体验。

修正后的后端代码 #

const express = require("express");
const app = express();
const cors = require("cors");
const mongoose = require("mongoose");
const PORT = 4000;

// 中间件配置
app.use(cors());
// 使用Express内置中间件解析表单数据
app.use(express.urlencoded({ extended: true }));
// 若需支持JSON格式请求可保留，纯表单提交可注释
app.use(express.json());

const URL = 'mongodb+srv://username:pass@cluster0.gkua5x0.mongodb.net/UserDB';
const userSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true // 数据库层面限制不能为空
    },
    password: {
        type: String,
        required: true // 数据库层面限制不能为空
    }
});
const UserModel = mongoose.model("userData", userSchema);

app.get("/", (req, res) => {
    res.send("hello ")
})

app.get("/reg", (req, res) => {
    res.sendFile(__dirname + "/index.html") // 简化路径写法
})

app.post("/reg", async (req, res) => {
    try {
        // 调试用：打印接收的表单数据，确认是否获取成功
        console.log("Received form data:", req.body);
        const newUser = new UserModel(req.body);
        await newUser.save();
        res.status(201).json({
            msg: "User created" // 修正拼写错误：meg -> msg
        })
    } catch (error) {
        res.status(400).json({
            error: "Failed to create user",
            details: error.message
        })
    }
});

// 正确的数据库连接逻辑：连接成功后再启动服务器
async function connectDB() {
    try {
        await mongoose.connect(URL);
        console.log("DB is connected");
        app.listen(PORT, () => {
            console.log(`Server is running http://localhost:${PORT}`)
        });
    } catch (error) {
        console.log("DB is not connected");
        console.error(error);
        process.exit(1);
    }
}

connectDB();

修正后的前端代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
</head>
<body>
    <a href="/">Home</a>
    <div class="container">
        <h1>Register Form</h1> <!-- 修正拼写错误：From -> Form -->
        <!-- 移除多余的enctype属性，使用默认编码 -->
        <form action="/reg" method="POST">
            <input type="text" name="name" placeholder="enter your name" required>
            <!-- 修正placeholder文本，添加required强制输入 -->
            <input type="password" name="password" placeholder="enter your password" required>
            <input type="submit" value="Register">
        </form>
    </div>
</body>
</html>

关键修改说明 #

• 前端表单优化：移除enctype="multipart/form-data"，使用默认编码解析表单；修正文本拼写错误，添加required属性强制用户输入必填字段。
• 后端中间件精简：删除冗余的body-parser依赖，仅保留Express内置的urlencoded中间件，确保req.body能正确接收表单参数。
• 数据校验增强：在Mongoose Schema中给字段添加required: true约束，从数据库层面阻止空数据存入。
• 数据库连接修复：改用async/await包裹连接逻辑，确保连接成功后再启动服务器，同时捕获连接异常。
• 错误处理完善：在注册接口中添加try/catch块，捕获数据保存时的错误并返回详细信息，便于调试。
• 调试辅助：在接口中打印req.body，可快速验证是否成功获取表单数据。

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