React新手求助：如何将注册表单数据POST到Express并存入MySQL

嘿，恭喜你已经打通React和Express的连接啦！接下来要实现注册表单数据提交到后端并存入MySQL，我来一步步帮你捋清楚怎么做：

第一步：完善Express的users.js路由（处理POST请求） #

首先咱们把users.js的代码补全，加上数据库连接和注册接口的逻辑：

const express = require('express');
const mysql = require('mysql');
const bcrypt = require('bcrypt'); // 一定要装这个，用来加密密码！
const router = express.Router();

// 配置MySQL连接信息，换成你自己的数据库参数
const db = mysql.createConnection({
  host: 'localhost',
  user: '你的数据库用户名',
  password: '你的数据库密码',
  database: '你的数据库名'
});

// 连接数据库
db.connect((err) => {
  if (err) throw err;
  console.log('MySQL连接成功！');
});

// 处理用户注册的POST接口
router.post('/register', async (req, res) => {
  // 从请求体里拿表单数据（字段名要和React表单对应）
  const { username, email, password } = req.body;

  try {
    // 先加密密码，绝对不能明文存！
    const hashedPassword = await bcrypt.hash(password, 10);
    
    // 参数化SQL语句，防止SQL注入攻击
    const sql = 'INSERT INTO users (username, email, password) VALUES (?, ?, ?)';
    db.query(sql, [username, email, hashedPassword], (err, result) => {
      if (err) {
        console.error('存储用户失败:', err);
        return res.status(500).json({ success: false, message: '注册失败，用户名或邮箱可能已存在' });
      }
      res.status(200).json({ success: true, message: '注册成功！', userId: result.insertId });
    });
  } catch (err) {
    res.status(500).json({ success: false, message: '密码加密失败，请重试' });
  }
});

module.exports = router;

还要记得在Express的主文件（比如app.js）里做这些配置：

const express = require('express');
const usersRouter = require('./routes/users');
const cors = require('cors'); // 跨域必备，先npm install cors

const app = express();

// 允许跨域请求（React和Express端口不同时必须加）
app.use(cors());
// 解析JSON格式的请求体
app.use(express.json());

// 挂载users路由
app.use('/api/users', usersRouter);

// 启动服务器
app.listen(5000, () => {
  console.log('服务器跑在端口5000啦！');
});

第二步：React端处理表单提交 #

写一个注册表单组件，用useState存数据，提交时发POST请求：

import { useState } from 'react';

function RegisterForm() {
  // 存储表单数据
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });
  const [tipMessage, setTipMessage] = useState('');

  // 处理输入框内容变化
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  // 处理表单提交
  const handleSubmit = async (e) => {
    e.preventDefault();
    setTipMessage(''); // 清空之前的提示

    try {
      const response = await fetch('http://localhost:5000/api/users/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      });

      const data = await response.json();
      if (data.success) {
        setTipMessage('🎉 注册成功！');
        // 清空表单
        setFormData({ username: '', email: '', password: '' });
        // 这里可以跳转到登录页
      } else {
        setTipMessage(`❌ ${data.message}`);
      }
    } catch (err) {
      setTipMessage('⚠️ 网络错误，请检查服务器是否启动');
      console.error('请求失败:', err);
    }
  };

  return (
    <div style={{ maxWidth: '400px', margin: '2rem auto' }}>
      <h2>用户注册</h2>
      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
        <div>
          <label>用户名：</label>
          <input
            type="text"
            name="username"
            value={formData.username}
            onChange={handleInputChange}
            required
            style={{ marginLeft: '0.5rem', padding: '0.3rem' }}
          />
        </div>
        <div>
          <label>邮箱：</label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleInputChange}
            required
            style={{ marginLeft: '0.5rem', padding: '0.3rem' }}
          />
        </div>
        <div>
          <label>密码：</label>
          <input
            type="password"
            name="password"
            value={formData.password}
            onChange={handleInputChange}
            required
            style={{ marginLeft: '0.5rem', padding: '0.3rem' }}
          />
        </div>
        <button type="submit" style={{ padding: '0.5rem', cursor: 'pointer' }}>注册</button>
      </form>
      {tipMessage && <p style={{ textAlign: 'center', marginTop: '1rem' }}>{tipMessage}</p>}
    </div>
  );
}

export default RegisterForm;

关键提醒 #

1. 数据库表准备：先在MySQL里创建users表，用这个SQL语句：

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50) NOT NULL UNIQUE,
  email VARCHAR(100) NOT NULL UNIQUE,
  password VARCHAR(255) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. 密码加密：绝对不能明文存储密码，bcrypt是行业常用的加密库，一定要用上！
3. 错误处理：前后端都要做好错误捕获，给用户清晰的提示，比如用户名重复、服务器出错等情况。

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