Menu

Flask App e layout del progetto Flask con Blueprint e Bootstrap

  • Principale
  • Altro
  • Flask App e layout del progetto Flask con Blueprint e Bootstrap

flask app flask project layout with blueprint bootstrap

come aggiorno il mio BIOS Windows 10

Prova Il Nostro Strumento Per Eliminare I Problemi

Questo tutorial spiega come utilizzare Flask App, Flask Blueprint e Flask Bootstrap in un progetto Flask:

In questo argomento, ci allontaneremo un po 'dall'archetipo di Flask-Appbuilder per costruire la nostra comprensione di Flask Blueprints. Leggi il nostro tutorial su Flask, Flask Templates & Views e Flask con database come MongoDB, SQLite e MySQL. Abbiamo utilizzato un progetto di esempio chiamato flaskTutorialApp.

Tuttavia, puoi anche creare il progetto da zero utilizzando il comando flask fab create-app. Questo comando crea lo scaffolding richiesto per un progetto Flask insieme a una directory dell'applicazione basata sul nome dell'applicazione fornito dall'utente.

=> Guarda la serie Flask Training For All

Layout del progetto Flask con Blueprint e Bootstrap 1

In questo tutorial, spieghiamo l'app Flask, Flask Blueprint e Flask Bootstrap. Sviluppiamo inizialmente la nostra app Flask con lo scaffolding preesistente fornito da Flask-Appbuilder. Quindi creiamo un Flask Blueprint chiamato hello2. Infine, descriveremo il concetto di Flask Docker dockerizzando la nostra app Flask.

Cosa imparerai:

Flask App

Flask App è un altro nome per un'applicazione Flask. Se noti il ​​codice scritto nel file __init__.py, noterai che viene creata un'istanza di Flask e la variabile è denominata app. L'istanza della classe Flask è l'applicazione Flask, che è l'istanza dell'applicazione WSGI.

from flask import Flask app = Flask(__name__)

Progetto del pallone

Flask Blueprint ci consente di tenere insieme le funzionalità correlate e aiuta a migliorare le pratiche di sviluppo. Alcuni dei vantaggi di Flask Blueprints sono i seguenti:

  1. Facile organizzazione di applicazioni su larga scala.
  2. Aumenta la riusabilità del codice registrando più volte lo stesso Blueprint.
  3. Una serie di operazioni viene registrata e può essere successivamente riprodotta dopo aver registrato un progetto.

Con lo sfondo sopra riportato su Flask Blueprint, possiamo andare avanti e progettare il nostro primo Blueprint. Possiamo pensare a Blueprint anche come a un modulo. Creiamo un progetto HelloWorld.

Tutti i componenti, le risorse e le funzionalità di un progetto vengono conservati e organizzati separatamente dall'altro codice sorgente dell'applicazione Flask. Significa che un Flask Blueprint può avere viste, moduli, modelli, file statici e modelli.

Puoi creare più progetti dallo stesso insieme di risorse. Tuttavia, ciò potrebbe creare confusione e non è una buona pratica.

Crea file e directory del progetto Flask

Cominciamo a creare un progetto Flask con il nome di hello2. Utilizzare lo script indicato di seguito per creare la struttura della directory dopo aver attivato l'ambiente virtuale utilizzando il sorgente venv / bin / activation dopo essere passati alla directory dell'applicazione.

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'

Vogliamo che il nostro progetto hello2 abbia le sue viste che importeremo nel suo __init__.py. Creiamo una directory separata per il nostro Blueprint con modelli e directory statiche per visualizzare rispettivamente Flask e servire risorse statiche.

Struttura della directory del blueprint del pallone

La struttura delle directory per il Blueprint dovrebbe apparire come mostrato di seguito. Utilizzare il comando albero per creare un output simile.

Struttura della directory Flask Blueprint

Create Flask Blueprint View

Ora definiamo una semplice visualizzazione all'interno di views.py. Apri hello2 / views.py e inserisci lo snippet di codice indicato di seguito.

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)

Importiamo la classe Blueprint e il metodo render_template. Quindi creiamo un oggetto Blueprint fornendo i nomi del modello e delle directory statiche.

