Menu

Szablon kolby, formularz, widok i przekierowanie z przykładami

  • Główny
  • Inny
  • Szablon kolby, formularz, widok i przekierowanie z przykładami

flask template form

Wypróbuj Nasz Instrument Do Eliminowania Problemów

Ten samouczek wyjaśnia, czym są szablon, formularz, widok, odpowiedź i przekierowanie Flask. Zawiera praktyczne przykłady:

Ogólnie rzecz biorąc, tworzenie szablonów jest używane w programowaniu do ponownego wykorzystania części tekstu z innymi danymi. Jeśli chodzi o tworzenie stron internetowych, projektanci używają szablonów do wyświetlania danych w postaci czytelnej i atrakcyjnej dla czytelników.

Projekt szablonu zwykle obejmuje użycie języka ze względu na złożoność związaną z interakcją międzyludzką.

=> Spójrz na przewodnik dla początkujących Flask tutaj

Szablony, widoki i formularze Flask

Czego się nauczysz:

Wprowadzenie

Flask używa silnika tworzenia szablonów o nazwie Jinja2, który wyświetla zachowanie aplikacji na podstawie poziomu interakcji użytkownika. Szablon Jinja używa zmiennych, wyrażeń i tagów.

Zmienne i wyrażenia są zastępowane wartościami w czasie wykonywania przed renderowaniem strony w przeglądarce. Tagi Jinja pomagają w pisaniu logiki i instrukcji sterujących w szablonie Flask.

Widok kolby

Pojęcie widoku Flask wywodzi się z popularnego wzorca projektowania aplikacji internetowych o nazwie Model-View-Controller. Widok jest jednym z trzech połączonych ze sobą elementów w tym paradygmacie, w którym zajmuje się logiką aplikacji. Widok dba o prezentację informacji użytkownikowi.

W naszym poprzednim samouczku zaprojektowaliśmy widok przez podklasę klasy BaseView programu Flask-Appbuilder. W dalszej części tego samouczka rozszerzymy nasz ostatni przykład i przedstawimy sposoby dostosowywania widoków.

Szablon kolby

Zacznijmy i napiszmy nasz pierwszy szablon. Utwórz plik o nazwie hello.html w katalogu szablonów.

Napisz następujący kod w tym pliku i zapisz go.

Hello World!, from Software Testing Help.

{% for item in greetings %} {% if 'Morning' in item %}

{{item}}

{% else %}

{{item}}

{% endif %} {% endfor %}

Szablon do pętli

W powyższym szablonie Flask użyliśmy pętli for do iteracji po elementach listy. W naszym kontrolerze lub programie obsługi przekazaliśmy do szablonu listę z wartościami pozdrowień. Wewnątrz szablonu uzyskujemy dostęp do każdego elementu za pomocą składni {{item}}.

Szablon, jeśli blok

Poza tym zanotuj użycie instrukcji if. Tutaj testujemy element pod kątem poranku i robimy go pogrubionym i kursywą.

Przejdźmy teraz dalej, aby dowiedzieć się więcej o koncepcjach Flask Forms.

Formy do kolb

Jednym z najważniejszych aspektów tworzenia szablonów jest pobieranie danych wejściowych od użytkowników i zapisywanie logiki zaplecza na podstawie tych danych wejściowych. Stwórzmy formularz.

Do renderowania naszego formularza używamy Flask-Appbuilder SimpleFormView. Najpierw jednak utwórzmy formularz. Oprócz stworzenia formularza, musimy użyć polecenia flask fab create-admin, aby utworzyć administratora.

Dlatego użyj polecenia przed uruchomieniem serwera deweloperskiego, aby następnie utworzone widoki i formularze mogły zostać sprawdzone przez zalogowanego użytkownika. Logujemy się jako administrator i sprawdzamy, czy utworzone widoki są widoczne pod menu, jak pokazano na zrzutach ekranu.

Utwórz administratora

Użyj poniższego polecenia, aby utworzyć użytkownika administratora.

flask fab create-admin

Zaloguj się przy użyciu poświadczeń administratora

  • Kliknij Login po przejściu do http: // localhost: 8080.
Zaloguj się jako administrator
Zaloguj się jako administrator
  • Zaloguj się przy użyciu poświadczeń administratora utworzonych w poprzedniej sekcji.
Kliknij Login
Kliknij Zaloguj się
  • Kliknij kategorię Moje formularze, aby uzyskać dostęp do swoich widoków.
Kliknij menu
Kliknij menu

