分页后端逻辑

分页后端逻辑

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

COPY class GoodsList(APIView): def get(self,request): #当前页 page = request.GET.get('page',1) #一页显示的个数 size = request.GET.get('size',1) #计算从哪开始切 data_start = (int(page)-1) *int(size) #计算切到哪 data_end = int(page) * int(size) #查询 切片成当前页数据 goods = Goods.objects.all()[data_start:data_end] #查询所有商品个数 count = Goods.objects.count() #序列化 goods_ser = GoodsSer(goods,many=True) return Response({'data':goods_ser.data,'total':count})

前端template中

1 2 3 4

COPY <!-- heyui分页器 --> <div> <Pagination v-model="pagination" @change="get_goods"></Pagination> </div>

data中定义分页器变量

1 2 3 4 5 6

COPY //定义分页器变量 pagination:{ page:2, size:2, total:5, }

1 2 3 4 5 6 7 8 9 10 11 12

COPY // 获取商品类表接口 get_goods:function(){ // 拼接路由 this.axios.get('http://127.0.0.1:8000/goodslist/',{params:{page:this.pagination.page,size:this.pagination.size}}).then((res=>{ console.log(res) this.goodslist = res.data.data //将商品总数传递给total this.pagination.total = res.data.total })) }

获取文件

1 2 3 4 5 6 7

COPY 图片：<input type="file" ref="upload"><br> // 接收表单数据 var pc = this.$refs.upload let file = pc.files[0]