在 Django Rest Framework 中使用无限滚动?
Using infinite scroll with Django Rest Framework?
我正在使用 Django Rest Framework 创建 REST API。 API 将提供大量数据,我想在页面上使用无限滚动。我想在前端使用 Angular。我不确定如何提供数据,以便不是所有数据都必须发送一次,而是仅当用户向下滚动时才发送。
我正在使用序列化程序 class -
class CompanySerializer(serializers.ModelSerializer):
class Meta:
model = Company
fields = ('company_name', 'location', 'founded_year')
我不确定如何实现它。我应该使用 Django Endless Pagination 还是可以使用 django-rest-framework 提供的分页来完成。我也不确定前端如何工作。 Web开发新手,求助
你应该 CursorPagination 试一试。
我不确切知道它是否是无限的,但它绝对适用于大集合。
创建列表API查看子类
from rest_framework import pagination, generics
class CompanyPagination(pagination.PageNumberPagination):
page_size = 20 # the no. of company objects you want to send in one go
# Assume url for this view is /api/v1/companies/
class CompanyListView(generics.ListAPIView):
queryset = Company.objects.all()
serializer_class = CompanySerializer
pagination_class = CompanyPagination
完成后,您可以通过调用http://your_domain.com/api/v1/companies/?page=1获得前20个,?page=2
将第21个公司分配给第40个公司,依此类推。 (不指定 ?page=
就像指定 ?page=1
)
在您的 AngularJS
端,您将维护一些变量,该变量将保存下一个要获取的页码。现在您可以将 API 请求绑定到某些 Load More 类型按钮上的点击事件,或者您可以检测用户是否已滚动到底部,然后执行API 请求并获取下一组 Company
个对象。
注:
并不是必须使用PageNumberPagination
,你甚至可以使用LimitOffsetPagination
或CursorPagination
来实现你的objective。详细了解各种分页样式 here
我正在使用 Django Rest Framework 创建 REST API。 API 将提供大量数据,我想在页面上使用无限滚动。我想在前端使用 Angular。我不确定如何提供数据,以便不是所有数据都必须发送一次,而是仅当用户向下滚动时才发送。
我正在使用序列化程序 class -
class CompanySerializer(serializers.ModelSerializer):
class Meta:
model = Company
fields = ('company_name', 'location', 'founded_year')
我不确定如何实现它。我应该使用 Django Endless Pagination 还是可以使用 django-rest-framework 提供的分页来完成。我也不确定前端如何工作。 Web开发新手,求助
你应该 CursorPagination 试一试。 我不确切知道它是否是无限的,但它绝对适用于大集合。
创建列表API查看子类
from rest_framework import pagination, generics
class CompanyPagination(pagination.PageNumberPagination):
page_size = 20 # the no. of company objects you want to send in one go
# Assume url for this view is /api/v1/companies/
class CompanyListView(generics.ListAPIView):
queryset = Company.objects.all()
serializer_class = CompanySerializer
pagination_class = CompanyPagination
完成后,您可以通过调用http://your_domain.com/api/v1/companies/?page=1获得前20个,?page=2
将第21个公司分配给第40个公司,依此类推。 (不指定 ?page=
就像指定 ?page=1
)
在您的 AngularJS
端,您将维护一些变量,该变量将保存下一个要获取的页码。现在您可以将 API 请求绑定到某些 Load More 类型按钮上的点击事件,或者您可以检测用户是否已滚动到底部,然后执行API 请求并获取下一组 Company
个对象。
注:
并不是必须使用PageNumberPagination
,你甚至可以使用LimitOffsetPagination
或CursorPagination
来实现你的objective。详细了解各种分页样式 here