Krok 2. Tworzenie aplikacji platformy Flask z widokami i szablonami stron

Artykuł
09/08/2023

Poprzedni krok: Tworzenie projektu i rozwiązania programu Visual Studio

W kroku 1 tego samouczka utworzono aplikację platformy Flask z jedną stroną i całym kodem w jednym pliku. Aby umożliwić tworzenie w przyszłości, najlepiej refaktoryzować kod i utworzyć strukturę szablonów stron. W szczególności chcesz oddzielić kod dla widoków aplikacji od innych aspektów, takich jak kod uruchamiania.

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

Refaktoryzacja kodu aplikacji w celu oddzielenia widoków od kodu uruchamiania (krok 2–1)
Renderowanie widoku przy użyciu szablonu strony (krok 2–2)

Krok 2–1. Refaktoryzacja projektu w celu wspierania dalszego opracowywania

W kodzie utworzonym przez szablon "Pusty projekt internetowy platformy Flask" masz jeden plik app.py zawierający kod startowy obok pojedynczego widoku. Aby umożliwić dalsze opracowywanie aplikacji z wieloma widokami i szablonami, najlepiej oddzielić te kwestie.

W folderze projektu utwórz folder aplikacji o nazwie HelloFlask (kliknij prawym przyciskiem myszy projekt w Eksplorator rozwiązań i wybierz polecenie Dodaj>nowy folder).
W folderze HelloFlask utwórz plik o nazwie __init__.py z następującą zawartością, która tworzy Flask wystąpienie i ładuje widoki aplikacji (utworzone w następnym kroku):
```
from flask import Flask
app = Flask(__name__)

import HelloFlask.views
```
W folderze HelloFlask utwórz plik o nazwie views.py z następującą zawartością. Nazwa views.py jest ważna, ponieważ użyto import HelloFlask.views jej w pliku __init__.py; w czasie wykonywania zostanie wyświetlony błąd, jeśli nazwy nie są zgodne.
```
from flask import Flask
from HelloFlask import app

@app.route('/')
@app.route('/home')
def home():
    return "Hello Flask!"
```
Oprócz zmiany nazwy funkcji i trasy na home, ten kod zawiera kod renderowania strony z app.py i importuje app obiekt zadeklarowany w pliku __init__.py.
Utwórz podfolder w nazwach szablonów HelloFlask, który na razie pozostaje pusty.

W folderze głównym projektu zmień nazwę app.py na runserver.py, a zawartość jest zgodna z 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)

Struktura projektu powinna wyglądać podobnie do poniższej ilustracji:
Wybierz pozycję Debuguj>rozpocznij debugowanie (F5) lub użyj przycisku Serwer internetowy na pasku narzędzi (widoczna przeglądarka może się różnić), aby uruchomić aplikację i otworzyć przeglądarkę. Spróbuj użyć tras adresów URL /i /home.
Punkty przerwania można również ustawić w różnych częściach kodu i ponownie uruchomić aplikację, aby postępować zgodnie z sekwencją uruchamiania. Na przykład ustaw punkt przerwania w pierwszych wierszach runserver.py i *HelloFlask_*init_.py i w return "Hello Flask!" wierszu w views.py. Następnie uruchom ponownie aplikację (Uruchom ponownie debugowanie>, Ctrl+Shift+F5 lub przycisk paska narzędzi pokazany poniżej) i wykonaj kroki przez kod (F10) lub uruchom polecenie z każdego punktu przerwania przy użyciu klawisza F5.
Po zakończeniu zatrzymaj aplikację.

Zatwierdzanie kontroli źródła

Po pomyślnym wprowadzeniu zmian w kodzie i przetestowaniu możesz przejrzeć i zatwierdzić zmiany w kontroli źródła. W kolejnych krokach, gdy ten samouczek przypomina o ponownym zatwierdzeniu kontroli źródła, możesz zapoznać się z tą sekcją.

Wybierz przycisk zmiany u dołu programu Visual Studio (po okręgu poniżej), aby przejść do programu Team Explorer.
W programie Team Explorer wprowadź komunikat zatwierdzenia, taki jak "Kod refaktoryzacji", a następnie wybierz pozycję Zatwierdź wszystko. Po zakończeniu zatwierdzania zostanie wyświetlony komunikat Commit hash created locally (Utworzenie skrótu> zatwierdzenia <lokalnie). Zsynchronizuj, aby udostępnić zmiany serwerowi. Jeśli chcesz wypchnąć zmiany do repozytorium zdalnego, wybierz pozycję Synchronizuj, a następnie wybierz pozycję Wypchnij w obszarze Zatwierdzenia wychodzące. Można również zgromadzić wiele lokalnych zatwierdzeń przed wypchnięciem do lokalizacji zdalnej.

Pytanie: Jak często należy zatwierdzić jedno zatwierdzenie w kontroli źródła?

Odpowiedź: Zatwierdzanie zmian w kontroli źródła tworzy rekord w dzienniku zmian i punkt, do którego można przywrócić repozytorium w razie potrzeby. Każde zatwierdzenie można również zbadać pod kątem jego konkretnych zmian. Ponieważ zatwierdzenia w usłudze Git są niedrogie, lepiej jest wykonywać częste zatwierdzenia niż gromadzić większą liczbę zmian w jednym zatwierdzeniu. Nie trzeba zatwierdzać każdej małej zmiany w poszczególnych plikach. Zazwyczaj zatwierdza się podczas dodawania funkcji, zmieniając strukturę, taką jak w tym kroku, lub refaktoryzując jakiś kod. Skontaktuj się również z innymi osobami w zespole, aby uzyskać stopień szczegółowości zatwierdzeń, które działają najlepiej dla wszystkich.

