一.目前的功能以及缺陷
目前功能是,前端向后端获取全部数据,然后前端Vue进行数据分页。
好处:在数据量比较小的提前下,一次性获取数据后的搜索功能十分迅速,因为是从tableList中的数据中筛选出来,很快。
坏处:当数据量不对增大时,发现前端获取数据耗时过大,用户体验极差。
二.新功能描述:
根据前端返回的 page_size和page信息,后端返回特定的数据。
1.后端的实现
技术点:使用django_restframework的pagnition对数据进行后端分页处理
1.1 创建分页器类
from rest_framework.pagination import PageNumberPagination
class BomPageNumberPagination(PageNumberPagination):
page_query_param = "page" # 页码参数
page_size_query_param = 'page_size' # 单页数据量
page_size = 5 # 默认的单页数据量,就是每一页显示5个课程信息
max_page_size = 100
1.2 视图集使用分页器
class BomListAPIViewSet(GenericViewSet, ListModelMixin):
queryset = Bom.objects.all().order_by("-id")
serializer_class = BomPartSerializer
pagination_class = BomPageNumberPagination # 使用分页器
1.3 使用postman测试
后端分页已完成,这时候开始前端分页处理。
2.前端分页处理
2.1监听filter中的page和page_size数据
page: 第几页
page_size : 一页展示多少条数据
watch: {
// 重新设定每页显示数量后,重新获取数据列表
"filter.page_size": function () {
// 重新设定页面显示数量后后,跳到第一页
this.filter.page = 1;
this.getBomData();
},
// 重新选择页码后,重新获取数据列表
"filter.page": function () {
this.getBomData();
}
}
2.2 获取数据
getBomData() {
let _this = this;
// 定义请求参数
let filters = {
};
// 设置单页数据量
if (this.filter.page_size > 0) {
filters.page_size = this.filter.page_size;
} else {
// 默认page_size为8
filters.page_size = 8;
}
// 设置当前页码
if (this.filter.page > 1) {
filters.page = this.filter.page;
} else {
filters.page = 1
}
this.$axios
.get("/api/bomsInfo", {params: filters})
.then(function (res) {
if (res.data) {
_this.allCount = res.data.count;
_this.dataList = res.data.results;
_this.bak_list = _this.dataList;
_this.loading = false;
}
})
.catch(function (err) {
});
},