Samouczek: praca z frameworkiem webowym Flask w programie Visual Studio

Ten artykuł jest pierwszym krokiem w trzyczęściowej serii samouczków, która pokazuje, jak pracować z platformą Flask w programie Visual Studio. flask to uproszczona struktura języka Python dla aplikacji internetowych, która udostępnia podstawy routingu adresów URL i renderowania stron. Platforma Flask jest nazywana strukturą "mikro", ponieważ nie zapewnia bezpośrednio funkcji, takich jak walidacja formularzy, abstrakcja bazy danych, uwierzytelnianie itd. Funkcje te są udostępniane przez specjalne pakiety Pythona zwane rozszerzeniami Flask . Rozszerzenia są bezproblemowo integrowane z platformą Flask, aby wyglądały tak, jakby były częścią samej platformy Flask. Na przykład sama platforma Flask nie udostępnia silnika szablonów stron. Szablonowanie jest realizowane przez rozszerzenia takie jak Jinja i Jade, jak zademonstrowano w tym samouczku.

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

• Tworzenie rozwiązania programu Visual Studio i projektu Platformy Flask
• Sprawdź kod szablonowy projektu oraz uruchom projekt
• Tworzenie repozytorium Git w celu zachowania zmian w projekcie platformy Flask
• Praca z kontrolkami kodu źródłowego usługi Git
• Tworzenie środowiska wirtualnego dla projektu Platformy Flask

Ten samouczek różni się od szybkiego startu Flask. Dowiedz się więcej o platformie Flask i sposobie korzystania z szablonów projektów platformy Flask w celu zapewnienia bardziej rozbudowanego punktu wyjścia dla projektów. Szablony automatycznie instalują pakiet Flask podczas tworzenia projektu, podczas gdy w przewodniku Szybki start pokazano, jak ręcznie zainstalować pakiet.

Warunki wstępne

• Program Visual Studio 2022 w systemie Windows z następującymi opcjami wybranymi w Instalatorze programu Visual Studio:

  • Na karcie Obciążenia wybierz opcję Programowanie w języku Python. Aby uzyskać więcej informacji, zobacz Instalowanie obsługi języka Python w programie Visual Studio.

  • Na karcie Poszczególne składniki pod Code toolswybierz opcję Git for Windows.

Szablony projektów platformy Flask są dołączone do wszystkich wcześniejszych wersji narzędzi Python Tools for Visual Studio. Szczegóły szablonu mogą się różnić od opisów w tym samouczku.

Program Visual Studio dla komputerów Mac nie jest obsługiwany. Aby uzyskać więcej informacji, zobacz Co się dzieje z programem Visual Studio dla komputerów Mac? program Visual Studio Code w systemach Windows, Mac i Linux dobrze współpracuje z językiem Python za pośrednictwem dostępnych rozszerzeń.

Tworzenie rozwiązania programu Visual Studio i projektu platformy Flask

W kroku 1 tego samouczka utworzysz pojedyncze rozwiązanie programu Visual Studio zawierające dwa oddzielne projekty platformy Flask. Projekty są tworzone przy użyciu różnych szablonów projektów platformy Flask dołączonych do programu Visual Studio. Zachowując projekty w tym samym rozwiązaniu, można łatwo przełączać się między różnymi plikami w celu porównania.

Wykonaj tę procedurę, aby utworzyć rozwiązanie i projekt internetowy platformy Flask:

1. W programie Visual Studio wybierz pozycję Plik >Nowy>Projekt i wyszukaj ciąg "Flask". Następnie wybierz szablon Pusty projekt sieciowy Flask i wybierz pozycję Dalej.

   

2. Skonfiguruj nowy projekt i rozwiązanie:

   1. Ustaw nazwę projektu programu Visual Studio na BasicProject. Ta nazwa jest również używana dla projektu Platformy Flask.

   2. Określ Location dla programu Visual Studio, aby zapisać rozwiązanie i projekt.

   3. Wyczyść opcję „Umieść rozwiązanie i projekt w tym samym katalogu” .

   4. Ustaw nazwę rozwiązania na LearningFlask. Rozwiązanie służy jako kontener dla wielu projektów w tej serii samouczków.

3. Wybierz pozycję Utwórz.

4. Po chwili program Visual Studio wyświetli monit plik specyfikacji pakietu języka Python "requirements.txt" został wykryty w projekcie "BasicProject".:

   

   Okno dialogowe wskazuje, że wybrany szablon zawiera plik requirements.txt, którego można użyć do utworzenia środowiska wirtualnego dla projektu.

