Django DRF+vue3的第一个前后端小demo

1、Django DRF简介

Django REST framework（简称DRF）是一个基于Django框架的强大工具集，专为快速构建RESTful风格的API设计。它扩展了Django的核心能力，提供了一系列开箱即用的功能，帮助开发者高效处理API开发中的常见需求（如数据序列化、认证、权限控制等），而无需重复编写基础逻辑。

核心功能与特点

1. 序列化（Serializers）
   这是DRF的核心功能之一，用于将复杂数据结构（如Django模型实例、查询集）转换为JSON、XML等可传输格式（序列化），或反之（反序列化）。支持自动验证输入数据（如字段类型、长度限制），大幅简化数据处理流程。

2. 灵活的视图（Views）
   提供多种视图类（如APIView、GenericViewSet、ModelViewSet等），封装了常见的HTTP方法（GET/POST/PUT/DELETE）逻辑。例如，ModelViewSet可一键生成“增删改查”全套接口，无需手动编写重复代码。

3. 认证与权限（Authentication & Permissions）
   内置多种认证方式（如Token认证、Session认证、JWT认证等），可轻松实现用户身份验证；同时支持细粒度权限控制（如仅管理员可删除数据）。

4. 自动路由（Routers）
   通过路由器（如DefaultRouter）可自动为视图集（ViewSet）生成URL路由，无需手动配置，减少重复劳动。

5. 过滤与排序
   支持通过查询参数（如?category=book&ordering=-create_time）对返回数据进行过滤、排序，提升API灵活性。

6. 分页处理
   自动对大量数据进行分页（如每页返回20条），避免单次请求数据量过大导致的性能问题。

7. 交互式文档
   内置Swagger/ReDoc风格的交互式API文档，开发者可直接在网页上测试接口，降低对接成本。

优势

• 与Django无缝集成，复用Django的ORM、Admin等生态优势；
• 高度可定制，支持根据业务需求扩展序列化器、视图等组件；
• 简化API开发流程，减少重复代码，提高开发效率；
• 社区活跃，文档丰富，问题解决成本低。

适用场景

• 为移动应用（iOS/Android）提供后端API；
• 为前端框架（React/Vue/Angular）提供数据接口；
• 构建第三方可调用的开放API（如支付接口、数据查询接口）。

总之，Django REST framework是Django生态中构建RESTful API的首选工具，尤其适合快速开发功能完善、可维护性高的后端接口。

2、后端 (Django) 设置

2.1 安装依赖：

pip install django djangorestframework django-cors-headers

2.2. 创建项目和应用：

django-admin startproject myproject
cd myproject
python manage.py startapp tasks

2.3 配置 settings.py

在settings.py中添加必要的配置：

INSTALLED_APPS = [
    # ... 其他应用
    'rest_framework',  # 注册DRF
    'corsheaders', # 跨域
    'yourapp',  # 注册应用
]

MIDDLEWARE = [
    # ... 其他中间件
    'corsheaders.middleware.CorsMiddleware',  # 跨域中间件
    'django.middleware.common.CommonMiddleware',
]

# 允许前端域名访问
CORS_ALLOWED_ORIGINS = [
    "http://localhost:5173",  # Vue开发服务器地址
]

# DRF配置
REST_FRAMEWORK = {
   
   
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 10,
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',  # 允许所有用户访问，实际项目中需要修改
    ]
}

2.4 创建models（models.py）

from django.db import models

class People(models.Model):
    name = models.CharField(max_length=200)
    age = models.IntegerField()
    gender = models.CharField(max_length=50)  #

    def __str__(self):
        return self.name

2.5 创建序列化器 (Serializer)

在你的应用中创建serializers.py文件，这是 DRF 的核心部分之一：

from rest_framework import serializers
from .models import People

class PeopleSerializer(serializers.ModelSerializer):
    """
    People模型的序列化器
    ModelSerializer会自动根据模型创建字段
    提供了create()和update()方法，方便实现CRUD操作
    """
    class Meta:
        model = People
        fields = "__all__"  # 指定需要序列化的字段，all是全部

2.6 创建视图 (View)

from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework.decorators import api_view
from .models import People
from .serializers import PeopleSerializer

# Create your views here.

# 类视图
class PeopleView(APIView):

    def get(self, request):
        """
        Return a list of all People.
        """
        queryset = People.objects.all() # 读取值
        serializer = PeopleSerializer(queryset,many=True) # 序列化成json
        return Response(serializer.data)
    def post(self,request):
        serializer = PeopleSerializer(data=request.data)  # 反序列化对象
        serializer.is_valid(raise_exception=True)
        serializer.save()
        return Response(serializer.data)

# 函数视图测试
@api_view(['GET','POST'])
def my_view(request):
    if request.method == 'GET':
        return Response({
   
   "message": "调用了GET接口！"}) # 自动把字典转换为json
    else:
        print