如何将数据从React.js发送到由Flask创建的API端点

Question

我是React.js和API的新手。我正在做一个项目，它需要用户的用户名和电话号码，并将其存储在数据库中。我已经在react中编写了前端。当用户点击submit时，我希望我的程序将相关数据发布到本地服务器，并使用Python flask脚本检索数据，然后将其存储到DB中。我应该这样做吗?如果是，我如何在我的handlessubmit方法中实现它?以下是目前为止的内容:

handleSubmit(event) {
const target = event.target;
let username =  target.username;
let phone_num = target.phone;
if (!check_name_valid(username)){
alert('* must be your first and last name');
}else if (!check_phone_valid(phone_num)){
alert('* numbers only (ex. 1231231234)');
} else {
this.postRequest(event)
}
event.preventDefault();
}
postRequest(event) {
const target = event.target;
const username =  target.username;
const phone_num = target.phone;
const requestOptions = {
method: 'POST',
body: JSON.stringify({title: 'example'})
}
fetch('http://127.0.0.1:5000/test', requestOptions)
.then(response => response.json())
.then(data => this.setState({ username: username, phone: phone_num}));
event.preventDefault(event);
}

我得到以下javascript错误:"Unhandled Rejection (TypeError): Failed to fetch"

这里是我的烧瓶代码(仍在工作，只是试图让后的工作):

from flask import Flask
from flask_restful import Api, Resource
app = Flask(__name__)
api = Api(app)
@app.route('/test')
class LogInfo(Resource):
def get(self, name, num):
return {"username": name, "phone number": num}
api.add_resource(LogInfo, "/test/<string:name>/<int:num>")
if __name__ == "__main__":
app.run(debug = True)

，我从flask api得到以下消息:"127.0.0.1 - - [11/Apr/2023 16:36:48] "POST/HTTP/1.1"404产生绯闻;

Answer 1

似乎你的flask API期望GET请求。通过将def get更改为def post，您可以将http方法更改为POST，这是您正在寻找的。

在这行api.add_resource(LogInfo, "/test/<string:name>/<int:num>")上，API期望接收名称和num作为url参数。为了保持简单，应该将其更改为/test。你张贴的数据在请求体(没有url参数)，这是很好的做法。只需将handlessubmit方法中的请求体更改为包含用户名和phone_num数据而不是示例。body: JSON.stringify({username, phone_num})

通常将用户数据保存到数据库是在服务器端完成的。将flask API代码修改如下:

class CreateUser(Resource):
def post(self):
user_data = request.get_json()
username = user_data["username"]
phone_num = user_data["phone_num"]

// Todo add user to db
self.response["status"] = 201
self.response["message"] = "User created successfully"
return self.response, 201
api.add_resource(CreateUser, "/test")
if __name__ == "__main__":
app.run(debug = True)

通常返回http状态(在本例中创建201)，以便前端知道后端发生了什么。另外，如果用户名已经存在并且不能添加到数据库中，你可以让flask API返回错误。