Ostatnio uczyłem się Flaska, więc majstrowałem przy żądaniach POST i DELETE podczas pracy nad aplikacją, w którą ostatnio poświęcam swój czas. Relacja między Pythonem, Flaskiem i SQL sprawia, że „manipulowanie danymi” jest bardzo łatwe. Chociaż na początku walczyłem, lubię cierpieć i nie używać zasobów, dopóki nie będę w stanie tego rozgryźć i dalej.
Dlatego ten wpis na blogu ma pomóc początkującym i początkującym w wysyłaniu żądań POST i DELETE do interfejsu API Flask z aplikacji React.js. Chociaż może się to wydawać trochę „przerażające” lub nie jest czymś, czego chcesz spróbować, w rzeczywistości jest to bardzo łatwe, wystarczy mieć jakiś kierunek.
Będzie to swego rodzaju kontynuacja mojego ostatniego posta na blogu, więc jeśli nie wiesz, jak połączyć aplikację React z interfejsem Flask API, proponuję sprawdzić mój ostatni wpis na blogu tutaj .
Zaczynając od żądania POST, abyśmy mieli później pewne dane do usunięcia, pierwszą rzeczą, którą chciałbyś zrobić, jest zdefiniowanie trasy w pliku i przekazanie POST do metod, aby umożliwić przekazanie tej metody HTTP. Używam Blueprint podanego mi przez Flask i właśnie zdefiniowałem nazwę mojej aplikacji jako główną.
@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
Po skonfigurowaniu możesz przejść do interfejsu użytkownika i skonfigurować formularz do wysłania do interfejsu Flask API. Dwie główne rzeczy, które muszą się wydarzyć podczas wysyłania żądania POST, to wysłanie POST i zaktualizowanie stanu po jego zakończeniu.
Najpierw utwórz formularz z danymi wejściowymi i przyciskiem dla miejsca do wprowadzania treści, a następnie wyślij go do zaplecza. Będziesz także chciał użyć funkcji state i onChange, aby zobaczyć informacje, które wpisujesz w danych wejściowych. Osobiście używam hooków, ponieważ osobiście ułatwia to pisanie kodu. Jeśli nie znasz haków Reacts, mam post na blogu na ten temat, który możesz sprawdzić tutaj .
<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>
Z komponentu nadrzędnego przekazałem funkcję o nazwie onNewTodo, w której zaktualizowałem stan. Mogę to wywołać w mojej obsłudze zdarzeń onClick. Funkcja wygląda następująco:
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>
ZASOBY:
Miguel Grinberg Jak stworzyć projekt React + Flask— https://blog.miguelgrinberg.com/post/how-to-create-a-react--flask-project
Klebber Correia Zbuduj prostą aplikację CRUD za pomocą Pythona, Flask i React - https://developer.okta.com/blog/2018/12/20/crud-app-with-python-flask-react
