Samouczek: obsługa plików statycznych i używanie dziedziczenia szablonu za pomocą platformy Flask w programie Visual Studio

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

Poprzednie kroki w tej serii samouczków tworzą minimalną aplikację platformy Flask z pojedynczą stroną samodzielnego kodu HTML. Nowoczesne aplikacje internetowe zwykle składają się z wielu stron i używają udostępnionych zasobów, takich jak pliki CSS i JavaScript, aby zapewnić spójne style i zachowanie. W kroku 3 pracujesz z szablonami elementów programu Visual Studio, aby dodać zawartość do projektu platformy Flask i rozszerzyć możliwości aplikacji.

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

• Używanie szablonów elementów programu Visual Studio do szybkiego dodawania nowych plików za pomocą kodu standardowego
• Serwowanie plików statycznych z kodu Flask
• Dodawanie kolejnych stron do aplikacji Platformy Flask
• Używanie dziedziczenia szablonu do tworzenia nagłówka i nawigacji między stronami

Warunki wstępne

• Rozwiązanie Visual Studio i projekt aplikacji Flask utworzony w Krok 1: Utworzono projekt aplikacji Flask i zaktualizowano w Krok 2: Refaktoryzacja projektu Flask.

Eksplorowanie szablonów elementów w programie Visual Studio

Podczas tworzenia aplikacji platformy Flask zwykle dodaje się wiele innych plików Python, HTML, CSS i JavaScript. Dla każdego typu pliku (i innych plików, takich jak web.config, które mogą być potrzebne do wdrożenia), program Visual Studio udostępnia wygodne szablony elementów , aby rozpocząć pracę. Za pomocą tych szablonów można szybko dodawać nowe pliki różnych typów przy użyciu kodu szablonowego.

1. Aby wyświetlić dostępne szablony, przejdź do Eksplorator rozwiązań w programie Visual Studio i otwórz strukturę projektu.

2. Kliknij prawym przyciskiem myszy folder, w którym chcesz utworzyć nowy plik, a następnie wybierz pozycję Dodaj>nowy element. Otworzy się okno dialogowe Dodaj nowy element:

   

3. Aby użyć szablonu, wybierz żądany szablon, wprowadź nazwę pliku i wybierz Dodaj.

Program Visual Studio dodaje plik do bieżącego projektu i oznacza zmiany kontroli źródła.

Omówienie sposobu identyfikowania szablonów elementów w programie Visual Studio

Plik projektu programu Visual Studio (.pyproj) zawiera identyfikator typu projektu, który oznacza plik jako projekt w języku Python. Program Visual Studio używa tego identyfikatora typu do rozpoznawania i wyświetlania tylko tych szablonów elementów, które są odpowiednie dla typu projektu. Program Visual Studio stosuje to podejście do dostarczania rozbudowanego zestawu szablonów elementów dla wielu typów projektów bez konieczności ich sortowania za każdym razem.

Obsługa plików statycznych z aplikacji

W aplikacji internetowej utworzonej przy użyciu języka Python (przy użyciu dowolnej struktury) pliki języka Python są zawsze uruchamiane na serwerze hosta internetowego i nigdy nie są przesyłane na komputer użytkownika. Inne pliki, takie jak CSS i JavaScript, są używane tylko przez przeglądarkę, więc serwer hosta po prostu dostarcza je as-is po żądaniu. Te typy plików są określane jako pliki statyczne, a platforma Flask może dostarczać je automatycznie bez konieczności pisania kodu. Na przykład w plikach HTML można odwoływać się do plików statycznych przy użyciu ścieżki względnej w projekcie. Pierwsza procedura w tej sekcji pokazuje, jak używać statycznego pliku CSS z istniejącym szablonem strony.

Jeśli musisz dostarczyć plik statyczny z kodu, na przykład za pomocą implementacji punktu końcowego interfejsu API, platforma Flask udostępnia wygodną metodę. Możesz odwoływać się do plików przy użyciu ścieżek względnych w folderze o nazwie static w katalogu głównym projektu. Druga procedura w tej sekcji pokazuje, jak pracować z prostym plikiem danych statycznych z kodu.

