Samouczek: tworzenie aplikacji platformy Flask z widokami i szablonami stron w programie Visual Studio

W tym artykule przedstawiono krok 2 z serii samouczków Praca z frameworkiem Flask w programie Visual Studio.

Program Visual Studio umożliwia tworzenie aplikacji platformy Flask na podstawie szablonów projektów, które zapewniają bardziej rozbudowany punkt wyjścia dla projektów. Krok 1 w samouczku opisuje sposób tworzenia aplikacji platformy Flask z jedną stroną, gdzie cały kod znajduje się w jednym pliku. W kroku 2 refaktoryzujesz kod i utworzysz strukturę szablonów stron w celu umożliwienia dalszego programowania. W szczególności chcesz oddzielić kod dla widoków aplikacji od innych aspektów, takich jak kod uruchamiania.

W kroku 2 samouczka dowiesz się, jak wykonywać następujące czynności:

• Refaktoryzacja kodu aplikacji w celu oddzielenia widoków od kodu uruchamiania
• Renderowanie widoku przy użyciu szablonu strony

Warunki wstępne

• Rozwiązanie programu Visual Studio i projekt aplikacji Platformy Flask utworzone w Krok 1: Tworzenie rozwiązania programu Visual Studio i projektu Platformy Flask.

Refaktoryzacja projektu Flask w celu dalszego rozwoju

Szablon Blank Flask Web Project umożliwia utworzenie projektu z jednym plikiem app.py, który zawiera kod startowy oraz pojedynczy widok. Aby umożliwić dalsze opracowywanie aplikacji z wieloma widokami i szablonami, należy oddzielić te funkcje.

Wykonaj następujące kroki, aby dostosować projekt platformy Flask w celu umożliwienia dalszego opracowywania:

1. W eksploratorze rozwiązań kliknij prawym przyciskiem myszy folder projektu Platformy Flask (BasicProject), a następnie wybierz pozycję Dodaj>Nowy folder.

   

2. Nazwij nowy folder aplikacji HelloFlask.

3. Kliknij prawym przyciskiem myszy folder HelloFlask, a następnie wybierz pozycję Dodaj>nowy element, aby utworzyć nowy plik.

4. W oknie dialogowym Dodawanie nowego elementu wybierz szablon Pusty plik języka Python.

   1. Nadaj plikowi nazwę __init__.py. Nazwa pliku powinna zawierać dwa wiodące i dwa końcowe znaki podkreślenia (_) wokół wyrazu init.

   2. Wybierz pozycję Dodaj.

   

5. Dodaj następujący kod do nowego pliku, który tworzy wystąpienie Flask i ładuje widoki aplikacji:

   from flask import Flask
   app = Flask(__name__)
   
   import HelloFlask.views
   

6. W folderze HelloFlask utwórz kolejny nowy plik języka Python o nazwie views.py.

   Ważny

   Pamiętaj, aby określić nazwę pliku jako views.py. Nazwa widoków jest ważna ze względu na instrukcję import HelloFlask.views w pliku __init__.py. Jeśli nazwa widoki nie jest taka sama w obu wystąpieniach, program Visual Studio wyświetla błąd w czasie wykonywania.

7. Dodaj następujący kod do pliku views.py. Ten kod zmienia nazwę funkcji i definiuje trasę powrotną do punktu końcowego /home:

   from flask import Flask
   from HelloFlask import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       return "Hello Flask!"
   

   Ten kod zawiera również kod renderowania strony z pliku app.py i importuje obiekt app zadeklarowany w pliku __init__.py.

8. W folderze HelloFlask utwórz podfolder o nazwie templates. Folder jest teraz pusty.

9. W folderze projektu platformy Flask (BasicProject) zastąp zawartość pliku app.py następującym kodem:

   import os
   from HelloFlask import app    # Imports the code from HelloFlask/__init__.py
   
   if __name__ == '__main__':
       HOST = os.environ.get('SERVER_HOST', 'localhost')
   
       try:
           PORT = int(os.environ.get('SERVER_PORT', '5555'))
       except ValueError:
           PORT = 5555
   
       app.run(HOST, PORT)
   

10. Po zaktualizowaniu kodu zmień nazwę pliku app.py na runserver.py.

11. Upewnij się, że refaktoryzowana struktura projektu platformy Flask wygląda następująco:

    

Uruchamianie refaktoryzowanego programu i sprawdzanie tras

Teraz możesz uruchomić projekt w programie Visual Studio:

1. W programie Visual Studio wybierz pozycję Debugowanie>Rozpocznij debugowanie (F5) lub wybierz pozycję Web Server na głównym pasku narzędzi (widoczna przeglądarka może się różnić):

2. Gdy aplikacja zostanie otwarta w przeglądarce, wypróbuj zarówno punkt końcowy URL / (root), jak i /home w przeglądarce.

   

Uruchamianie zaktualizowanego programu w debugerze

Punkty przerwania można również ustawić w różnych częściach kodu i postępować zgodnie z sekwencją uruchamiania aplikacji w Debuger:

