如何使用 Rest Framework 从前端（React）向 Django 发送查询答案

【问题标题】：How to send a query from the frontend (React) to Django with Rest Framework如何使用 Rest Framework 从前端（React）向 Django 发送查询
【发布时间】：2021-01-12 14:07:34
【问题描述】：

我想从前端 react textarea 接收特定输入以在 django 后端执行某个功能。任何人来帮助。我想将输入的值从 textarea 输入字段发送到我的后端

这是我的 React 前端代码

import React, { Component } from 'react';
import axios from 'axios';

class QueryBuilder extends Component{
render() {
    return (
        <div>
            <form>
                <textarea cols="100" rows="20" name="text" />
                <br /><br />
                <button>Execute Query</button>
            </form>

        </div>
        )
    }
}

export default QueryBuilder;

这里是views.py代码

from django import db
from django.shortcuts import render, HttpResponse
from rest_framework import generics
from .models import Test
from .serializers import TestSerializer
from pymongo import MongoClient
from ast import literal_eval
from rest_framework import viewsets, permissions
# from .models import Test
# from .serializers import TestSerializer
    
#Test Viewset
class TestViewset(viewsets.ModelViewSet):
    client = MongoClient()
    db = client.test
    # collect = db['state_entry'].find({})
    queryset = db['queryTest_test'].find({})
    permission_classes = [
        permissions.AllowAny
    ]
    
    serializer_class = TestSerializer

序列化器.py

from rest_framework import serializers
from queryTest.models import Test
# Test Serializers

class TestSerializer(serializers.ModelSerializer):
    class Meta:
        model = Test
        fields = '__all__'

【问题讨论】：

标签： reactjs django mongodb

【解决方案1】：

把你的react组件代码更新到这个，我看到你已经导入了axios但还没有用它来调用api，你一定要看看axios官方documentation，非常有用的包

import React, { Component } from "react";
import axios from "axios";

class App extends Component {
    constructor() {
        this.state({
            textAreaValue: "",
        });
    }
    api_call = (data) =>
        axios
            .post(`http://127.0.0.1:8000/your-api-path`, {
                value_to_send: data,
            })
            .then(function (response) {
                console.log(response);
                this.setState({textAreaValue:''});
            })
            .catch(function (error) {
                console.log(error);
            });
    render() {
        return (
            <div>
                <textarea
                    onChange={(e) => this.setState({textAreaValue: e.target.value})}
                    value={this.state.textAreaValue}
                />
                <button onClick={() => this.api_call(this.state.textAreaValue)}>Click it</button>
            </div>
        );
    }
}

export default App;

将您的视图更新为此，即使用在 api 请求中收到的 self.request.data

from django import db
from django.shortcuts import render, HttpResponse
from rest_framework import generics
from .models import Test
from .serializers import TestSerializer
from pymongo import MongoClient
from ast import literal_eval
from rest_framework import viewsets, permissions
# from .models import Test
# from .serializers import TestSerializer
    
#Test Viewset
class TestViewset(viewsets.ModelViewSet):
    request_data = request.data
    print(request_data)
    client = MongoClient()
    db = client.test
    # collect = db['state_entry'].find({})
    queryset = db['queryTest_test'].find({})
    permission_classes = [
        permissions.AllowAny
    ]
    
    serializer_class = TestSerializer

查看 django 请求/响应文档here

在后端签出此answer here for a similar requirement。

【讨论】：