编辑“︁Django与前端分离架构”︁

{{DISPLAYTITLE:Django与前端分离架构}}

== 概述 ==
'''Django与前端分离架构'''（Frontend-Backend Separation）是一种现代Web开发模式，将后端（Django）与前端（如React、Vue或Angular）解耦，通过API（通常是RESTful或GraphQL）进行通信。这种架构的核心思想是让前后端独立开发、部署和维护，从而提高开发效率和可扩展性。

=== 主要特点 ===
* '''职责分离'''：后端专注于数据处理和业务逻辑，前端负责用户界面和交互。
* '''技术栈自由'''：前端可使用任意框架（如React/Vue），后端只需提供标准化API。
* '''并行开发'''：前后端团队可同时工作，只需约定API接口。
* '''性能优化'''：前端可单独实现懒加载、SSR等优化策略。

== 架构对比 ==
=== 传统Django架构 ===
传统Django使用MTV（Model-Template-View）模式，模板（HTML）由后端渲染：

<mermaid>
graph LR
    A[浏览器] -->|请求页面| B[Django]
    B -->|渲染HTML| A
</mermaid>

=== 分离架构 ===
前后端完全独立，通过JSON API交互：

<mermaid>
graph LR
    A[前端应用] -->|HTTP请求| B[Django API]
    B -->|JSON响应| A
    C[静态服务器] -->|托管JS/CSS| A
</mermaid>

== 实现方式 ==
=== 1. Django REST Framework (DRF) ===
DRF是Django生态中实现API的标准化工具。

==== 示例：创建API端点 ====
<syntaxhighlight lang="python">
# serializers.py
from rest_framework import serializers
from .models import Article

class ArticleSerializer(serializers.ModelSerializer):
    class Meta:
        model = Article
        fields = ['id', 'title', 'content']

# views.py
from rest_framework import generics
from .models import Article
from .serializers import ArticleSerializer

class ArticleList(generics.ListCreateAPIView):
    queryset = Article.objects.all()
    serializer_class = ArticleSerializer
</syntaxhighlight>

=== 2. 前端调用示例 ===
使用JavaScript（以Fetch API为例）：

<syntaxhighlight lang="javascript">
fetch('http://api.example.com/articles/')
  .then(response => response.json())
  .then(data => {
    console.log(data); // 输出: [{id: 1, title: "...", content: "..."}]
  });
</syntaxhighlight>

== 数据流分析 ==
完整交互流程的数学表达：

<math>
\begin{cases}
\text{前端} & \xrightarrow{HTTP\ GET/POST} \text{Django API} \\
\text{Django API} & \xrightarrow{JSON} \text{前端} \\
\text{验证} & \xrightarrow{JWT/OAuth} \text{状态管理}
\end{cases}
</math>

== 实际案例 ==
=== 案例：博客平台 ===
* '''后端'''：Django提供文章CRUD API
* '''前端'''：React实现动态页面
* '''通信'''：使用Axios库发送请求

==== 关键代码片段 ====
<syntaxhighlight lang="javascript">
// React组件获取数据
useEffect(() => {
  axios.get('/api/articles/')
    .then(res => setArticles(res.data));
}, []);
</syntaxhighlight>

== 安全考虑 ==
* '''CORS配置'''：需在Django中允许前端域名
  <syntaxhighlight lang="python">
  # settings.py
  CORS_ALLOWED_ORIGINS = [
      "https://frontend.example.com",
  ]
  </syntaxhighlight>
* '''认证机制'''：推荐使用JWT或Session Authentication

== 性能优化 ==
* '''缓存策略'''：前端缓存API响应
* '''分页处理'''：API实现分页（DRF的PageNumberPagination）
* '''CDN部署'''：前端静态资源托管在CDN

== 进阶话题 ==
* '''GraphQL集成'''：使用Graphene-Django替代REST
* '''WebSockets'''：Django Channels实现实时通信
* '''SSR混合架构'''：Next.js与Django结合

== 常见问题 ==
{{Q&A
|问题=何时应该选择分离架构？
|答案=当项目需要：<br>1. 复杂的前端交互<br>2. 多客户端（Web/移动）共享API<br>3. 独立的前端技术演进
}}

{{Q&A
|问题=如何调试API通信？
|答案=使用工具链：<br>• Django的DRF Web界面<br>• Postman/Fetch调试<br>• 浏览器开发者工具
}}

== 总结 ==
Django与前端分离架构通过清晰的职责划分，为现代Web应用提供了灵活性和可维护性。初学者应从DRF开始实践，逐步掌握认证、性能优化等进阶技能。

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