编辑“︁Django SPA开发”︁（章节）

= Django SPA开发 =

'''Django SPA开发'''（Single-Page Application Development with Django）是指利用Django作为后端框架，结合现代前端框架（如React、Vue或Angular）构建单页应用（SPA）的开发模式。SPA是一种Web应用架构，用户通过动态加载内容与页面交互，而无需重新加载整个页面。Django提供RESTful API（通常通过Django REST framework）与前端通信，实现数据交互和业务逻辑处理。

== 介绍 ==

单页应用（SPA）的核心特点是：
* 页面初始加载后，后续交互通过AJAX或Fetch API动态更新内容。
* 前端负责路由和视图渲染，后端仅提供数据接口。
* 用户体验接近原生应用，减少页面刷新延迟。

Django在SPA开发中的角色：
* 作为API服务器，提供数据序列化（如JSON）和身份验证（如JWT）。
* 处理数据库操作、业务逻辑和安全性。
* 可选择性服务前端静态文件（开发阶段）或完全分离（生产环境）。

== 架构设计 ==

典型的Django SPA架构分为两层：
1. '''后端（Django）'''：提供REST API。
2. '''前端（如React）'''：处理UI和用户交互。

<mermaid>
graph LR
    A[用户] -->|请求| B(前端框架)
    B -->|API调用| C[Django后端]
    C -->|JSON响应| B
    B -->|渲染| A
</mermaid>

== 实现步骤 ==

=== 1. 设置Django后端API ===

安装Django REST framework：
<syntaxhighlight lang="bash">
pip install djangorestframework
</syntaxhighlight>

配置`settings.py`：
<syntaxhighlight lang="python">
INSTALLED_APPS = [
    ...
    'rest_framework',
]
</syntaxhighlight>

创建API视图示例：
<syntaxhighlight lang="python">
# api/views.py
from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def hello_world(request):
    return Response({"message": "Hello, SPA World!"})
</syntaxhighlight>

=== 2. 前端集成 ===

以React为例，使用`fetch`调用Django API：
<syntaxhighlight lang="javascript">
// React组件示例
import React, { useEffect, useState } from 'react';

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('/api/hello-world/')
      .then(response => response.json())
      .then(data => setMessage(data.message));
  }, []);

  return <h1>{message}</h1>;
}
</syntaxhighlight>

=== 3. 跨域问题处理 ===

开发时前端可能运行在不同端口（如React默认3000），需配置Django的CORS：
<syntaxhighlight lang="bash">
pip install django-cors-headers
</syntaxhighlight>

修改`settings.py`：
<syntaxhighlight lang="python">
INSTALLED_APPS += ['corsheaders']
MIDDLEWARE.insert(0, 'corsheaders.middleware.CorsMiddleware')
CORS_ALLOWED_ORIGINS = ["http://localhost:3000"]
</syntaxhighlight>

== 实际案例：任务管理SPA ==

=== 后端模型与序列化 ===
<syntaxhighlight lang="python">
# models.py
class Task(models.Model):
    title = models.CharField(max_length=200)
    completed = models.BooleanField(default=False)

# serializers.py
from rest_framework import serializers
class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = '__all__'
</syntaxhighlight>

=== 前端任务列表 ===
<syntaxhighlight lang="javascript">
// React组件
function TaskList() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    fetch('/api/tasks/')
      .then(res => res.json())
      .then(data => setTasks(data));
  }, []);

  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
}
</syntaxhighlight>

== 高级主题 ==

=== 认证（JWT） ===
Django REST framework支持JWT认证：
<syntaxhighlight lang="python">
# settings.py
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ]
}
</syntaxhighlight>

前端存储token示例：
<syntaxhighlight lang="javascript">
localStorage.setItem('token', 'your.jwt.token');
fetch('/api/protected/', {
  headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
});
</syntaxhighlight>

=== 性能优化 ===
* 使用Django的`select_related`和`prefetch_related`减少数据库查询。
* 前端实现懒加载和代码分割。

== 数学表达 ==

API响应时间模型（简化）：
<math>
T_{response} = T_{network} + T_{server} + T_{serialization}
</math>

其中：
* <math>T_{network}</math> 为网络延迟
* <math>T_{server}</math> 为Django处理时间
* <math>T_{serialization}</math> 为数据序列化时间

== 总结 ==

Django SPA开发结合了Django的稳健后端和现代前端框架的交互能力，适合构建复杂的企业级应用。关键点包括：
* 清晰的API设计
* 前后端分离部署
* 安全认证机制
* 性能优化策略

初学者应从简单API开始，逐步集成前端框架，最终实现完整的SPA工作流。

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