Django展示数据时的分页写法与操作

直接上代码吧
views视图

from django.core.paginator import Paginator
class GoodsAPIView(APIView):
 # 查询数据
 def get(self, request):
 # 0. 接收 前端 cate_id
 id = request.GET.get('cate_id')
 # 0. 接收 前端 page⻚码
 p_num = request.GET.get('page',1)
 print(id,p_num) # 分类id 3
 # 1. 查询cate_id对应的数据
 goods = Goods.objects.filter(cate_id=id) # cate_id=13
 # 使⽤Django下内置组件 分⻚器
 # 参数⼀：参与分⻚管理的所有数据对象；参数⼆：设定每⻚显示条⽬数量
 pg = Paginator(goods,3) # 每⻚显示3条数据
 pag = pg.page(p_num) # 当前⻚对象 第⼆⻚对象
 # print(pag) # <Page 1 of 3>
 # print(pg.count) # 总数据数量 7
 # print(pg.num_pages) # 总⻚数 3
 # 2. 序列化处理
 ser = GoodsModelSerializer(pag.object_list, many=True)
 # 3. 返回响应
 return Response({
 'data': ser.data,
 'count': pg.count, # 总数量
 'pages': pg.num_pages # 总⻚数
 }, status=200)

vue页面

<template>
 <div>
 <h2>展示商品</h2>
 <table>
 <tr>
 <td>编号</td>
 <td>名称</td>
 <td>单价</td>
 <td>分类</td>
 </tr>
 <tr v-for="data in datas">
 <td>{{ data.id }}</td>
 <td>{{ data.name }}</td>
 <td>{{ data.price }}</td>
 <td>{{ data.c }}</td>
 </tr>
 </table>
 <h2>{{ pages }}</h2>
 <h2>{{ count }}</h2>
 <button>上⼀⻚</button>
 <!-- 展示分⻚序号-->
 <button v-for="i in pages" @click="get_goods(i)">{{ i }}</button>
 <button>下⼀⻚</button>
 </div>
</template> <script>
export default {
 name: "ShowGoods",
 data() {
 return {
 id: this.$route.query.id,
 datas: [],
 count: '',
 pages: ''
 }
 },
 mounted() {
 this.get_goods()
 },
 methods: {
 get_goods(i) {
 console.log(i);
 if (i === undefined) {
 i = 1
 }
 this.$axios.get('categoods/goods/?cate_id=' + this.id + '&page=' + i)
 .then(response => {
 console.log(response.data)
 this.datas = response.data.data
 this.count = response.data.count
 this.pages = response.data.pages
 })
 }
 }
}
</script> <style scoped>
</style>