Menü

Flask App und Flask Project Layout mit Blueprint & Bootstrap

  • Haupt
  • Andere
  • Flask App und Flask Project Layout mit Blueprint & Bootstrap

flask app flask project layout with blueprint bootstrap

Versuchen Sie Unser Instrument, Um Probleme Zu Beseitigen

In diesem Tutorial wird die Verwendung von Flask App, Flask Blueprint und Flask Bootstrap in einem Flask-Projekt erläutert:

In diesem Thema werden wir uns ein wenig vom Archetyp von Flask-Appbuilder entfernen, um unser Verständnis von Flask Blueprints zu verbessern. Lesen Sie unser Tutorial zu Flask, Flask Templates & Views und Flask mit Datenbanken wie MongoDB, SQLite und MySQL. Wir haben ein Beispielprojekt namens flaskTutorialApp verwendet.

Sie können das Projekt jedoch auch mit dem Befehl flask fab create-app von Grund auf neu erstellen. Dieser Befehl erstellt das für ein Flask-Projekt erforderliche Gerüst zusammen mit einem Anwendungsverzeichnis, das auf dem von Ihnen angegebenen Anwendungsnamen basiert.

=> Siehe Die Flask Training Series für alle

Flask Project Layout mit Blueprint und Bootstrap 1

In diesem Tutorial erklären wir Ihnen die Flask App, Flask Blueprint und Flask Bootstrap. Wir entwickeln unsere Flask-App zunächst mit dem bereits vorhandenen Gerüst von Flask-Appbuilder. Wir erstellen dann einen Flask Blueprint namens hello2. Abschließend beschreiben wir das Flask Docker-Konzept, indem wir unsere Flask App docken.

Was du lernen wirst:

Kolben App

Flask App ist ein anderer Name für eine Flask-Anwendung. Wenn Sie den in der Datei __init__.py geschriebenen Code bemerken, werden Sie feststellen, dass eine Instanz von Flask erstellt wird und die Variable als App benannt wird. Die Instanz der Klasse Flask ist die Flask-Anwendung, die die Instanz der WSGI-Anwendung ist.

from flask import Flask app = Flask(__name__)

Kolben Blaupause

Mit Flask Blueprint können wir verwandte Funktionen zusammenhalten und bessere Entwicklungspraktiken unterstützen. Einige der Vorteile von Flask Blueprints sind folgende:

  1. Einfache Organisation von Großanwendungen.
  2. Erhöht die Wiederverwendbarkeit von Code durch mehrmaliges Registrieren desselben Blueprints.
  3. Eine Reihe von Vorgängen wird aufgezeichnet und kann anschließend nach dem Registrieren eines Bauplans wiedergegeben werden.

Mit dem obigen Hintergrund zu Flask Blueprint können wir fortfahren und unseren ersten Blueprint entwerfen. Wir können uns Blueprint auch als Modul vorstellen. Erstellen wir einen HelloWorld-Entwurf.

Alle Komponenten, Ressourcen und Funktionen eines Entwurfs werden getrennt vom anderen Quellcode der Flask-Anwendung gespeichert und organisiert. Dies bedeutet, dass ein Flask Blueprint seine Ansichten, Formulare, Modelle, statischen Dateien und Vorlagen haben kann.

Sie können mehrere Blaupausen aus denselben Ressourcen erstellen. Dies kann jedoch zu Verwirrung führen und ist keine gute Praxis.

Erstellen Sie Flask Blueprint-Dateien und -Verzeichnisse

Beginnen wir mit der Erstellung eines Flask Blueprint mit dem Namen hello2. Verwenden Sie das unten angegebene Skript, um die Verzeichnisstruktur nach dem Aktivieren Ihrer virtuellen Umgebung mithilfe der Quelle venv / bin / enabled zu erstellen, nachdem Sie zum Anwendungsverzeichnis gewechselt sind.

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'

