使用 Vue.js、Axios 和 Django 过滤对象

Posted 2023-02-22

【中文标题】使用 Vue.js、Axios 和 Django 过滤对象

【英文标题】：Filter object with Vue.js, Axios and Django

【发布时间】：2019-04-29 03:18:00

【问题描述】：

我有一个使用 Vue.js 和 Django 的项目。我正在尝试通过简单的搜索从数据库中获取列表。在 Vue/Axios 中，我有它：

  var food = 'CHICKEN'
  const url = `$API_URL/api/list_food_composition/$food`;
  axios.get(url).then(response => 
  var data = response.data;
  console.log(data)
  );

但响应是“未定义”

在 Django 中，我有它：

urls.py

url(r'^api/list_food_composition/$', views.list_food_composition),

views.py

def list_food_composition(request,food):
    foods = Food_composition.objects.filter(short_description__contains=food)
    data = serializers.serialize('json', foods)
    return HttpResponse(data, content_type='application/json')

正确的做法是什么？

【问题讨论】：

console.log(response) 给了什么？

粗体字。它响应“未定义”

【参考方案1】：

请像这样更新您的视图：

from django.http import JsonResponse

def list_food_composition(request,food):
     foods = Food_composition.objects.filter(short_description__contains=food)
     data = serializers.serialize('json', foods)
     return JsonResponse('data': data, content_type='application/json')

网址应该是：

url(r'^api/list_food_composition/(?P<food>\w+)$', views.list_food_composition),

【讨论】：

在我看来，您可以解释一下，而不仅仅是发布代码。