前后端分离实现分页

后端

第一步导包

将使用的方法导入到视图中

from rest_framework.views import APIView
from rest_framework.response import Response
#将模型类导入
from myapp.models import *
#导入分页的方法
from django.core.paginator import Paginator

然后写视图即可

    def get(self,request):
        # 获取对应模型类的所有的数据
        books = Books.objects.all()
        # 一页展示多少条数据
        size = request.query_params.get("sizes")
        # 将总共的数据长度和一页展示的数据数量进行对比
        if int(books.count()) <= int(size):
            # 如果总共的数据长度小于或等于一页展示数据的数量那么就让页数为1
            current = 1
        else:
            # 否则的话就获取前端传过来的对应的页数
            current = request.query_params.get("current")
        #     打印一下前端传的数据  查看是否可以接收到
        print("11111111",size,current)
        # 利用len获取数据的长度
        total = len(books)
        # 将数据进行分页
        pagesize = Paginator(books,size)
        # 获取第几页的数据
        page = pagesize.page(current)
        # 获取数据
        data = page.object_list
        #对data进行序列化操作
        temp = []
        for i in data:
            temp.append({
                "id":i.id,
                "even":i.even,
                "title":i.title,
            })
        #将用到的数据使用Response返回给前端
        return Response({
            "code":200,
            "msg":"加载成功",
            "data":temp,
            'total':total
        })

前端

先将分页的样式写出来(参考element-ui官网)

            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=currentPage
            :page-sizes="[2,4,5,10]"
            :page-size=sizes
            layout="total,sizes,prev, pager, next,jumper"
            :total="total">
            </el-pagination>

然后在方法中写具体的功能

        handleSizeChange(val){
        this.sizes = val
        Axios.get('http://127.0.0.1:8000/books/',{
            params:{
               #将每页展示多少条数据传给后端
                sizes:this.sizes,
                #显示第几页
                current:this.currentPage
            }
        })
        .then((resp)=>{
            console.log(resp)
            #将获取到的数据赋值给提前定义好的存储当前页数据的变量
            this.lst = resp.data.data
        })
        .catch((err)=>{
            console.log(err)
        })
      },
        #同上
      handleCurrentChange(val){
        this.currentPage = val
        Axios.get('http://127.0.0.1:8000/books/',{
            params:{
                sizes:this.sizes,
                current:this.currentPage
            }
        })
        .then((resp)=>{
            console.log(resp)
            this.lst = resp.data.data
        })
        .catch((err)=>{
            console.log(err)
        })
      },
        #触发方法后获取数据  并获取到总共有多少条数据
      show(){
            Axios.get('http://127.0.0.1:8000/books/',{
                params:{
                sizes:this.sizes,
                current:this.currentPage
                }
            })
            .then((resp)=>{
                console.log(resp)
                this.lst = resp.data.data
                this.total = resp.data.total
            })
            .catch((err)=>{
                console.log(err)
            })
        }