当前位置：首页 > VUE

django vue实现

2026-01-12 18:01:08VUE

Django 与 Vue.js 集成实现

Django 作为后端框架，Vue.js 作为前端框架，可以通过以下方式实现集成：

前后端分离架构

Django 提供 RESTful API 接口，使用 Django REST framework 构建
Vue.js 通过 Axios 或 Fetch API 与后端交互
独立部署前端和后端项目，通过跨域请求通信

模板集成方式

Django 模板中直接引入 Vue.js
在 Django 的模板文件中加载 Vue 组件
使用 django-webpack-loader 集成 webpack 打包的 Vue 项目

具体实现步骤

后端 Django 配置 安装 Django REST framework：

pip install djangorestframework

配置 settings.py：

INSTALLED_APPS = [
    ...
    'rest_framework',
]

创建 API 视图：

django vue实现

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def api_data(request):
    data = {'message': 'Hello from Django!'}
    return Response(data)

前端 Vue.js 配置 创建 Vue 项目：

npm init vue@latest my-vue-app

安装 Axios：

npm install axios

调用 Django API：

import axios from 'axios';

axios.get('http://localhost:8000/api/data/')
  .then(response => {
    console.log(response.data);
  });

部署方案

开发环境

django vue实现

Django 运行在 8000 端口
Vue 开发服务器运行在 8080 端口
配置 CORS 允许跨域请求

生产环境

构建 Vue 项目：npm run build
将 dist 目录内容复制到 Django 的 static 目录
配置 Django 的模板渲染入口 HTML 文件

常见问题解决

跨域问题 安装 django-cors-headers：

pip install django-cors-headers

配置 settings.py：

INSTALLED_APPS = [
    ...
    'corsheaders',
]

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

CORS_ALLOWED_ORIGINS = [
    "http://localhost:8080",
]

静态文件处理 配置 Django 的 urls.py：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)