Krok 3. Udostępnianie plików statycznych, dodawanie stron i używanie dziedziczenia szablonu za pomocą aplikacji Flask

Artykuł
08/25/2023

Poprzedni krok: Tworzenie aplikacji platformy Flask z widokami i szablonami stron

W poprzednich krokach tego samouczka pokazano, jak utworzyć 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 tym kroku dowiesz się, jak wykonywać następujące czynności:

Używanie szablonów elementów programu Visual Studio do szybkiego dodawania nowych plików różnych typów z wygodnym kodem standardowy (krok 3–1)
Obsługa plików statycznych z kodu (krok 3–2, opcjonalnie)
Dodawanie dodatkowych stron do aplikacji (krok 3–3)
Użyj dziedziczenia szablonu, aby utworzyć nagłówek i pasek nawigacyjny używany na stronach (krok 3–4)

Krok 3–1. Zapoznanie się z szablonami elementów

Podczas tworzenia aplikacji platformy Flask zwykle dodajesz 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ę.

Aby wyświetlić dostępne szablony, przejdź do Eksplorator rozwiązań, kliknij prawym przyciskiem myszy folder, w którym chcesz utworzyć element, wybierz polecenie Dodaj>nowy element:

Add new item dialog in Visual Studio

Aby użyć szablonu, wybierz żądany szablon, określ nazwę pliku i wybierz przycisk OK. Dodanie elementu w ten sposób automatycznie dodaje plik do projektu programu Visual Studio i oznacza zmiany kontroli źródła.

Pytanie: Jak program Visual Studio wie, które szablony elementów mają być oferowane?

Odpowiedź: Plik projektu programu Visual Studio (pyproj) zawiera identyfikator typu projektu, który oznacza go jako projekt w języku Python. Program Visual Studio używa tego identyfikatora typu do wyświetlania tylko tych szablonów elementów, które są odpowiednie dla typu projektu. Dzięki temu program Visual Studio może dostarczać bogaty zestaw szablonów elementów dla wielu typów projektów bez konieczności ich sortowania za każdym razem.

Krok 3–2. Obsługa plików statycznych z aplikacji

W aplikacji internetowej utworzonej przy użyciu języka Python (przy użyciu dowolnej platformy) 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 tak, jak zawsze, gdy są wymagane. Takie pliki 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 sekcja w tym kroku dodaje plik CSS do istniejącego szablonu 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ę, która umożliwia odwoływanie się do plików przy użyciu ścieżek względnych w folderze o nazwie static (w katalogu głównym projektu). Druga sekcja w tym kroku pokazuje tę metodę przy użyciu prostego pliku danych statycznych.

W obu przypadkach można organizować pliki w statycznych, jednak chcesz.

Używanie pliku statycznego w szablonie

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder HelloFlask w projekcie programu Visual Studio, wybierz polecenie Dodaj>nowy folder i nadaj folderowi staticnazwę .
Kliknij prawym przyciskiem myszy folder statyczny i wybierz polecenie Dodaj>nowy element. W wyświetlonym oknie dialogowym wybierz szablon arkusza stylów, nadaj plikowi site.cssnazwę , a następnie wybierz przycisk OK. Plik site.css zostanie wyświetlony w projekcie i zostanie otwarty w edytorze. Struktura folderów powinna wyglądać podobnie do poniższej ilustracji:
Zastąp zawartość pliku site.css następującym kodem i zapisz plik:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Zastąp zawartość pliku templates/index.html aplikacji następującym kodem, który zastępuje <strong> element użyty w kroku 2 elementem <span> odwołującym się do message klasy stylów. Użycie klasy stylu w ten sposób zapewnia znacznie większą elastyczność w stylizowanie elementu.
```
<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>
```
Uruchom projekt, aby obserwować wyniki. Po zakończeniu zatrzymaj aplikację i możesz zatwierdzić zmiany kontroli źródła (jak wyjaśniono w kroku 2).

Obsługa pliku statycznego z kodu

Platforma Flask udostępnia funkcję o nazwie serve_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.

Jeśli jeszcze tego nie zrobiono, utwórz folder statyczny: w Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder HelloFlask w projekcie programu Visual Studio, wybierz polecenie Dodaj>nowy folder i nadaj folderowi staticnazwę .
W folderze statycznym utwórz statyczny plik danych JSON o nazwie data.json z następującą zawartością (które są bez znaczenia przykładowymi danymi):
```
{
    "01": {
        "note" : "Data is very simple because we're demonstrating only the mechanism."
    }
}
```
W views.py dodaj funkcję z trasą /api/data, która zwraca plik danych statycznych przy użyciu send_static_file metody :
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
Uruchom aplikację i przejdź do punktu końcowego /api/data, aby zobaczyć, że zwracany jest plik statyczny. Gdy skończysz, zatrzymaj aplikację.

Pytanie: Czy istnieją konwencje organizowania plików statycznych?

Odpowiedź: Możesz dodać inne pliki CSS, JavaScript i HTML w folderze statycznym , jednak chcesz. Typowym sposobem organizowania plików statycznych jest utworzenie podfolderów o nazwach czcionek, skryptów i zawartości (dla arkuszy stylów i innych plików).

Pytanie: Jak mogę obsługiwać zmienne adresu URL i parametry zapytania w interfejsie API?

Odpowiedź: Zobacz odpowiedź w kroku 1–4 dla pytania: Jak platforma Flask działa ze zmiennymi trasami adresów URL i parametrami zapytania?

Krok 3–3. Dodawanie strony do aplikacji

