Django 分页 & Vue父子组件 实现

运用 Django 的 Paginator 实现 分页、传递给 Vue 父子组件展示。
首先创建 Django 项目

# 终端
django-admin startproject FatherEPC

cd FatherEPC

python manage.py startproject SonEPC

然后在 子应用的 settings 里 解决跨域

# settings
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'sonfile',
    'corsheaders',
    'rest_framework',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True

MIDDLEWARE 向我这样的 配置顺序来 配置
然后 在 子应用 的 models 随意的创建一张表 然后 终端 数据库迁移

# models.py

class User(models.Model):
    name = models.CharField(max_length=30, verbose_name='name')
	
	def __str__(self):
		return self.name

这里默认使用的是 Django 的 sqlite3

# 终端

python manage.py makemigrations

python manage.py migrate

为了省事 在 sqlite3 手动添加数据

添加后，点击 DB 保存一下 数据就存在了。
然后写视图层， 先注册路由

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('sonfile.urls)),

]

在注册子路由

from django.urls import path, include
from sonfile import views

urlpatterns = [
    path('index/', views.Index.as_view()),
]

写 视图层， 引入 需要的资源 Paginator 分页器，Serializer 序列化器，Response 返回响应。
先 在数据库 把 所有数据 拿出来以供使用，然后先定义好一个序列化器（反正代码少）

# views.py
from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework <