Menu

Aplikacja Flask i układ projektu Flask z Blueprint i Bootstrap

  • Główny
  • Inny
  • Aplikacja Flask i układ projektu Flask z Blueprint i Bootstrap

flask app flask project layout with blueprint bootstrap

Wypróbuj Nasz Instrument Do Eliminowania Problemów

Ten poradnik wyjaśnia, jak używać aplikacji Flask, Flask Blueprint i Flask Bootstrap w projekcie Flask:

W tym temacie odejdziemy nieco od archetypu Flask-Appbuilder, aby pogłębić naszą wiedzę na temat schematów Flask. Przeczytaj nasz samouczek na temat Flask, szablonów i widoków Flask oraz Flask z bazami danych, takimi jak MongoDB, SQLite i MySQL. Używaliśmy przykładowego projektu o nazwie flaskTutorialApp.

Możesz jednak również stworzyć projekt od podstaw za pomocą polecenia flask fab create-app. To polecenie tworzy rusztowanie wymagane dla projektu Flask wraz z katalogiem aplikacji na podstawie nazwy aplikacji podanej przez Ciebie.

=> Zobacz serię treningów Flask dla wszystkich

Układ projektu Flask z planem i bootstrapem 1

W tym samouczku wyjaśnimy o aplikacji Flask, schemacie Flask i Flask Bootstrap. Początkowo rozwijamy naszą aplikację Flask z istniejącym rusztowaniem dostarczonym przez Flask-Appbuilder. Następnie tworzymy schemat kolby o nazwie hello2. Na koniec opiszemy koncepcję Flask Docker, dokeralizując naszą aplikację Flask.

Czego się nauczysz:

Aplikacja Flask

Aplikacja Flask to inna nazwa aplikacji Flask. Jeśli zauważysz kod zapisany w pliku __init__.py, to zauważysz, że tworzona jest instancja Flaska, a zmienna nosi nazwę app. Instancją klasy Flask jest aplikacja Flask, która jest instancją aplikacji WSGI.

from flask import Flask app = Flask(__name__)

Schemat kolby

Flask Blueprint pozwala nam zachować powiązane funkcje i pomaga w lepszych praktykach programistycznych. Oto niektóre zalety schematów kolb:

  1. Łatwa organizacja aplikacji na dużą skalę.
  2. Zwiększa możliwość ponownego wykorzystania kodu poprzez wielokrotną rejestrację tego samego schematu.
  3. Zestaw operacji jest rejestrowany i może być później odtworzony po zarejestrowaniu planu.

Mając powyższe tło podane w Flask Blueprint, możemy iść do przodu i zaprojektować nasz pierwszy Blueprint. Możemy również myśleć o Blueprint jako o module. Stwórzmy plan HelloWorld.

Wszystkie komponenty, zasoby i funkcje planu są przechowywane i organizowane oddzielnie od innego kodu źródłowego aplikacji Flask. Oznacza to, że Flask Blueprint może mieć swoje widoki, formularze, modele, pliki statyczne i szablony.

Możesz stworzyć wiele schematów z tego samego zestawu zasobów. Może to jednak spowodować zamieszanie i nie jest dobrą praktyką.

Twórz pliki i katalogi ze schematem Flask

Zacznijmy tworzyć schemat Flask o nazwie hello2. Użyj poniższego skryptu, aby utworzyć strukturę katalogów po aktywacji środowiska wirtualnego za pomocą źródła venv / bin / aktywuj po przejściu do katalogu aplikacji.

blueprint_name='hello2' mkdir '$blueprint_name' mkdir -p '$blueprint_name/templates/$blueprint_name' touch '$blueprint_name/templates/$blueprint_name/hello.html' mkdir '$blueprint_name/static/' touch '$blueprint_name/__init__.py' touch '$blueprint_name/views.py'

