[教程]掌握Vue3与Django无缝对接：解锁前端后端高效协同之道

在现代Web开发中，前后端分离架构已经成为主流。Django作为强大的后端框架，Vue.js作为流行的前端框架，两者结合能够构建出高性能、可维护的Web应用程序。本文将详细介绍如何实现Vue3与Dja...

在现代Web开发中，前后端分离架构已经成为主流。Django作为强大的后端框架，Vue.js作为流行的前端框架，两者结合能够构建出高性能、可维护的Web应用程序。本文将详细介绍如何实现Vue3与Django的无缝对接，以实现前端后端的高效协同。

1. Django后端搭建

1.1 创建Django项目

首先，你需要安装Django。如果没有安装，可以通过以下命令进行安装：

pip install django

然后，创建一个新的Django项目：

django-admin startproject myproject
cd myproject

1.2 创建Django应用

在项目目录下创建一个应用：

python manage.py startapp myapp

1.3 定义模型

在应用目录下的models.py文件中定义你的模型：

from django.db import models
class User(models.Model): name = models.CharField(max_length=100) email = models.EmailField(unique=True) def __str__(self): return self.name

1.4 配置数据库

在myproject/settings.py中配置数据库：

DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': BASE_DIR / 'db.sqlite3', }
}

运行迁移以创建数据库表：

python manage.py makemigrations
python manage.py migrate

1.5 创建RESTful API

为了使Django与Vue.js协作，我们通常会采用RESTful风格的API接口来传递JSON格式的数据。可以通过安装djangorestframework包来实现：

pip install djangorestframework

在myproject/settings.py中注册rest_framework：

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

创建一个序列化器：

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

创建一个视图集：

from rest_framework import viewsets
from .models import User
from .serializers import UserSerializer
class UserViewSet(viewsets.ModelViewSet): queryset = User.objects.all() serializer_class = UserSerializer

在myproject/urls.py中添加路由：

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import UserViewSet
router = DefaultRouter()
router.register(r'users', UserViewSet)
urlpatterns = [ path('', include(router.urls)),
]

2. Vue3前端搭建

2.1 创建Vue3项目

首先，你需要安装Vue CLI。如果没有安装，可以通过以下命令进行安装：

npm install -g @vue/cli

然后，创建一个新的Vue3项目：

vue create myvueapp
cd myvueapp

2.2 安装Axios

在项目目录下安装Axios：

npm install axios

2.3 发起请求

在Vue组件中，你可以使用Axios发起请求到Django后端的API：

<template> <div> <button @click="fetchUsers">Fetch Users</button> <ul> <li v-for="user in users" :key="user.id">{{ user.name }}</li> </ul> </div>
</template>
<script>
import axios from 'axios';
export default { data() { return { users: [], }; }, methods: { fetchUsers() { axios.get('/api/users/') .then(response => { this.users = response.data; }) .catch(error => { console.error('There was an error!', error); }); }, },
};
</script>

3. 跨域资源共享（CORS）

由于Vue应用可能运行于不同的服务器上，因此需要配置CORS策略。在Django项目中，可以使用django-cors-headers包来实现：

pip install django-cors-headers

在myproject/settings.py中配置CORS：

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

在Vue CLI创建的项目中，也可以配置CORS：

// .env.production
VUE_APP_CORS_ALLOW_LIST="http://localhost:8080"

在Vue组件中，可以使用以下代码来处理CORS：

axios.get('/api/users/', { headers: { 'X-Custom-Header': 'value' }
})

4. 总结

通过以上步骤，你可以轻松地将Vue3与Django无缝对接，实现前端后端的高效协同。这种方式不仅能够提高开发效率，还能够使项目更加可维护和可扩展。