Django对接Vue怎么操作？

Django对接Vue.js全流程指南：从零搭建前后端分离项目

目录导读

1. Django与Vue.js为什么要对接？
2. 项目初始化与目录结构设计
3. Django REST Framework搭建API
4. Vue.js前端项目配置与代理
5. 跨域问题解决（CORS）
6. 前后端联调实战
7. Q&A常见问题解答

---

Django与Vue.js为什么要对接？

核心场景：当企业需要构建一个现代Web应用时，Django负责后端数据管理与业务逻辑（如用户认证、数据库操作），Vue.js负责前端交互与界面渲染，这种前后端分离架构实现了职责清晰、并行开发、部署灵活等优势。

典型痛点：传统Django模板渲染方式在复杂交互场景下显得笨重，而Vue.js的组件化、响应式数据绑定能显著提升用户体验，两者结合通过RESTful API通信，成为目前主流的技术栈之一。

搜索引擎SEO提示：你可能会发现许多教程提到"Django+Vue前后端分离"，但实际开发中如何配置代理、解决跨域、统一部署才是关键。

---

项目初始化与目录结构设计

后端Django项目搭建

# 创建虚拟环境
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
# 安装必要包
pip install django djangorestframework django-cors-headers
# 创建项目
django-admin startproject backend
cd backend
python manage.py startapp api

前端Vue项目搭建（使用Vite）

npm create vite@latest frontend -- --template vue
cd frontend
npm install axios vue-router@4

推荐目录结构

project/
├── backend/               # Django项目
│   ├── api/              # API应用
│   ├── backend/          # 项目配置
│   └── manage.py
└── frontend/             # Vue项目
    ├── src/
    │   ├── components/   # 组件
    │   ├── views/        # 页面
    │   ├── api/          # 封装axios请求
    │   └── router/       # 路由
    └── package.json

---

Django REST Framework搭建API

先在settings.py中注册应用：

INSTALLED_APPS = [
    'rest_framework',
    'corsheaders',
    'api',
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # 放最前面
]

创建简单的数据模型与序列化器（api/models.py）：

from django.db import models
class Article(models.Model):= models.CharField(max_length=100)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

序列化器（api/serializers.py）：

from rest_framework import serializers
from .models import Article
class ArticleSerializer(serializers.ModelSerializer):
    class Meta:
        model = Article
        fields = '__all__'

视图集（api/views.py）：

from rest_framework import viewsets
from .models import Article
from .serializers import ArticleSerializer
class ArticleViewSet(viewsets.ModelViewSet):
    queryset = Article.objects.all()
    serializer_class = ArticleSerializer

路由配置（backend/urls.py）：

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from api.views import ArticleViewSet
router = DefaultRouter()
router.register('articles', ArticleViewSet)
urlpatterns = [
    path('api/', include(router.urls)),
]

运行迁移：

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

此时访问 http://127.0.0.1:8000/api/articles/ 即可看到API数据。

---

Vue.js前端项目配置与代理

安装axios并封装请求（src/api/index.js）：

import axios from 'axios'
const api = axios.create({
  baseURL: 'http://127.0.0.1:8000/api/',
  timeout: 5000,
})
export default api

Vite代理配置（vite.config.js）：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,
      }
    }
  }
})

前端调用示例（src/views/Home.vue）：

<script setup>
import { ref, onMounted } from 'vue'
import api from '../api'
const articles = ref([])
onMounted(async () => {
  const res = await api.get('/articles/')
  articles.value = res.data
})
</script>
<template>
  <div v-for="article in articles" :key="article.id">
    <h3>{{ article.title }}</h3>
    <p>{{ article.content }}</p>
  </div>
</template>

---

跨域问题解决（CORS）

后端配置（推荐）
在settings.py中添加：

CORS_ALLOW_ALL_ORIGINS = True  # 开发阶段允许所有域名
CORS_ALLOW_CREDENTIALS = True

代理转发
如果使用Vite代理（上文已配置），可以直接删除前端baseURL中的域名部分，改为：

const api = axios.create({
  baseURL: '/api/',  // 相对路径，代理会自动转发
})

这样开发环境下不会出现跨域问题；生产环境通过Nginx统一反向代理解决。

SEO提示：很多新手会忘记配置corsheaders中间件顺序，注意CorsMiddleware必须在CommonMiddleware之前。

---

前后端联调实战

步骤1：启动后端

cd backend
python manage.py runserver 0.0.0.0:8000

步骤2：启动前端

cd frontend
npm run dev

步骤3：测试接口

• 打开浏览器访问 http://localhost:5173（Vite默认端口）
• Vue页面应成功通过代理获取后端数据
• 使用http://127.0.0.1:8000/api/articles/直接访问API验证

生产环境部署关键点

1. Django收集静态文件：python manage.py collectstatic

2. Vue构建：npm run build，输出到dist文件夹

3. Nginx配置：

   server {
    listen 80;
    server_name your-domain.com;
    location /api/ {
        proxy_pass http://127.0.0.1:8000;
    }
    location / {
        root /path/to/frontend/dist;
        try_files $uri $uri/ /index.html;
    }
   }

---

Q&A常见问题解答

Q1：为什么我的Vue请求报错404？
A：检查代理是否配置正确，在vite.config.js中确保target指向Django服务器地址，且API路径前缀匹配（如/api）。

Q2：Django的CSRF验证怎么处理？
A：前后端分离建议使用JWT认证，或者配置REST_FRAMEWORK中的DEFAULT_AUTHENTICATION_CLASSES绕过CSRF，示例：

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
    ]
}

Q3：部署后如何合并前后端？
A：将Vue构建后的dist文件夹整个复制到Django的static目录下，并修改Django的settings.py中的STATICFILES_DIRS指向该目录，同时配置一个全匹配的路由返回index.html，但更推荐使用Nginx做反向代理分离前后端。

Q4：数据请求失败提示跨域？
A：先检查后端是否开启CORS（django-cors-headers已配置），再确认请求URL是否写对了（开发环境使用代理时不要写绝对域名）。

---

通过以上步骤,你已经掌握了Django对接Vue.js的核心操作。前端控制展示，后端专注数据，实际开发中可引入JWT认证、权限控制、状态管理（Pinia）等高级功能，建议先从一个小型todo应用开始实践，逐步理解前后端协作模式。

最终建议：不同版本的Django/Vue可能存在细微差异，请始终以官方文档为基准；遇到问题优先查看浏览器控制台错误信息，其次搜索StackOverflow。

标签： RESTful接口