Uwaga: Ostatni krok będziesz mógł wykonać dopiero po dodaniu widoków do domyślnego menu wyświetlanego na pasku nawigacyjnym.

Przejdźmy dalej i utwórzmy kilka widoków opartych na formularzach.

Utwórz plik o nazwie forms.py w katalogu aplikacji i zapisz w nim następujący kod.

from wtforms import Form, StringField from wtforms.validators import DataRequired from flask_appbuilder.fieldwidgets import BS3TextFieldWidget from flask_appbuilder.forms import DynamicForm class GreetingsForm(DynamicForm): greeting1 = StringField(('Morning'), description = ('Your morning Greeting'), validators = (DataRequired()), widget = BS3TextFieldWidget()) greeting2 = StringField(('Afternoon'), description = ('Your Afternoon Greeting'), validators = (DataRequired()), widget = BS3TextFieldWidget()) greeting3 = StringField(('Evening'), description = ('Your Evening Greeting'), widget = BS3TextFieldWidget()) greeting4 = StringField(('Night'), description = ('Your Night Greeting'), widget = BS3TextFieldWidget())

Stworzyliśmy formularz oparty na DynamicForm z Flask-Appbuilder. Istnieją cztery pola tekstowe. Podajemy przykład naszego pozdrowienia. Z czterech pól dwa są obowiązkowe, a dwa opcjonalne, ponieważ w pierwszych dwóch pozdrowieniach wymieniliśmy wartości dla walidatorów.

Teraz utwórzmy widok dla tego formularza. Napisz poniższe wiersze kodu do pliku views.py.

from flask import render_template, flash from flask_appbuilder import SimpleFormView from app.forms import GreetingsForm class GreetingsView(SimpleFormView): form = GreetingsForm form_title = 'This is a Greetings form' message = 'Your Greetings are submitted' def form_get(self, form): form.greeting1.data = 'Your Morning Greeting' form.greeting2.data = 'Your Afternoon Greeting' form.greeting3.data = 'Your Evening Greeting' form.greeting4.data = 'Your Night Greeting' def form_post(self, form): flash(self.message, 'info') greetings = ( form.greeting1.data, form.greeting2.data, form.greeting3.data, form.greeting4.data, ) session('greetings')=greetings return redirect(url_for('HelloWorld.hello_greetings2'))

W naszym widoku powyżej mamy dwie metody o nazwie form_get i form_post do wypełniania wartości domyślnych w polach formularzy i odczytywania wprowadzonych wartości odpowiednio po przesłaniu formularza z przeglądarki.

GreetingsView wyświetla formularz, jak pokazano na poniższym obrazku.

Formularz pozdrowienia

Używamy również obiektu sesji Flask do przechowywania wartości pól w form_post, abyśmy mogli uzyskać do nich dostęp w odpowiednim nowym widoku, który mamy zamiar zapisać.

Zmodyfikujmy teraz klasę HelloWorld i dodajmy inną metodę wyświetlania powitań. Nazwiemy to hello_greetings2.

class HelloWorld(BaseView): ## other methods @expose('/greetings2') def hello_greetings2(self): greetings = session('greetings') return render_template('hello.html', greetings=greetings)

W tym widoku odczytujemy wartości z obiektu sesji i używamy szablonu renderowania Flask do wyświetlania tych wartości w kodzie HTML skierowanym do użytkownika. Zauważ, że hello_greetings2 to alternatywny sposób osiągnięcia tej samej funkcjonalności, podobnej do hello_greetings.

Jedyna różnica polega na tym, że za pomocą hello_greetings2 pokazujemy wartości, które wprowadza Użytkownik, aw hello_greetings nie pobieraliśmy od Użytkownika żadnych danych wejściowych i zakodowaliśmy je na stałe podczas zapisywania widoku mapowanego na odpowiednią trasę.

Odpowiedź kolby

Rzadko zdarza się, że w kodzie można znaleźć jawne użycie odpowiedzi Flask. Klasa Response w Flask jest po prostu podklasą klasy Response z klasy Response firmy Werkzueg, która z kolei stanowi podklasę swojej klasy ResponseBase.

Obiekt Flask Response jest wewnętrznie tworzony przez Flask za każdym razem, gdy wywołujemy instrukcję return lub metodę taką jak render_template.

Ponadto możemy dostosować kod odpowiedzi i typ zawartości, jeśli jest to wymagane jako część instrukcji return w naszych widokach, jak pokazano w zmodyfikowanym widoku HelloWorld poniżej.