1. Ustaw kilka punktów przerwania, takich jak następujące punkty:

   • Pierwszy wiersz pliku runserver.py
   • Pierwszy wiersz pliku __init__.py
   • Linia return "Hello Flask!" w pliku views.py

2. Uruchom aplikację w Debuger, wybierając pozycję Debugowanie>Rozpocznij debugowanie lub F5.

3. Podczas działania Debuggera , przechodź przez kod za pomocą F10lub uruchom kod od każdego punktu przerwania przy użyciu F5. Możesz również użyć kontrolek debugowania na głównym pasku narzędzi programu Visual Studio, takich jak Kontynuuj, Zatrzymaj, Uruchom ponowniei opcje Krok:

   

4. Gdy skończysz, wybierz Ctrl+C, a następnie dowolny klawisz, aby zatrzymać aplikację. Możesz również zamknąć wszystkie otwarte okna przeglądarki dla tras.

Zatwierdź zmiany w systemie kontroli wersji

Po refaktoryzacji kodu i przetestowaniu aktualizacji możesz przejrzeć i zatwierdzić zmiany w kontroli źródła:

1. Zapisz zmiany w plikach projektu, na przykład za pomocą skrótu klawiaturowego Ctrl+S.

2. Na pasku narzędzi Git wybierz zmiany niezapisane (ołówek 5), aby otworzyć okno Git Changes:

   

3. W oknie Git Changes wprowadź wiadomość zatwierdzenia i wybierz pozycję Commit All:

   

   Po zakończeniu zatwierdzenia program Visual Studio wyświetla komunikat Commit <hash> utworzony lokalnie.

4. (Opjonalnie) Prześlij zatwierdzone zmiany do swojego repozytorium zdalnego.

   1. Na pasku kontrolek usługi Git wybierz zatwierdzenia wychodzące/przychodzące (strzałki 1/0).

   2. Wybierz Sync (najpierw ściągnij, a następnie wypchnij) lub wypchnij.

   

   Możesz również gromadzić wiele lokalnych commitów przed przekazaniem ich do repozytorium zdalnego.

Aby zapoznać się z kolejnymi procedurami w tej serii samouczków, możesz zapoznać się z tą sekcją, aby uzyskać instrukcje zatwierdzania zmian w kontroli źródła.

Określanie częstotliwości zatwierdzeń i wypychania

Zatwierdzanie zmian w kontroli źródła tworzy rekord w dzienniku zmian i punkt, do którego można przywrócić repozytorium zgodnie z potrzebami. Możesz również przeanalizować każdy commit, aby przejrzeć określone zmiany.

Zatwierdzenia w Git są niedrogie. Lepszym rozwiązaniem może być przesłanie zmian w małych ilościach z częstymi zatwierdzeniami, zamiast gromadzić dużą liczbę zmian i przesyłać je jako pojedyncze zatwierdzenie.

Nie trzeba zatwierdzać każdej małej zmiany w poszczególnych plikach. Często dokonuje się zatwierdzenia po dodaniu funkcji, zmianie struktury, jak to pokazano w tym kroku serii samouczków, lub refaktoryzacji kodu. Dobrym rozwiązaniem jest również skonsultowanie się ze współpracownikami w celu uzgodnienia stopnia szczegółowości commitów, które będą najlepsze dla wszystkich.

Jak często zatwierdzasz zmiany i jak często wypychasz te zmiany do zdalnego repozytorium to dwie różne kwestie. Zanim prześlesz je do repozytorium zdalnego, możesz zgromadzić wiele zatwierdzeń w lokalnym repozytorium. Częstotliwość zatwierdzeń zależy od tego, jak zespół chce zarządzać repozytorium.

Używanie szablonów do renderowania stron i widoków

Funkcja home w pliku views.py generuje odpowiedź HTTP w postaci zwykłego tekstu dla strony. Większość rzeczywistych stron internetowych odpowiada za pomocą rozbudowanych stron HTML, które często zawierają dane na żywo. Głównym powodem, dla którego deweloperzy definiują widoki przy użyciu funkcji, jest dynamiczne generowanie zawartości.

Wartość zwracana dla widoku stanowi tylko ciąg znaków. Możesz utworzyć dowolny kod HTML w postaci ciągu, korzystając z treści dynamicznej. Ponieważ najlepiej oddzielić znaczniki od danych, lepiej umieścić znaczniki w szablonie i przechowywać dane w kodzie.

Dostosowywanie widoków w celu używania wbudowanego kodu HTML

Pierwszym krokiem jest przekonwertowanie przetwarzania widoku w celu użycia wbudowanego kodu HTML dla strony z zawartością dynamiczną:

1. Zastąp zawartość pliku views.py następującym kodem:

   from datetime import datetime
   from flask import render_template
   from HelloFlask import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       html_content = "<html><head><title>Hello Flask</title></head><body>"
       html_content += "<strong>Hello Flask!</strong> on " + formatted_now
       html_content += "</body></html>"
   
       return html_content
   

2. Zapisz zmiany i ponownie uruchom aplikację.

3. Odśwież stronę kilka razy, aby potwierdzić, że data i godzina się aktualizują. Po zakończeniu zatrzymaj aplikację.