Chcemy, aby nasz schemat hello2 miał swoje widoki, które zaimportujemy w pliku __init__.py. Tworzymy osobny katalog dla naszego Blueprint z szablonami i katalogami statycznymi do renderowania widoków Flask i obsługi zasobów statycznych.

jak wydrukować jeden element tablicy w java

Struktura katalogu Flask Blueprint

Struktura katalogów dla Planu powinna wyglądać tak, jak pokazano poniżej. Użyj polecenia drzewo, aby utworzyć podobny wynik.

Struktura katalogów Flask Blueprint

Create Flask Blueprint View

Teraz zdefiniujmy prosty widok wewnątrz views.py. Otwórz hello2 / views.py i wprowadź podany poniżej fragment kodu.

from flask import Blueprint, render_template hello2 = Blueprint( 'hello2', __name__, template_folder='templates', static_folder='static' ) @hello2.route('/hello2') def hello2_view(): greeting = 'Hello World 2' return render_template('hello2/hello.html', greeting=greeting)

Importujemy klasę Blueprint i metodę render_template. Następnie tworzymy obiekt Blueprint, podając nazwy szablonu i katalogów statycznych.

Następnie definiujemy trasę, używając dekoratora @ hello2.route i kontrolera o nazwie hello2_view. Ten kontroler jest funkcją Pythona. W tej funkcji przypisujemy wartość zmiennej o nazwie greeting, a następnie przekazujemy ją do metody render_template.

Utwórz szablon schematu kolby

Teraz utwórzmy szablon hello.html. Jeśli czytałeś nasze poprzednie samouczki, to na pewno zauważyłeś, że szablon ma taką samą nazwę, jaką utworzyliśmy do renderowania widoku HelloWorld. Dla tego planu hello2 tworzymy nowy szablon, rozszerzając poprzedni.

Ponadto zwróć uwagę, że użyliśmy semantycznej ścieżki hello2 / hello.html podczas wywoływania render_template w celu renderowania powitania w szablonie. Ten wzorzec pozwala uniknąć konfliktów między szablonami o tych samych nazwach.

Użyj podanego poniżej fragmentu kodu, aby utworzyć hello.html i zapisz go w hello2 / templates / hello2 / path.

{% extends 'hello.html' %} {% block hello %}

{{ greeting }} , from Software Testing Help.

{% endblock %}

Ten szablon jest prawie podobny do hello.html. Jednak dziedziczy większość swoich części HTML z hello.html. Zwróć uwagę na użycie {% block hello%} i {% endblock%}. Block hello w hello2 / hello.html zastępuje blok hello podstawowego szablonu hello.html.

Teraz otwórzmy plik __init__.py Blueprint hello2 i wspomnijmy w nim o podanym poniżej kodzie.

from app.hello2.views import * # expose all views at the blueprint level

W tej instrukcji importujemy wszystkie udekorowane metody, które utworzyliśmy w views.py w hello2 Blueprint. W razie potrzeby możemy importować tylko te metody / kontrolery, które są gotowe do użycia lub przetestowania.

Zarejestruj projekt Flask w aplikacji Flask

Teraz otwórzmy __init__.py w katalogu aplikacji Flask i zarejestrujmy nasz plan hello2, jak pokazano w poniższym kodzie.

from app.hello2 import hello2 app.register_blueprint(hello2, url_prefix='/hello2')

Tutaj również proszę zauważyć, że możemy selektywnie importować widoki i rejestrować tylko te, które są gotowe do użycia lub testowania.

Uruchommy naszą aplikację Flask w trybie debugowania za pomocą polecenia python run.py z katalogu głównego projektu i przejdź do http: // localhost: 8080 / hello2, aby sprawdzić, czy widok hello2 działa prawidłowo.

Wynik w przeglądarce powinien być podobny do poniższego przykładu.

Przykład HelloWorld2_View
Widok planu Hello2

Popracujmy nad lepszą prezentacją planu hello2, korzystając z platformy bootstrap Twittera. Co więcej, w następnej sekcji dowiesz się więcej o opcjonalnych parametrach zmiany zachowania schematu kolby. Zobaczmy to na przykładzie schematu Flask o nazwie Flask Bootstrap.

