Vue组件表单提交至Django后端数据库的交互配置及数据提交方法问询

你要的交互逻辑分别在Vue前端组件和Django后端API视图中定义，完全不需要依赖Django内置表单功能，具体实现如下：

一、前端Vue组件：处理表单提交逻辑 #

在Vue组件里通过v-model绑定表单数据，自定义提交方法发起POST请求到Django的API接口，同时处理CSRF验证（Django默认开启CSRF防护，必须携带token）。

示例代码：

<template>
  <form @submit.prevent="submitForm">
    <input v-model="formData.name" type="text" placeholder="姓名" required>
    <input v-model="formData.email" type="email" placeholder="邮箱" required>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    }
  },
  methods: {
    async submitForm() {
      try {
        // 从cookie中获取Django默认的CSRF token
        const csrfToken = document.cookie.split('; ')
          .find(row => row.startsWith('csrftoken='))?.split('=')[1] || '';
        
        const response = await fetch('/api/submit-form/', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrfToken
          },
          body: JSON.stringify(this.formData)
        });

        if (response.ok) {
          // 提交成功后重置表单
          this.formData = { name: '', email: '' };
          alert('提交成功');
        } else {
          const errInfo = await response.json();
          alert(`提交失败: ${errInfo.message}`);
        }
      } catch (error) {
        console.error('请求出错:', error);
        alert('网络异常，请稍后重试');
      }
    }
  }
}
</script>

二、后端Django：编写API视图处理数据入库 #

在Django中写一个视图函数，接收POST请求的JSON数据，自行完成数据验证后直接写入数据库，返回JSON响应。

1. 视图函数（views.py） #

from django.http import JsonResponse
from .models import YourModel  # 替换成你的数据库模型

def submit_form_api(request):
    if request.method != 'POST':
        return JsonResponse({'message': '仅支持POST请求'}, status=405)
    
    try:
        # 解析前端发送的JSON数据
        import json
        form_data = json.loads(request.body.decode('utf-8'))
        
        # 自定义数据验证（替代Django表单验证）
        required_fields = ['name', 'email']
        for field in required_fields:
            if not form_data.get(field):
                return JsonResponse({'message': f'{field}不能为空'}, status=400)
        
        # 直接写入数据库
        YourModel.objects.create(
            name=form_data['name'],
            email=form_data['email']
        )
        
        return JsonResponse({'message': '提交成功'}, status=200)
    except Exception as e:
        return JsonResponse({'message': f'处理失败: {str(e)}'}, status=500)

2. 配置路由（urls.py） #

把API视图映射到具体URL：

from django.urls import path
from . import views

urlpatterns = [
    path('api/submit-form/', views.submit_form_api, name='submit-form-api'),
]

三、交互关系的定义位置 #

• 前端：在Vue组件的methods中定义提交逻辑，负责收集、封装表单数据并发起HTTP请求到指定Django API地址
• 后端：在Django的视图函数中定义接收、验证、入库逻辑，处理前端请求并返回结果
• 两者通过你在Django urls.py中配置的API地址关联，前端请求时对应这个地址即可完成数据交互

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