ReactJS项目如何通过JS将表单数据提交至MySQL Workbench数据库

核心注意：React属于前端运行环境，无法直接连接MySQL数据库——如果在前端代码中写数据库连接凭证，会完全暴露给所有访问站点的用户，存在拖库等严重安全风险。正确的实现链路为：React表单采集用户输入 → 前端发送HTTP请求到后端接口 → 后端校验数据合法性后连接MySQL执行写入操作。

1. 改造现有React表单 #

你当前的表单是传统HTML默认提交逻辑，会触发页面跳转，需要改成React受控组件，拦截默认提交行为，通过JavaScript异步发送数据。改造后代码如下：

import { useState } from 'react'

export default function ContactForm() {
  // 绑定表单字段状态
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    nachricht: '',
    agree: false
  })

  // 统一处理输入框、复选框的值变更
  const handleInputChange = (e) => {
    const { type, name, value, checked } = e.target
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }))
  }

  // 表单提交逻辑
  const handleSubmit = async (e) => {
    // 阻止默认的表单跳转行为
    e.preventDefault()
    // 前端基础校验
    if (!formData.name || !formData.email || !formData.nachricht || !formData.agree) {
      alert('请填写所有必填项并勾选隐私协议')
      return
    }
    try {
      // 向后端接口发送数据
      const res = await fetch('/api/submit-form', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      })
      if (res.ok) {
        alert('提交成功')
        // 提交成功后重置表单
        setFormData({name: '', email: '', nachricht: '', agree: false})
      } else {
        alert('提交失败，请稍后重试')
      }
    } catch (err) {
      console.error('提交异常:', err)
      alert('网络错误，请检查连接后重试')
    }
  }

  return (
    <div className='formsection'>
      <form onSubmit={handleSubmit} className='form'>
        <input 
          type="text" 
          name="name"
          placeholder='Name*'
          value={formData.name}
          onChange={handleInputChange}
        />
        <br />
        <input 
          type="email" 
          name="email"
          placeholder='E-Mail*'
          value={formData.email}
          onChange={handleInputChange}
        />
        <br />
        <input 
          type="text" 
          name="nachricht"
          placeholder='Nachricht*'
          value={formData.nachricht}
          onChange={handleInputChange}
        />
        <br />
        <input 
          type="checkbox" 
          name="agree"
          checked={formData.agree}
          onChange={handleInputChange}
        />
        <br />
        <input type="submit" value={'Absenden'} />
      </form>
    </div>
  )
}

2. 搭建后端中转接口 #

后端可以选择和React技术栈一致的Node.js（开发效率最高），也可以保留你原有的PHP逻辑，这里以Node.js + Express为例：
首先新建后端服务目录，安装依赖：

mkdir server && cd server
npm init -y
npm install express mysql2 cors dotenv

在server目录下新建server.js文件，编写接口和数据库连接逻辑：

require('dotenv').config()
const express = require('express')
const cors = require('cors')
const mysql = require('mysql2/promise')
const app = express()

// 基础中间件配置
app.use(cors())
app.use(express.json()) // 解析JSON格式的请求体

// 初始化MySQL连接池，参数和你在MySQL Workbench里登录用的参数一致
const pool = mysql.createPool({
  host: process.env.MYSQL_HOST,
  user: process.env.MYSQL_USER,
  password: process.env.MYSQL_PASSWORD,
  database: process.env.MYSQL_DB,
  waitForConnections: true,
  connectionLimit: 10
})

// 表单提交接口
app.post('/api/submit-form', async (req, res) => {
  try {
    const { name, email, nachricht, agree } = req.body
    // 后端必须做二次校验，绝对不能信任前端传递的参数
    if (!name || !email || !nachricht || !agree) {
      return res.status(400).json({code: 400, msg: '参数不完整'})
    }
    // 执行写入SQL，使用参数化查询避免SQL注入
    const sql = 'INSERT INTO contact_messages (name, email, message, agree_privacy, create_time) VALUES (?, ?, ?, ?, NOW())'
    const [result] = await pool.execute(sql, [name, email, nachricht, agree])
    if (result.affectedRows === 1) {
      return res.status(200).json({code: 200, msg: '提交成功'})
    } else {
      return res.status(500).json({code: 500, msg: '数据写入失败'})
    }
  } catch (err) {
    console.error('接口运行错误:', err)
    return res.status(500).json({code: 500, msg: '服务异常'})
  }
})

app.listen(3001, () => {
  console.log('后端服务已启动，端口3001')
})

同目录下新建.env文件存储数据库配置，该文件不要提交到公开代码仓库：

MYSQL_HOST=localhost
MYSQL_USER=root
MYSQL_PASSWORD=你自己的MySQL登录密码
MYSQL_DB=react_form

3. 在MySQL Workbench中提前建库建表 #

打开MySQL Workbench连接你的本地数据库，执行以下SQL创建存储表单数据的库和表：

-- 创建数据库
CREATE DATABASE IF NOT EXISTS react_form DEFAULT CHARACTER SET utf8mb4;
USE react_form;
-- 创建表单存储表
CREATE TABLE IF NOT EXISTS contact_messages (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100) NOT NULL COMMENT '提交人姓名',
  email VARCHAR(100) NOT NULL COMMENT '提交人邮箱',
  message TEXT NOT NULL COMMENT '留言内容',
  agree_privacy TINYINT(1) NOT NULL DEFAULT 0 COMMENT '是否同意隐私协议',
  create_time DATETIME NOT NULL COMMENT '提交时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

4. 联调注意事项 #

• 启动顺序：先确保MySQL服务正常运行（Workbench能正常连接），再执行node server.js启动后端，最后启动React前端项目
• 跨域处理：React本地开发服务默认端口一般是3000（CRA）或5173（Vite），和后端3001端口不一致会触发跨域，最简单的解决方式是在前端构建配置里加代理，比如Vite项目在vite.config.js中添加：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3001',
        changeOrigin: true
      }
    }
  }
})

• 如果你更熟悉PHP，只需要把原来的index.php改成接收POST格式的JSON参数，完成校验后连接MySQL执行写入即可，整体逻辑和Node.js版本完全一致
• 禁止在前端代码中直接引入mysql相关依赖包编写连接逻辑，否则数据库账号密码会被打包到前端静态资源中，任何人都可以获取并恶意操作你的数据库
• 所有用户输入的内容必须做转义、校验，SQL执行必须用参数化查询，避免SQL注入漏洞

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