Quindi definiamo un percorso, utilizzando il decoratore @ hello2.route, e un controller con il nome hello2_view. Questo controller è una funzione Python. In questa funzione, assegniamo un valore a una variabile chiamata greeting e poi lo passiamo al metodo render_template.

Crea modello di progetto per boccetta

Ora creiamo il modello hello.html. Se hai letto i nostri tutorial precedenti, devi aver notato che il modello ha lo stesso nome che abbiamo creato per il rendering della vista HelloWorld. Per questo progetto hello2, creiamo un nuovo modello estendendo quello precedente.

Inoltre, si noti che abbiamo utilizzato un percorso semantico hello2 / hello.html durante la chiamata a render_template per visualizzare il saluto nel modello. Questo modello evita conflitti tra i modelli con lo stesso nome.

Usa lo snippet di codice indicato di seguito per creare hello.html e salvarlo in hello2 / templates / hello2 / path.

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

{{ greeting }} , from Software Testing Help.

{% endblock %}

Questo modello è quasi simile a hello.html. Tuttavia, eredita la maggior parte delle sue parti HTML da hello.html. Notare l'uso di {% block hello%} e {% endblock%}. Blocca ciao in hello2 / hello.html sostituisce il blocco ciao del modello di base hello.html.

Ora apriamo il file __init__.py del blueprint hello2 e menzioniamo il codice indicato di seguito.

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

In questa istruzione, importiamo tutti i metodi decorati che abbiamo creato in views.py del progetto hello2. Se necessario, possiamo importare solo quei metodi / controller che sono pronti per essere utilizzati o testati.

Registra un progetto Flask con l'app Flask

Ora apriamo __init__.py nella directory dell'applicazione Flask e registriamo il nostro progetto hello2 come mostrato nel codice seguente.

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

Anche qui, tieni presente che possiamo importare selettivamente le viste e registrare solo quelle pronte per l'uso o il test.

Eseguiamo la nostra app Flask in modalità debug con il comando python run.py dalla directory principale del progetto e andiamo su http: // localhost: 8080 / hello2 per vedere se la visualizzazione di hello2 funziona bene.

Il risultato nel browser dovrebbe essere simile all'esempio mostrato di seguito.

HelloWorld2_View Esempio
Visualizzazione del progetto Hello2

Lavoriamo su una migliore presentazione del progetto hello2 utilizzando il framework bootstrap di Twitter. Inoltre, nella sezione successiva, imparerai di più sui parametri opzionali per modificare il comportamento di un Flask Blueprint. Vediamolo con l'aiuto di un esempio di un progetto Flask chiamato Flask Bootstrap.

Esempio di applicazione di matraccio modulare con progetto di matraccio

Sulla base della nostra conoscenza di hello2 Flask Blueprint, aggiungiamo altri progetti per capire come possiamo creare applicazioni modulari in Flask.

Supponiamo di avere un'applicazione web che fornisce contenuti ai visitatori sotto forma di ebook, tutorial e corsi. Ha anche alcuni contenuti aggiuntivi riguardanti le informazioni sulla squadra e una home page.

Se proviamo ad adattare queste nuove funzionalità nell'applicazione esistente, dovremo creare viste in views.py e i modelli corrispondenti nella directory dei modelli dell'applicazione. Allo stesso modo, dobbiamo creare modelli e moduli in models.py e forms.py.

Tuttavia, il mantenimento di tutto il codice dell'applicazione diventerà complicato e la collaborazione con gli altri membri del team sarà troppo complicata e potrebbe causare conflitti di commit o un flusso di lavoro di sviluppo complesso.

Attualmente, in questo approccio convenzionale, la struttura dell'applicazione è come mostrato di seguito.

approccio convenzionale

Per evitare un tale scenario, possiamo utilizzare Flask Blueprints per creare moduli specifici per le funzionalità e il rispettivo contenuto. Creiamo alcuni progetti Flask, con le loro risorse separate.

Ciascun layout Flask Blueprint sarà simile a quello mostrato di seguito.

Layout del modello di boccetta