Wir möchten, dass unser hello2 Blueprint seine Ansichten hat, die wir in seine __init__.py importieren werden. Wir erstellen ein separates Verzeichnis für unseren Blueprint mit Vorlagen und statischen Verzeichnissen, um Flask-Ansichten zu rendern und statische Ressourcen bereitzustellen.

Flask Blueprint-Verzeichnisstruktur

Die Verzeichnisstruktur für den Blueprint sollte wie folgt aussehen. Verwenden Sie den Befehl tree, um eine ähnliche Ausgabe zu erstellen.

Flask Blueprint-Verzeichnisstruktur

Create Flask Blueprint View

Definieren wir nun eine einfache Ansicht in views.py. Öffnen Sie hello2 / views.py und geben Sie das unten angegebene Code-Snippet ein.

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)

Wir importieren die Blueprint-Klasse und die render_template-Methode. Anschließend erstellen wir ein Blueprint-Objekt, indem wir die Namen der Vorlage und der statischen Verzeichnisse angeben.

Dann definieren wir eine Route mit dem Dekorator @ hello2.route und einem Controller mit dem Namen hello2_view. Dieser Controller ist eine Python-Funktion. In dieser Funktion weisen wir einer Variablen namens Begrüßung einen Wert zu und übergeben ihn dann an die Methode render_template.

Erstellen Sie eine Kolben-Blaupausen-Vorlage

Jetzt erstellen wir die Vorlage hello.html. Wenn Sie unsere vorherigen Tutorials gelesen haben, müssen Sie bemerkt haben, dass die Vorlage denselben Namen hat, den wir zum Rendern der HelloWorld-Ansicht erstellt haben. Für diesen hello2 Blueprint erstellen wir eine neue Vorlage, indem wir die vorherige erweitern.

Beachten Sie außerdem, dass wir beim Aufrufen von render_template einen Pfad semantisch hello2 / hello.html verwendet haben, um die Begrüßung in der Vorlage zu rendern. Dieses Muster vermeidet Konflikte zwischen gleichnamigen Vorlagen.

Verwenden Sie das unten angegebene Code-Snippet, um hello.html zu erstellen und unter hello2 / templates / hello2 / path zu speichern.

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

{{ greeting }} , from Software Testing Help.

{% endblock %}

Diese Vorlage ähnelt fast der Datei hello.html. Es erbt jedoch die meisten seiner HTML-Teile von hello.html. Beachten Sie die Verwendung von {% block hello%} und {% endblock%}. Block hallo in hello2 / hello.html überschreibt den Block hallo der Basisvorlage hello.html.

Lassen Sie uns nun die Datei __init__.py des hello2 Blueprint öffnen und den unten angegebenen Code darin erwähnen.

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

In dieser Anweisung importieren wir alle dekorierten Methoden, die wir in views.py des hello2 Blueprint erstellt haben. Bei Bedarf können wir nur die Methoden / Controller importieren, die zur Verwendung oder zum Testen bereit sind.

Registrieren Sie einen Flask Blueprint mit der Flask App

Öffnen Sie nun __init__.py im Flask-Anwendungsverzeichnis und registrieren Sie unseren hello2 Blueprint wie im folgenden Code gezeigt.

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

Beachten Sie auch hier, dass wir selektiv Ansichten importieren und nur diejenigen registrieren können, die zur Verwendung oder zum Testen bereit sind.

Lassen Sie uns unsere Flask-App im Debug-Modus mit dem Befehl python run.py aus dem Stammverzeichnis des Projekts ausführen und zum http: // localhost: 8080 / hello2 navigieren, um zu sehen, ob die Ansicht von hello2 einwandfrei funktioniert.

Das Ergebnis im Browser sollte dem unten gezeigten Beispiel ähneln.

HelloWorld2_View Beispiel
Hello2 Blueprint-Ansicht

