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
})

<template>
......
<!--自主分页-->
<div>
<!-- v-show 判断当前页数是否有需要显示上或下一页 -->
<Button v-show="lastpage" @click="getdata(lastpage)">上一页</Button>
<Button v-for="index in all" @click="getdata(index)">{
{index}}</Button>
<Button v-show="nextpage" @click="getdata(nextpage)">下一页</Button>
</div>
</template>
<script>
export default {
data() {
return {
//自主分页
total: 0,//商品总数
curpage: 1,//当前页
all: 0,//总页数
lastpage: 0,//上一页
nextpage: 0,//下一页
size: 2,//每页显示多少
//商品列表
goodlist: '',
mounted() {
//调用自主分请求
this.getdata(1);
},
methods: {
//自主分页接口
getdata: function (mypage) {
this.axios.get('http://localhost:8000/goodlist/', {
params: {
page: mypage,
size: this.size
}
})
.then(res => {
this.goodlist = res.data.data;
console.log(res.data.data);
//判断上一页
if (mypage == 1) {
this.lastpage = 0;
} else {
this.lastpage = mypage - 1
}
// 计算总页数   Math.ceil  向上取整
this.all = Math.ceil(res.data.total / this.size);
//判断下一页
if (mypage == this.all) {
this.nextpage = 0
} else {
this.nextpage = mypage + 1
}
});
},
}
}
</script>
<style>
</style>

<template>
......
<!--heyui分页-->
<br>
</div>
<div>
<!-- layout可以自定义控制显示那些组件和顺序.-->
<Pagination v-model="pagination" @change="change" layout="sizes,pager,jumper" align="center">
</Pagination>
</template>
<script>
export default {
data() {
return {
//分页器变量
pagination: {
page: 1,
size: 3,
total: 5
},
//商品列表
goodlist: '',
},
mounted() {
//请求商品接口返回数据
this.axios.get('http://localhost:8000/goodlist/', {params: {page: 1, size: 3}})
.then(res => {
this.goodlist = res.data.data;
console.log(res.data.data)
});
},
methods: {
//分页器事件
change: function () {
//二次请求
this.axios.get('http://localhost:8000/goodlist/', {
params: {
page: this.pagination.page,
size: this.pagination.size
}
})
.then(res => {
this.goodlist = res.data.data;
console.log(res.data.data)
});
},
}
}
</script>
<style>
</style>