利用切片实现django前后端分页

公式

开始：（page-1）* size
结束：page * size

[开始：结束]

views.py

# 分页展示学生
class ShowStudent(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)
        tea = Student.objects.all()[data_start:data_end]
        # 获取总条数
        count = Student.objects.count()
        ser = ShowStuSer(tea,many=True)
        return Response({
            'code': 200,
            'data': ser.data,
            'total':count
        })

show.vue

<template>
    <div>
      <table border="1">
        <tr>
          <th>学生</th>
        </tr>
        <tr v-for="item in datalist">
          <td>{{ item.name }}</td>
        </tr>
      </table>
      <div>
         <button v-show="lastpage" @click="mychange(lastpage)">上一页</button>
        <!--数字分页-->
        <button v-for="index in all" @click="mychange(index)">{{ index }}</button>
        <button v-show="nextpage" @click="mychange(nextpage)">下一页</button>
      </div>

    </div>
</template>

<script>
  import axios from 'axios'
    export default {
        data(){
          return{
            datalist:[],
            total:0,  //总条数
            cur:1,  //当前页
            all:0,  //总页数
            lastpage:0, //上一页
            nextpage:0,   //下一页
          }
        },
      mounted() {
          //调用一次自主分页
          this.mychange(1);
          axios({
            url:'http://127.0.0.1:8000/showstudent/',
            method: 'get',
          }).then(res=>{
            this.tea = res.data.data;
          })
      },
      methods:{
        //自定义分页
        mychange(page){
          this.axios({
              url:'http://127.0.0.1:8000/showstudent/',
              method:'get',
               params:{page:page,size:1}
            }).then(res=>{
                //赋值
               this.datalist = res.data.data;
               //判断上一页
              if (page == 1){
                this.lastpage = 0;
              } else{
                this.lastpage = page - 1;
              }
              //计算总页数，向上取整
              this.all = Math.ceil(res.data.total / this.cur);
              //判断下一页
              if (page == this.all){
                this.nextpage = 0;
              } else{
                this.nextpage = page + 1;
              }
            });
        },
      }
    }
</script>