求助：如何用Flask、ReactJS和MySQL Workbench搭建CRUD全栈项目

一、项目基础结构 #

先把前后端代码按以下目录拆分，方便管理：

full-crud-app/
├── backend/          # Flask 后端
│   ├── app.py
│   ├── requirements.txt
│   └── config.py
└── frontend/         # React 前端
    ├── package.json
    ├── src/
    │   ├── components/
    │   │   └── UserList.js
    │   ├── App.js
    │   └── index.js
    └── public/
        └── index.html

二、Flask 后端调整（核心：跨域 + 标准化API） #

1. 依赖安装 #

backend/requirements.txt 内容：

Flask==2.3.3
flask-cors==4.0.0
mysql-connector-python==8.2.0

执行安装：pip install -r requirements.txt

2. 数据库配置 #

backend/config.py 填写你的MySQL信息：

DB_CONFIG = {
    'user': '你的数据库用户名',
    'password': '你的数据库密码',
    'host': 'localhost',
    'database': '你的数据库名',
    'raise_on_warnings': True
}

3. 后端API实现 #

backend/app.py 编写带跨域支持的CRUD接口：

from flask import Flask, request, jsonify
from flask_cors import CORS
import mysql.connector
from config import DB_CONFIG

app = Flask(__name__)
CORS(app)  # 解决前后端跨域问题

# 获取数据库连接
def get_db_connection():
    conn = mysql.connector.connect(**DB_CONFIG)
    return conn

# 1. 获取所有用户
@app.route('/api/users', methods=['GET'])
def get_users():
    conn = get_db_connection()
    cursor = conn.cursor(dictionary=True)
    cursor.execute('SELECT * FROM users')
    users = cursor.fetchall()
    cursor.close()
    conn.close()
    return jsonify(users)

# 2. 创建用户
@app.route('/api/users', methods=['POST'])
def create_user():
    new_user = request.get_json()
    name = new_user['name']
    email = new_user['email']
    
    conn = get_db_connection()
    cursor = conn.cursor()
    cursor.execute('INSERT INTO users (name, email) VALUES (%s, %s)', (name, email))
    conn.commit()
    cursor.close()
    conn.close()
    return jsonify({"message": "用户创建成功"}), 201

# 3. 更新用户
@app.route('/api/users/<int:id>', methods=['PUT'])
def update_user(id):
    updated_user = request.get_json()
    name = updated_user['name']
    email = updated_user['email']
    
    conn = get_db_connection()
    cursor = conn.cursor()
    cursor.execute('UPDATE users SET name = %s, email = %s WHERE id = %s', (name, email, id))
    conn.commit()
    cursor.close()
    conn.close()
    return jsonify({"message": "用户更新成功"})

# 4. 删除用户
@app.route('/api/users/<int:id>', methods=['DELETE'])
def delete_user(id):
    conn = get_db_connection()
    cursor = conn.cursor()
    cursor.execute('DELETE FROM users WHERE id = %s', (id,))
    conn.commit()
    cursor.close()
    conn.close()
    return jsonify({"message": "用户删除成功"})

if __name__ == '__main__':
    app.run(debug=True)

三、React 前端调整（核心：调用后端API） #

1. 核心组件实现 #

frontend/src/components/UserList.js 编写CRUD交互逻辑：

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [editingId, setEditingId] = useState(null);

  // 初始化加载用户列表
  useEffect(() => {
    fetch('http://localhost:5000/api/users')
      .then(res => res.json())
      .then(data => setUsers(data))
      .catch(err => console.error('加载用户失败:', err));
  }, []);

  // 创建用户
  const handleCreate = (e) => {
    e.preventDefault();
    fetch('http://localhost:5000/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, email })
    })
    .then(() => {
      setName('');
      setEmail('');
      // 刷新列表
      fetch('http://localhost:5000/api/users').then(res => res.json()).then(setUsers);
    })
    .catch(err => console.error('创建用户失败:', err));
  };

  // 进入编辑状态
  const handleEdit = (user) => {
    setEditingId(user.id);
    setName(user.name);
    setEmail(user.email);
  };

  // 更新用户
  const handleUpdate = (e) => {
    e.preventDefault();
    fetch(`http://localhost:5000/api/users/${editingId}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, email })
    })
    .then(() => {
      setEditingId(null);
      setName('');
      setEmail('');
      // 刷新列表
      fetch('http://localhost:5000/api/users').then(res => res.json()).then(setUsers);
    })
    .catch(err => console.error('更新用户失败:', err));
  };

  // 删除用户
  const handleDelete = (id) => {
    if (confirm('确定要删除该用户吗？')) {
      fetch(`http://localhost:5000/api/users/${id}`, { method: 'DELETE' })
      .then(() => {
        // 刷新列表
        fetch('http://localhost:5000/api/users').then(res => res.json()).then(setUsers);
      })
      .catch(err => console.error('删除用户失败:', err));
    }
  };

  return (
    <div style={{ maxWidth: '600px', margin: '20px auto' }}>
      <h2>用户管理系统</h2>
      <form onSubmit={editingId ? handleUpdate : handleCreate} style={{ marginBottom: '20px' }}>
        <input
          type="text"
          placeholder="姓名"
          value={name}
          onChange={(e) => setName(e.target.value)}
          required
          style={{ marginRight: '10px', padding: '8px' }}
        />
        <input
          type="email"
          placeholder="邮箱"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
          style={{ marginRight: '10px', padding: '8px' }}
        />
        <button type="submit" style={{ padding: '8px 16px' }}>
          {editingId ? '更新用户' : '创建用户'}
        </button>
        {editingId && (
          <button onClick={() => setEditingId(null)} style={{ padding: '8px 16px', marginLeft: '10px' }}>
            取消编辑
          </button>
        )}
      </form>

      <ul style={{ listStyle: 'none', padding: 0 }}>
        {users.map(user => (
          <li key={user.id} style={{ padding: '10px', borderBottom: '1px solid #eee' }}>
            <span>{user.name} - {user.email}</span>
            <button onClick={() => handleEdit(user)} style={{ marginLeft: '10px', padding: '6px 12px' }}>
              编辑
            </button>
            <button onClick={() => handleDelete(user.id)} style={{ marginLeft: '10px', padding: '6px 12px', backgroundColor: '#ff4444', color: 'white', border: 'none' }}>
              删除
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

2. 整合到App #

frontend/src/App.js 引入组件：

import UserList from './components/UserList';

function App() {
  return (
    <div className="App">
      <UserList />
    </div>
  );
}

export default App;

四、MySQL 数据库准备 #

在MySQL Workbench中执行以下SQL，创建数据库和用户表：

CREATE DATABASE your_db_name;
USE your_db_name;
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL UNIQUE
);

五、启动与测试 #

1. 启动后端：进入backend目录，执行python app.py，服务将运行在http://localhost:5000
2. 启动前端：进入frontend目录，执行npm install（首次运行），然后npm start，页面将运行在http://localhost:3000
3. 测试：在前端页面操作创建、编辑、删除用户，查看MySQL数据库数据是否同步更新

六、生产环境注意事项 #

• 关闭Flask的debug=True，改用生产服务器（如Gunicorn）
• 将前端API地址改为环境变量，避免硬编码localhost
• 数据库连接信息改用环境变量存储，不要暴露在代码中

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