自写分页、无须任何分页插件

后端 用Django写的

View.py 视图

from django.shortcuts import render  # 渲染django模板
from .models import *			# 导入表
from rest_framework.views import APIView   # 导入休息框架   接口框架
from rest_framework.response import Response	# 接收字典数据
from rest_framework.serializers import Serializer,ModelSerializer  # 烦啊序列化

"""PageNotAnInteger   报错页码不是整型"""
"""EmptyPage  报错页码为空 """
from django.core.paginator import Paginator,PageNotAnInteger,EmptyPage # 导入django'自带的分页模块

"""
数据反序列化

序列化 负责添加数据
反序列化 负责查询数据
"""
class BooksModelSerializer(ModelSerializer):
    class Meta:
        model = Books   # 绑定表
        fields = '__all__'  # 查询字段为全部

class BooksList(APIView):   # 定义一个类  继承rest_framework
    def get(self,request):  # get请求    常见请求分为  get 和 post请求
        mes = {}   # 定义一个空字典
        """获取传递的页码"""
        page_num = request.query_params.get('page_num') 
        print(page_num)
        """判断页码不存在"""
        if not page_num:
            page_num = 1  #  默认为第一页
        """查询全部书籍"""
        books = Books.objects.all()

        """ 在数据中 每页显示几条数据 """
        p = Paginator(books,3)

        try:
            """ 通过页码显示  数据 """
            books_data = p.get_page(page_num)
        except PageNotAnInteger:  # 当传递的页码不是一个整型时   默认为第一页数据
            books_data = p.get_page(1)
        except EmptyPage:   # 当传递的页码为空时  默认为第一页数据
            books_data = p.get_page(1)

        b = BooksModelSerializer(books_data,many=True)   # 返序列化  将数据转为json类型数据   因为每个语言之间只有json类型数据是公认的 
        return Response({  # 返回跨域的数据
            'code' : 200,  # 状态码 
            'bookslist' : b.data,   # 数据
            'num_pages' : p.num_pages,   # 最大页码
            'page_range' : list(p.page_range),  # 分了多少页 一共有多少页
            'message' : '成功'   # 不懂的人  也知道只是成功了
        })

settings.py 配置

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'project',   # 子文件  
    'rest_framework'  # 导入rest_framework   需要告诉django配置  我要用这个框架
]

models.py 模型

from django.db import models   # 在django中导入模型模块


class Books(models.Model):
    name = models.CharField(max_length=100)   # 书名字段
    class Meta:
        db_table = 'books'   # 在数据库中显示为books

路由我就不写了 太easy了

前端 随便用个VUE前端框架吧

首先你要导入axios
在config文件夹中的 index.js文件中 选择跨域的地址

proxyTable: {
            '/api': { // 使用'/api'来代替'http://f.apiplus.c'
                target: 'http://127.0.0.1:8001/', // 源地址
                changeOrigin: true, // 改变源
                pathRewrite: {
                    '^/api': '' // 路径重写
                }
            }
        },

在src文件夹中的main.js文件中定义axios

import axios from 'axios'

Vue.prototype.axios = axios // 全局注册

<template>
  <div id="list">
     <h1>第{{ page_num }}页</h1>   <!-- 页码  显示第几页 -->
    <li v-for="i in bookslist">{{i.name}}</li>    <!-- 循环分页的数据 -->
    <button @click="sub_page_num">上一页</button>    <!-- 当点击按钮  执行点击事件  将页码减一 -->
    <button v-for="num in page_range" @click="change(num)">{{num}}</button>   <!-- 显示一共有多少页 -->
    <button @click="add_page_num">下一页</button>   <!-- 当点击按钮  执行点击事件  将页码减一 -->
  </div>
</template>
<script>
export default {
  name : 'list',
  data(){
    return{
      page_num : 1,   // 页码 为1   默认显示第一页   也就是进入页面显示为第一页
      num_pages : 0,   // 最大页码   意思就是最后的页数
      page_range : [],   // 一共有多少页   意思就是每页显示多少数据  一共几页能全部显示  1,2,3,4
      bookslist : []   // 被分页的数据
    }
  },
  mounted(){   // 钩子函数   已进入页面就自动请求服务端   VUE为客户端  Django为服务端
    this.axios.get('/api/index/').then(res=>{   // 跨域连接Django
      console.log(res)   // 打印Django返回的数据
      this.num_pages = res.data.num_pages   // 将最大值赋值
      this.page_range = res.data.page_range  // 将共有页码赋值
      this.bookslist = res.data.bookslist   // 将被分页数据赋值
    })
  },
  methods:{   // 点击事件
    sub_page_num(){   // 上一页
      if(this.page_num == 1){  // 判断页码为1时   证明了已经是最起始的页面
        return                 //  直接返回   也就是不做任何操作
      }
      this.page_num -= 1     //  否则的话  也就是不是第1页  就让他页码减1
      this.axios.get('/api/index/?page_num='+this.page_num).then(res=>{  // 并传递给服务端端   服务端通过传递的页码返回对应页的数据
      console.log(res)
      this.num_pages = res.data.num_pages
      this.page_range = res.data.page_range
      this.bookslist = res.data.bookslist
    })
    },
    add_page_num(){  // 下一页
      if(this.page_num == this.num_pages){   // 判断页码为最大页的时候 证明了 是最后一页了  数据已经展示完了
        return   // 直接返回   不做任何操作
      }
      this.page_num += 1   // 否则  也就是不是最后一页  后面还有数据  就让他页码加1
      this.axios.get('/api/index/?page_num='+this.page_num).then(res=>{  // 并传递给服务端  服务端通过页码返回数据
      console.log(res)
      this.num_pages = res.data.num_pages
      this.page_range = res.data.page_range
      this.bookslist = res.data.bookslist
    })
    },
    change(num){    // 循环出来的页码  也就是上一页 和下一页  中间的  1,2,3,4,页
      this.axios.get('/api/index/?page_num='+num).then(res=>{   // 通过传递的 页码  来传递给服务端  获取数据
      console.log(res)
      this.page_num = num
      this.num_pages = res.data.num_pages
      this.page_range = res.data.page_range
      this.bookslist = res.data.bookslist
    })
    }
  }
}
</script>