React+Python(Flask)待办应用：前后端连接与POST请求处理指导

一、开发先后步骤 #

• 第一步：确认MySQL表结构。先创建todos表，建议字段：id（主键自增）、content（待办内容）、created_at（创建时间，默认当前时间）
• 第二步：配置Flask后端基础。安装必要依赖，封装数据库连接，解决跨域问题
• 第三步：编写后端API接口。先写测试用的GET接口验证通信，再写POST接口处理数据插入
• 第四步：修改React前端表单提交逻辑，替换为调用后端API
• 第五步：端到端测试。提交表单后检查数据库数据，排查报错
• 第六步：补充功能（如查询待办列表），完善错误处理逻辑

二、前后端连接实现 #

1. 后端解决跨域问题 #

Flask默认禁止跨域请求，需安装flask-cors扩展：

pip install flask flask-cors mysql-connector-python

在Flask主文件中配置CORS：

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

app = Flask(__name__)
# 开发环境允许所有域名跨域，生产环境可指定具体域名
CORS(app)

# 封装数据库连接函数
def get_db_connection():
    conn = mysql.connector.connect(
        host='localhost',
        user='你的数据库用户名',
        password='你的数据库密码',
        database='你的数据库名'
    )
    return conn

2. 前端调用后端API #

修改你的React表单提交逻辑，用fetch发送请求到后端接口：

import { useState } from 'react';

function TodoForm() {
  const [todoContent, setTodoContent] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 调用后端POST接口
    fetch('http://localhost:5000/api/todos', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ content: todoContent }),
    })
    .then(res => res.json())
    .then(data => {
      console.log('添加成功:', data);
      setTodoContent('');
    })
    .catch(err => console.error('请求失败:', err));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={todoContent}
        onChange={(e) => setTodoContent(e.target.value)}
        placeholder="输入待办事项"
        required
      />
      <button type="submit">添加待办</button>
    </form>
  );
}

export default TodoForm;

如果用create-react-app开发前端，可在package.json中添加"proxy": "http://localhost:5000"，这样请求路径可简化为/api/todos。

三、处理POST请求并插入数据库 #

在Flask中编写POST接口，接收前端数据并插入MySQL：

@app.route('/api/todos', methods=['POST'])
def add_todo():
    # 验证请求格式是否为JSON
    if not request.is_json:
        return jsonify({'error': '请求必须为JSON格式'}), 400
    
    data = request.get_json()
    content = data.get('content')
    
    # 验证内容非空
    if not content:
        return jsonify({'error': '待办内容不能为空'}), 400
    
    conn = get_db_connection()
    cursor = conn.cursor()
    
    # 参数化查询，避免SQL注入
    cursor.execute(
        'INSERT INTO todos (content, created_at) VALUES (%s, NOW())',
        (content,)
    )
    conn.commit()
    todo_id = cursor.lastrowid
    
    cursor.close()
    conn.close()
    
    return jsonify({
        'id': todo_id,
        'content': content,
        'message': '待办事项添加成功'
    }), 201

• request.get_json()用于获取前端发送的JSON数据
• 参数化查询用%s作为占位符，不要直接拼接字符串
• 必须调用conn.commit()，否则数据不会写入数据库

四、项目文件结构建议 #

todo-app/
├── frontend/          # React前端项目
│   ├── src/
│   │   ├── components/
│   │   │   └── TodoForm.jsx
│   │   └── App.js
│   └── package.json
└── backend/           # Flask后端项目
    ├── app.py         # Flask主文件
    └── requirements.txt # 依赖列表

requirements.txt内容：

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

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