通过Axios将数据发送到Django UpdateAPIView_Axios POST将非类型数据发送到Django Rest框架_将Axios.get()数据发送到 - 腾讯云开发者社区

通过Axios将数据发送到Django UpdateAPIView

基础概念

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它可以帮助你轻松地从浏览器发出 HTTP 请求，同时也支持使用 Node.js 发送请求。

Django UpdateAPIView 是 Django REST framework (DRF) 中的一个视图类，用于处理 PUT 和 PATCH 请求，通常用于更新资源。

类型

Axios 请求类型: 可以是 GET, POST, PUT, PATCH, DELETE 等。
Django UpdateAPIView: 处理 PUT 和 PATCH 请求。

应用场景

当你需要通过前端应用更新后端数据库中的数据时，可以使用 Axios 发送请求到 Django 的 UpdateAPIView。

示例代码

前端 (使用 Axios)

// 安装 Axios
// npm install axios

import axios from 'axios';

// 更新数据
const updateData = async (id, newData) => {
  try {
    const response = await axios.put(`/api/items/${id}/`, newData);
    console.log(response.data);
  } catch (error) {
    console.error('Error updating data:', error);
  }
};

// 调用函数更新数据
updateData(1, { name: 'New Name', description: 'New Description' });

后端 (Django UpdateAPIView)

# models.py
from django.db import models

class Item(models.Model):
    name = models.CharField(max_length=100)
    description = models.TextField()

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

class ItemSerializer(serializers.ModelSerializer):
    class Meta:
        model = Item
        fields = ['id', 'name', 'description']

# views.py
from rest_framework.generics import UpdateAPIView
from .models import Item
from .serializers import ItemSerializer

class ItemUpdateView(UpdateAPIView):
    queryset = Item.objects.all()
    serializer_class = ItemSerializer

# urls.py
from django.urls import path
from .views import ItemUpdateView

urlpatterns = [
    path('api/items/<int:pk>/', ItemUpdateView.as_view(), name='item-update'),
]

可能遇到的问题及解决方法

问题: Axios 请求无法到达 Django 后端

原因: 可能是跨域问题 (CORS) 或者 URL 配置错误。

解决方法:

CORS: 在 Django 后端安装并配置 django-cors-headers。

pip install django-cors-headers

在 settings.py 中添加：

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

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

CORS_ORIGIN_ALLOW_ALL = True  # 注意：在生产环境中应设置为特定域名