Vue 3与Django REST framework集成：后端API对接策略

2025-04发布15次浏览

在现代Web开发中，前后端分离架构是一种非常常见的模式。Vue 3作为前端框架，与Django REST framework（DRF）作为后端API框架的结合，可以实现高效、灵活的应用程序开发。本文将深入探讨如何通过Vue 3和Django REST framework集成，并提供一些后端API对接策略的最佳实践。

一、环境准备

在开始之前，我们需要确保以下环境已经搭建完成：

Vue 3项目：使用Vue CLI或Vite创建一个Vue 3项目。
Django项目：安装Django以及Django REST framework，并创建一个简单的模型用于测试API。
工具链：确保安装了Node.js、npm/yarn、Python以及相关依赖库。

二、Django REST framework API设计

1. 创建Django模型

首先，在Django项目中定义一个简单的模型。例如，我们创建一个Book模型：

# models.py
from django.db import models

class Book(models.Model):
    title = models.CharField(max_length=200)
    author = models.CharField(max_length=100)
    published_date = models.DateField()

    def __str__(self):
        return self.title

2. 定义序列化器

接下来，为Book模型创建一个序列化器，以便将模型数据转换为JSON格式：

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

class BookSerializer(serializers.ModelSerializer):
    class Meta:
        model = Book
        fields = ['id', 'title', 'author', 'published_date']

3. 配置视图集

使用Django REST framework的视图集来简化API逻辑：

# views.py
from rest_framework import viewsets
from .models import Book
from .serializers import BookSerializer

class BookViewSet(viewsets.ModelViewSet):
    queryset = Book.objects.all()
    serializer_class = BookSerializer

4. 注册路由

最后，在urls.py中注册API路由：

# urls.py
from django.urls import include, path
from rest_framework.routers import DefaultRouter
from .views import BookViewSet

router = DefaultRouter()
router.register(r'books', BookViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]

三、Vue 3与Django REST API对接

1. 安装Axios

Vue 3可以通过Axios库轻松与后端API进行通信。首先，安装Axios：

npm install axios

然后在Vue组件中引入并使用它：

// main.js
import axios from 'axios';
axios.defaults.baseURL = 'http://127.0.0.1:8000/api/';

2. 创建API服务层

为了提高代码复用性，我们可以创建一个专门的API服务模块。例如：

// services/apiService.js
import axios from 'axios';

export const getBooks = async () => {
    try {
        const response = await axios.get('/books/');
        return response.data;
    } catch (error) {
        console.error('Error fetching books:', error);
        throw error;
    }
};

export const createBook = async (bookData) => {
    try {
        const response = await axios.post('/books/', bookData);
        return response.data;
    } catch (error) {
        console.error('Error creating book:', error);
        throw error;
    }
};

3. 在Vue组件中调用API

在Vue组件中，我们可以调用上述服务方法来获取或提交数据。例如：

<template>
  <div>
    <h1>Books</h1>
    <ul>
      <li v-for="book in books" :key="book.id">{{ book.title }} - {{ book.author }}</li>
    </ul>
    <form @submit.prevent="addBook">
      <input v-model="newBook.title" placeholder="Title" />
      <input v-model="newBook.author" placeholder="Author" />
      <button type="submit">Add Book</button>
    </form>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { getBooks, createBook } from '../services/apiService';

export default {
  setup() {
    const books = ref([]);
    const newBook = ref({ title: '', author: '' });

    const fetchBooks = async () => {
      books.value = await getBooks();
    };

    const addBook = async () => {
      await createBook(newBook.value);
      newBook.value = { title: '', author: '' };
      fetchBooks();
    };

    onMounted(fetchBooks);

    return { books, newBook, addBook };
  },
};
</script>

四、安全性与跨域处理

1. 跨域问题

由于Vue 3运行在浏览器中，而Django REST API可能运行在不同的端口上，因此需要解决跨域问题。可以在Django项目中安装django-cors-headers：

pip install django-cors-headers

然后在settings.py中配置：

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

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

CORS_ALLOWED_ORIGINS = [
    'http://localhost:8080',  # Vue开发服务器地址
]

2. 认证与授权

对于需要认证的API，可以使用Django REST framework提供的Token认证或JWT认证。例如，安装djangorestframework-simplejwt：

pip install djangorestframework-simplejwt