如何将Vue组件中的表单关联到Django模型？

一、后端Django准备工作 #

1. 安装依赖（如果未安装） #

如果还没使用Django REST Framework，先安装：

pip install djangorestframework

然后把rest_framework添加到项目settings.py的INSTALLED_APPS列表中。

2. 创建模型序列化器 #

序列化器负责Django模型与JSON数据的双向转换，以一个Book模型为例：

# models.py
from django.db import models

class Book(models.Model):
    title = models.CharField(max_length=200)
    author = models.CharField(max_length=100)
    publication_date = models.DateField()

对应的序列化器：

# serializers.py
from rest_framework import serializers
from .models import Book

class BookSerializer(serializers.ModelSerializer):
    class Meta:
        model = Book
        fields = ['id', 'title', 'author', 'publication_date']

3. 编写API视图 #

用类视图处理POST请求，接收前端表单数据，验证后保存到模型：

# views.py
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
from .serializers import BookSerializer

class BookCreateAPI(APIView):
    def post(self, request):
        serializer = BookSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

4. 配置URL路由 #

在项目或应用的urls.py中添加API路由：

# urls.py
from django.urls import path
from .views import BookCreateAPI

urlpatterns = [
    path('api/books/', BookCreateAPI.as_view(), name='book-create'),
]

二、前端Vue组件实现 #

1. 表单模板与数据绑定 #

在Vue组件中创建表单，用v-model绑定表单字段：

<template>
  <div class="book-form">
    <h2>添加书籍</h2>
    <form @submit.prevent="submitForm">
      <div>
        <label>书名:</label>
        <input type="text" v-model="formData.title" required>
      </div>
      <div>
        <label>作者:</label>
        <input type="text" v-model="formData.author" required>
      </div>
      <div>
        <label>出版日期:</label>
        <input type="date" v-model="formData.publication_date" required>
      </div>
      <button type="submit">提交</button>
    </form>
    <div v-if="errorMessage" class="error">{{ errorMessage }}</div>
    <div v-if="successMessage" class="success">{{ successMessage }}</div>
  </div>
</template>

2. 脚本部分处理提交逻辑 #

用axios发送POST请求（也可使用fetch），重点处理Django的CSRF令牌：

<script>
import axios from 'axios'

export default {
  data() {
    return {
      formData: {
        title: '',
        author: '',
        publication_date: ''
      },
      errorMessage: '',
      successMessage: ''
    }
  },
  methods: {
    getCsrfToken() {
      // 从Cookie中获取Django生成的CSRF令牌
      const cookieValue = document.cookie
        .split('; ')
        .find(row => row.startsWith('csrftoken='))
        ?.split('=')[1]
      return cookieValue
    },
    async submitForm() {
      this.errorMessage = ''
      this.successMessage = ''
      try {
        const csrfToken = this.getCsrfToken()
        const response = await axios.post('/api/books/', this.formData, {
          headers: {
            'X-CSRFToken': csrfToken
          }
        })
        this.successMessage = '书籍添加成功！'
        // 重置表单
        this.formData = { title: '', author: '', publication_date: '' }
      } catch (error) {
        this.errorMessage = '提交失败：' + JSON.stringify(error.response.data)
      }
    }
  }
}
</script>

3. 样式（可选） #

添加简单样式提升用户体验：

<style scoped>
.book-form {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
div {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.error {
  color: red;
  margin-top: 10px;
}
.success {
  color: green;
  margin-top: 10px;
}
</style>

三、关键注意事项 #

• CSRF令牌处理：Django默认开启CSRF防护，必须在请求头中携带X-CSRFToken，否则请求会被拒绝，上述代码已实现从Cookie中获取令牌的逻辑。
• 字段名匹配：前端formData的字段名必须与Django序列化器的字段名完全一致，否则后端无法正确解析数据。
• 错误反馈：后端序列化器会自动验证数据格式，前端需捕获并展示错误信息，方便用户修正。
• 跨域配置：若Vue项目与Django后端不在同一域名下，需在Django中配置CORS，可通过安装django-cors-headers并设置CORS_ALLOWED_ORIGINS实现。

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