Недавно я изучал Flask, поэтому я возился с запросами POST и DELETE, работая над приложением, в которое я недавно вкладывал время. Связь между Python, Flask и SQL очень упрощает «манипулирование данными». Хотя сначала я боролся, мне нравится заставлять себя страдать и не использовать ресурсы, пока не разберусь и дальше.
Таким образом, это сообщение в блоге поможет новичкам и новичкам в выполнении этих запросов POST и DELETE к вашему Flask API из вашего приложения React.js. Хотя это может показаться чем-то «пугающим» или нежелательным, на самом деле это очень просто, вам просто нужно иметь какое-то направление.
Это будет своего рода продолжение моего последнего сообщения в блоге, поэтому, если вы не знаете, как подключить приложение React к Flask API, я предлагаю проверить мое последнее сообщение в блоге здесь .
Начиная с запроса POST, чтобы у нас были некоторые данные для удаления позже, первое, что вам нужно сделать, это определить маршрут внутри вашего файла и передать POST методам, чтобы разрешить передачу этого метода HTTP. Я использую Blueprint, предоставленный мне Flask, и я просто определил свое имя приложения как main.
@main.route('/add_todo', methods=['POST'])
def add_todo():
todo_data = request.get_json()
class Todo(db.Model):
id = db.Column(db.Integer, primary_key=True)
content = db.Column(db.String)
new_todo = Todo(content=todo_data['content'])
db.session.add(new_todo)
db.session.commit()
return 'Done', 201
@main.route('/add_todo', methods=['POST'])
def add_todo():
todo_data = request.get_json()
new_todo = Todo(content=todo_data['content'])
db.session.add(new_todo)
db.session.commit()
return 'Done', 201
После настройки вы можете перейти к интерфейсу и настроить свою форму для отправки в Flask API. Две основные вещи, которые должны произойти при отправке запроса POST, - это отправка POST и обновление состояния после его завершения.
Сначала создайте форму с полем ввода и кнопкой для места для ввода вашего контента, а затем отправьте его на бэкэнд. Вы также захотите использовать состояние и функцию onChange, чтобы иметь возможность видеть информацию, которую вы вводите во входные данные. Лично я использую хуки, потому что это лично облегчает написание кода. Если вы не знакомы с хуками Reacts, у меня есть запись в блоге, которую вы можете проверить здесь .
<form>
<input type="text" value={content} onChange={e => setContent(e.target.value)} />
<button
type="submit"
value="Add Todo">
</button>
</form>
<form>
<input type="text" value={content} onChange={e => setContent(e.target.value)} />
<button
type="submit"
value="Add Todo"
onClick={async () => {
const todo = { content };
const response = await fetch("/add_todo", {
method: "POST",
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(todo)
})
if (response.ok){
console.log("it worked")
}>
</button>
</form>
Из родительского компонента я передал функцию onNewTodo, в которой я обновил состояние. Затем я могу вызвать это в моем обработчике событий onClick. Функция выглядит так:
onNewTodo={todo => setTodos(currentTodos => [...currentTodos, todo])}
if (response.ok){
console.log("it worked")
onNewTodo(todo)
setContent('')
}
<form>
<input type="text" value={content} onChange={e => setContent(e.target.value)} />
<button
type="submit"
value="Add Todo"
onClick={async () => {
const todo = { content };
const response = await fetch("/add_todo", {
method: "POST",
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(todo)
})
if (response.ok){
console.log("it worked")
onNewTodo(todo)
setContent('')
}>
</button>
</form>
РЕСУРСЫ:
Мигель Гринберг Как создать проект React + Flask— https://blog.miguelgrinberg.com/post/how-to-create-a-react--flask-project
Klebber Correia Создайте простое приложение CRUD с Python, Flask и React - https://developer.okta.com/blog/2018/12/20/crud-app-with-python-flask-react
