前后端分离（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

客户端请求后端发送数据

<template>
......
<div class="block">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="filter.page"
:page-sizes="[1, 2, 4, 10]"
:page-size="filter.page_size"
layout="total, sizes, prev, pager, next, jumper"
:total="course_total">
</el-pagination>
</div>
......
</template>

<script>
export default {
name: "Course",
data() {
return {
category_list: [],		 // 课程分类列表
course_list: [],		// 课程列表
course_total: 0, 		// 当前课程
filter: {				// 没有s
course_category: 0, // 当前用户选择的课程分类，默认为全部,要后端定义的过滤字段一致
ordering: "id",		// 数列的排序方式
page_size: 2, // 单页数据量
page: 1,		// 默认当前页码
},
}
},
created() {
this.get_category();
this.get_course();
},
components: {
Header,
Footer,
},
// 侦听用户选择的课程列表，并改变显示的课程
watch: {
// 选择课程分类后，重新获取课程列表
"filter.course_category": function () {
// 重新选择分类后，跳到第一页
this.filter.page = 1;
this.get_course();
},
// 重新课程排序分后，重新获取课程列表
"filter.ordering": function () {
// 重新选择排序后，跳到第一页
this.filter.page = 1;
this.get_course();
},
// 重新设定每页显示数量后，重新获取课程列表
"filter.page_size": function () {
// 重新设定页面显示数量后后，跳到第一页
this.filter.page = 1;
this.get_course()
},
// 重新选择页码后，重新获取课程列表
"filter.page": function () {
this.get_course()
}
},
methods: {
get_category() {
// 获取课程分类信息
this.$axios.get(`${this.$settings.Host}/courses/category`).then(response => {
this.category_list = response.data;

// console.log(response.data);
}).catch(error => {
this.$message({
message: "获取课程分类信息有误，请联系客服工作人员"
})
})
},
get_course() {
// 排序
let filters = {
ordering: this.filter.ordering, // 排序
};
// 判断是否进行分类课程的展示, 0代表不分类(默认)，全部显示
if (this.filter.course_category > 0) {
filters.course_category = this.filter.course_category;
// this.filter.page = 1;
}

// 设置单页数据量
if (this.filter.page_size > 0) {
filters.page_size = this.filter.page_size;
} else {
filters.page_size = 5;
}

// 设置当前页码
if (this.filter.page > 1) {
filters.page = this.filter.page;
} else {
filters.page = 1
}

// 获取课程信息
this.$axios.get(`${this.$settings.Host}/courses/`, {params: filters}
).then(response => {
// 导入页码后，返回的data数据结构有变化，要加results
this.course_list = response.data.results;
this.course_total = response.data.count;
console.log(response.data);
}).catch(error => {
this.$message({
message: "获取课程信息有误，请联系客服工作人员"
})
})
},
handleSizeChange(val) {
// 每页数据量发生变化时执行的方法
// this.filter.page = 1;		// 每页显示数据变更后默认返回第一页
this.filter.page_size = val;
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
// 页码发生变化时执行的方法
this.filter.page = val;
console.log(`当前页: ${val}`);
}
}
};

</script>

<style scoped>
......
/*设定页码模块居中*/
.el-pagination {
text-align: center;
}
</style>

修改分页样式中的字体大小，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;
}