Invio di un POST alla tua API Flask da un'app React.js

Recentemente ho imparato Flask, quindi ho scherzato con le richieste POST e DELETE mentre lavoravo su un'applicazione in cui ho dedicato il mio tempo di recente. La relazione tra Python, Flask e SQL rende la "manipolazione dei dati" molto semplice. Anche se all'inizio ho lottato, mi piace farmi soffrire e non usare le risorse finché non riesco a capirlo e oltre.

Quindi questo post del blog aiuterà i principianti e i neofiti a fare quelle richieste POST e DELETE alla tua API Flask dalla tua applicazione React.js. Anche se questo può sembrare un po '"spaventoso" o non è qualcosa che vuoi provare, in realtà è molto facile, devi solo avere una direzione.

Questa sarà una sorta di continuazione del mio ultimo post sul blog, quindi se non sai come connettere un'applicazione React a un'API Flask ti suggerisco di dare un'occhiata al mio ultimo post sul blog qui .

A partire dalla richiesta POST in modo da avere alcuni dati da eliminare in seguito, la prima cosa che vorresti fare è definire il percorso all'interno del tuo file e passare il POST ai metodi per consentire il passaggio di quel metodo HTTP. Sto usando Blueprint fornito da Flask e ho appena definito il nome della mia app come principale.

@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

Dopo aver impostato la configurazione, puoi passare al front-end e impostare il modulo da inviare all'API Flask. Le due cose principali che devono accadere quando si invia una richiesta POST sono l'invio del POST e l'aggiornamento dello stato dopo che è stato completato.

Per prima cosa crea un modulo con un input e un pulsante per un luogo in cui inserire il tuo contenuto, quindi invialo al back-end. Dovrai anche utilizzare state e la funzione onChange per poter vedere le informazioni che stai digitando nell'input. Personalmente uso gli hook, perché rende più facile la scrittura del codice personalmente. Se non hai familiarità con gli hook di Reacts, ho un post sul blog che puoi controllare qui .

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

Dal componente genitore, ho tramandato una funzione denominata onNewTodo in cui ho aggiornato lo stato. Posso quindi chiamarlo nel mio gestore di eventi onClick. La funzione ha questo aspetto:

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>

RISORSE:

Miguel Grinberg Come creare un progetto React + Flask— https://blog.miguelgrinberg.com/post/how-to-create-a-react--flask-project

Klebber Correia Crea una semplice app CRUD con Python, Flask e React - https://developer.okta.com/blog/2018/12/20/crud-app-with-python-flask-react