Utilizzare lo script indicato di seguito per creare i file e le directory richiesti per i progetti Flask pianificati. Esegui questo script dalla directory principale del progetto.

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

Per prima cosa creiamo le funzionalità per il modulo Home.

Apri views.py nella directory home e aggiornalo con il codice indicato di seguito.

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 questo file, abbiamo importato la classe Blueprint di Flask e ne abbiamo creato un'istanza con i parametri richiesti con modelli separati e una cartella statica. Quindi usiamo la decorazione @home per dichiarare il percorso associato del metodo di visualizzazione chiamato index.

Ora crea un modello base.html Jinja2 nella directory dei modelli dell'app. Utilizzare il codice indicato di seguito per aggiornare il file.

from Software Testing Help.

Learn More >> {% endblock %}

Abbiamo esteso da base.html di Bootstrap. Notare l'uso di div della classe container e hero-unit. Inoltre, abbiamo creato un pulsante per consentire agli utenti di saperne di più. Abbiamo modificato questo HTML e utilizzato classi dal framework Bootstrap di Twitter.

Ora aggiorna la pagina nel browser all'indirizzo http: // localhost: 8080 / hello2.html per vedere l'aspetto modificato di hello2.html.

La vista di Changed Hello2 sarà simile a quella mostrata di seguito.

HelloWorld2_View_Bootstrap
Visualizzazione Hello2 con Bootstrap

L'uso di Flask-Bootstrap dipende interamente dai blocchi disponibili per l'override o la modifica. Possiamo utilizzare i blocchi indicati di seguito per personalizzare l'esperienza. Un elenco dettagliato di tutti i possibili blocchi può essere visto su https://pythonhosted.org/Flask-Bootstrap/basic-usage.html.

A volte, quando vogliamo solo modificare un blocco piuttosto che sostituirlo completamente, possiamo utilizzare la funzione super () di Jinja2 per ottenere i risultati.

Crea un file chiamato hello2.css in hello2 / static e inserisci lo snippet di codice seguente per modellare il colore del paragrafo in hello2 / hello.html.

p { color: orange; }

Prendi lo snippet di codice mostrato di seguito e inseriscilo in hello2 / hello.html.

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

Ora apri views.py del Flask Blueprint hello2 e modifica l'istruzione del progetto come mostrato di seguito.

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

Passa all'URL registrato di Flask Blueprint, ad esempio http: // localhost: 8080 / hello2 di nuovo. Il risultato a causa delle modifiche apportate finora dovrebbe apparire come mostrato di seguito.

Hello2 View è cambiato
Hello2 View è cambiato

Flask Docker

Docker aiuta nella containerizzazione di un'applicazione. Isola l'ambiente di cui necessita l'applicazione Flask in modo tale che non sia necessario disporre di ambienti virtualizzati completi come le macchine virtuali.

Inoltre, i container Docker hanno un ingombro minimo e sono più comodi da gestire e scalare con l'aiuto di una piattaforma di orchestrazione. Oggigiorno, quando anche tutte le altre applicazioni hanno una distribuzione containerizzata, anche noi dobbiamo imparare a distribuire la nostra applicazione di esempio come container docker.

Un contenitore basato su Linux può essere eseguito su Windows e un MAC. Un'app Flask dockerizzata, quindi, è distribuibile su qualsiasi sistema operativo indipendentemente dal sistema operativo in cui è stata creata.

In questa sezione, spiegheremo i passaggi per la dockerizzazione di un'app Flask. Dockerizzeremo questo progetto in modo che possa essere distribuito in un contenitore con tutte le dipendenze impacchettate al suo interno.

Primo, installa Docker sulla tua macchina.

sudo apt-get install docker.io

Una volta completata l'installazione, vai nella directory principale del nostro progetto di esempio e crea un Dockerfile.

Scrivi il codice fornito di seguito in quel Dockerfile.

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

Aggiorna il file config.py e cambia il database in SQLite, come mostrato di seguito.

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

Inoltre, se questa è la prima volta che lavori con SQLite in questa serie di tutorial, crea l'utente admin utilizzando il comando flask fab create-admin.

Verificare se l'utente amministratore può accedere all'applicazione.