W obu procedurach można organizować pliki w folderze statycznym zgodnie z preferencjami.

Używanie statycznego pliku CSS w szablonie

Wykonaj następujące kroki, aby użyć pliku statycznego w szablonie:

1. W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy folder HelloFlask w projekcie, wybierz opcję Dodaj>Nowy folderi nadaj folderowi nazwę static.

2. Kliknij prawym przyciskiem myszy folder statyczny i wybierz pozycję Dodaj>nowy element.

3. W oknie dialogowym Dodawanie nowego elementu wybierz szablon arkusza stylów, nadaj plikowi nazwę site.cs, a następnie wybierz Dodaj.

   Program Visual Studio dodaje plik site.css do projektu i otwiera plik w edytorze. Oto przykład zaktualizowanej struktury projektu platformy Flask:

   

4. Zastąp zawartość pliku site.css następującymi stylami:

   .message {
       font-weight: 600;
       color: blue;
   }
   

5. Zastąp zawartość pliku HelloFlask/templates/index.html następującym znacznikiem:

   <html>
      <head>
         <title>{{ title }}</title>
         <link rel="stylesheet" type="text/css" href="/static/site.css" />
      </head>
      <body>
         <span class="message">{{ message }}</span>{{ content }}
      </body>
   </html>
   

   Ten kod zastępuje element <strong> HTML z kroku 2 w serii samouczków elementem <span> odwołującym się do klasy stylu message. Użycie klasy stylu w ten sposób zapewnia większą elastyczność w stylizowaniu elementu HTML.

6. Zapisz zmiany projektu, wybierając pozycję Plik>Zapisz wszystko lub używając skrótu klawiaturowego Ctrl+Shift+S. (Ten krok nie jest konieczny, ponieważ podczas opracowywania projektu program Visual Studio automatycznie zapisuje pliki).

7. Uruchom projekt i obserwuj wyniki. Po zakończeniu zatrzymaj aplikację.

8. (Opcjonalnie) 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 w kroku 2 tej serii samouczków.

Obsługa pliku statycznego z kodu

Platforma Flask udostępnia funkcję o nazwie send_static_file, którą można wywołać z kodu w celu odwoływania się do dowolnego pliku w folderze statycznym projektu. Poniższy proces tworzy prosty punkt końcowy interfejsu API, który zwraca plik danych statycznych:

1. W folderze static utwórz statyczny plik danych JSON o nazwie data.json. Możesz użyć szablonu pliku tekstowego jako podstawy dla pliku.

2. Zastąp zawartość pliku JSON następującym kodem, który udostępnia przykładowe dane, aby zademonstrować mechanizm:

   {
      "01": {
         "note" : "Sample data to demonstrate the mechanism."
      }
   }
   

3. W pliku HelloFlask/views.py dodaj funkcję z punktem końcowym trasy /api/data, który zwraca plik danych statycznych przy użyciu metody send_static_file:

   @app.route('/api/data')
   def get_data():
     return app.send_static_file('data.json')
   

4. Zapisz zmiany projektu i ponownie uruchom projekt. Przejdź do punktu końcowego trasy /api/data i upewnij się, że aplikacja zwraca plik statyczny:

   

5. Po zakończeniu zatrzymaj aplikację.

Organizowanie plików statycznych i folderów

Możesz dodać inne pliki CSS, JavaScript i HTML w folderze statycznym zgodnie z potrzebami projektu. Typowym sposobem organizowania plików statycznych jest utworzenie podfolderów o nazwie czcionek, skryptów i zawartości (w przypadku arkuszy stylów i innych plików).

Używanie ścieżek URL i parametrów zapytania z interfejsów API

Zmienne adresu URL i parametry zapytania można obsługiwać za pomocą interfejsów API podczas pracy z platformą Flask. Aby uzyskać więcej informacji, zobacz Używanie tras adresu URL zmiennych i parametrów zapytania w kroku 1 tej serii samouczków.

Dodawanie strony do aplikacji platformy Flask

Dodanie kolejnej strony do aplikacji platformy Flask obejmuje następujące zadania:

