Esercitazione: Creare un'app Flask con visualizzazioni e modelli di pagina in Visual Studio

Questo articolo presenta il passaggio 2 della serie di esercitazioni Usare il framework Web Flask in Visual Studio.

Visual Studio consente di creare applicazioni Flask da modelli di progetto che forniscono un punto di partenza più completo per i progetti. passaggio 1 dell'esercitazione descrive come creare un'app Flask con una sola pagina, in cui tutto il codice si trova in un singolo file. Nel passaggio 2 si esegue il refactoring del codice e si crea una struttura per i modelli di pagina per consentire un ulteriore sviluppo. In particolare, si vuole separare il codice per le visualizzazioni dell'applicazione da altri aspetti, ad esempio il codice di avvio.

Nel passaggio 2 dell'esercitazione si apprenderà come:

• Effettuare il refactoring del codice dell'applicazione per separare le visualizzazioni dal codice di avvio
• Eseguire il rendering di una visualizzazione usando un modello di pagina

Prerequisiti

• Una soluzione di Visual Studio e un progetto di applicazione Flask creati in Passaggio 1: Creare una soluzione di Visual Studio e un progetto Flask.

Eseguire il refactoring del progetto Flask per un ulteriore sviluppo

Il modello progetto Web Flask vuoto consente di creare un progetto con un singolo file app.py contenente il codice di avvio insieme a una singola visualizzazione. Per consentire un ulteriore sviluppo di un'app con più visualizzazioni e modelli, è necessario separare queste funzioni.

Seguire questa procedura per modificare il progetto Flask per consentire un ulteriore sviluppo:

1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella del progetto Flask (BasicProject) e selezionare Aggiungi>Nuova cartella.

   

2. Denominare la nuova cartella dell'applicazione HelloFlask.

3. Fare clic con il pulsante destro del mouse sulla cartella HelloFlask e selezionare Aggiungi>nuovo elemento per creare un nuovo file.

4. Nella finestra di dialogo Aggiungi Nuovo Elemento selezionare il modello di file File Python Vuoto:

   1. Denominare il file __init__.py. Il nome del file deve includere due caratteri di sottolineatura iniziale e due finali (_) intorno alla parola init.

   2. Selezionare Aggiungi.

   

5. Aggiungere il codice seguente al nuovo file, che crea l'istanza di Flask e carica le visualizzazioni dell'applicazione:

   from flask import Flask
   app = Flask(__name__)
   
   import HelloFlask.views
   

6. Nella cartella helloFlask creare un altro nuovo file Python denominato views.py.

   Importante

   Assicurarsi di specificare il nome del file come views.py. Il nome visualizzazioni è importante a causa dell'istruzione import HelloFlask.views nel file __init__.py. Se il nome viste non è lo stesso in entrambe le istanze, Visual Studio visualizza un errore durante l'esecuzione.

7. Aggiungere il codice seguente al file views.py. Questo codice rinomina la funzione e definisce la route restituita all'endpoint /home:

   from flask import Flask
   from HelloFlask import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       return "Hello Flask!"
   

   Questo codice contiene anche il codice di rendering della pagina dal file app.py e importa l'oggetto app dichiarato nel file __init__.py.

8. Nella cartella HelloFlask creare una sottocartella denominata templates. La cartella è vuota per il momento.

9. Nella cartella del progetto Flask (BasicProject), sostituire il contenuto del file app.py con il codice seguente:

   import os
   from HelloFlask import app    # Imports the code from HelloFlask/__init__.py
   
   if __name__ == '__main__':
       HOST = os.environ.get('SERVER_HOST', 'localhost')
   
       try:
           PORT = int(os.environ.get('SERVER_PORT', '5555'))
       except ValueError:
           PORT = 5555
   
       app.run(HOST, PORT)
   

10. Dopo aver aggiornato il codice, rinominare il file app.py in runserver.py.

11. Verificare che la struttura del progetto Flask sottoposto a refactoring sia simile all'esempio seguente:

    

Eseguire il programma refattorizzato e controllare le percorsi

A questo momento è possibile eseguire il progetto in Visual Studio:

1. In Visual Studio selezionare Debug>Avvia debug (F5) oppure selezionare server Web sulla barra degli strumenti principale (il browser visualizzato potrebbe variare):

2. Quando l'applicazione viene aperta nel browser, provare sia gli endpoint di route / (radice) che gli endpoint di route URL /home nel browser:

   

Eseguire il programma aggiornato nel debugger

È anche possibile impostare punti di interruzione in varie parti del codice e seguire la sequenza di avvio dell'app nel Debugger:

1. Impostare diversi punti di interruzione, ad esempio i punti seguenti:

   • Prima riga del file runserver.py
   • Prima riga del file __init__.py
   • La riga return "Hello Flask!" nel file views.py di

2. Avvia l'app nel Debugger selezionando Debug>Avvia Debug o F5.

3. Durante l'esecuzione del debugger, puoi procedere attraverso il codice con F10 , oppure eseguire il codice da ciascun punto di interruzione con F5 . È anche possibile usare i controlli di debug sulla barra degli strumenti principale in Visual Studio, ad esempio Continue, Stop, Restarte Step options:

   

4. Al termine, selezionare CTRL+C seguito da qualsiasi tasto per arrestare l'applicazione. È anche possibile chiudere tutte le finestre del browser aperte per le route.

Effettuare il commit delle modifiche nel sistema di controllo del codice sorgente

Dopo aver effettuato il refactoring del codice e testato gli aggiornamenti, è possibile esaminare ed eseguire il commit delle modifiche nel controllo del codice sorgente:

1. Salvare le modifiche apportate ai file di progetto, ad esempio con i tasti di scelta rapida CTRL+S.

2. Nella barra dei controlli Git, selezionare le modifiche non commesse (matita 5) per aprire la finestra modifiche Git.

   

3. Nella finestra modifiche Git, immettere un messaggio di commit e selezionare Commit All:

   

   Al termine del commit, Visual Studio visualizza il messaggio Commit <hash> creato localmente.

4. (Facoltativo) Eseguire il push delle modifiche effettuate nel repository remoto.

   1. Sulla barra dei controlli Git selezionare i commit in uscita/in ingresso (frecce 1/0).

   2. Selezionare Sync (Pull, poi Push) o Push.

   

   È anche possibile accumulare più commit locali prima di eseguirne il push nel repository remoto.

Per le procedure successive in questa serie di esercitazioni, è possibile fare riferimento a questa sezione per i passaggi per eseguire il commit delle modifiche nel controllo del codice sorgente.

Determinare la frequenza di commit e push

Il commit delle modifiche apportate al controllo del codice sorgente crea un record nel log delle modifiche e un punto a cui è possibile ripristinare il repository in base alle esigenze. È anche possibile esaminare ogni commit per esaminare le modifiche specifiche.

I commit in Git sono economici. Può essere preferibile inviare le modifiche in piccole quantità con commit frequenti, anziché accumulare un numero elevato di modifiche e inviarle come singolo commit.

Non è necessario eseguire il commit di ogni piccola modifica ai singoli file. È comune eseguire un commit quando si aggiunge una funzionalità, si modifica una struttura come illustrato in questo passaggio della serie di esercitazioni o si esegue il refactoring di un codice. È anche consigliabile rivolgersi ai collaboratori per concordare la granularità dei commit che funzionano meglio per tutti.

La frequenza con cui si esegue il commit e la frequenza con cui si esegue il push dei commit in un repository remoto sono due problematiche diverse. È possibile accumulare più commit nel repository locale prima di eseguirne il push nel repository remoto. La frequenza dei commit dipende dal modo in cui il team vuole gestire il repository.

Usare i modelli per eseguire il rendering di pagine e visualizzazioni

La funzione home nel file views.py genera una risposta HTTP in testo normale per la pagina. La maggior parte delle pagine Web reali risponde con pagine HTML avanzate che spesso incorporano dati live. Il motivo principale per cui gli sviluppatori definiscono le visualizzazioni usando una funzione consiste nel generare contenuto in modo dinamico.

Il valore restituito per la vista è solo una stringa. È possibile creare qualsiasi codice HTML all'interno di una stringa usando contenuto dinamico. Poiché è preferibile separare il markup dai dati, è preferibile inserire il markup in un modello e mantenere i dati nel codice.

Regolare le visualizzazioni per l'uso del codice HTML inline

Il primo passaggio consiste nel convertire l'elaborazione della visualizzazione in modo da usare html inline per la pagina con contenuto dinamico:

1. Sostituire il contenuto del file views.py con il codice seguente:

   from datetime import datetime
   from flask import render_template
   from HelloFlask import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       html_content = "<html><head><title>Hello Flask</title></head><body>"
       html_content += "<strong>Hello Flask!</strong> on " + formatted_now
       html_content += "</body></html>"
   
       return html_content
   

2. Salvare le modifiche ed eseguire di nuovo l'app.

3. Aggiorna la pagina alcune volte per confermare che la data e l'ora si aggiornano. Quando hai finito, chiudi l'app.