Lassen Sie uns mithilfe des Bootstrap-Frameworks von Twitter an einer besseren Darstellung von hello2 blueprint arbeiten. Darüber hinaus erfahren Sie im nächsten Abschnitt mehr über die optionalen Parameter zum Ändern des Verhaltens eines Flask Blueprint. Sehen wir uns das anhand eines Beispiels für einen Flask Blueprint namens Flask Bootstrap an.

Anwendungsbeispiel für einen modularen Kolben mit Kolbenplan

Basierend auf unseren Erfahrungen mit hello2 Flask Blueprint fügen wir einige weitere Blaupausen hinzu, um zu verstehen, wie wir modulare Anwendungen in Flask erstellen können.

Nehmen wir an, wir haben eine Webanwendung, die den Besuchern Inhalte in Form von E-Books, Tutorials und Kursen bereitstellt. Es enthält auch einige zusätzliche Inhalte zu Informationen über das Team und eine Homepage.

Wenn wir versuchen, diese neuen Funktionen in die vorhandene Anwendung aufzunehmen, müssen wir Ansichten in views.py und die entsprechenden Vorlagen im Verzeichnis der Anwendungsvorlagen erstellen. Ebenso müssen wir Modelle und Formulare in models.py und forms.py erstellen.

Das Verwalten des gesamten Anwendungscodes wird jedoch umständlich, und die Zusammenarbeit mit den anderen Teammitgliedern wird zu kompliziert und kann zu Festschreibungskonflikten oder komplexen Entwicklungsabläufen führen.

Derzeit ist bei diesem herkömmlichen Ansatz die Anwendungsstruktur wie unten gezeigt.

Normale Annäherung

Um ein solches Szenario zu vermeiden, können wir Flask Blueprints verwenden, um Module zu erstellen, die für die Funktionen und den jeweiligen Inhalt spezifisch sind. Lassen Sie uns einige Flask Blueprints mit ihren separaten Ressourcen erstellen.

Jedes der Flask Blueprint-Layouts ähnelt dem unten gezeigten.

Flask Blueprint Layouts

Verwenden Sie das unten angegebene Skript, um die erforderlichen Dateien und Verzeichnisse für die geplanten Flask Blueprints zu erstellen. Führen Sie dieses Skript im Stammverzeichnis des Projekts aus.

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

Erstellen wir zunächst Funktionen für das Home-Modul.

Öffnen Sie views.py im Home-Verzeichnis und aktualisieren Sie es mit dem unten angegebenen Code.

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

In dieser Datei haben wir die Blueprint-Klasse von Flask importiert und mit den erforderlichen Parametern mit separaten Vorlagen und einem statischen Ordner instanziiert. Dann verwenden wir die @ home-Dekoration, um die zugehörige Route der Ansichtsmethode mit dem Namen index zu deklarieren.

Erstellen Sie nun eine base.html Jinja2-Vorlage im Vorlagenverzeichnis der App. Verwenden Sie den unten angegebenen Code, um die Datei zu aktualisieren.

from Software Testing Help.

Learn More >> {% endblock %}

Wir haben die Basis.html von Bootstrap erweitert. Beachten Sie die Verwendung von div des Klassencontainers und der Heldeneinheit. Darüber hinaus haben wir eine Schaltfläche erstellt, über die Benutzer mehr erfahren können. Wir haben diesen HTML-Code geändert und Klassen aus dem Bootstrap-Framework von Twitter verwendet.

Aktualisieren Sie nun die Seite im Browser unter http: // localhost: 8080 / hello2.html, um das geänderte Aussehen von hello2.html zu sehen.

Die Ansicht von Changed Hello2 ähnelt der unten gezeigten.

HelloWorld2_View_Bootstrap
Hello2-Ansicht mit Bootstrap

Die Verwendung von Flask-Bootstrap hängt vollständig von den Blöcken ab, die zum Überschreiben oder Ändern verfügbar sind. Wir können die unten genannten Blöcke verwenden, um die Erfahrung anzupassen. Eine detaillierte Liste aller möglichen Blöcke finden Sie unter https://pythonhosted.org/Flask-Bootstrap/basic-usage.html.

