Как отправить запрос POST в ваш Flask API из приложения React

Недавно изучаю Flask. Я также возился с запросами POST и DELETE, работая над приложением, в которое я недавно тратил время. Связь между Python, Flask и SQL очень упрощает «манипулирование данными». Хотя поначалу я действительно боролся, мне нравится заставлять себя страдать и не использовать ресурсы до тех пор, пока я не перестану разбираться и двигаться вперед.

Итак, это сообщение в блоге поможет новичкам выполнять запросы POST и DELETE к Flask API из своего приложения React. Хотя это может показаться чем-то «пугающим» или нежелательным, на самом деле это очень просто - вам просто нужно иметь какое-то направление.

Я начну с запроса POST, чтобы у нас были данные для удаления позже. Первое, что вам нужно сделать, это определить маршрут внутри вашего файла и передать POST методам, чтобы разрешить передачу этого HTTP-метода. Я использую Blueprint, предоставленный мне Flask, и я просто определил свое имя приложения как main.

@main.route('/add_todo', methods=['POST'])

Затем у вас будет функция, которая позволит сохранить данные, отправленные из запроса, в базу данных SQL и отобразить их обратно во внешний интерфейс. Сначала определите функцию, установите переменную, равную запросу, и вызовите встроенную функцию get_json ().

def add_todo():
todo_data = request.get_json()

Это позволяет вам взять данные, отправленные из формы или запроса, и создать новый экземпляр отправленных данных. У меня есть модель с именем Todo, построенная с атрибутом содержимого.

class Todo(db.Model):
id = db.Column(db.Integer, primary_key=True)
content = db.Column(db.String)

Вы должны взять эту переменную, которую вы установили для запроса, и создать новый экземпляр этого класса.

new_todo = Todo(content=todo_data['content'])

Здесь я установил другую переменную для экземпляра класса Todo. Я установил атрибут содержимого для атрибута, отправленного из внешнего интерфейса. После того, как у вас есть эти данные, вы хотите зафиксировать их в базе данных, чтобы они были сохранены, и вы могли отправить их обратно во внешний интерфейс для отображения.

db.session.add(new_todo)
db.session.commit()
return 'Done', 201

Переменная db, которую я вызываю .session, .add и .commit, - это просто переменная, которую я создал путем вызова db = SQLAlchemy(). Я передаю переменную new_todo в функцию добавления, чтобы добавить экземпляр Todo в базу данных, а затем вызываю commit для вызова оператора фиксации на SQL-сервере.

@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

Теперь у вас есть полный маршрут для POSTing-данных в ваш Flask API. Я лично использую Postman для проверки целостности маршрута, чтобы убедиться, что все работает нормально. Вот почему я вернул «Готово» и 201, чтобы убедиться, что мой маршрут работает нормально. Если вы хотите вернуть No Content, вы должны вернуть 204, который понадобится позже для запроса DELETE.

После настройки вы можете перейти к интерфейсу пользователя и настроить свою форму для отправки в Flask API. Две основные вещи, которые должны произойти при отправке запроса POST, - это отправка POST и обновление состояния после его завершения.

Сначала создайте форму с полем ввода и кнопкой для места для ввода вашего контента, а затем отправьте его на бэкэнд. Вы также захотите использовать состояние и функцию onChange, чтобы иметь возможность видеть информацию, которую вы вводите во входные данные. Лично я использую хуки, потому что это лично облегчает написание кода. 

<form>
<input type="text" value={content} onChange={e => setContent(e.target.value)} />
<button 
type="submit" 
value="Add Todo">
</button>
</form>

Это простая форма. Теперь вы захотите вызвать выборку при нажатии кнопки или при отправке формы. Я лично использовал нажатие кнопки, но это вопрос предпочтений. Итак, я создам функцию и передам ее в onClick на кнопке. Я также использую async и await, что тоже является предпочтением.

<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>

Этот обработчик события onClick отправляет запрос POST на маршрут '/ add_todo' с «содержимым», переданным во входные данные выше. Затем я установил переменную с именем response, чтобы иметь возможность проверять, был ли отправлен ответ, и затем зарегистрировал «это сработало», чтобы проверить это.

Из родительского компонента я передал функцию onNewTodo, в которой я обновил состояние. Затем я могу вызвать это в моем прослушивателе событий onClick. Функция выглядит так:

onNewTodo={todo => setTodos(currentTodos => [...currentTodos, todo])}

Я беру задачу, которая передается, и использую функцию setTodos, которую я создал, чтобы передать задачу в текущее состояние задачи. Затем вы берете эту функцию и вызываете ее внутри своего условного оператора и передаете переменную 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>

Теперь у вас должна быть работающая форма, которая будет отправлять запросы POST в ваш Flask API.