• Dodawanie funkcji języka Python definiującej widok
• Dodawanie szablonu dla znaczników HTML strony
• Aktualizowanie tras adresów URL w pliku views.py projektu platformy Flask

Wykonaj następujące kroki, aby dodać stronę Informacje (/about) do projektu BasicProject Flask i linki do tej strony ze strony głównej:

1. W Eksploratorze rozwiązań , kliknij prawym przyciskiem myszy folder HelloFlask/templates w swoim projekcie, a następnie wybierz Dodaj>Nowy element.

   Napiwek

   Jeśli nie widzisz polecenia Nowy element w menu Dodaj, upewnij się, że aplikacja Flask została zatrzymana, aby program Visual Studio mógł opuścić tryb debugowania, jeśli to konieczne.

2. W oknie dialogowym Dodawanie nowego elementu wybierz szablon strony HTML, nadaj plikowi nazwę about.html, a następnie wybierz pozycję Dodaj.

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

   <html>
      <head>
         <title>{{ title }}</title>
         <link rel="stylesheet" type="text/css" href="/static/site.css" />
      </head>
      <body>
         <div><a href="home">Home</a></div>
         {{ content }}
      </body>
   </html>
   

   W kolejnym kroku zastąpisz jawne łącze do strony głównej paskiem nawigacyjnym.

4. W pliku HelloFlask/views.py dodaj funkcję o nazwie about, która używa szablonu:

   @app.route('/about')
   def about():
      return render_template(
         "about.html",
         title = "About HelloFlask",
         content = "Example app page for Flask.")
   

5. W pliku HelloFlask/templates/index.html dodaj następujący znacznik jako pierwszą instrukcję w elemencie <body>:

   <div><a href="about">About</a></div>
   

   Ten znacznik dodaje link do strony /about dla aplikacji Flask. W późniejszym kroku zastąp ten link paskiem nawigacyjnym.

6. Zapisz zmiany projektu i ponownie uruchom projekt. Przejdź do strony /about i sprawdź nawigację między różnymi stronami aplikacji.

7. Po zakończeniu zatrzymaj aplikację.

Nadaj nazwę funkcji strony

Platforma Flask nie nakłada żadnych ograniczeń ani wymagań dotyczących nazwy funkcji strony. Dekorator @app.route określa adresy URL, dla których platforma Flask wywołuje funkcję w celu wygenerowania odpowiedzi. Deweloperzy zazwyczaj dopasowują nazwę funkcji strony do ścieżki, ale takie dopasowanie nie jest wymagane.

Skorzystaj z dziedziczenia szablonu dla nagłówka i nawigacji

Zamiast jawnych linków nawigacji na każdej stronie wiele aplikacji internetowych ma nagłówek marki i pasek nawigacyjny, który udostępnia najważniejsze linki stron, menu podręczne itd. Aby zapewnić spójność w aplikacji, nagłówek i pasek nawigacyjny powinny być takie same na wszystkich stronach, ale nie trzeba powtarzać tego samego kodu w każdym szablonie strony. Wspólne części wszystkich stron można zdefiniować w jednym pliku.

System tworzenia szablonów platformy Flask (domyślnie Jinja) udostępnia dwa sposoby ponownego użycia określonych elementów w wielu szablonach:

• Zawiera to inne szablony stron, które wstawiasz w określonym miejscu w głównym szablonie za pomocą składni {% include <template_path> %}. Możesz również użyć zmiennej, jeśli chcesz dynamicznie zmienić ścieżkę w kodzie. Dołączanie jest zwykle używane w treści strony w celu ściągnięcia udostępnionego szablonu w określonej lokalizacji na stronie.

• Dziedziczenie używa składni {% extends <template_path> %} na początku szablonu strony, aby określić wspólny szablon bazowy, na którym opiera się szablon, do którego się odnosi. Dziedziczenie jest często używane do definiowania wspólnego układu, paska nawigacyjnego oraz innych struktur dla stron aplikacji. Takie podejście wymaga korzystania z szablonów w celu dodania lub zmodyfikowania tylko określonych obszarów szablonu podstawowego, nazywanych blokami .