class HelloWorld(BaseView): ## other methods @expose('/greetings2') def hello_greetings2(self): greetings = session('greetings') return render_template('hello.json', greetings=greetings), 201, {'Content-Type' : 'application/json'

Bezpośrednie użycie klasy Response Flask może być uwzględnione w przypadku użycia, gdy przesyłamy strumieniowo zawartość zamiast zwracać pełną zawartość od razu z powodu ograniczeń rozmiaru pliku i przepustowości sieci.

Poniżej pokazaliśmy jeden przykład przesyłania strumieniowego treści z dużego pliku CSV.

from flask import Response @app.route('https://cdn.softwaretestinghelp.com/largefile.csv') def send_large_csv(): '''A controller to stream the content of a large csv file''' def gen(): for row in iter_all_rows(): yield ','.join(row) + ' ' return Response(gen(), mimetype='text/csv')

Przekierowanie kolby

Nie zawsze jest możliwe, aby aplikacja wstępnie zdefiniowała odpowiedź na podstawie różnych żądań klienta.

Korzystamy z przekierowania Flask w scenariuszach, w których w odpowiedzi na żądanie możliwe jest dostarczenie treści, które mogą być wypełnione przez inne widoki lub lokalizacje. Używamy przekierowania Flask wraz z przerwaniem ze standardowymi kodami powrotu HTTP.

Na przykład, w poniższym kodzie użyliśmy przekierowania z kodem HTTP 301 i przerwania z 401.

from flask import Flask, redirect, url_for, request, abort app = Flask(__name__) @app.route('/') def index(): return render_template('log_in.html') # Log In template @app.route('/login',methods = ('POST', 'GET')) def login(): if request.method == 'POST': if request.form('username') == 'admin' : # if user is admin return redirect(url_for('success')), 301 else: abort(401) # stop processing else: return redirect(url_for('index')) # redirect to another view

Ponadto sprawdź w GreetingsView, w którym wykorzystaliśmy przekierowanie Flask i url_for do wewnętrznego przekierowania żądania do innego widoku, przechowując wartości pozdrowienia w obiekcie sesji. Przekierowanie Flask zawsze zwraca obiekt odpowiedzi, z domyślnym lub podanym kodem stanu do innej lokalizacji w aplikacji.

Flask Debugtoolbar

W naszym ostatnim samouczku wprowadziliśmy już interaktywny debugger Flask. W tym samouczku zrobimy jeszcze jeden krok, aby ułatwić debugowanie aplikacji Flask. Po zainstalowaniu pasek narzędzi Flask Debug jest wyświetlany jako nakładka na aplikację Flask.

Zainstaluj pasek narzędzi Flask Debug.

pip install flask-debugtoolbar

Aby aktywować pasek narzędzi debugowania, otwórz plik __init__.py w naszym projekcie i zmodyfikuj kod, dodając następujące wiersze kodu.

from flask_debugtoolbar import DebugToolbarExtension app.debug = True toolbar = DebugToolbarExtension(app)

Należy pamiętać, że pasek narzędzi debugowania Flask jest włączony tylko w trybie debugowania. Po włączeniu, podczas ponownego ładowania aplikacji, zauważysz dwie rzeczy.

# 1) Pasek narzędzi debugowania pojawia się po prawej stronie przeglądarki. Kliknij i rozwiń, aby zobaczyć różne funkcje dostępne na pasku narzędzi.

Aktywacja paska narzędzi debugowania
Aktywacja paska narzędzi debugowania

#dwa) Za każdym razem, gdy do aplikacji wysyłane jest nowe żądanie POST, jest ono przechwytywane przez pasek narzędzi, abyśmy mogli sprawdzić zmienne i inne parametry związane z debugowaniem aplikacji.

Punkt przecięcia paska narzędzi debugowania
Punkt przecięcia paska narzędzi debugowania

Ten domyślny punkt przecięcia można wyłączyć w poniższej konfiguracji.

app.config('DEBUG_TB_INTERCEPT_REDIRECTS') = False Najgorsze wyniki
Zmienne debugowania na pasku narzędzi

Teraz napiszemy kilka testów, aby przetestować nasze widoki pod kątem dodatkowych funkcji, które wprowadziliśmy w przykładowej aplikacji.

pytania i odpowiedzi do wywiadów netto dla odświeżających

Przed przystąpieniem do testowania wyłącz debugowanie, jak pokazano poniżej w __init__.py. Alternatywnie możesz skomentować poniższą linię.

