分页后端逻辑

分页后端逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
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
 
<!-- heyui分页器 -->
    <div>
    	<Pagination v-model="pagination" @change="get_goods"></Pagination>
    </div>

data中定义分页器变量

1
2
3
4
5
6
 
//定义分页器变量
  pagination:{
	  page:2,
	  size:2,
	  total:5,
  }
 
1
2
3
4
5
6
7
8
9
10
11
12
 
// 获取商品类表接口
  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
 
图片：<input type="file" ref="upload"><br>



// 接收表单数据
var pc = this.$refs.upload
let file = pc.files[0]
posted @ 2020-07-23 11:52  安乐的技术博客  阅读(260)  评论(0)  编辑  收藏  举报