Manchmal, wenn wir nur einen Block ändern möchten, anstatt ihn vollständig zu ersetzen, können wir die super () - Funktion von Jinja2 verwenden, um die Ergebnisse zu erzielen.

Erstellen Sie eine Datei mit dem Namen hello2.css unter hello2 / static und platzieren Sie das folgende Codefragment, um die Farbe des Absatzes in hello2 / hello.html zu formatieren.

p { color: orange; }

Nehmen Sie das unten gezeigte Code-Snippet und platzieren Sie es in hello2 / hello.html.

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

Öffnen Sie nun views.py des Flask Blueprint hello2 und ändern Sie die Blueprint-Anweisung wie unten gezeigt.

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

Navigieren Sie erneut zur registrierten URL des Flask Blueprint, d. H. Http: // localhost: 8080 / hello2. Das Ergebnis aufgrund der bisher vorgenommenen Änderungen sollte wie folgt aussehen.

Hello2-Ansicht geändert
Hello2-Ansicht geändert

Flask Docker

Docker hilft beim Containerisieren einer Anwendung. Es isoliert die Umgebung, die die Flask-Anwendung benötigt, so, dass keine vollständigen virtualisierten Umgebungen wie virtuelle Maschinen erforderlich sind.

Außerdem haben Docker-Container einen minimalen Platzbedarf und sind mithilfe einer Orchestrierungsplattform komfortabler zu verwalten und zu skalieren. In diesen Tagen, in denen jede andere Anwendung auch eine containerisierte Bereitstellung hat, müssen auch wir lernen, unsere Beispielanwendung als Docker-Container bereitzustellen.

Ein Linux-basierter Container kann unter Windows und einem MAC ausgeführt werden. Eine dockerisierte Flask-App kann daher auf jedem Betriebssystem bereitgestellt werden, unabhängig davon, in welchem ​​Betriebssystem sie erstellt wurde.

So öffnen Sie die DAT-Datei unter Windows

In diesem Abschnitt werden die Schritte zum Andocken einer Flask-App erläutert. Wir werden dieses Projekt dockerisieren, damit es in einem Container mit allen darin gepackten Abhängigkeiten bereitgestellt werden kann.

Zuerst, Installieren Sie Docker auf Ihrer Maschine.

sudo apt-get install docker.io

Gehen Sie nach Abschluss der Installation in das Stammverzeichnis unseres Beispielprojekts und erstellen Sie eine Docker-Datei.

Schreiben Sie den unten angegebenen Code in diese Docker-Datei.

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

Aktualisieren Sie die Datei config.py und ändern Sie die Datenbank wie unten gezeigt in SQLite.

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

Wenn Sie zum ersten Mal in dieser Lernprogrammreihe mit SQLite arbeiten, erstellen Sie den Administratorbenutzer mit dem Befehl flask fab create-admin.

Überprüfen Sie, ob sich der Administrator bei der Anwendung anmelden kann.

Erstellen Sie nun das Docker-Image unserer Beispielanwendung mit dem folgenden Befehl.

sudo docker build --tag flask-tutorial

Dieser Befehl benötigt einige Zeit, da er Ressourcen vom Docker-Hub herunterlädt. Überprüfen Sie nach Abschluss dieses Befehls mit dem folgenden Befehl, ob die Bilder angezeigt wurden.

sudo docker images

Führen Sie nun dieses kürzlich erstellte Docker-Image aus.

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

Die Konsole zeigt die Protokollmeldungen des Entwicklungsservers an.

Die Installation von Docker führt zur Erstellung einer virtuellen Netzwerkkarte mit dem Namen docker0. Suchen Sie die IP-Adresse mit dem Befehl sudo ifconfig. Sobald Sie die IP von Docker erhalten haben, können Sie auf die Anwendung zugreifen, indem Sie zu der unten angegebenen URL navigieren.

http: //: 5001

