Angular+Django创建商品列表时Attributes无法存入数据库问题

我刚接触Angular和Django，正在开发类亚马逊电商Web应用，包含用户登录、商品浏览、商品列表CRUD功能。创建商品列表时，用户需提交标题、描述、价格、位置、分类/子分类、属性值及图片。目前除了Attributes字段，其他所有字段都能正常写入数据库。前端已确认数据以JSON格式正常发送，但后端始终无法接收该字段，怀疑是FormData处理JSON的方式导致问题。

排查思路 #

1. 检查Django模型与序列化器的字段定义 #

• 确认Model中Attributes字段的类型是否为JSON兼容类型：

  class Product(models.Model):
      # 确保用JSONField存储结构化属性数据
      attributes = models.JSONField(default=dict)
      title = models.CharField(max_length=200)
      # 其他字段...
  

• 检查Serializer中是否显式包含该字段，且未设置read_only=True：

  class ProductSerializer(serializers.ModelSerializer):
      class Meta:
          model = Product
          # 务必将attributes加入字段列表
          fields = ['title', 'description', 'price', 'location', 'category', 'subcategory', 'attributes']
  

2. 验证前端FormData的属性传递格式 #

• Angular中直接将JSON对象传入FormData会被转为[object Object]字符串，需手动序列化为JSON字符串：

  // 错误示例
  formData.append('attributes', product.attributes);
  // 正确示例
  formData.append('attributes', JSON.stringify(product.attributes));
  

3. 调整后端FormData的解析逻辑 #

• 若使用Django REST Framework，需通过request.data而非request.POST获取FormData内容，并对JSON字符串反序列化：

  from django.http import JsonResponse
  import json
  
  def create_product(request):
      if request.method == 'POST':
          # 获取前端传递的属性字符串
          attr_str = request.data.get('attributes', '{}')
          try:
              # 反序列化为JSON对象
              attributes = json.loads(attr_str)
          except json.JSONDecodeError:
              attributes = {}
          # 创建商品时传入属性数据
          product = Product.objects.create(
              title=request.data.get('title'),
              description=request.data.get('description'),
              attributes=attributes,
              # 其他字段赋值...
          )
          return JsonResponse({'status': 'success'})
  

4. 对比Swagger请求与实际请求的差异 #

• 打开浏览器Network面板，对比前端实际请求与Swagger正常请求的以下内容：
  • Attributes字段的键名是否完全一致（注意大小写，比如attributes vs Attributes）
  • 字段值的格式：Swagger是否发送JSON字符串而非原生JSON对象
  • 请求头Content-Type是否为multipart/form-data，且边界符正确

5. 后端调试定位问题 #

• 在视图中打印完整请求数据，确认Attributes字段是否被后端接收：

  print("完整请求数据:", request.data)
  attr_data = request.data.get('attributes')
  print("属性字段类型:", type(attr_data))
  print("属性字段值:", attr_data)
  

• 根据打印结果判断：若字段不存在，说明前端传递时键名错误；若字段值为字符串但无法解析，说明序列化/反序列化逻辑有问题。

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