编辑“︁Django与Vue.js集成”︁（章节）

= Django与Vue.js集成 =

== 介绍 ==
Django是一个强大的Python后端框架，而Vue.js是一个灵活的前端JavaScript框架。将两者集成可以构建现代化的全栈Web应用，其中Django负责数据处理和业务逻辑，Vue.js则管理用户界面和交互。这种架构被称为"前后端分离"，具有以下优势：
* 开发效率高（前后端可并行开发）
* 用户体验流畅（单页应用特性）
* 可维护性强（关注点分离）

== 集成方式 ==
Django与Vue.js主要有三种集成方式：

=== 1. 完全分离架构 ===
前端和后端作为独立项目部署，通过API通信：
<mermaid>
graph LR
    A[Vue.js 前端] -->|API调用| B[Django 后端]
</mermaid>

=== 2. Django模板集成 ===
Vue.js作为Django模板的一部分：
<mermaid>
graph TB
    subgraph Django项目
        A[Django模板] --> B[Vue.js组件]
    end
</mermaid>

=== 3. Django REST框架+Vue.js ===
最常用的方式，Django作为API提供者：
<mermaid>
graph LR
    A[Vue.js SPA] -->|REST API| B[Django REST Framework]
    B --> C[数据库]
</mermaid>

== 详细实现 ==

=== 设置Django REST框架 ===
首先安装必要包：
<syntaxhighlight lang="bash">
pip install djangorestframework django-cors-headers
</syntaxhighlight>

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

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True  # 开发时使用，生产环境应限制
</syntaxhighlight>

创建简单API示例：
<syntaxhighlight lang="python">
# serializers.py
from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = '__all__'

# views.py
from rest_framework import viewsets
from .models import Task
from .serializers import TaskSerializer

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer

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

router = DefaultRouter()
router.register(r'tasks', TaskViewSet)
</syntaxhighlight>

=== 创建Vue.js项目 ===
使用Vue CLI创建项目：
<syntaxhighlight lang="bash">
vue create django-vue-frontend
cd django-vue-frontend
npm install axios vue-router
</syntaxhighlight>

配置API调用（src/services/api.js）：
<syntaxhighlight lang="javascript">
import axios from 'axios'

const apiClient = axios.create({
    baseURL: 'http://localhost:8000/api',
    withCredentials: false,
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
})

export default {
    getTasks() {
        return apiClient.get('/tasks/')
    },
    createTask(task) {
        return apiClient.post('/tasks/', task)
    }
}
</syntaxhighlight>

=== 组件示例 ===
任务列表组件（src/components/TaskList.vue）：
<syntaxhighlight lang="html">
<template>
  <div>
    <h2>任务列表</h2>
    <div v-for="task in tasks" :key="task.id">
      {{ task.title }} - {{ task.completed ? '完成' : '未完成' }}
    </div>
  </div>
</template>

<script>
import api from '@/services/api'

export default {
  data() {
    return {
      tasks: []
    }
  },
  async created() {
    try {
      const response = await api.getTasks()
      this.tasks = response.data
    } catch (error) {
      console.error(error)
    }
  }
}
</script>
</syntaxhighlight>

== 部署考虑 ==
部署时需要考虑以下配置：

{| class="wikitable"
|-
! 环境 !! Django配置 !! Vue配置
|-
| 开发 || DEBUG=True<br>ALLOWED_HOSTS=['*'] || vue.config.js设置代理
|-
| 生产 || DEBUG=False<br>设置精确的ALLOWED_HOSTS || 构建静态文件并配置Nginx/Apache
|}

== 实际案例 ==
'''任务管理系统'''
* 后端：Django处理任务CRUD操作和用户认证
* 前端：Vue.js构建交互式界面
* 通信：REST API（JSON格式）

数据流示例：
<mermaid>
sequenceDiagram
    Vue前端->>+Django后端: GET /api/tasks/
    Django后端->>+数据库: 查询任务
    数据库-->>-Django后端: 返回数据
    Django后端-->>-Vue前端: JSON响应
    Vue前端->>用户: 渲染任务列表
</mermaid>

== 常见问题 ==
'''1. 跨域问题（CORS）'''
解决方案：使用django-cors-headers中间件

'''2. CSRF保护'''
Vue.js需要发送CSRF令牌：
<syntaxhighlight lang="javascript">
// 从cookie获取CSRF令牌
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// 设置axios默认headers
axios.defaults.headers.common['X-CSRFToken'] = getCookie('csrftoken');
</syntaxhighlight>

'''3. 静态文件处理'''
生产环境建议：
* Django的collectstatic收集Vue构建的静态文件
* 或单独部署Vue项目

== 性能优化 ==
* 使用Django的<code>select_related</code>和<code>prefetch_related</code>优化查询
* Vue.js的懒加载路由
* 启用Django缓存
* 使用Vue的<code>v-once</code>和<code>v-memo</code>指令减少渲染

== 进阶主题 ==
* JWT认证集成
* WebSocket实时通信（Django Channels + Vue）
* 服务端渲染（SSR）考虑
* 微前端架构

== 总结 ==
Django与Vue.js集成提供了强大的全栈开发能力。关键点包括：
* 清晰的API设计
* 正确处理跨域和认证
* 开发和生产环境的不同配置
* 性能优化策略

通过这种架构，开发者可以充分利用两个框架的优势，构建现代化、高效的Web应用。

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