5. Wybierz X po prawej stronie, aby zamknąć komunikat. W dalszej części tego samouczka utworzysz środowisko wirtualne i upewnisz się, że kontrola źródła wyklucza środowisko. (Środowisko zawsze można utworzyć później z pliku requirements.txt).

Sprawdź kontrole Git

W następnej procedurze zapoznasz się z obsługą programu Visual Studio dla kontroli źródła git.

Ważny

Wraz z wydaniem programu Visual Studio 2019 w wersji 16.8środowisko kontroli wersji git jest domyślnie włączone. Jeśli chcesz dowiedzieć się więcej o tym, jak Git wypada w porównaniu z programem Team Explorer, zobacz stronę porównanie Git i Team Explorer.

Jeśli jednak wolisz nadal używać programu Team Explorer w programie Visual Studio 2019, przejdź do Narzędzia Tools>Opcje>Środowisko>Preview Features, a następnie przełącz do pola wyboru New Git user experience. (Ta opcja nie jest dostępna w programie Visual Studio 2022 lub nowszym). Aby uzyskać więcej informacji, zobacz Connect to projects in Team Explorer.

1. Aby zatwierdzić projekt w lokalnej kontroli źródła, wybierz pozycję Dodaj do kontroli źródła w prawym dolnym rogu okna głównego programu Visual Studio, a następnie wybierz pozycję Git:

   

   Zostanie otwarte okno Tworzenie repozytorium Git, w którym można utworzyć i przesłać nowe repozytorium.