Sobald Sie mit der Entwicklung der Anwendung vertraut sind, können Sie Ihr Docker-Image auf dem Docker Hub bereitstellen, damit die anderen es herunterladen und verwenden können.

Testen der Kolben-Blaupause

Lassen Sie uns nun einige Tests zum Testen des Blueprint hello2 erstellen. Lassen Sie uns sehen, ob unsere Beispiel-App den richtigen HTTP-Code zurückgibt, wenn der Client eine Get-Anforderung für Ressourcen am / hello2-Endpunkt sendet oder nicht. Wenn Sie sich erinnern, haben wir unseren Flask Blueprint hello2 mit einem url_prefix mit dem Wert / hello2 registriert.

Erstellen Sie unter Tests eine Datei mit dem Namen test_blueprint.py und fügen Sie den folgenden Test hinzu.

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

HTTP 308 bezieht sich auf die permanente Umleitung, und es wird erwartet, dass unsere Flask-App die Anforderung an die Ressourcen umleiten muss, die sich auf den Blueprint namens hello2 beziehen.

Fügen wir nun einen weiteren Test hinzu, um den Stammpfad der Ressourcen unserer Blaupause zu überprüfen. Fügen wir einen Test hinzu, um festzustellen, ob er einen Wert hat oder nicht.

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

Lassen Sie uns nun diese Tests zusammen mit den anderen Tests ausführen, um sicherzustellen, dass sie bestanden werden.

pytest -v

Sie würden eine ähnliche Ausgabe der Testergebnisse sehen, wie unten gezeigt.

Pytest Results Blueprint
Pytest Results Blueprint

Übernehmen Sie nun alle Änderungen in das Repo und veröffentlichen Sie diese Änderungen im Remote-Repository auf Github. Vergleichen Sie die Unterschiede mit dem Code mit dem des Hauptzweigs und erstellen Sie eine Pull-Anforderung, wenn keine Konflikte vorliegen.

Die Pull-Anforderung ruft die Build-Jobs auf, die Teil unseres Github-Workflows sind. Wenn alle Überprüfungen der Pull-Anforderungen aus Tutorial-4 nicht fehlschlagen, können wir diesen Zweig sicher mit dem Master zusammenführen.

Git Actions Tutorial-4
Git Actions Tutorial-4

Häufig gestellte Fragen

F # 1) Was ist Flask BluePrint?

Antworten: Flask Blueprint ist eine Möglichkeit, eine Flask-Anwendung in kleinere und wiederverwendbare Module zu strukturieren. Ein Flask Blueprint verfügt über separate Ressourcen wie Ansichten, Vorlagen, statische Dateien, Modelle, Formulare usw. Wir verwenden den Flask Blueprint-Ansatz, um einfach zu wartende und skalierbare Flask-Anwendungen zu erstellen.

F # 2) Wie verwenden Sie Flask Blueprint?

Antworten: Um Flask Blueprint verwenden zu können, müssen Sie es importieren und mit der Methode app.register_blueprint beim Flask Application-Objekt registrieren. Wir können einen Wert an den Parameter url_prifix übergeben, um einen Pfad zu den Routen des Flask Blueprint voranzustellen.

Fazit

In diesem Tutorial haben wir Flask Blueprints sowie Konzepte zum Erstellen statischer Ressourcen für eine Flask-App erläutert. Wir haben die Vorteile der Verwendung von Flask Blueprint zusammen mit den Gedanken an Blueprint-Ressourcen mithilfe eines Flask-Plugins namens Flask-Bootstrap untersucht.

Wir haben auch die Konzepte zum Erstellen des Docker-Images der Beispielanwendung für das Flask-Tutorial behandelt. Darüber hinaus haben wir zwei Tests zur Validierung der Flask Blueprints erstellt.

In unserem nächsten Tutorial werden wir die häufig verwendeten Muster beim Erstellen von Funktionen in den Webanwendungen mit Flask behandeln.

=> Besuchen Sie hier, um Flask From Scratch zu lernen

Literatur-Empfehlungen

^