Dodanie kolejnej strony do aplikacji oznacza następujące kwestie:

Dodaj funkcję języka Python, która definiuje widok.
Dodaj szablon znaczników strony.
Dodaj niezbędny routing do pliku urls.py projektu Platformy Flask.

Poniższe kroki dodają stronę "Informacje" do projektu "HelloFlask" i linki do tej strony ze strony głównej:

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder templates, wybierz pozycję Dodaj>nowy element, wybierz szablon elementu strony HTML, nadaj plikowi about.htmlnazwę , a następnie wybierz przycisk OK.

Napiwek

Jeśli polecenie Nowy element nie jest wyświetlane w menu Dodaj, upewnij się, że aplikacja została zatrzymana, aby program Visual Studio zakończył tryb debugowania.

Zastąp zawartość pliku about.html następującym znacznikiem (zastąp jawny link do strony głównej prostym paskiem nawigacyjnym w kroku 3–4):

<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>

Otwórz plik views.py aplikacji i 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.")

Otwórz plik templates/index.html i natychmiast dodaj następujący wiersz w elemencie<body>, aby połączyć się ze stroną Informacje (ponownie zastąp ten link paskiem nawigacyjnym w kroku 3–4):
```
<div><a href="about">About</a></div>
```
Zapisz wszystkie pliki za pomocą polecenia menu Zapisz>wszystko lub naciśnij klawisze Ctrl+Shift+S. (Ten krok nie jest potrzebny, ponieważ uruchomienie projektu w programie Visual Studio automatycznie zapisuje pliki. Niemniej jednak, to dobre polecenie, aby wiedzieć o!)
Uruchom projekt, aby obserwować wyniki i sprawdzać nawigację między stronami. Zatrzymaj aplikację po zakończeniu.

Pytanie: Czy nazwa funkcji strony ma znaczenie dla platformy Flask?

Odpowiedź: Nie, ponieważ jest @app.route to dekorator określający adresy URL, dla których platforma Flask wywołuje funkcję w celu wygenerowania odpowiedzi. Deweloperzy zazwyczaj pasują do nazwy funkcji do trasy, ale takie dopasowanie nie jest wymagane.

Krok 3–4. Tworzenie nagłówka i paska nawigacyjnego przy użyciu dziedziczenia szablonu

Zamiast jawnych linków nawigacji na każdej stronie nowoczesne aplikacje internetowe zwykle używają nagłówka znakowania i paska nawigacyjnego, który udostępnia najważniejsze linki stron, menu podręczne itd. Aby upewnić się, że aplikacja jest spójna, nagłówek i pasek nawigacyjny powinny być takie same na wszystkich stronach, a jednocześnie nie powtarzać tego samego kodu w każdym szablonie strony. Zamiast tego chcesz zdefiniować wspólne części wszystkich stron w jednym miejscu.

System tworzenia szablonów platformy Flask (Jinja domyślnie) zapewnia dwa sposoby ponownego instalowania określonych elementów w wielu szablonach: dołączania i dziedziczenia.

Zawiera to inne szablony stron wstawione w określonym miejscu w szablonie odwołującego się przy użyciu 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 {% extends <template_path> %} szablonu strony na początku szablonu strony, aby określić udostępniony szablon podstawowy, na który następnie opiera się szablon odwołujący się. Dziedziczenie jest często używane do definiowania układu udostępnionego, paska nawigacyjnego i innych struktur dla stron aplikacji, tak aby odwołujące się szablony wymagały tylko dodawania lub modyfikowania określonych obszarów szablonu podstawowego o nazwie bloki.

W obu przypadkach <template_path> parametr jest względny względem folderu szablonów aplikacji (../ lub ./ jest również dozwolony).

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, jego zawartość blokowa zastępuje ten szablon podstawowy.

W poniższych krokach przedstawiono dziedziczenie:

W folderze templates aplikacji utwórz nowy plik HTML (przy użyciu menu kontekstowego Dodaj>nowy element lub Dodaj>stronę HTML) o nazwie layout.html i zastąp jego zawartość poniższym znacznikiem. Zobaczysz, że ten szablon zawiera blok o nazwie "content", który musi zastąpić wszystkie strony odwołujące się:

<!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; 2018</p>
        </footer>
    </div>
</body>
</html>

Dodaj następujące style do pliku static/site.css aplikacji (ten przewodnik nie pokazuje dynamicznego projektu. Jednak te style generują tylko interesujący wynik):

.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;
}

Zmodyfikuj templates/index.html, aby odwoływać się do szablonu podstawowego i zastąpić blok zawartości. Widać, że przy użyciu dziedziczenia ten szablon staje się prosty:
```
{% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Zmodyfikuj templates/about.html, aby odwoływać się również do szablonu podstawowego i zastąpić blok zawartości:
```
{% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Uruchom serwer, aby obserwować wyniki. Po zakończeniu zamknij serwer.
Ze względu na to, że wprowadzono istotne zmiany w aplikacji, warto ponownie zatwierdzić zmiany kontroli źródła.

Następne kroki

Więcej informacji można znaleźć w następujących zasobach:

Aby uzyskać więcej możliwości szablonów Jinja, takich jak przepływ sterowania, zobacz Jinja Template Projektant Documentation (jinja.pocoo.org)
Aby uzyskać szczegółowe informacje na temat korzystania z usługi url_for, zobacz url_for w dokumentacji obiektu aplikacji platformy Flask (flask.pocoo.org)
Samouczek dotyczący kodu źródłowego w witrynie GitHub: Microsoft/python-sample-vs-learning-flask