在没有模型的情况下将数据从 React 表单发送到 Django Rest Framework

Question

我正在尝试将一些数据从我的 React 前端发送到我的 Django REST 后端。

我的 Django 应用程序没有模型。

我有一个反应形式。当用户提交按钮时，表单“提交”三个参数：

• 公司名称

• 时间范围

• numberOfResults

我想将这三个参数发送到我的 Django 后端。为此，我假设 React 正在向 Django 端点发送“POST”请求。 我需要 Django 中的这些参数，以便我可以使用它们对 ML 模型进行一些操作。

我的 React 函数

  handleSubmit(event){
    event.preventDefault()
    fetch("/myapi/getreactinfotwitter",{
      method:"POST",
      headers:{
        'Accept':'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        'data_options': {
          'partnerName': this.state.firmName,
          'timeframes': this.state.timeframes,
          'numberOfResults': this.state.numberOfResults,
        }
      })
    })

现在，我认为 Reast “POST” 必须与 Django “GET” 匹配，以便 Django 获取三个参数。

在 DJANGO 我有：

urls.py

path('getreactinfotwitter/', getreactinfotwitter, name="getreactinfotwitter")

myapi/views.py

@api_view(['GET', 'POST'])
def getreactinfotwitter(request):
    print(request)
    if request.method == 'GET':
        return Response(request.data)

但是

• 我在views.py 中的request 没有收到任何信息。

• 在 Web 控制台中，当我单击提交时，我得到 POST http://localhost:8080/myapi/getreactinfotwitter/ 500 (Internal Server Error)

Answer 1

法蒂玛的回答已经足够出色了。我在这里添加了一些您想在评论中了解的额外内容。

基本上您不需要手动捕获数据并将其保存到数据库中。 Django 给了我们极大的灵活性。如果您的模型、序列化程序和视图如下所示，那么任何 axios 请求都将由 django 自己处理（即 django 捕获数据并将其保存到数据库中），您无需编写代码手动将其保存到数据库中。

型号

class Partner(models.Model):
    partnerName =  models.CharField(max_length=100)
    timeFrames = models.IntegerField()
    numberOfResults = models.IntegerField()

序列化器

class PartnerSerializer(serializer.ModelSerializer):
    class Meta:
        model=Partner
        fields = '__all__'

观看次数

class PartnerView():
    queryset = Partner.object.all()
    serializer_class = PartnerSerializer

如果您仍然想在视图中捕获数据并以您的方式进行修改，那么只需在您的视图类中添加内置函数create()（ModelViewSet 的内置函数）。如果您想修改serializer 中的数据而不是view，请在您的序列化程序中添加内置的create() 函数（ModelSerializer 的内置函数）。

提到的内置功能（以及更多内置功能）可以在这个网站http://www.cdrf.co/找到

view的create()函数的确切url是this和

serializer的create()函数的准确url是this

见下方自定义代码。

自定义视图

class PartnerView():
    queryset = Partner.object.all()
    serializer_class = PartnerSerializer

    def create(self, request, *args, **kwargs):        
        serializer = self.get_serializer(data=request.data)        
        serializer.is_valid(raise_exception=True)

        # Here all incoming data we kept in serializer variable.
        # Change the data in your way and then pass it inside perform_create()

        self.perform_create(serializer)
        headers = self.get_success_headers(serializer.data)
        return Response(
           data={
               "status": 201,
               "message": "Product Successfully Created",                
               "data": serializer.data,                
               },
               status=status.HTTP_201_CREATED,
               headers=headers
           )

如果您想修改序列化器中的数据，请使用以下代码。

自定义序列化程序

    class PartnerSerializer(serializer.ModelSerializer):

        class Meta:
            model = Partner
            fields = '__all__'

        def create(self, validated_data):
            my_incoming_data = validated_data

            # If you want to pop any field from the incoming data then you can like below.
            # popped_data = validated_data.pop('timeFrames')

            inserted_data = Partner.objects.create(**validated_data)

            return Response(inserted_data)

Answer 2

以下是使用 Django REST 后端配置 React 前端的步骤。

Django 设置：

1. 使用以下命令安装django-cors-headers：

pip install django-cors-headers

1. 将其添加到您的项目settings.py 文件中：

INSTALLED_APPS = (
    ##...
    'corsheaders'
)

1. 接下来，需要在settings.py中的中间件类中添加corsheaders.middleware.CorsMiddleware

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

4. 您应该允许settings.py 中的主机从您要获取数据的位置获取数据。在初始阶段允许*

ALLOWED_HOSTS = [*]

反应设置：

5. 使用以下命令安装axios：

npm i axios

6. 现在按照下面的示例操作 React 类。

import React from "react";
...
import Axios from "axios";
...


yourFunctionName = () => {

    Axios.post(`URL`, {
            'partnerName': this.state.firmName,
            'timeframes': this.state.timeframes,
            'numberOfResults': this.state.numberOfResults,
        },
        {
            headers: {
                "Authorization": `AUTHORIZATION_KEY`,
                "Content-Type": 'application/json'
            }
        }
    )
    .then(res => console.log(res))
    .catch(error => console.err(error))
}

Answer 3

如果您尝试使用 react 和 fetch 将数据发送到 Django 中的 APIView，您唯一需要做的就是从 fetch 标头中删除 Content-Type 标头，因此 DRF 将设置它，你可以访问来自request.data的文件和数据。

DRF API 视图：

class ImportProductsAPI(APIView):
    authentication_classes = (TokenAuthentication,)
    permission_classes = (IsAuthenticated, IsAdmin)

    def put(self, request):
        # you can pass other data as well as files too.
        site_id = request.data["site_id"]
        # and there is the file you want
        file = request.data["excel"]
        return JsonReponse()

获取（在反应项目中）

let formData = new FormData();
formData.append("excel", file);
formData.append("site_id", site_id);

fetch(
    "api/for/upload", 
    {    
      method: "PUT",
      headers: {
        Accept: "application/json",
        Authorization: "token thisisthetokenforthisuser",
        // consider that there is no Content-Type being setted.
        },
      body: formData,
    })
      .then((response) => {
        return response.json();
      })
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.error(error);
      });