基于Django实现OpenFoodFacts API填充产品表单并入库的方案咨询

一、前端实现步骤 #

1. 监听条码输入并发起API请求 #

给条码输入框绑定事件，获取输入值后调用OpenFoodFacts接口拉取数据：

// 假设条码输入框id为barcode-input，表单id为product-form
const barcodeInput = document.getElementById('barcode-input');
const productForm = document.getElementById('product-form');

barcodeInput.addEventListener('change', async function() {
  const barcode = this.value.trim();
  if (!barcode) return;

  try {
    const response = await fetch(`https://world.openfoodfacts.org/api/v0/product/${barcode}.json`);
    const data = await response.json();
    
    if (!data.product) {
      alert('未找到对应产品信息');
      return;
    }

    // 按指定逻辑转换数据
    const convertedData = [data.product].map(result => ({
      brand: result.brands,
      name: result.product_name,
      allergens: result.allergens,
      barcode: result._id,
      category: result.categories,
      weight: result.product_quantity,
    }))[0];

    // 自动填充表单
    fillProductForm(convertedData);
  } catch (error) {
    console.error('获取产品数据失败:', error);
    alert('获取产品信息出错，请重试');
  }
});

2. 表单填充函数实现 #

将转换后的数据对应填充到表单字段：

function fillProductForm(data) {
  // 匹配表单name属性与转换后的数据字段
  Object.keys(data).forEach(key => {
    const field = productForm.querySelector(`[name="${key}"]`);
    if (field) {
      field.value = data[key] || ''; // 处理空值
    }
  });
}

3. 前端表单参考结构 #

<form id="product-form" method="POST" action="/api/products/">
  {% csrf_token %} <!-- Django CSRF令牌，必须保留 -->
  <input type="text" name="brand" placeholder="品牌">
  <input type="text" name="name" placeholder="产品名称" required>
  <textarea name="allergens" placeholder="过敏原"></textarea>
  <input type="text" name="barcode" placeholder="条码" readonly required>
  <input type="text" name="category" placeholder="分类">
  <input type="text" name="weight" placeholder="重量">
  <button type="submit">提交审核后的数据</button>
</form>

二、Django后端实现步骤 #

1. Product模型确认（基于提供的结构） #

from django.db import models

class Product(models.Model):
    brand = models.CharField(max_length=255, blank=True)
    name = models.CharField(max_length=255)
    allergens = models.TextField(blank=True)
    barcode = models.CharField(max_length=50, unique=True)
    category = models.CharField(max_length=255, blank=True)
    weight = models.CharField(max_length=50, blank=True)

    def __str__(self):
        return self.name

2. 编写提交处理视图 #

在views.py中实现接收表单数据并保存到数据库的逻辑：

from django.http import JsonResponse
from .models import Product

def submit_product(request):
    if request.method == 'POST':
        try:
            # 提取表单提交的数据
            product_data = {
                'brand': request.POST.get('brand', ''),
                'name': request.POST.get('name'),
                'allergens': request.POST.get('allergens', ''),
                'barcode': request.POST.get('barcode'),
                'category': request.POST.get('category', ''),
                'weight': request.POST.get('weight', ''),
            }

            # 校验必填字段
            if not product_data['name'] or not product_data['barcode']:
                return JsonResponse({'status': 'error', 'message': '产品名称和条码为必填项'}, status=400)

            # 避免重复条码，创建或更新产品
            product, created = Product.objects.update_or_create(
                barcode=product_data['barcode'],
                defaults=product_data
            )

            return JsonResponse({'status': 'success', 'message': '产品提交成功', 'product_id': product.id})
        except Exception as e:
            return JsonResponse({'status': 'error', 'message': str(e)}, status=500)
    else:
        return JsonResponse({'status': 'error', 'message': '仅支持POST请求'}, status=405)

3. 配置URL路由 #

在urls.py中添加对应路由：

from django.urls import path
from . import views

urlpatterns = [
    path('api/products/', views.submit_product, name='submit_product'),
]

三、关键注意事项 #

• 空值处理：OpenFoodFacts返回的部分字段可能为null，转换和填充时需设置默认空字符串，避免表单显示异常。
• 数据唯一性：通过模型的unique=True和update_or_create方法，避免重复条码数据。
• 审核流程扩展：可在模型中添加is_approved布尔字段，先保存待审核状态，人工审核后再标记为有效。
• 跨域处理：若前后端不在同一域名，需使用django-cors-headers库配置CORS规则。

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