用户输入表单的数据并将数据发送到 Python 后端

Question

问题： 我正在尝试处理用户在 React Frontend 中输入的表单中的数据。我想对变量进行一些计算，目前只想将其打印出来，最终我想将信息返回给 React 应用程序，但我无法让这个简单的步骤工作。

我的尝试： 这是我正在使用的表单的 sn-p：

<form className="patient-form" method="post">

    <input type="text" name="variable" />
    <input type="submit" />

这是我要在其中使用变量的 Python 后端：

from flask import Flask,request

app = Flask(__name__)

@app.route('/',methods=['POST'])
def getVariable():
    variable = request.json["variable"]
    return {"variable": 'Backend variable' + variable}

我还在 package.json 中使用代理，以便 React 和 Flask 同时工作。

当我从我得到的表格中输入信息时：

Cannot Post /. --> This is on localhost:3001

在烧瓶后端我得到：

The method is not allowed for the requested URL.

所以这似乎我使用了错误的路线，我应该使用哪条路线来实现这一点？

如果这很简单，我深表歉意，因为您可以说我是 React 和 Flask 的新手。

我发现了这个帖子：How to send data from React to Flask then back to react and show output on DOM

我仍然无法从前端表单将数据 POST 到烧瓶后端，我是否遗漏了一些简单的东西？

Answer 1

据我了解：表单同时发送到 Reactjs 和 Flask -> 您希望 Flask 将数据发送到 Reactjs。

1. 这里也有类似的问题：i) How to get POSTed JSON in Flask?, ii) React frontend cannot POST to Flask backend and iii) Not able to post data from React Js to Node js
2. 改变概念：从表单发送数据到reactjs。然后使用 Axios 向 Flask 发送 POST 请求以取回计算出的变量。

示例代码：

```
const response = await axios.post(
  'https://example.com',
  { example: 'data' },
  { headers: { 'Content-Type': 'application/json' } }
)
console.log(response.data)
```

https://example.com 使用你的烧瓶服务器地址。

注意：如果您的烧瓶服务器侦听不同的端口（例如端口 5000），您必须使用带有 address:port 形式的端口的地址（例如 localhost:5000 或 127.0.0.1:5000 或 https://example.com:5000）。

有关 Axios 的更多信息，请查看此链接：How to send HTTP Requests in React | malcoded 或尝试从上述链接中了解答案。

Answer 2

从前端接收数据到 Flask 非常简单

from flask import request

@app.route("/recieve_data", methods=['POST', 'GET'])
def recieve_data():

    if request.method == "POST":

        data = request.get_data()

        data = json.loads(data)
        # Do Stuff Here
        return data

从 Flask 向前端发送数据通常是通过 jinja 完成的。

var data = JSON.parse("{{data|tojson}}")