如何用原生JS/Node.js将FormData对象存入MySQL数据表？

可以实现，需要分前端数据提交和后端SQL插入两部分处理，以下是具体步骤和代码示例：

一、前端修改：将表单数据发送到后端 #

你当前的代码仅将数据存入localStorage，现在需要补充代码，把数据通过HTTP请求发送到Node.js后端接口：

const form = document.querySelector('form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const fd = new FormData(form);
  const obj = Object.fromEntries(fd);
  
  // 发送数据到后端
  try {
    const response = await fetch('/submit-form', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(obj),
    });
    
    if (response.ok) {
      alert('数据提交成功');
      localStorage.setItem('form', JSON.stringify(obj)); // 保留本地存储逻辑
    } else {
      alert('数据提交失败');
    }
  } catch (error) {
    console.error('请求出错:', error);
  }
});

二、后端实现：Node.js接收数据并插入MySQL #

Node.js本身没有内置MySQL客户端，需使用官方推荐的mysql2库（属于Node.js生态范畴，符合原生JS/Node.js的要求），以下是完整后端代码：

1. 安装依赖 #

npm install mysql2

2. 后端服务代码 #

const http = require('http');
const mysql = require('mysql2/promise');
const { parse } = require('url');

// 替换为你的数据库配置
const dbConfig = {
  host: 'localhost',
  user: '你的数据库用户名',
  password: '你的数据库密码',
  database: '目标数据库名',
};

// 创建HTTP服务器
const server = http.createServer(async (req, res) => {
  const { pathname } = parse(req.url);
  
  // 处理表单提交的POST请求
  if (pathname === '/submit-form' && req.method === 'POST') {
    // 解析请求体的JSON数据
    let body = '';
    req.on('data', chunk => body += chunk.toString());
    
    req.on('end', async () => {
      try {
        const formData = JSON.parse(body);
        
        // 建立数据库连接
        const connection = await mysql.createConnection(dbConfig);
        
        // 自动映射对象键与表列名，生成参数化INSERT语句
        const columns = Object.keys(formData).join(', ');
        const placeholders = Object.keys(formData).map(() => '?').join(', ');
        const values = Object.values(formData);
        
        const sql = `INSERT INTO 你的表名 (${columns}) VALUES (${placeholders})`;
        await connection.execute(sql, values);
        
        // 关闭连接并返回成功响应
        await connection.end();
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify({ success: true }));
      } catch (error) {
        console.error('数据库操作出错:', error);
        res.writeHead(500, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify({ success: false, error: error.message }));
      }
    });
  } else {
    res.writeHead(404);
    res.end('Not Found');
  }
});

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

三、关键注意事项 #

• 列名映射：确保前端formData对象的键名和MySQL表的列名完全一致；若不一致，需手动转换（比如前端键是userName，表列是name，则处理为{ name: formData.userName, ... }）。
• SQL注入防护：必须使用参数化查询（代码中的?占位符），绝对不能直接拼接字符串生成SQL，避免安全风险。
• 数据类型匹配：确保前端传入的数据类型与MySQL表列类型匹配（比如数字类型列，前端要传入数字而非字符串）。
• 错误处理：代码包含基础错误捕获，实际项目可根据需求扩展错误处理逻辑（比如返回更友好的提示信息）。

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