NodeJS+ReactJS环境下MySQL数据库无法保存数据的问题

核心错误点分析 #

1. bcrypt依赖的密码字段缺失
   后端代码调用bcrypt.hash(req.body.password, 10, ...)，但前端FormData未添加password字段，导致req.body.password为undefined，触发bcrypt错误，直接返回「Query Error」。

2. SQL插入字段与值数量不匹配
   SQL语句指定了9个插入字段：name, mobile, email, address, state, city, policytype, insurer, renewdate，但后端values数组包含10个元素（多了req.file.filename）；同时前端未上传文件，req.file为undefined，访问req.file.filename会直接抛出错误。

3. FormData解析配置缺失
   前端用FormData提交数据，后端需配置multer中间件处理表单数据（含文件），未配置的话req.body无法正确获取字段值，引发后续错误。

修复代码示例 #

后端（NodeJS）修复 #

// 若需处理文件上传，先安装并配置multer
const multer = require('multer');
const upload = multer({ dest: 'uploads/' }); // 自定义文件存储路径

// 路由添加multer中间件（无需文件上传可移除upload.single）
router.post("/add_customer", upload.single('file'), (req, res) => {
  // 若不需要密码字段，直接移除bcrypt逻辑，重构如下：
  const sql = `INSERT INTO customer (name, mobile, email, address, state, city, policytype, insurer, renewdate) VALUES (?)`;
  // 匹配SQL字段数量的values数组
  const values = [
    req.body.name,
    req.body.mobile,
    req.body.email,
    req.body.address,
    req.body.state,
    req.body.city,
    req.body.policytype,
    req.body.insurer,
    req.body.renewdate
  ];
  con.query(sql, [values], (err, result) => {
    if (err) return res.json({ Status: false, Error: err.message }); // 返回具体错误信息便于排查
    return res.json({ Status: true });
  });

  // 若确实需要密码字段，前端需添加password到FormData，后端修改如下：
  // const { password } = req.body;
  // if (!password) return res.json({ Status: false, Error: "密码不能为空" });
  // bcrypt.hash(password, 10, (err, hash) => {
  //   if (err) return res.json({ Status: false, Error: err.message });
  //   // 需在SQL字段中添加password字段
  //   const sql = `INSERT INTO customer (name, mobile, email, address, state, city, policytype, insurer, renewdate, password) VALUES (?)`;
  //   const values = [
  //     req.body.name,
  //     req.body.mobile,
  //     req.body.email,
  //     req.body.address,
  //     req.body.state,
  //     req.body.city,
  //     req.body.policytype,
  //     req.body.insurer,
  //     req.body.renewdate,
  //     hash
  //   ];
  //   con.query(sql, [values], (err, result) => {
  //     if (err) return res.json({ Status: false, Error: err.message });
  //     return res.json({ Status: true });
  //   });
  // });
});

前端（ReactJS）修复 #

无需文件上传则保持现有代码；若需上传文件，添加文件处理逻辑：

// 若需上传文件，新增文件状态管理
const [selectedFile, setSelectedFile] = useState(null);

// 处理文件选择
const handleFileChange = (e) => {
  setSelectedFile(e.target.files[0]);
};

const handleSubmit = (e) => {
  e.preventDefault();
  const formData = new FormData();
  formData.append("name", customer.name);
  formData.append("mobile", customer.mobile);
  formData.append("email", customer.email);
  formData.append("address", customer.address);
  formData.append("state", customer.state);
  formData.append("city", customer.city);
  formData.append("policytype", customer.policytype);
  formData.append("insurer", customer.insurer);
  formData.append("renewdate", customer.renewdate);
  // 若需要密码，添加此行
  // formData.append("password", customer.password);
  // 若需要上传文件，添加此行
  // if (selectedFile) formData.append("file", selectedFile);

  axios
    .post("http://localhost:3000/employee/add_customer", formData, {
      headers: { "Content-Type": "multipart/form-data" }
    })
    .then((result) => {
      if (result.data.Status) navigate("/employeedashboard/customer");
      else alert(result.data.Error);
    })
    .catch(err => alert("请求失败：" + err.message));
};

额外排查建议 #

• 打开浏览器控制台，查看Network请求的响应详情，获取更精准的错误信息。
• 检查MySQL表customer的字段类型，确保前端传入的数据类型与表字段匹配（如mobile的类型、renewdate的日期格式）。
• 后端打印err完整信息，便于快速定位问题。

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