Cartesian School CartesianSchool
Python od zera / Rozdział 22 / Projekt końcowy
Rozdział 22 · Projekt: lista zadania

Projekt końcowy: lista zadania dla Flask i SQLite

To samo zadanie, które lista rozpoczęło ten rozdział, teraz z trwałym przechowywaniem, JSON API i walidacją danych wejściowych.

Wszystko, co analizowano w sekcjach 22.7-22.34, łączy się w jednej działającej aplikacji — tej samej liście zadań, od której rozpoczął się rozdział, teraz ze stałym przechowywaniem w SQLite.

projects/flask/todo-app/app.py

PlikRola
app.pyTrasy, współpraca z bazą danych, API
schema.sqlStruktura tabeli tasks
templates/base.htmlOgólnie strona wireframe, w tym flash() posty
templates/index.htmlLista zadań, dodaj formularz
templates/privet.htmlHistoryczna strona powitalna z sekcji 22.5
templates/404.htmlStrona Nieznaleziona
static/style.cssStyle niestandardowe, bez zewnętrznych CDN

Co może zrobić gotowy wniosek

Pięć możliwości jednej małej aplikacji
Lista zadań
GET / — pokazuje wszystkie zadania
Pusty stan, jeśli brak zadań
Dodawanie
POST /dobavit
Walidacja danych wejściowych (Rozdział 22.31)
POST-Redirect-GET (Rozdział 22.13)
Znacznik wykonania
POST /vypolnit/
Przełączniki done między 0 a 1
Usuwanie
POST /udalit/
Całkowicie usuwa łańcuch znaków z bazy danych
JSON API
GET /api/tasks — lista
POST /api/tasks — dodawanie z ciałem JSON-
Podsumowanie lista zadań w przeglądarce: dwa ukończone (przekreślone) zadania na górze i dwa jeszcze nieukończone poniżej, pole dodawania oraz przycisk „Powiedz cześć”
Lokalnie uruchomiona aplikacja Flask w przeglądarce — końcowy wygląd projektu: wykonane i niewykonane zadania, formularz dodawania oraz link do strony historycznej /privet/<imię> z rozdziału 22.5.
Usunięcie i Zakończenie również są POST, a nie GET
Rozdział 22.9 już wyjaśniła: GET nie powinno zmieniać stanu na serwerze, ponieważ przeglądarka może go powtórzyć bez ostrzeżenia, na przykład podczas odświeżania strony. Dlatego przyciski "Wykonane" i "Usuń" w szablonie mają własne małe formularze method="post"zamiast prostych odniesień <a href="/udalit/…">.

Uruchomienie

terminal.txt
cd projects/flask/todo-app
python app.py

Pierwsze uruchomienie samo tworzy plik bazy danych i tabelę — nie jest potrzebny oddzielny polecenie do tego. Otwórz http://127.0.0.1:5000/: dodaj zadanie, Oznacz jako zakończony, usuń ją, odśwież stronę w trakcie procesu, samodzielnie ją zrestartuj Przetwarzaj i upewnij się, że lista pozostaje bez zmian.

Aplikacja działa także na wąskich ekranach: układ CSS (sekcja 22.3) został przebudowany dla szerokości telefonu komórkowego bez poziomego przewijania strony.

★★ Zadanie samodzielne
Licznik pozostałych zadań

Dodaj w index.html wiersz z liczbą niewykonanych zadań — {{ zadachi|selectattr('done', 'equalto', 0)|list|length }}.

Challenge
Sortowanie według statusu

Zmień zapytanie w glavnaya() tak, aby nieukończone zadania zawsze były wyświetlane przed ukończonymi — ORDER BY done, id.

Praktyka: praca z gotowym projektem
Moduł flask nie jest zainstalowany w środowisku przeglądarki Pyodide – działa lokalnie w VS Code, PyCharm lub Jupyter
Praktyka kursuje lokalnie
Otwórz praktykę →
← Back
Rozwijanie Flask-aplikacji