Przykład zastosowania kolby modułowej z projektem kolby

Bazując na naszej wiedzy o hello2 Flask Blueprint, dodajmy więcej planów, aby zrozumieć, jak możemy tworzyć aplikacje modułowe w Flask.

Załóżmy, że mamy aplikację internetową, która udostępnia odwiedzającym treści w postaci ebooków, samouczków i kursów. Zawiera również dodatkowe treści dotyczące informacji o zespole oraz stronę domową.

Jeśli spróbujemy uwzględnić te nowe funkcje w istniejącej aplikacji, będziemy musieli utworzyć widoki w views.py i odpowiadające im szablony w katalogu szablonów aplikacji. Podobnie musimy tworzyć modele i formularze w models.py i forms.py.

Jednak utrzymywanie całego kodu aplikacji stanie się uciążliwe, a współpraca z innymi członkami zespołu będzie zbyt skomplikowana i może skutkować konfliktami zatwierdzania lub złożonym przepływem pracy podczas programowania.

Obecnie w tym konwencjonalnym podejściu struktura aplikacji jest taka, jak pokazano poniżej.

podejście konwencjonalne

Aby uniknąć takiego scenariusza, możemy wykorzystać Flask Blueprints do tworzenia modułów specyficznych dla funkcji i odpowiednich treści. Stwórzmy kilka schematów Flask z ich oddzielnymi zasobami.

Każdy z układów Flask Blueprint będzie wyglądał podobnie do pokazanego poniżej.

Układy Flask Blueprint

Użyj poniższego skryptu, aby utworzyć wymagane pliki i katalogi dla planowanych planów Flask. Uruchom ten skrypt z katalogu głównego projektu.

cd app for dir in home courses tutorials ebooks do echo 'generating files for $dir ..' mkdir -p $dir/templates/$dir touch $dir/templates/$dir/$dir.html mkdir $dir/static touch $dir/static/style.css touch $dir/__init__.py touch $dir/views.py touch $dir/models.py touch $dir/forms.py done

Najpierw utwórzmy funkcje dla modułu głównego.

Otwórz views.py w katalogu domowym i zaktualizuj go poniższym kodem.

from flask import render_template, Blueprint home = Blueprint('home', __name__, template_folder='templates', static_folder='static') @home.route('/') def index(): return render_template('home/home.html')

W tym pliku zaimportowaliśmy klasę Blueprint Flask i utworzyliśmy jej instancję z wymaganymi parametrami z oddzielnymi szablonami i statycznym folderem. Następnie używamy dekoracji @home, aby zadeklarować powiązaną trasę metody widoku o nazwie index.

Teraz utwórz szablon base.html Jinja2 w katalogu szablonów aplikacji. Użyj poniższego kodu, aby zaktualizować plik.

from Software Testing Help.

Learn More >> {% endblock %}

Rozszerzyliśmy z base.html Bootstrap. Zwróć uwagę na użycie elementu div kontenera klasy i jednostki bohatera. Ponadto stworzyliśmy przycisk, dzięki któremu użytkownicy mogą dowiedzieć się więcej. Zmodyfikowaliśmy ten kod HTML i użyliśmy klas z platformy Twitter Bootstrap.

Teraz odśwież stronę w przeglądarce pod adresem http: // localhost: 8080 / hello2.html, aby zobaczyć zmieniony wygląd hello2.html.

Widok Changed Hello2 będzie wyglądał podobnie do pokazanego poniżej.

HelloWorld2_View_Bootstrap
Widok Hello2 z Bootstrap

Użycie Flask-Bootstrap jest całkowicie zależne od bloków dostępnych do nadpisania lub modyfikacji. Możemy użyć poniższych bloków, aby dostosować wrażenia. Szczegółową listę wszystkich możliwych bloków można znaleźć pod adresem https://pythonhosted.org/Flask-Bootstrap/basic-usage.html.