2. Po utworzeniu repozytorium pasek kontrolek Git pojawi się w prawym dolnym rogu okna głównego programu Visual Studio:

   

   Od lewej do prawej pasek kontrolek usługi Git zawiera liczbę zatwierdzeń wychodzących/przychodzących (strzałki #/#), liczbę niezatwierdzonych zmian (ołówek #), nazwę bieżącej gałęzi i nazwę bieżącego repozytorium. Kontrolki Git są również dostępne w menu Git na głównym pasku narzędzi.

3. Na pasku kontrolek usługi Git wybierz zmiany (ołówek #), aby otworzyć okno Git Changes. Możesz również wybrać pozycję View>Git changes (Ctrl+O, Ctrl+G):

   

   W tym oknie są wyświetlane szczegółowe informacje o wszelkich niezatwierdzonych zmianach, w tym o zapisanych zmianach. Ponieważ nowo utworzony projekt jest już zatwierdzony do kontroli źródła automatycznie, nie widzisz żadnych oczekujących zmian.

4. Na pasku kontrolek Git wybierz zatwierdzenia (strzałki #/#), a następnie wybierz pozycję Wyświetl wszystkie zatwierdzenia:

   

   Zostanie otwarte okno repozytorium Git. Możesz również wybrać View>Git repository (Ctrl+O, Ctrl+R):

   

   W tym oknie po lewej stronie widoczne są szczegóły aktualnego repozytorium, a po prawej stronie bieżąca gałąź z wychodzącymi i przychodzącymi zatwierdzeniami.

   Aby wyświetlić widok różnic dla pliku, wybierz zatwierdzenie w środkowym okienku. Poprzednia wersja jest wyświetlana po lewej stronie, a poprawiona wersja jest wyświetlana po prawej stronie. Szczegóły zawierają również autor zmian, zatwierdzacz zmian i komunikat zatwierdzenia.

Przyzwyczaj się do okresowego korzystania z kontrolek Git w programie Visual Studio, aby zatwierdzać i wypychać zmiany. Ten samouczek przypomina cię we właściwych momentach.

Użyj kontroli źródła od początku

Istnieje kilka zalet używania kontroli źródła od początku projektu. Jeśli używasz kontroli źródła od początku projektu, zwłaszcza jeśli używasz również repozytorium zdalnego, uzyskasz regularną kopię zapasową projektu poza siedzibą. W przeciwieństwie do obsługi projektu tylko w lokalnym systemie plików, kontrola źródła zapewnia również pełną historię zmian i łatwą możliwość przywracania pojedynczego pliku lub całego projektu do poprzedniego stanu. Historia zmian pomaga określić przyczynę regresji (niepowodzenia testów).

Kontrola wersji jest niezbędna, jeśli wiele osób pracuje nad projektem, ponieważ zarządza nadpisywaniem i zapewnia rozwiązanie konfliktów. Kontrola źródła jest zasadniczo formą automatyzacji, umożliwia zautomatyzowanie kompilacji, testowania i zarządzania wydaniami. Jest to pierwszy krok w korzystaniu z usługi Azure DevOps dla projektu i dlatego, że bariery wejścia są tak niskie, nie ma powodu, aby nie używać kontroli źródła od początku.

Aby uzyskać więcej informacji na temat kontroli źródła jako automatyzacji, zobacz The Source of Truth: The Role of Repozytoria w usłudze DevOps, artykuł w magazynie MSDN Magazine napisany dla aplikacji mobilnych, które mają zastosowanie również do aplikacji internetowych.

Zapobiegaj automatycznemu zatwierdzaniu projektów w programie Visual Studio

Wykonaj następujące kroki, aby uniemożliwić programowi Visual Studio automatyczne zatwierdzanie nowego projektu:

1. Wybierz Narzędzia >Opcje>Kontrola źródła>Globalne ustawienia Git.

2. Wyczyść opcję Zatwierdź zmiany po scaleniu domyślnie i wybierz pozycję OK.

Tworzenie środowiska wirtualnego i wykluczanie kontroli źródła

Po skonfigurowaniu kontroli źródła dla projektu można utworzyć środowisko wirtualne z wymaganymi pakietami platformy Flask. Następnie możesz użyć okna Git Changes, aby wykluczyć folder środowiska z kontroli źródła.

1. W eksploratorze rozwiązań kliknij prawym przyciskiem myszy węzeł Środowiska języka Python i wybierz pozycję Dodaj środowisko.

   

2. W oknie dialogowym Dodawanie środowiska wybierz pozycję Utwórz, aby zaakceptować wartości domyślne. (Możesz zmienić nazwę środowiska wirtualnego, jeśli chcesz, co zmienia nazwę jego podfolderu, ale env jest standardową konwencją).

   

3. Jeśli program Visual Studio wyświetli monit o uprawnienia administratora, podaj zgodę. Poczekaj kilka minut, gdy program Visual Studio pobiera i instaluje pakiety. W przypadku platformy Flask i jej zależności proces może wymagać rozszerzenia blisko 1000 plików w ponad 100 podfolderach. Postęp można wyświetlić w oknie Dane wyjściowe programu Visual Studio.

4. Na pasku narzędzi Git wybierz niezatwierdzone zmiany (które teraz wyświetlają 99+), aby otworzyć okno Zmiany Git :

   

   Tworzenie środowiska wirtualnego powoduje wprowadzenie tysięcy zmian, ale nie trzeba ich uwzględniać w kontroli źródła. Ty lub każda inna osoba, która klonuje projekt, zawsze może odtworzyć środowisko przy użyciu pliku requirements.txt.

5. Aby wykluczyć środowisko wirtualne z systemu kontroli wersji, w oknie Git Changes (Zmiany Git) kliknij prawym przyciskiem myszy folder env i wybierz pozycję Ignoruj te elementy lokalne:

   

   Po wykluczeniu środowiska wirtualnego jedynymi pozostałymi zmianami są pliki projektu (.py) i plik .gitignore, który zawiera dodany wpis dla folderu środowiska wirtualnego.

   Aby wyświetlić widok różnic dla pliku .gitignore, w oknie Zmiany usługi Git kliknij dwukrotnie plik.

6. W oknie Git Changes wprowadź komunikat zatwierdzenia, taki jak "Początkowe zmiany projektu":

   

7. W menu rozwijanym Zatwierdzanie, wybierz opcję Zatwierdzanie etapowe i Wypychanie.

Możesz otworzyć okno repozytorium Git i potwierdzić, że zatwierdzenia etapowe są wyświetlane w historii lokalnej dla bieżącej gałęzi.

Omówienie przeznaczenia środowisk wirtualnych

Środowisko wirtualne to doskonały sposób izolowania dokładnych zależności aplikacji. Ta metoda izolacji pozwala uniknąć konfliktów w globalnym środowisku języka Python i ułatwia testowanie i współpracę. Wraz z upływem czasu podczas tworzenia aplikacji niezmiennie wprowadzasz wiele przydatnych pakietów języka Python. Dzięki przechowywaniu pakietów w środowisku wirtualnym specyficznym dla projektu można łatwo zaktualizować plik requirements.txt projektu, który opisuje to środowisko, które jest uwzględnione w kontroli źródła. Podczas kopiowania projektu na inne komputery, w tym serwerów kompilacji, serwerów wdrażania i innych komputerów programistycznych, można łatwo odtworzyć środowisko. Środowisko można odtworzyć przy użyciu tylko pliku requirements.txt, dlatego środowisko nie musi być w kontroli źródła. Aby uzyskać więcej informacji, zobacz Używaj środowisk wirtualnych.

Usuwanie środowiska wirtualnego pod kontrolą źródła

Środowisko wirtualne można usunąć po jego kontroli źródła. Wykonaj następujące kroki:

1. Edytuj plik .gitignore, aby wykluczyć folder:

   1. Otwórz plik, wybierając pozycję Plik>Otwórz plik>.

      Możesz również otworzyć plik z programu Team Explorer. Na stronie Ustawienia wybierz pozycję Ustawienia repozytorium . Przejdź do sekcji Ignoruj pliki atrybutów & i wybierz link edytuj Edytuj obok .gitignore.

   2. Znajdź sekcję na końcu z komentarzem # Python Tools for Visual Studio (PTVS).

   3. Po tej sekcji dodaj nowy wiersz dla folderu środowiska wirtualnego, na przykład /BasicProject/env.

2. Otwórz okno polecenia i przejdź do folderu (takiego jak BasicProject), który ma folder środowiska wirtualnego, taki jak env.

3. Uruchom polecenie git rm -r env, aby usunąć środowisko wirtualne, które jest obecnie pod kontrolą źródła.

4. Zatwierdź zmiany za pomocą polecenia git commit -m 'Remove venv' lub zatwierdź je na stronie ZmianyTeam Explorer.

Badanie kodu szablonowego

W tej sekcji przeanalizujesz standardowy kod w pliku projektu (.py), który program Visual Studio tworzy na podstawie wybranego szablonu.

1. Otwórz Eksplorator rozwiązań, aby wyświetlić pliki rozwiązania i projektu. Początkowy projekt zawiera tylko dwa pliki, app.py i requirements.txt:

   

   Plik requirements.txt określa zależności pakietu Flask. Obecność tego pliku jest tym, co zaprasza do utworzenia środowiska wirtualnego podczas pierwszego tworzenia projektu.

   Pojedynczy plik app.py zawiera standardowy kod pustego projektu internetowego platformy Flask.

2. Otwórz plik app.py w edytorze i sprawdź pierwszą sekcję — instrukcję import dla platformy Flask.

   Ta instrukcja tworzy wystąpienie klasy Flask, która jest przypisana do zmiennej app. Ta sekcja przypisuje również zmienną wsgi_app (która jest przydatna podczas wdrażania na hoście internetowym, ale nie jest na razie używana):

   from flask import Flask
   app = Flask(__name__)
   
   # Make the WSGI interface available at the top level so wfastcgi can get it.
   wsgi_app = app.wsgi_app
   

3. Druga sekcja do przeglądu występuje na końcu pliku. Ta sekcja zawiera opcjonalny kod, którego można użyć do uruchomienia serwera programistycznego platformy Flask.

   Kod można zdefiniować tak, aby używał określonych wartości hostów i portów pobranych ze zmiennych środowiskowych lub użyć domyślnej wartości hosta i portu localhost:55551.

   if __name__ == '__main__':
       import os
       HOST = os.environ.get('SERVER_HOST', 'localhost')
       try:
           PORT = int(os.environ.get('SERVER_PORT', '5555'))
       except ValueError:
           PORT = 5555
       app.run(HOST, PORT)
   

4. Trzecia sekcja kodu do zbadania przypisuje funkcję do trasy adresu URL, co oznacza, że funkcja udostępnia zasób zidentyfikowany przez adres URL.

   Trasy definiuje się przy użyciu dekoratora @app.route platformy Flask z argumentem będącym względnym adresem URL z katalogu głównego strony. Jak widać w kodzie, funkcja zwraca tylko ciąg tekstowy, który wystarczy do renderowania przeglądarki. W kolejnych krokach tej serii samouczków zaktualizujesz kod w celu renderowania bogatszych stron przy użyciu kodu HTML.

   @app.route('/')
   def hello():
       """Renders a sample page."""
       return "Hello World!"
   

Zrozumienie argumentu name w klasie Flask

Argument name w klasie Flask to nazwa modułu lub pakietu aplikacji. Platforma Flask używa nazwy, aby określić, gdzie szukać szablonów, plików statycznych i innych zasobów należących do aplikacji. W przypadku aplikacji zawartych w jednym module __name__ jest zawsze właściwą wartością. Nazwa jest również ważna dla rozszerzeń, które wymagają informacji o debugowaniu. Aby uzyskać więcej informacji i innych argumentów, zobacz dokumentację klasy Flask (flask.pocoo.org).

Używanie wielu dekoratorów tras

Funkcja może mieć więcej niż jeden dekorator trasy. Możesz użyć dowolnej liczby dekoratorów, jeśli ta sama funkcja obsługuje wiele ścieżek. Aby na przykład użyć funkcji hello dla trasy / i trasy /hello, użyj następującego kodu:

@app.route('/')
@app.route('/hello')
def hello():
    """Renders a sample page."""
    return "Hello World!"

Używanie zmiennych tras adresu URL i parametrów zapytania

Platforma Flask może pracować ze zmiennymi trasami adresów URL i parametrami zapytania. W trasie oznaczasz dowolną zmienną za pomocą atrybutu <variable_name>. Platforma Flask przekazuje zmienną do funkcji przy użyciu nazwanego argumentu w ścieżce adresu URL. Na przykład trasa w postaci /hello/<name> generuje argument ciągu o nazwie name dla funkcji. Parametry zapytania są dostępne za pośrednictwem właściwości request.args, w szczególności za pośrednictwem metody request.args.get. Poniższy kod zawiera przykład:

# URL: /hello/<name>?message=Have%20a%20nice%20day
@app.route('/hello/<name>')
def hello(name):
    msg = request.args.get('message','')
    return "Hello " + name + "! "+ msg + "."

Aby zmienić typ, do zmiennej dodaj prefiks int, float, path (który akceptuje ukośniki do określenia nazw folderów) i uuid. Więcej informacji można znaleźć w sekcji reguły zmiennych w dokumentacji platformy Flask.

Generowanie wymagań po zainstalowaniu pakietu

Program Visual Studio może wygenerować plik requirements.txt ze środowiska wirtualnego po zainstalowaniu innych pakietów.

• W Eksploratorze rozwiązań rozwiń węzeł Środowiska języka Python, kliknij prawym przyciskiem myszy swoje środowisko wirtualne i wybierz opcję Wygeneruj requirements.txt.

Dobrym rozwiązaniem jest okresowe użycie tego polecenia podczas modyfikowania środowiska. Zatwierdź zmiany w pliku requirements.txt do kontroli źródła wraz z innymi zmianami kodu, które zależą od tego środowiska. W przypadku skonfigurowania ciągłej integracji na serwerze kompilacji należy wygenerować plik i zatwierdzić zmiany za każdym razem, gdy zmodyfikujesz środowisko.

Uruchamianie projektu

Teraz możesz przystąpić do uruchamiania projektu w programie Visual Studio, wykonując następującą procedurę:

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. Polecenie przypisuje losowy numer portu do zmiennej środowiskowej PORT i uruchamia plik app.py języka Python.

   Kod uruchamia aplikację przy użyciu tego portu na serwerze deweloperskim platformy Flask.

   Jeśli program Visual Studio wyświetli komunikat „Nie można uruchomić debugera” i wskaże, że nie znaleziono pliku startowego, kliknij prawym przyciskiem myszy plik app.py w Eksploratorze rozwiązań i wybierz polecenie Ustaw jako plik startowy.

3. Po uruchomieniu serwera zostanie otwarte okno konsoli w celu wyświetlenia dziennika serwera. Program Visual Studio automatycznie otwiera przeglądarkę na http://localhost:<port>, gdzie powinieneś zobaczyć komunikat renderowany przez funkcję hello:

   

4. Po zakończeniu zamknij okno konsoli, które zatrzymuje serwer deweloperski platformy Flask. Możesz również wybrać pozycję Debugowanie>Zatrzymaj debugowanie.

Porównanie poleceń debugowania z poleceniami języka Python projektu

Istnieje różnica między używaniem poleceń menu Debug a poleceniami serwera wymienionymi w podmenu Python projektu.

Oprócz poleceń menu Debug i przycisków paska narzędzi, można również uruchomić serwer przy użyciu polecenia Python>Start server lub Python>Start debug server w menu kontekstowym projektu.

Oba polecenia otwierają okno konsoli, w którym zostanie wyświetlony lokalny adres URL (localhost:port) dla uruchomionego serwera. Należy jednak ręcznie otworzyć przeglądarkę z tym adresem URL, a uruchomienie serwera debugowania nie powoduje automatycznego uruchomienia debugera programu Visual Studio. Możesz dołączyć debugera do uruchomionego procesu później, używając polecenia Debug>Dołącz do procesu.

Następny krok

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