Django REST framework (DRF) 是一个功能强大的工具包，用于在 Django 应用中构建 API，而 Vue.js 则是一个流行的 JavaScript 框架，用于构建用户界面。这个组合允许您使用 Vue.js 创建前端，并通过 RESTful API 与后端 Django 应用进行通信。
以下是一个简单的 Django + Vue.js 应用示例：
安装 Django 和 Django REST framework：
pip install django djangorestframework
创建 Django 项目和应用：
django-admin startproject myproject
cd myproject
django-admin startapp myapp
在 models.py 中定义一个 Django 模型：
# myapp/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
在 serializers.py 中创建一个序列化器，将模型转换为 JSON：
# myapp/serializers.py
from rest_framework import serializers
from .models import Item
class ItemSerializer(serializers.ModelSerializer):
class Meta:
model = Item
fields = '__all__'
在 views.py 中创建一个视图集，用于处理 API 请求：
# myapp/views.py
from rest_framework import viewsets
from .models import Item
from .serializers import ItemSerializer
class ItemViewSet(viewsets.ModelViewSet):
queryset = Item.objects.all()
serializer_class = ItemSerializer
在 urls.py 中添加必要的 URL：
# myproject/urls.py
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from myapp.views import ItemViewSet
router = DefaultRouter()
router.register(r'items', ItemViewSet)
urlpatterns = [
path('api/', include(router.urls)),
]
安装 Vue CLI 并创建一个新的 Vue.js 项目：
npm install -g @vue/cli
vue create myfrontend
cd myfrontend
安装 Axios，用于向 Django API 发送 HTTP 请求：
npm install axios
创建一个组件来显示项目列表：
<!-- myfrontend/src/components/Items.vue -->
<template>
<div>
<h1>项目列表</h1>
* {{ item.name }} - {{ item.description }}
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
items: [],
};
},
mounted() {
axios.get('http://localhost:8000/api/items/')
.then(response => {
this.items = response.data;
})
.catch(error => {
console.error(error);
});
},
};
</script>
将组件添加到主 Vue 实例中：
<!-- myfrontend/src/App.vue -->
<template>
<div>
<Items />
</div>
</template>
<script>
import Items from './components/Items.vue';
export default {
components: {
Items,
},
};
</script>
最后，启动 Django 服务器和 Vue.js 开发服务器：
# 在 Django 项目目录中
python manage.py runserver
# 在 Vue.js 项目目录中
npm run serve
通过这种设置，Django 后端将提供一个 RESTful API 来与数据交互，而 Vue.js 前端将使用 Axios 从 Django 后端获取并显示数据，从而实现前后端的清晰分离。
