Vue+django 前后端分离实现分页获取数据

吃饭睡觉摸鱼上网

已于 2022-09-06 14:30:10 修改

阅读量3k

点赞数

分类专栏： vue python 文章标签： django vue.js 前端

于 2021-11-13 15:14:28 首次发布

本文链接：https://blog.csdn.net/huatoudd/article/details/121273317

版权

python 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

一.目前的功能以及缺陷

目前功能是，前端向后端获取全部数据，然后前端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) {
                    });
            },