Creare un modello HTML

Convertire quindi il processo di rendering della pagina per usare un modello HTML:

1. Fare clic con il pulsante destro del mouse sulla cartella modelli di e selezionare Aggiungi>nuovo elemento per creare un nuovo file.

2. Nella finestra di dialogo Aggiungi nuovo elemento selezionare il modello di file pagina HTML. Assegnare al file il nome index.html e selezionare Aggiungi.

3. Sostituire il contenuto fornito del file HTML con il markup seguente:

   <html>
   <head>
      <title>Hello Flask</title>
   </head>
   
   <body>
      {{ content }}
   </body>
   </html>
   

   In questo codice, l'istruzione {{ content }} è un segnaposto o un token di sostituzione (detto anche variabile modello ) per cui si specifica un valore nel codice.

Regolare la funzione home per caricare il modello

È necessario modificare la funzione home per usare il metodo render_template. Questo metodo carica il modello HTML e fornisce un valore per {{ content }} usando un argomento denominato che corrisponde al nome del segnaposto.

1. Nel file views.py sostituire la definizione della funzione home con il codice seguente:

   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       return render_template(
           "index.html",
           content = "<strong>Hello, Flask!</strong> on " + formatted_now)
   

   Flask cerca automaticamente i modelli nei modelli cartella, quindi il percorso del modello è relativo a tale cartella.

2. Salvare le modifiche del progetto ed eseguire di nuovo l'app.

   Si noti che la sintassi HTML incorporata (\<strong> ...) all'interno del valore content non esegue il rendering di come HTML perché il motore di templating (Jinja) esegue automaticamente l'escape dei contenuti HTML. L'escaping automatico impedisce vulnerabilità accidentali agli attacchi di iniezione.

   Gli sviluppatori spesso raccolgono l'input da una pagina e lo usano come valore in un altro usando un segnaposto modello. L'escape funge anche da promemoria che è consigliabile evitare html dal codice.

   Quando hai finito, chiudi l'app.

Usare segnaposto distinti

È possibile usare segnaposto distinti per ogni parte di dati all'interno del markup HTML. Modificare quindi di nuovo la funzione home per specificare i valori segnaposto specifici:

1. Sostituire il contenuto del file index.html con il markup seguente:

   <html>
     <head>
       <title>{{ title }}</title>
     </head>
     <body>
       <strong>{{ message }}</strong>{{ content }}
     </body>
   </html>
   

2. Nel file views.py sostituire la definizione della funzione home con il codice seguente per fornire valori per tutti i segnaposto:

   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       return render_template(
           "index.html",
           title = "Hello Flask",
           message = "Hello, Flask!",
           content = " on " + formatted_now)
   

3. Salvare le modifiche ed eseguire di nuovo l'app. Questa volta dovresti vedere l'output correttamente visualizzato.

   

4. È possibile eseguire il commit delle modifiche nel controllo del codice sorgente e aggiornare il repository remoto. Per altre informazioni, vedere Eseguire il commit delle modifiche al controllo del codice sorgente.

Modelli di pagina separati

I modelli vengono in genere mantenuti in file HTML separati, ma è anche possibile usare un modello inline. Si consiglia di utilizzare file separati per mantenere una separazione pulita tra markup e codice.

Usare l'estensione .html per i modelli

L'estensione .html per i file modello di pagina è completamente facoltativa. È sempre possibile identificare il percorso relativo esatto del file nel primo argomento alla funzione render_template. Tuttavia, Visual Studio (e altri editor) in genere forniscono funzionalità come il completamento del codice e la colorazione della sintassi con .html file, che superano il fatto che i modelli di pagina non sono HTML.

Quando si lavora con un progetto Flask, Visual Studio rileva automaticamente se il file HTML che si sta modificando è effettivamente un modello Flask e fornisce alcune funzionalità complete automaticamente. Se si inizia a immettere un commento del modello di pagina Flask ({#), Visual Studio fornisce automaticamente i caratteri di chiusura #}. I comandi Selezione Commento e Rimuovi Commento Selezionato (nel menu Modifica>Avanzate) usano anche commenti modello anziché commenti HTML.

Organizzare i modelli in sottocartelle

È possibile usare sottocartelle e quindi fare riferimento al percorso relativo nella cartella modelli nelle chiamate alla funzione render_template. Per creare namespace per i tuoi modelli in modo efficace, questo approccio è eccellente.

Passaggio successivo

Passaggio 3: Gestire file statici, aggiungere pagine e usare l'ereditarietà dei modelli