前后端分离（django+vue）实现分页器

课程列表接口实现分页显示数据

在当前子应用courses下创建一个分页器的文件pagination.py，代码：

from rest_framework.pagination import PageNumberPagination

class CoursePageNumberPagination(PageNumberPagination):
    """课程列表数据的分页器"""
    page_query_param = "page"  # 页码参数
    page_size_query_param = 'page_size' # 单页数据量
    page_size = 5                       # 默认的单页数据量，就是每一页显示5个课程信息
    max_page_size = 20                  # 允许客户端设置的单页数据量

视图中加载声明的分页器，代码：

from django_filters.rest_framework import DjangoFilterBackend
from rest_framework.filters import OrderingFilter
from .pagination import CoursePageNumberPagination
class CourseAPIView(ListAPIView):
    """课程列表接口"""
    queryset = Course.objects.filter(is_delete=False, is_show=True).order_by("-orders")
    serializer_class = CourseSerializer
    filter_backends = [DjangoFilterBackend, OrderingFilter]
    filter_fields = ['course_category', ]
    ordering_fields = ['id', 'students', 'price']
    pagination_class = CoursePageNumberPagination

客户端请求后端发送数据

修改分页样式中的字体大小，static/reset.css，代码：

.el-pagination button, .el-pagination span:not([class*=suffix]),
.el-input--mini,
.el-pagination__sizes .el-input .el-input__inner,
.el-pager li{
  font-size: 16px;
}