Czasami, gdy chcemy po prostu zmienić blok, zamiast całkowicie go zastąpić, możemy użyć funkcji super () Jinja2, aby osiągnąć wyniki.

Utwórz plik o nazwie hello2.css pod hello2 / static i umieść poniższy fragment kodu, aby stylizować kolor akapitu w hello2 / hello.html.

p { color: orange; }

Weź pokazany poniżej fragment kodu i umieść go w hello2 / hello.html.

{% block styles } {{ super() }} {% endblock %}

Teraz otwórz views.py w Flask Blueprint hello2 i zmodyfikuj instrukcję blueprint, jak pokazano poniżej.

hello2 = Blueprint('hello2', __name__, template_folder='templates', static_folder='static')

Przejdź do zarejestrowanego adresu URL Flask Blueprint, tj. Ponownie http: // localhost: 8080 / hello2. Wynik po dokonanych dotychczas zmianach powinien wyglądać tak, jak pokazano poniżej.

Widok Hello2 zmieniony
Widok Hello2 zmieniony

Flask Docker

Docker pomaga w kontenerowaniu aplikacji. Izoluje środowisko, którego potrzebuje aplikacja Flask, w taki sposób, że nie ma potrzeby stosowania kompletnych środowisk zwirtualizowanych, takich jak maszyny wirtualne.

Poza tym kontenery docker zajmują minimalną powierzchnię i są wygodniejsze w zarządzaniu i skalowaniu za pomocą platformy orkiestracyjnej. W dzisiejszych czasach, gdy każda inna aplikacja ma również wdrożenie kontenerowe, my również musimy nauczyć się wdrażać naszą przykładową aplikację jako kontener docker.

Kontener oparty na systemie Linux może działać w systemach Windows i MAC. Dlatego dokeryzowaną aplikację Flask można wdrożyć w dowolnym systemie operacyjnym niezależnie od systemu operacyjnego, w którym została zbudowana.

W tej sekcji wyjaśnimy kroki dokeryzacji aplikacji Flask. Dokeryzujemy ten projekt, aby można go było wdrożyć w kontenerze ze wszystkimi zależnościami spakowanymi w nim.

Pierwszy, zainstaluj Docker na twoim komputerze.

sudo apt-get install docker.io

Po zakończeniu instalacji przejdź do katalogu głównego naszego przykładowego projektu i utwórz plik Dockerfile.

Wpisz poniższy kod do tego pliku Dockerfile.

FROM python:3 ADD . /flaskTutorialApp WORKDIR /flaskTutorialApp RUN pip install -r requirements.txt ENTRYPOINT ['python'] CMD ['run.py']

Zaktualizuj plik config.py i zmień bazę danych na SQLite, jak pokazano poniżej.

# The SQLAlchemy connection string. SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'app.db') # SQLALCHEMY_DATABASE_URI = 'mysql://myapp@localhost/myapp'

Poza tym, jeśli po raz pierwszy pracujesz z SQLite w tej serii samouczków, utwórz użytkownika admin za pomocą polecenia flask fab create-admin.

Sprawdź, czy administrator może zalogować się do aplikacji.

Teraz zbuduj obraz dockera naszej przykładowej aplikacji za pomocą poniższego polecenia.

sudo docker build --tag flask-tutorial

To polecenie zajmuje trochę czasu, ponieważ pobiera zasoby z centrum Docker. Po zakończeniu tego polecenia sprawdź, czy obrazy się pojawiły, używając poniższego polecenia.

sudo docker images

Teraz uruchom ten niedawno utworzony obraz Dockera.

sudo docker run -p 5001:8080 flask-tutorial:latest

Konsola pokaże komunikaty dziennika serwera deweloperskiego.

Instalacja Dockera powoduje utworzenie wirtualnej karty sieciowej o nazwie docker0. Znajdź adres IP za pomocą polecenia sudo ifconfig. Po uzyskaniu adresu IP Docker możesz uzyskać dostęp do aplikacji, przechodząc do podanego poniżej adresu URL.

