使用Express处理POST请求失败，无法向MySQL提交颜色码

一、核心问题梳理 #

• Express未配置请求体解析：默认情况下Express不会处理POST请求的表单数据，服务器无法获取提交的参数。
• MySQL连接未显式建立：代码创建连接后未调用connect()方法，异步操作可能未完成就执行查询。
• 变量名冲突：POST路由的res对象被MySQL查询回调的res覆盖，导致后续响应无法正常发送。
• 表单控件缺少name属性：HTML表单中的输入元素无name属性，提交时不会携带任何数据到服务器。
• SQL操作逻辑缺陷：
  • 查询语句未指定目标字段，若表结构字段数量与值的数量不匹配会直接报错。
  • con.end()放在查询回调外，异步查询未完成就关闭连接，导致操作失败。
  • 未处理SQL查询错误，无法定位具体问题。

二、修复后的代码示例 #

1. 修改后的HTML表单 #

添加name属性确保表单数据能被正确提交：

<form method="POST" action="http://localhost:3000/">
  <label for="knapp"></label><br>
  <input type="range" id="knapp" name="knapp" onchange="changecolor()">
  <label for="submit"></label><br>
  <input id="submit" value="Save" type="submit">

  <label for="text"></label><br>
  <input type="text" id="text" name="text" readonly>

  <label for="colorcode"></label><br>
  <input type="text" id="colorcode" name="colorcode" readonly>
</form>

2. 修改后的Node.js代码 #

const express = require('express')
const app = express();
const cors = require("cors")
const mysql = require('mysql'); // 移至顶部避免重复引入

// 配置CORS与请求体解析
app.use(cors({
    origin: "*"
}))
// 解析urlencoded格式的表单数据
app.use(express.urlencoded({ extended: true }))

app.get("/", (req, res) => {
    console.log("get")
    res.send("服务正常运行") // 补充响应避免客户端超时
})

app.post("/", (req, res) => {
    // 获取表单提交的颜色码
    const { colorcode } = req.body;
    if (!colorcode) {
        return res.status(400).send("缺少colorcode参数");
    }

    // 创建数据库连接
    const con = mysql.createConnection({
        host: "secret",
        user: "secret",
        password: "secret",
        port: "secret",
        database: "studocliu_se_db" // 直接指定数据库，简化查询语句
    });

    // 建立数据库连接
    con.connect((err) => {
        if (err) {
            console.error("数据库连接失败:", err);
            return res.status(500).send("数据库连接失败");
        }

        // 使用参数化查询，避免SQL注入，同时指定目标字段
        const sql = "INSERT INTO Kalender (color_column) VALUES (?)"; // 替换color_column为表中实际字段名
        con.query(sql, [colorcode], (err, result) => {
            // 查询完成后关闭连接
            con.end();
            if (err) {
                console.error("SQL执行失败:", err);
                return res.status(500).send("数据保存失败");
            }
            console.log("数据插入成功:", result);
            res.send("数据保存成功");
        });
    });
})

// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`服务器运行在http://localhost:${PORT}`);
})

三、关键修复说明 #

1. 请求体解析：添加app.use(express.urlencoded({ extended: true }))，让Express能解析表单提交的application/x-www-form-urlencoded格式数据。
2. 表单name属性：每个需要提交的输入控件必须添加name，否则服务器无法通过req.body获取对应值。
3. MySQL连接优化：
   • 显式调用con.connect()确保连接建立后再执行查询。
   • 使用参数化查询?替代字符串拼接，避免SQL注入并解决字段不匹配问题。
   • 将con.end()放在查询回调内，确保查询完成后再关闭连接。
   • 增加错误处理逻辑，打印错误信息便于定位问题。
4. 变量名修正：将查询回调的res改为result，避免覆盖路由的响应对象。
5. 响应补充：GET路由添加res.send()，POST路由根据操作结果返回对应状态码和信息，避免客户端请求超时。

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