当前位置：首页 > VUE

django vue实现

2026-02-10 01:13:13VUE

Django 与 Vue.js 集成实现

后端配置 (Django)

在 Django 项目中创建 API 接口，使用 Django REST framework 提供数据支持。安装依赖：

pip install djangorestframework django-cors-headers

配置 settings.py：

INSTALLED_APPS = [
    ...
    'rest_framework',
    'corsheaders',
]

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

CORS_ORIGIN_ALLOW_ALL = True  # 开发时允许所有跨域请求

创建序列化器和视图：

# serializers.py
from rest_framework import serializers
from .models import YourModel

class YourModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = YourModel
        fields = '__all__'

# views.py
from rest_framework import viewsets
from .models import YourModel
from .serializers import YourModelSerializer

class YourModelViewSet(viewsets.ModelViewSet):
    queryset = YourModel.objects.all()
    serializer_class = YourModelSerializer

配置路由：

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

router = DefaultRouter()
router.register(r'api/yourmodel', YourModelViewSet)

urlpatterns = [
    ...
] + router.urls

前端配置 (Vue.js)

初始化 Vue 项目：

django vue实现

vue create frontend
cd frontend
npm install axios vue-router

配置 API 调用：

// src/api.js
import axios from 'axios'

const api = axios.create({
    baseURL: 'http://localhost:8000',  // Django 开发服务器地址
    timeout: 5000
})

export default {
    getData() {
        return api.get('/api/yourmodel/')
    },
    postData(data) {
        return api.post('/api/yourmodel/', data)
    }
}

创建 Vue 组件：

<!-- src/components/DataList.vue -->
<template>
    <div>
        <ul>
            <li v-for="item in items" :key="item.id">
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<script>
import api from '../api'

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

部署方案

开发模式分离部署

django vue实现

Django 运行在 http://localhost:8000
Vue 运行在 http://localhost:8080
通过 CORS 处理跨域请求

生产环境整合部署

构建 Vue 项目：
```
npm run build
```
将 dist 目录内容复制到 Django 的静态文件目录

配置 Django 的 urls.py：


from django.views.generic import TemplateView

urlpatterns = [ ... path('', TemplateView.as_view(template_name='index.html')), ]


#### 高级集成方案

使用 `django-webpack-loader` 实现热重载：
1. 安装依赖：
```bash
pip install django-webpack-loader
npm install webpack-bundle-tracker --save-dev

配置 webpack.config.js：


const BundleTracker = require('webpack-bundle-tracker')

module.exports = { output: { publicPath: 'http://localhost:8080/', path: path.resolve('./frontend/dist/'), }, plugins: [ new BundleTracker({filename: './webpack-stats.json'}) ] }


3. Django 配置：
```python
# settings.py
WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    }
}