app.debug = False

Testowanie widoków aplikacji Flask

Musimy zorganizować kod testowy, aby był łatwiejszy w zarządzaniu. Utwórz plik o nazwie conftest.py w katalogu głównym i przenieś poniższe linie z test_hello.py do tego pliku.

from app import appbuilder import pytest @pytest.fixture def client(): ''' A pytest fixture for test client ''' appbuilder.app.config('TESTING') = True with appbuilder.app.test_client() as client: yield client

pytest osprzęt są ładowane przez pytest w czasie wykonywania. Te urządzenia są dostępne i współdzielone ze wszystkimi testami. Zdefiniowanie pliku conftest.py w ścieżce katalogu głównego dowolnego projektu jest uważane za najlepsze rozwiązanie, ponieważ pytest może rozpoznać wszystkie moduły w projekcie bez określania jawnej ścieżki PYTHONPATH.

Dodaj jeszcze jeden test dla pliku test_hello. Przykładowy test podano poniżej. Wywołujemy metodę get obiektu klienta i potwierdzamy oczekiwaną wartość w danych odpowiedzi przechowywanych w odpowiednich danych.

Podobnie możesz napisać więcej testów wskazujących na różne widoki. Więcej testów napiszemy w następnych tutorialach.

def test_greetings(client): ''' A test method to test view hello_greetings''' resp = client.get('/hello/greetings', follow_redirects=True) assert b'Good Morning' in resp.data

Uruchom testy, używając poniższego polecenia z katalogu głównego projektu.

pytest -v

Uruchomienie testowe generuje wyniki testu w konsoli, jak pokazano poniżej:

Awaria w pytest
Najgorsze wyniki

Nie ma jeszcze błędów. Zaprojektujmy jeszcze jeden test, jak wspomniano poniżej.

def test_greetings2(client): ''' A test method to test view hello_greetings2 ''' resp = client.get('/hello/greetings2', follow_redirects=True) assert b'Good Morning' in resp.data

Ten test zakończy się niepowodzeniem, ponieważ nie zdefiniowaliśmy żadnego atrybutu komunikatu w klasie HelloWorld w pliku views.py.

Po uruchomieniu testów przy użyciu polecenia pytest -v ponownie na konsoli zostaną wyświetlone wyniki podobne do przedstawionego poniżej.

Awaria w pytest

Poniższa sekcja wyjaśnia kroki, które musimy wykonać podczas uruchamiania testów na platformie CI / CD. Używamy akcji Git dla tego samego projektu.

CI / CD z akcjami Git

Teraz zapisujemy wszystkie zmiany w plikach i tworzymy zatwierdzenie, przekazując wiadomość dla tego samouczka. Po zatwierdzeniu w repozytorium lokalnym pobieramy zmiany ze zdalnego źródła z flagą –rebase, aby sprawdzić, czy są jakieś konflikty z nowymi zmianami na pilocie. Zmieniamy bazę, aby historia była spójna.

Użyj poniższego polecenia, aby pobrać i scalić zmiany ze zdalnego źródła. Jednak zatwierdź zmiany przed pobraniem zmian z pilota.

git pull origin master --rebase

Teraz sprawdź lokalną gałąź master i połącz ją z gałęzią tutorial-2. Po pomyślnym scaleniu opublikuj te zmiany we wzorcu źródłowym. Ta akcja spowoduje wywołanie kompilacji na platformach docelowych. Testujemy ten kod w najnowszym Pythonie 3.7 i Pythonie 3.8 na Ubuntu.

Wniosek

W tym samouczku widzieliśmy, jak działają szablony we frameworku Flask. Przedstawiliśmy kroki tworzenia i renderowania szablonów kolb z wartościami zdefiniowanymi przez użytkownika przy użyciu zmiennych i wyrażeń.

Widzieliśmy również przykłady wstępnie zdefiniowanego widoku BaseView wtyczki Flask Appbuilder. Ten widok może być łatwo podklasy przez programistów Flask w celu tworzenia niestandardowych widoków.

Omówione dotąd koncepcje pomagają czytelnikom w szybkim tworzeniu statycznych i dynamicznych witryn internetowych przy użyciu Flaska bez zaplecza bazy danych. Wyjaśnimy, jak odczytywać i zapisywać dane zi do baz danych za pomocą ModelView w następnym samouczku, kiedy przejdziemy przez koncepcję używania baz danych z Flask.

=> Przeczytaj serię szkoleń Easy Flask

rekomendowane lektury

^