Ora crea l'immagine docker della nostra applicazione di esempio utilizzando il comando seguente.

sudo docker build --tag flask-tutorial

Questo comando richiede del tempo poiché scarica le risorse dall'hub Docker. Una volta completato questo comando, controlla che le immagini siano apparse utilizzando il comando seguente.

sudo docker images

Ora esegui questa immagine Docker creata di recente.

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

La console mostrerà i messaggi di registro del server di sviluppo.

L'installazione di Docker comporta la creazione di una NIC virtuale con il nome docker0. Trova l'indirizzo IP utilizzando il comando sudo ifconfig. Una volta ottenuto l'IP di Docker, puoi accedere all'applicazione navigando all'URL indicato di seguito.

http: //: 5001

Una volta acquisita familiarità con lo sviluppo dell'applicazione, è possibile distribuire la propria immagine Docker nell'hub Docker affinché gli altri possano scaricarla e utilizzarla.

Testare il progetto del pallone

Ora creiamo alcuni test per testare Blueprint hello2. Vediamo se la nostra app di esempio restituisce il codice HTTP corretto quando il client invia una richiesta Get per le risorse all'endpoint / hello2 oppure no. Se ricordi, abbiamo registrato il nostro Flask Blueprint hello2 con un url_prefix con il valore come / hello2.

Crea un file chiamato test_blueprint.py sotto test e aggiungi il seguente test al suo interno.

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

HTTP 308 riguarda il reindirizzamento permanente e si prevede che la nostra app Flask debba reindirizzare la richiesta alle risorse relative al progetto denominato hello2.

Ora aggiungiamo un altro test per controllare il percorso di root delle risorse del nostro Blueprint. Aggiungiamo un test per vedere se ha un valore o meno.

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

Ora eseguiamo questi test insieme agli altri per assicurarci che vengano superati.

pytest -v

Verrà visualizzato un output simile dei risultati del test, come mostrato di seguito.

Progetto dei risultati di Pytest
Progetto dei risultati di Pytest

Ora salva tutte le modifiche nel repository e pubblica quelle modifiche nel repository remoto su Github. Confronta le differenze con il codice con quello del ramo master e crea una richiesta pull se non ci sono conflitti.

La richiesta pull richiama i lavori di compilazione che fanno parte del nostro flusso di lavoro Github. Se tutti i controlli per le richieste pull dal tutorial-4 non falliscono, allora possiamo unire in sicurezza questo ramo con il master.

Tutorial sulle azioni di Git-4
Tutorial sulle azioni di Git-4

Domande frequenti

D # 1) Che cos'è Flask BluePrint?

dov'è la chiave di sicurezza della rete

Risposta: Flask Blueprint è un modo per strutturare un'applicazione Flask in moduli più piccoli e riutilizzabili. Un Flask Blueprint ha le sue risorse separate come viste, modelli, file statici, modelli, moduli, ecc. Usiamo l'approccio Flask Blueprint per creare applicazioni Flask facilmente gestibili e scalabili.

D # 2) Come usi Flask Blueprint?

Risposta: Per utilizzare Flask Blueprint, dobbiamo importarlo e registrarlo con l'oggetto Flask Application, utilizzando il metodo app.register_blueprint. Possiamo passare un valore al parametro url_prifix per anteporre un percorso alle rotte del Flask Blueprint.

Conclusione

In questo tutorial, abbiamo spiegato Flask Blueprints insieme ai concetti di creazione di risorse statiche per un'app Flask. Abbiamo esplorato i vantaggi dell'utilizzo di Flask Blueprint insieme ai pensieri delle risorse del progetto con l'aiuto di un plug-in Flask chiamato Flask-Bootstrap.

Abbiamo anche trattato i concetti di creazione dell'immagine Docker dell'applicazione tutorial Flask di esempio. Inoltre, abbiamo anche creato due test per la convalida dei Flask Blueprints.

Nel nostro prossimo tutorial, tratteremo i modelli comunemente seguiti durante la creazione di funzionalità nelle applicazioni Web utilizzando Flask.

=> Visita qui per imparare Flask da zero

Lettura consigliata

^