首页 > 解决方案 > 如何在不使用 REST 框架的情况下在 Django 和 React 应用程序中实现分页?

问题描述

我正在一个网站上工作,其后端是 Django,前端是使用 React 开发的。我想在网站中添加分页功能,但不知道如何在前端部分实现。

我想将总页数发送到反应应用程序。

到目前为止,我已经在我的视图函数中编写了以下代码

def index(request):
    influencers = Influencer.objects.all()

    paginator = Paginator(influencers,16)
    page = request.GET.get('page')
    paged_listings = paginator.get_page(page)
    user_list = UserList.objects.all().filter(user_id = request.user.id)

    queryset = list(chain(paged_listings,user_list),paginator.count)
    ser_query = serializers.serialize('json', queryset)
    return HttpResponse(ser_query)

此外,我没有使用 REST 框架来开发后端站点。

我想知道我必须向 React 前端站点发送哪些信息才能使其正常工作。我应该如何进行?

标签: pythondjangoreactjsdjango-pagination

解决方案


我建议您使用 django-rest-framework,因为分页可能更容易。

但是,如果您想避免传递自己的结构(显然,您可能需要传递其他信息,例如下一页/上一页等)。

这里的挑战是确保一切都是 JSON 可序列化的——这意味着Queryset你必须使用 .values() 并用 list() 包装结果。因为Paginator你需要用 list() 包装。

from django.http.response import JsonResponse

def index(request):
    influencers = Influencer.objects.all().values()

    paginator = Paginator(influencers,16)
    page = request.GET.get('page')
    paged_listings = paginator.get_page(page)
    user_list = UserList.objects.all().filter(user_id = request.user.id).values()

    queryset = list(chain(paged_listings,user_list),paginator.count)
    content = {'total_page_count': paginator.num_pages, 'data': queryset}
    return JsonResponse(content)

推荐阅读