编辑“︁Django REST与前端框架”︁（章节）

== Django REST与前端框架 ==

'''Django REST与前端框架'''是指使用Django REST框架（DRF）作为后端API服务，与前端框架（如React、Vue或Angular）进行集成的开发模式。这种架构实现了前后端分离，允许开发者独立开发和维护前后端代码。

=== 核心概念 ===

现代Web开发通常采用前后端分离架构，其中：
* '''后端（Django REST）'''：负责数据处理、业务逻辑和API接口
* '''前端框架'''：负责用户界面和交互逻辑

这种分离带来了以下优势：
* 开发团队可以并行工作
* 更好的可维护性和可扩展性
* 支持多平台（Web、移动应用等）共享同一API

=== 基本工作流程 ===

<mermaid>
graph LR
    A[前端框架] -->|HTTP请求| B[Django REST API]
    B -->|JSON响应| A
</mermaid>

=== Django REST框架配置 ===

首先需要安装和配置DRF：

<syntaxhighlight lang="python">
# settings.py
INSTALLED_APPS = [
    ...
    'rest_framework',
]

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.IsAuthenticatedOrReadOnly',
    ],
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.TokenAuthentication',
    ]
}
</syntaxhighlight>

=== 创建API端点 ===

下面是一个简单的博客文章API示例：

<syntaxhighlight lang="python">
# serializers.py
from rest_framework import serializers
from .models import Post

class PostSerializer(serializers.ModelSerializer):
    class Meta:
        model = Post
        fields = ['id', 'title', 'content', 'created_at']

# views.py
from rest_framework import viewsets
from .models import Post
from .serializers import PostSerializer

class PostViewSet(viewsets.ModelViewSet):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

# urls.py
from rest_framework.routers import DefaultRouter
from .views import PostViewSet

router = DefaultRouter()
router.register(r'posts', PostViewSet)

urlpatterns = router.urls
</syntaxhighlight>

=== 前端集成示例 ===

以下是使用React与Django REST API交互的示例：

<syntaxhighlight lang="javascript">
// React组件示例
import React, { useState, useEffect } from 'react';

function PostList() {
    const [posts, setPosts] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch('/api/posts/')
            .then(response => response.json())
            .then(data => {
                setPosts(data);
                setLoading(false);
            });
    }, []);

    if (loading) return <div>Loading...</div>;

    return (
        <ul>
            {posts.map(post => (
                <li key={post.id}>
                    <h3>{post.title}</h3>
                    <p>{post.content}</p>
                </li>
            ))}
        </ul>
    );
}
</syntaxhighlight>

=== 认证与安全 ===

前后端分离架构需要考虑认证机制，常见方法包括：

1. '''Token认证'''：
<syntaxhighlight lang="python">
# 获取Token
from rest_framework.authtoken.views import ObtainAuthToken
from rest_framework.authtoken.models import Token

class CustomAuthToken(ObtainAuthToken):
    def post(self, request, *args, **kwargs):
        serializer = self.serializer_class(data=request.data,
                                       context={'request': request})
        serializer.is_valid(raise_exception=True)
        user = serializer.validated_data['user']
        token, created = Token.objects.get_or_create(user=user)
        return Response({
            'token': token.key,
            'user_id': user.pk,
            'email': user.email
        })
</syntaxhighlight>

2. '''JWT认证'''：
安装djangorestframework-simplejwt包后配置：
<syntaxhighlight lang="python">
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ],
}
</syntaxhighlight>

=== 跨域资源共享(CORS) ===

由于前后端通常运行在不同端口，需要配置CORS：

<syntaxhighlight lang="python">
# 安装django-cors-headers
# settings.py
INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',  # React开发服务器
]
</syntaxhighlight>

=== 性能优化 ===

1. '''分页'''：
<syntaxhighlight lang="python">
class PostViewSet(viewsets.ModelViewSet):
    queryset = Post.objects.all()
    serializer_class = PostSerializer
    pagination_class = PageNumberPagination
    page_size = 10
</syntaxhighlight>

2. '''查询优化'''：
使用select_related和prefetch_related减少数据库查询

=== 实际应用案例 ===

'''电子商务平台架构'''：
<mermaid>
graph TB
    subgraph 前端
        A[React - 产品列表] --> B[React - 购物车]
        B --> C[React - 结账页面]
    end
    subgraph 后端
        D[Django REST - 产品API]
        E[Django REST - 订单API]
        F[Django REST - 支付API]
    end
    A --> D
    B --> E
    C --> F
</mermaid>

=== 最佳实践 ===

1. API版本控制
2. 全面的文档（使用Swagger或Redoc）
3. 适当的错误处理
4. 输入验证
5. 速率限制

=== 常见问题与解决方案 ===

{| class="wikitable"
|-
! 问题 !! 解决方案
|-
| 跨域请求被阻止 || 正确配置CORS
|-
| 认证失败 || 检查认证头是否正确发送
|-
| 性能低下 || 实现分页和查询优化
|-
| 数据不一致 || 使用乐观或悲观锁定策略
|}

=== 进阶主题 ===

1. '''GraphQL集成'''：使用Graphene-Django
2. '''实时应用'''：结合WebSockets
3. '''服务端渲染'''：Next.js与Django集成
4. '''微服务架构'''：将Django REST作为服务之一

=== 总结 ===

Django REST与前端框架的集成为现代Web开发提供了灵活、高效的解决方案。通过清晰的API设计和适当的安全措施，开发者可以构建可扩展、高性能的应用程序。这种架构模式特别适合需要支持多种客户端或计划长期维护的项目。

[[Category:后端框架]]
[[Category:Django]]
[[Category:Django与前端集成]]