如何将React.js表单数据发送至Django处理并存入MySQL数据库

第一步：Django后端配置 #

• 配置跨域规则
  前后端分离部署默认存在跨域限制，先安装跨域依赖：pip install django-cors-headers
  之后在项目settings.py中修改配置：

  INSTALLED_APPS = [
      # 其他原有应用
      'corsheaders',
      'rest_framework' # 后续接口开发用，提前安装依赖：pip install djangorestframework
  ]
  MIDDLEWARE = [
      # 放在最顶部，优先执行跨域校验
      'corsheaders.middleware.CorsMiddleware',
      # 其他原有中间件
      'django.middleware.common.CommonMiddleware',
  ]
  # 允许React端的访问地址，本地开发默认React运行在3000端口
  CORS_ALLOWED_ORIGINS = ["http://localhost:3000"]
  

• 定义MySQL存储模型
  在对应应用的models.py中定义和表单字段匹配的数据模型，示例如下：

  from django.db import models
  class FormData(models.Model):
      # 字段和你三个表单的输入项一一对应即可
      field1 = models.CharField(max_length=100)
      field2 = models.IntegerField()
      field3 = models.TextField()
      create_time = models.DateTimeField(auto_now_add=True)
  

  执行迁移命令同步表结构到MySQL：
  python manage.py makemigrations
python manage.py migrate
• 开发表单提交接口
  先新增序列化器serializers.py：

  from rest_framework import serializers
  from .models import FormData
  class FormDataSerializer(serializers.ModelSerializer):
      class Meta:
          model = FormData
          fields = '__all__'
  

  在views.py中编写接口逻辑：

  from rest_framework.decorators import api_view
  from rest_framework.response import Response
  from .serializers import FormDataSerializer
  # 导入你写的数据处理Python脚本对应的方法
  # from your_script import data_process
  
  @api_view(['POST'])
  def submit_form(request):
      serializer = FormDataSerializer(data=request.data)
      if serializer.is_valid():
          # 数据保存到MySQL
          saved_data = serializer.save()
          # 直接调用你的Python处理脚本处理提交的数据
          # data_process(saved_data)
          return Response({"code": 200, "msg": "提交成功"})
      return Response({"code": 400, "msg": "参数错误", "errors": serializer.errors})
  

  在urls.py中绑定接口路由：

  from django.urls import path
  from . import views
  urlpatterns = [
      path('api/submit_form/', views.submit_form, name='submit_form'),
  ]
  

第二步：React前端提交实现 #

以下是无文件上传的纯文本表单提交示例，如果有文件上传需求替换为FormData格式提交即可：

import { useState } from 'react'

function MyForm() {
  // 表单值和你三个输入项一一对应
  const [form, setForm] = useState({
    field1: '',
    field2: '',
    field3: ''
  })

  const handleChange = (e) => {
    setForm({
      ...form,
      [e.target.name]: e.target.value
    })
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      const res = await fetch('http://localhost:8000/api/submit_form/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(form)
      })
      const result = await res.json()
      if(result.code === 200) {
        alert('提交成功')
        // 提交后重置表单
        setForm({field1: '', field2: '', field3: ''})
      } else {
        console.error('提交错误：', result.errors)
      }
    } catch (err) {
      console.error('请求失败：', err)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="field1" value={form.field1} onChange={handleChange} required />
      <input name="field2" value={form.field2} onChange={handleChange} required />
      <textarea name="field3" value={form.field3} onChange={handleChange} required />
      <button type="submit">提交表单</button>
    </form>
  )
}

export default MyForm

本地开发时先启动Django服务（默认运行在8000端口），再启动React服务即可正常调通接口，上线后把接口地址替换为线上部署的域名路径即可。

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