Jak często zatwierdzasz i jak często wypychasz zatwierdzenia do repozytorium zdalnego są dwoma różnymi problemami. Zanim wypchniesz je do repozytorium zdalnego, możesz zgromadzić wiele zatwierdzeń w repozytorium lokalnym. Częstotliwość zatwierdzeń zależy od tego, jak zespół chce zarządzać repozytorium.

Krok 2–2. Używanie szablonu do renderowania strony

Funkcja home , która jest do tej pory w views.py generuje nic więcej niż odpowiedź HTTP w postaci zwykłego tekstu dla strony. Jednak większość rzeczywistych stron internetowych odpowiada za pomocą zaawansowanych stron HTML, które często zawierają dane na żywo. Podstawowym powodem definiowania widoku przy użyciu funkcji jest dynamiczne generowanie zawartości.

Ponieważ wartość zwracana dla widoku jest tylko ciągiem, możesz utworzyć dowolny kod HTML, który chcesz w ciągu, przy użyciu zawartości dynamicznej. Jednak ponieważ najlepiej oddzielić znaczniki od danych, lepiej umieścić znaczniki w szablonie i zachować dane w kodzie.

Na początek zmodyfikuj views.py , aby zawierał następujący kod, który używa wbudowanego kodu HTML dla strony z zawartością dynamiczną:

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

Uruchom aplikację i odśwież stronę kilka razy, aby zobaczyć, że data/godzina została zaktualizowana. Po zakończeniu zatrzymaj aplikację.
Aby przekonwertować renderowanie strony w celu użycia szablonu, utwórz plik o nazwie index.html w folderze templates o następującej zawartości, gdzie {{ content }} jest symbolem zastępczym lub tokenem zastępczym (nazywanym również zmienną szablonu), dla którego należy podać wartość w kodzie:
```
<html>
  <head>
    <title>Hello Flask</title>
  </head>

  <body>
    {{ content }}
  </body>
</html>
```
Zmodyfikuj home funkcję w celu render_template załadowania szablonu i podaj wartość "content", która jest wykonywana przy użyciu nazwanego argumentu pasującego do nazwy symbolu zastępczego. Platforma Flask automatycznie wyszukuje szablony w folderze templates , więc ścieżka do szablonu jest względna względem tego folderu:
```
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)
```
Uruchom aplikację i zobacz wyniki. Zwróć uwagę, że wbudowany kod HTML w content wartości nie jest renderowany 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ą jej jako wartości w innej za pośrednictwem symbolu zastępczego szablonu. Ucieczka służy również jako przypomnienie, że najlepiej zachować kod HTML z kodu.

W związku z tym przejrzyj szablony \index.html , aby zawierać odrębne symbole zastępcze dla każdego elementu danych w znaczniku:
```
<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <strong>{{ message }}</strong>{{ content }}
  </body>
</html>
```
Następnie zaktualizuj funkcję, home 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)
```
Uruchom ponownie aplikację i zobacz prawidłowo renderowane dane wyjściowe.
Możesz zatwierdzić zmiany kontroli źródła i zaktualizować repozytorium zdalne. Aby uzyskać więcej informacji, zobacz krok 2–1.

Pytanie: Czy szablony stron muszą znajdować się w osobnym pliku?

Odpowiedź: Chociaż szablony są zwykle przechowywane w oddzielnych plikach HTML, można również użyć wbudowanego szablonu. Zaleca się zachowanie czystej separacji między znacznikami i kodem.

Pytanie: Czy szablony muszą używać rozszerzenia pliku HTML?

Odpowiedź: Rozszerzenie HTML dla plików szablonów strony jest całkowicie opcjonalne, ponieważ zawsze można zidentyfikować dokładną ścieżkę względną do pliku w pierwszym argumencie render_template funkcji. 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 platformy Flask program Visual Studio automatycznie wykrywa, kiedy edytowany plik HTML jest w rzeczywistości szablonem platformy Flask i udostępnia pewne funkcje autouzupełnianie. Na przykład podczas wpisywania komentarza {#do szablonu strony platformy Flask program Visual Studio automatycznie wyświetla znaki zamykające #} . Polecenia zaznaczenia komentarza i zaznaczenia komentarza (w menu Edytuj>zaawansowane i na pasku narzędzi) również używają komentarzy szablonu zamiast komentarzy HTML.

Pytanie: Czy szablony można organizować w dalsze podfoldery?

Odpowiedź: Tak, możesz użyć podfolderów, a następnie odwołać się do ścieżki względnej w obszarze szablonów w wywołaniach do render_template. Jest to doskonały sposób efektywnego tworzenia przestrzeni nazw dla szablonów.

Następne kroki

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

Głębiej

Przewodnik Szybki start platformy Flask — szablony renderowania (flask.pocoo.org)
Samouczek dotyczący kodu źródłowego w witrynie GitHub: Microsoft/python-sample-vs-learning-flask