W przypadku obu podejść wartość <template_path> odnosi się do katalogu szablonów aplikacji (../ lub ./ są również dozwolone).

Szablon podstawowy delineuje bloki przy użyciu tagów {% block <block_name> %} i {% endblock %}. Jeśli szablon odwołującego się używa tagów o tej samej nazwie bloku, zawartość bloku w szablonie odwołującym zastępuje pasujący blok w szablonie podstawowym.

W poniższych krokach przedstawiono dziedziczenie szablonu:

1. W eksploratorze rozwiązań kliknij prawym przyciskiem myszy folder HelloFlask/templates i utwórz nowy plik z szablonu strony HTML o nazwie layout.html.

2. Zastąp zawartość pliku layout.html następującym znacznikiem HTML:

   <!DOCTYPE html>
   <html>
   <head>
      <meta charset="utf-8" />
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   
   <body>
      <div class="navbar">
         <a href="/" class="navbar-brand">Hello Flask</a>
         <a href="{{ url_for('home') }}" class="navbar-item">Home</a>
         <a href="{{ url_for('about') }}" class="navbar-item">About</a>
      </div>
   
      <div class="body-content">
         {% block content %}
         {% endblock %}
         <hr/>
         <footer>
            <p>&copy; 2024</p>
         </footer>
      </div>
   </body>
   </html>
   

   Ten szablon zawiera blok o nazwie content, który identyfikuje całą zawartość, którą muszą zastąpić strony odwołujące się.

3. W pliku HelloFlask/static/site.css dodaj następujące style na końcu pliku:

   .navbar {
      background-color: lightslategray;
      font-size: 1em;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      color: white;
      padding: 8px 5px 8px 5px;
   }
   
   .navbar a {
      text-decoration: none;
      color: inherit;
   }
   
   .navbar-brand {
      font-size: 1.2em;
      font-weight: 600;
   }
   
   .navbar-item {
      font-variant: small-caps;
      margin-left: 30px;
   }
   
   .body-content {
      padding: 5px;
      font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   

   Te definicje stylów generują interesujący wynik dla tego ćwiczenia. Ten przewodnik nie pokazuje responsywnego projektu.

4. Zastąp zawartość pliku HelloFlask/templates/index.html następującym znacznikiem:

   {% extends "layout.html" %}
   {% block content %}
   <span class="message">{{ message }}</span>{{ content }}
   {% endblock %}
   

   Szablon index odwołuje się teraz do szablonu podstawowego i zastępuje blok content. Można zauważyć, że dzięki użyciu dziedziczenia ten szablon jest uproszczony.

5. Zastąp zawartość pliku HelloFlask/templates/about.html następującym znacznikiem, dlatego szablon about odnosi się również do szablonu podstawowego i zastępuje blok content:

   {% extends "layout.html" %}
   {% block content %}
   {{ content }}
   {% endblock %}
   

6. Ponownie uruchom aplikację i obserwuj wyniki. Użyj linków paska nawigacyjnego, aby przełączać się między stronami aplikacji.

   

7. Po zakończeniu zatrzymaj aplikację i zapisz zmiany projektu.

8. Ponieważ wprowadzono istotne zmiany w aplikacji, dobrym momentem jest zapisanie zmian w repozytorium Git. Aby uzyskać więcej informacji, zobacz Zatwierdzanie zmian w kontroli źródła w kroku 2 tej serii samouczków.

Przegląd samouczka

Gratulujemy ukończenia tego samouczka na platformie Flask w programie Visual Studio.

W tym samouczku dowiedziałeś się, jak:

• Tworzenie projektu platformy Flask z wieloma stronami
• Tworzenie różnych widoków stron przy użyciu szablonów
• Obsługa plików statycznych, dodawanie stron i używanie dziedziczenia szablonu

Powiązana zawartość

• dokumentacja projektanta szablonów Jinja (jinja.pocoo.org)
• url_for w dokumentacji obiektu aplikacji Flask (flask.pocoo.org)
• Samouczek kodowania na GitHubie (Microsoft/python-sample-vs-learning-flask)