Tworzenie szablonu HTML

Następnie przekonwertuj proces renderowania strony, aby użyć szablonu HTML:

1. Kliknij prawym przyciskiem myszy folder szablonów, a następnie wybierz Dodaj>Nowy element, aby utworzyć nowy plik.

2. W oknie dialogowym Dodawanie nowego elementu wybierz szablon pliku Strona HTML. Nadaj plikowi nazwę index.html i wybierz pozycję Dodaj.

3. Zastąp podaną zawartość pliku HTML następującym znacznikiem:

   <html>
   <head>
      <title>Hello Flask</title>
   </head>
   
   <body>
      {{ content }}
   </body>
   </html>
   

   W tym kodzie instrukcja {{ content }} jest symbolem zastępczym lub tokenem zastępczym (nazywanym również zmienną szablonu ), dla której należy podać wartość w kodzie.

Dostosowywanie funkcji głównej w celu załadowania szablonu

Aby użyć metody render_template, należy zmodyfikować funkcję home. Ta metoda ładuje szablon HTML i dostarcza wartość dla {{ content }} przy użyciu nazwanego argumentu zgodnego z nazwą symbolu zastępczego.

1. W pliku views.py zastąp definicję funkcji home następującym kodem:

   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       return render_template(
           "index.html",
           content = "<strong>Hello, Flask!</strong> on " + formatted_now)
   

   Platforma Flask automatycznie wyszukuje szablony w folderze szablonów, więc ścieżka do szablonu jest względna względem tego folderu.

2. Zapisz zmiany projektu i ponownie uruchom aplikację.

   Zwróć uwagę, że śródliniowa składnia HTML (\<strong> ...) w wartości content nie renderuje jako HTML, ponieważ aparat tworzenia szablonów (Jinja) automatycznie unika zawartości HTML. Automatyczne ucieczki zapobiega przypadkowym lukom w zabezpieczeniach przed atakami polegającymi na wstrzyknięciu.

   Deweloperzy często zbierają dane wejściowe z jednej strony i używają ich jako wartości na innej, korzystając z symbolu zastępczego szablonu. Ucieczka służy również jako przypomnienie, że najlepiej trzymać HTML z dala od kodu.

   Po zakończeniu zatrzymaj aplikację.

Używanie unikatowych symboli zastępczych

Dla każdego elementu danych w znacznikach HTML można używać odrębnych symboli zastępczych. Następnie ponownie dostosuj funkcję home, aby podać określone wartości zastępcze:

1. Zastąp zawartość pliku index.html następującym znacznikiem:

   <html>
     <head>
       <title>{{ title }}</title>
     </head>
     <body>
       <strong>{{ message }}</strong>{{ content }}
     </body>
   </html>
   

2. W pliku views.py zastąp definicję funkcji home następującym kodem, aby podać wartości dla wszystkich symboli zastępczych:

   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       return render_template(
           "index.html",
           title = "Hello Flask",
           message = "Hello, Flask!",
           content = " on " + formatted_now)
   

3. Zapisz zmiany i ponownie uruchom aplikację. Tym razem powinny zostać wyświetlone prawidłowo renderowane dane wyjściowe:

   

4. Możesz zatwierdzić zmiany kontroli źródła i zaktualizować repozytorium zdalne. Aby uzyskać więcej informacji, zobacz Zatwierdzanie zmian w kontroli źródła.

Oddzielne szablony stron

Szablony są zwykle przechowywane w oddzielnych plikach HTML, ale można również użyć wbudowanego szablonu. Zaleca się używanie osobnych plików w celu utrzymania czystej separacji między znacznikami a kodem.

Używanie rozszerzenia .html dla szablonów

Rozszerzenie .html dla plików szablonów strony jest całkowicie opcjonalne. Zawsze można zidentyfikować dokładną ścieżkę względną do pliku w pierwszym argumencie funkcji render_template. Jednak program Visual Studio (i inne edytory) zwykle udostępnia funkcje, takie jak uzupełnianie kodu i kolorowanie składni z plikami .html, co przewyższa fakt, że szablony stron nie są html.

Podczas pracy z projektem Flask Visual Studio automatycznie wykrywa, czy edytowany plik HTML jest rzeczywiście szablonem Flask i udostępnia niektóre funkcje autouzupełniania. Jeśli zaczniesz wprowadzać komentarz do szablonu strony Flask ({#), program Visual Studio automatycznie dostarcza znaki zamykające #}. Polecenia Skomentuj zaznaczenie i Odkomentuj zaznaczenie (w menu Edytuj>Zaawansowane) również używają komentarzy szablonu zamiast komentarzy HTML.

Organizowanie szablonów w podfoldery

Możesz użyć podfolderów, a następnie odwołać się do ścieżki względnej w folderze szablonów podczas wywołań funkcji render_template. Takie podejście to doskonały sposób efektywnego tworzenia przestrzeni nazw dla szablonów.

Następny krok

Krok 3. Obsługa plików statycznych, dodawanie stron i używanie dziedziczenia szablonu