http: //: 5001

Gdy masz pewność co do rozwoju aplikacji, możesz wdrożyć obraz platformy Docker w usłudze Docker Hub, aby inni mogli go pobrać i używać.

Testowanie planu kolby

Teraz stwórzmy kilka testów do testowania Blueprint hello2. Zobaczmy, czy nasza przykładowa aplikacja zwraca poprawny kod HTTP, gdy klient wysyła żądanie pobierania zasobów w punkcie końcowym / hello2, czy nie. Jeśli pamiętasz, zarejestrowaliśmy nasz Flask Blueprint hello2 z url_prefix o wartości / hello2.

Utwórz plik o nazwie test_blueprint.py w ramach testów i dodaj do niego następujący test.

def test_hello2(client): resp = client.get('/hello2') assert 308 == resp.status_code

HTTP 308 dotyczy stałego przekierowania i oczekuje się, że nasza aplikacja Flask musi przekierować żądanie do zasobów związanych ze schematem o nazwie hello2.

Teraz dodajmy kolejny test, aby sprawdzić ścieżkę główną zasobów naszego planu. Dodajmy test, aby zobaczyć, czy ma wartość, czy nie.

from app.hello2 import hello2 def test_rootpath(): assert hello2.root_path is not None

Teraz uruchommy te testy wraz z innymi testami, aby upewnić się, że są one pomyślne.

pytest -v

Zobaczysz podobny wynik wyników testu, jak pokazano poniżej.

Pytest Results Blueprint
Pytest Results Blueprint

Teraz zatwierdź wszystkie zmiany w repozytorium i opublikuj je w zdalnym repozytorium na Github. Porównaj różnice z kodem z kodem gałęzi głównej i utwórz żądanie ściągnięcia, jeśli nie ma konfliktów.

Żądanie ściągnięcia wywołuje zadania kompilacji, które są częścią naszego przepływu pracy Github. Jeśli wszystkie sprawdzenia żądań ściągnięcia z tutorial-4 nie zakończą się niepowodzeniem, możemy bezpiecznie połączyć tę gałąź z wzorcem.

Git Actions Tutorial-4
Git Actions Tutorial-4

Często Zadawane Pytania

Pytanie 1) Co to jest Flask BluePrint?

Odpowiedź: Flask Blueprint to sposób na podzielenie aplikacji Flask na mniejsze i wielokrotnego użytku moduły. Flask Blueprint ma swoje oddzielne zasoby, takie jak widoki, szablony, pliki statyczne, modele, formularze itp. Korzystamy z podejścia Flask Blueprint do tworzenia łatwych w utrzymaniu i skalowalnych aplikacji Flask.

P # 2) Jak korzystasz z Flask Blueprint?

Odpowiedź: Aby skorzystać z Flask Blueprint, musimy go zaimportować i zarejestrować w obiekcie Flask Application, używając metody app.register_blueprint. Możemy przekazać wartość do parametru url_prifix, aby dołączyć ścieżkę do tras planu Flask.

Wniosek

W tym samouczku wyjaśniliśmy schematy Flask wraz z koncepcjami tworzenia zasobów statycznych dla aplikacji Flask. Zbadaliśmy korzyści wynikające z używania Flask Blueprint wraz z przemyśleniami na temat zasobów schematu za pomocą wtyczki Flask o nazwie Flask-Bootstrap.

Omówiliśmy również koncepcje tworzenia obrazu platformy Docker przykładowej aplikacji samouczka Flask. Ponadto stworzyliśmy również dwa testy do weryfikacji schematów kolb.

W naszym następnym samouczku omówimy powszechnie stosowane wzorce podczas tworzenia funkcji w aplikacjach internetowych przy użyciu Flaska.

=> Odwiedź tutaj, aby nauczyć się Flask od podstaw

rekomendowane lektury

^