当结合 Django 和 Vue.js 时，我们可以创建一个功能强大的 Web 应用程序。结合它们可以充分发挥两个框架的优势。在这个例子中，我将展示如何创建一个基本的 Django-Vue 管理界面，其中 Django 作为后端 API，而 Vue.js 负责前端界面。
我们将使用以下工具和技术：
在开始之前，请确保你已经安装了 Django、Django REST framework 和 Node.js（包括 npm）。
创建一个新的 Django 项目和应用：
django-admin startproject django_vue_admin
cd django_vue_admin
python manage.py startapp backend
安装必要的包：
pip install django djangorestframework
通过修改 django_vue_admin/settings.py 来配置后端 API：
# 将'rest_framework'和'backend'添加到'INSTALLED_APPS'列表中
INSTALLED_APPS = [
# ...
'rest_framework',
'backend',
]
# 添加'rest_framework.permissions.AllowAny'以允许所有API访问（出于简单起见，在这个例子中）
REST_FRAMEWORK = {
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.AllowAny',
],
}
在 backend/models.py 和 backend/views.py 中创建一个基本模型和 API：
# backend/models.py
from django.db import models
class Item(models.Model):
name = models.CharField(max_length=100)
description = models.TextField()
def __str__(self):
return self.name
# backend/views.py
from rest_framework import generics
from .models import Item
from .serializers import ItemSerializer
class ItemListCreateView(generics.ListCreateAPIView):
queryset = Item.objects.all()
serializer_class = ItemSerializer
在 backend/serializers.py 中创建一个序列化器：
from rest_framework import serializers
from .models import Item
class ItemSerializer(serializers.ModelSerializer):
class Meta:
model = Item
fields = '__all__'
在 backend/urls.py 中设置 URL：
from django.urls import path
from .views import ItemListCreateView
urlpatterns = [
path('items/', ItemListCreateView.as_view(), name='item-list-create'),
]
在项目的根目录中，创建一个新的 Vue.js 项目：
npm install -g @vue/cli
vue create frontend
cd frontend
安装 Axios：
npm install axios
在 frontend/src/components/ItemList.vue 中创建一个新的 Vue.js 组件：
<template>
<div>
<h2>物品列表</h2>
* {{ item.name }} - {{ item.description }}
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
items: []
};
},
created() {
axios.get('/api/items/')
.then(response => {
this.items = response.data;
})
.catch(error => {
console.error(error);
});
}
};
</script>
修改 frontend/src/App.vue 文件以使用 ItemList 组件：
<template>
<div>
<h1>欢迎使用Django-Vue管理界面</h1>
<item-list></item-list>
</div>
</template>
<script>
import ItemList from './components/ItemList.vue';
export default {
components: {
ItemList,
}
};
</script>
在一个终端中启动 Django 开发服务器：
python manage.py runserver
在另一个终端中启动 Vue.js 开发服务器：
cd frontend
npm run serve
现在，你可以通过 http://localhost:8000/admin/ 访问 Django 管理界面，通过 http://localhost:8080/ 访问 Vue.js 前端。
Django-Vue 管理界面现在已经准备就绪！后端 API 提供 Item 模型数据，前端 Vue.js 组件使用 Axios 获取并显示物品。请注意，此示例使用简化的设置，以便演示。在实际应用程序中，你需要处理认证、错误处理和更复杂的 CRUD 操作。此外，考虑在 Vue.js 的生产构建中使用 Django 的静态文件，以避免部署期间两者之间的冲突。
