Son zamanlarda Flask'ı öğreniyordum, bu yüzden son zamanlarda zamanımı koyduğum bir uygulama üzerinde çalışırken POST ve DELETE istekleriyle uğraşıyorum. Python, Flask ve SQL arasındaki ilişki "veri işlemeyi" çok kolaylaştırır. İlk başta mücadele ederken, kendime acı çektirmeyi ve çözemeyene kadar kaynakları kullanmamayı seviyorum.
Bu nedenle, bu blog yazısı, yeni başlayanlara ve yeni başlayanlara, React.js uygulamanızdan Flask API'nize bu POST ve DELETE isteklerini yapma konusunda yardımcı olacaktır. Bu biraz "korkutucu" görünebilir veya denemek isteyeceğiniz bir şey olmayabilir, ancak aslında çok kolaydır, sadece bir yöne ihtiyacınız var.
Bu, son blog yazımın bir çeşit devamı olacak, bu nedenle bir React uygulamasını Flask API'ye nasıl bağlayacağınızı bilmiyorsanız, buradaki son blog yazıma göz atmanızı öneririm .
POST isteğinden başlayarak, daha sonra silmek için bazı verilerimiz var, yapmak isteyeceğiniz ilk şey, dosyanızın içindeki yolu tanımlamak ve POST'u bu HTTP yönteminin geçmesine izin vermek için yöntemlere iletmektir. Bana Flask tarafından verilen Blueprint kullanıyorum ve sadece uygulama adımı main olarak tanımladım.
@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
Bu kurulumu aldıktan sonra, ön uca geçebilir ve formunuzu Flask API'ye gönderilecek şekilde ayarlayabilirsiniz. Bir POST isteği gönderirken olması gereken iki ana şey, POST'u göndermek ve tamamlandıktan sonra durumu güncellemektir.
Önce içeriğinizi girebileceğiniz bir yer için bir giriş ve düğme içeren bir form oluşturun ve ardından bunu arka uca gönderin. Ayrıca, girişe yazdığınız bilgileri görebilmek için durum ve onChange işlevini kullanmak isteyeceksiniz. Kişisel olarak kod yazmayı kolaylaştırdığı için kancaları kişisel olarak kullanıyorum. Reacts kancalarına aşina değilseniz, buradan kontrol edebileceğiniz bir blog yazım var .
<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>
Üst bileşenden, durumu güncellediğim onNewTodo adlı işlev ve aktarıldım. Daha sonra bunu onClick olay işleyicimde arayabilirim. İşlev şuna benzer:
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>
KAYNAKLAR:
Miguel Grinberg Bir React + Flask Projesi Nasıl Oluşturulur? https://blog.miguelgrinberg.com/post/how-to-create-a-react--flask-project
Klebber Correia Python, Flask ve React ile Basit Bir CRUD Uygulaması Oluşturun - https://developer.okta.com/blog/2018/12/20/crud-app-with-python-flask-react
