Node.js+Express+MySQL表单POST提交无响应问题求助

1. 修复body-parser弃用警告 #

你当前的bodyParser.urlencoded没有传入extended参数，这是警告的直接原因。现在Express已经内置了body-parser的功能，直接用内置方法更简洁：

// 删掉原来的body-parser导入和encoder定义，替换成这个
app.use(express.urlencoded({ extended: true }));

如果非要用单独的body-parser包，就改成：

const encoder = bodyParser.urlencoded({ extended: true });

2. 解决页面持续加载问题 #

核心原因： #

• POST路由里的res.end()放在了数据库查询回调外面，异步查询还没完成就提前结束响应，导致请求状态异常
• /welcome和/leno路由只打印日志，没有给客户端返回任何响应，浏览器一直等待结果，所以页面卡死

修复操作： #

• 删掉POST回调里的res.end()，res.redirect本身就会结束响应，不需要额外调用
• 给两个跳转路由添加响应内容：

app.get("/welcome", function(req, res){
    console.log("用户注册成功");
    res.send("注册成功！欢迎您！"); // 或者渲染对应页面
})

app.get("/leno", function(req, res){
    console.log("操作失败");
    res.send("操作出错，请返回重试");
})

3. 修正数据录入逻辑错误 #

你要做的是数据录入（往数据库插数据），但当前POST路由里写的是select查询语句（这是登录验证逻辑），完全和需求不符。改成插入逻辑，还要加上密码一致性校验：

app.post("/", function(req,res){
    let User_Email = req.body.User_Email
    let Username = req.body.Username
    let P_Password = req.body.P_Password
    let C_password = req.body.C_password

    // 先校验两次密码是否一致
    if (P_Password !== C_password) {
        return res.send("两次输入的密码不一致，请返回重新填写");
    }

    // 插入数据到数据库
    Connection.query(
        "INSERT INTO loginuser (User_Email, Username, P_Password) VALUES (?, ?, ?)",
        [User_Email, Username, P_Password],
        function(error, results){
            if(error) {
                console.error("插入失败:", error);
                return res.send("数据录入失败，请稍后重试");
            }
            res.redirect('/welcome');
        }
    )
})

完整修正代码 #

import es6Renderer from 'express-es6-template-engine';
import mysql from "mysql";
import express from 'express';

const app = express();

// 处理表单提交数据
app.use(express.urlencoded({ extended: true }));
app.use(express.static('public'));

// 数据库连接
const Connection = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "nodejs"
})

Connection.connect(function(error){
    if(error) throw error;
    console.log("数据库连接成功！");
})

// 模板引擎配置（原路径写错了，修正为正确的视图目录）
app.engine('html', es6Renderer);
app.set('views', './views');
app.set('view engine', 'html');
 
app.get('/', function(req, res) {
  res.render('struct');
});

app.get('/myacc', function(req, res) {
   res.render('myacc');
});

// 修正后的POST数据录入处理
app.post("/", function(req,res){
    let User_Email = req.body.User_Email
    let Username = req.body.Username
    let P_Password = req.body.P_Password
    let C_password = req.body.C_password

    if (P_Password !== C_password) {
        return res.send("两次输入的密码不一致，请返回重新填写");
    }

    Connection.query(
        "INSERT INTO loginuser (User_Email, Username, P_Password) VALUES (?, ?, ?)",
        [User_Email, Username, P_Password],
        function(error, results){
            if(error) {
                console.error("插入数据出错:", error);
                return res.send("数据录入失败，请检查信息后重试");
            }
            res.redirect('/welcome');
        }
    )
})

app.get("/welcome", function(req, res){
    console.log("用户注册成功");
    res.send("注册成功！欢迎来到系统！");
})

app.get("/leno", function(req, res){
    console.log("操作失败");
    res.send("操作出错，请返回重试");
})

app.listen(4000, () => {
    console.log("服务器运行在http://localhost:4000");
});

额外提醒 #

• 密码不要明文存储，用bcrypt之类的工具哈希后再存到数据库
• 数据库操作建议用连接池替代单个连接，避免连接耗尽
• 原代码中app.set('/html/struct', 'views');是错误配置，已修正为指定视图目录的正确写法

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