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

Question

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

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

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

• 公司名称

• 时间表

• 结果数

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

我的反应功能

  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 我有：

网址.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)

然而

• 我request在views.py没有得到任何东西。

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

Answer 1

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

姜戈设置：

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

pip install django-cors-headers

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

pip install django-cors-headers

3. 接下来，您需要添加corsheaders.middleware.CorsMiddleware到中间件类中settings.py

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

4. 您应该允许主机settings.py从您想要获取数据的地方进入。在初始阶段允许*

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

反应设置：

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 2

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

基本上您不需要手动捕获数据并将其保存到数据库中。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/

视图create()功能的确切网址是这个和

序列化程序create()功能的确切网址是这个

请参阅下面的自定义代码。

自定义视图

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)