Django+vue 分页展示

这里提供两种分页方法

一种是手写分页,不常用,但是明白一下分页的逻辑实现

第二种是用heyui提供的组件.很多功能都给封装好了,用起来也比较美观.

---

---

手写分页

后端接口

class GoodList(APIView):
    def get(self, request):
        # 当前页
        page = int(request.GET.get('page', 1))
        # 一页有多少条商品
        size = int(request.GET.get('size', 1))

        # 定义从哪里开始切片
        data_start = (page - 1) * size

        # 定义切到哪
        data_end = page * size

        #查询数据
        goodslist=Goods.objects.all()[data_start:data_end]

        #查询总数量
        count=Goods.objects.count()

        # 序列化操作
        goods_ser=GoodsSer(goodslist,many=True)
        # 返回响应
        return Response({
     
            'total':count,
            'data':goods_ser.data
        })

前端页面

heyui 组件库

后端代码不用做修改.可以直接复用.heyui前端就相对来说简单了许多.

两种分页的效果.上边的是heyui组件,下边是手写分页器.

HEY UI 分页文档:https://www.heyui.top/component/data/view/page

Element 组件文档:https://element.eleme.cn/#/zh-CN/component/installation

功能多多 各自挖掘吧.