Esercitazione: Gestire file statici e usare l'ereditarietà dei modelli con Flask in Visual Studio

2025-06-12

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

I passaggi precedenti di questa serie di esercitazioni creano un'app Flask minima con una singola pagina di HTML indipendente. Le app Web moderne sono in genere composte da molte pagine e usano risorse condivise come file CSS e JavaScript per fornire stili e comportamenti coerenti. Nel passaggio 3 si lavora con i modelli di elemento di Visual Studio per aggiungere contenuto al progetto Flask ed espandere le funzionalità dell'applicazione.

Nel passaggio 3 dell'esercitazione si apprenderà come:

Usare i modelli di elemento di Visual Studio per aggiungere rapidamente nuovi file con codice boilerplate
Gestire i file statici dal codice Flask
Aggiungere altre pagine all'app Flask
Usare l'ereditarietà dei modelli per creare un'intestazione e uno spostamento tra le pagine

Prerequisiti

Una soluzione di Visual Studio e un progetto di applicazione Flask creati in Passaggio 1: Creare un progetto Flask e aggiornato in Passaggio 2: Eseguire il refactoring del progetto Flask.

Esplorare i modelli di elemento in Visual Studio

Quando si sviluppa un'applicazione Flask, in genere si aggiungono molti altri file Python, HTML, CSS e JavaScript. Per ogni tipo di file (e altri file come web.config che potrebbe essere necessario per la distribuzione), Visual Studio offre utili modelli di elementi per iniziare. È possibile usare questi modelli per aggiungere rapidamente nuovi file di tipi diversi con il codice boilerplate.

Per visualizzare i modelli disponibili, passare a Esplora soluzioni in Visual Studio e aprire la struttura del progetto.
Fare clic con il pulsante destro del mouse sulla cartella in cui si desidera creare un nuovo file e selezionare Aggiungi>Nuovo elemento. Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento :
Per usare un modello, selezionare il modello desiderato, immettere un nome per il file e selezionare Aggiungi.

Visual Studio aggiunge il file al progetto corrente e contrassegna le modifiche per il controllo del codice sorgente.

Informazioni su come Visual Studio identifica i modelli di elemento

Il file di progetto di Visual Studio (.pyproj) contiene un identificatore del tipo di progetto che contrassegna il file come progetto Python. Visual Studio usa questo identificatore di tipo per riconoscere e visualizzare solo i modelli di elemento adatti al tipo di progetto. Visual Studio segue questo approccio per fornire un set completo di modelli di elemento per molti tipi di progetto senza chiedere di ordinarli ogni volta.

Distribuire file statici dall'app

In un'app Web compilata con Python (usando qualsiasi framework), i file Python vengono sempre eseguiti nel server dell'host Web e non vengono mai trasmessi al computer di un utente. Altri file come CSS e JavaScript vengono usati solo dal browser, quindi il server host li recapita semplicemente as-is quando vengono richiesti. Questi tipi di file sono definiti file "statici" e Flask può recapitarli automaticamente senza dover scrivere codice. All'interno dei file HTML, ad esempio, è possibile fare riferimento a file statici usando un percorso relativo nel progetto. La prima procedura di questa sezione illustra come usare un file CSS statico con un modello di pagina esistente.

Quando è necessario distribuire un file statico dal codice, ad esempio tramite un'implementazione dell'endpoint API, Flask offre un metodo pratico. È possibile fare riferimento ai file usando percorsi relativi all'interno di una cartella denominata statici nella radice del progetto. La seconda procedura di questa sezione illustra come usare un semplice file di dati statici dal codice.

In entrambe le procedure è possibile organizzare i file nella cartella statica in base alle proprie preferenze.

Usare un file CSS statico in un modello

Seguire questa procedura per usare un file statico in un modello:

In Esplora soluzioni, fare clic con il pulsante destro del mouse sulla cartella HelloFlask nel tuo progetto, selezionare Aggiungi>Nuova cartellae assegnare alla cartella il nome static.
Fare clic con il pulsante destro del mouse sulla cartella statica e selezionare Aggiungi>nuovo elemento.
Nella finestra di dialogo Aggiungi Nuovo Elemento, selezionare il modello foglio di stile, assegnare il nome al file site.cse quindi selezionare Aggiungi.

Visual Studio aggiunge il file site.css al progetto e apre il file nell'editor. Di seguito è riportato un esempio della struttura aggiornata del progetto Flask:
Sostituire il contenuto del file site.css con gli stili seguenti:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Sostituire il contenuto del file HelloFlask/templates/index.html con il markup seguente:
```
<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <span class="message">{{ message }}</span>{{ content }}
   </body>
</html>
```
Questo codice sostituisce l'elemento HTML <strong> del passaggio 2 della serie di esercitazioni con un elemento <span> che fa riferimento alla classe di stile message. L'uso di una classe di stile in questo modo offre maggiore flessibilità nello stile dell'elemento HTML.
Salva le modifiche del progetto selezionando File>Salva tutto oppure usa la scorciatoia da tastiera Ctrl+Maiusc+S. Questo passaggio non è necessario perché durante lo sviluppo del progetto, Visual Studio salva automaticamente i file.
Eseguire il progetto e osservare i risultati. Quando hai finito, ferma l'app.
(Facoltativo) È possibile eseguire il commit delle modifiche nel controllo del codice sorgente e aggiornare il repository remoto. Per altre informazioni, vedere Confermare le modifiche nel controllo del codice sorgente nel passaggio 2 di questa serie di esercitazioni.

Rendere disponibile il file statico dal codice

Flask fornisce una funzione denominata send_static_file che è possibile chiamare dal codice per fare riferimento a qualsiasi file all'interno della cartella statica del progetto. Il processo seguente crea un endpoint API semplice che restituisce un file di dati statico:

Nella cartella statica creare un file di dati JSON statico denominato data.json. È possibile usare il modello di file testo come base per il file.
Sostituire il contenuto del file JSON con il codice seguente che fornisce alcuni dati di esempio per illustrare il meccanismo:
```
{
   "01": {
      "note" : "Sample data to demonstrate the mechanism."
   }
}
```
Nel file HelloFlask/views.py aggiungere una funzione con l'endpoint /api/data route che restituisce il file di dati statico usando il metodo send_static_file:
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
Salvare le modifiche del progetto ed eseguire di nuovo il progetto. Navigare all'endpoint di route /api/data e verificare che l'app restituisca il file statico.
Al termine, chiudi l'app.

Organizzare file e cartelle statici

È possibile aggiungere altri file CSS, JavaScript e HTML nella cartella statica in base alle esigenze del progetto. Un modo tipico per organizzare i file statici consiste nel creare sottocartelle denominate tipi di carattere, scripte contenuto (per fogli di stile e altri file).

Usare le route URL e i parametri di query delle API

È possibile gestire le variabili URL e i parametri di query con le API quando si usa Flask. Per ulteriori informazioni, vedere Usare percorsi URL variabili e parametri di query, come indicato nel passaggio 1 di questa serie di esercitazioni.

Aggiungere una pagina all'applicazione Flask

L'aggiunta di un'altra pagina all'applicazione Flask comporta le attività seguenti:

Aggiungere una funzione Python che definisce la visualizzazione
Aggiungere un modello per il markup HTML della pagina
Aggiornare le route URL nel file di views.py del progetto Flask

Seguire questa procedura per aggiungere una pagina About (/about) al progetto BasicProject Flask e i collegamenti a tale pagina dalla home page:

In Esplora soluzioni, fare clic con il pulsante destro del mouse sulla cartella HelloFlask/templates nel progetto e selezionare Aggiungi>Nuovo elemento.

Mancia

Se non vedi il comando Nuovo elemento nel menu Aggiungi, assicurati di arrestare l'app Flask in modo che Visual Studio esca dalla modalità di debug.
Nella finestra di dialogo Aggiungi nuovo elemento selezionare il modello pagina HTML, denominare il file about.htmle quindi selezionare Aggiungi.

Sostituire il contenuto del file about.html con il markup HTML seguente:

<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <div><a href="home">Home</a></div>
      {{ content }}
   </body>
</html>

In un passaggio successivo sostituire il collegamento esplicito alla home page con una barra di spostamento.

Nel file HelloFlask/views.py aggiungere una funzione denominata about che usa il modello:

@app.route('/about')
def about():
   return render_template(
      "about.html",
      title = "About HelloFlask",
      content = "Example app page for Flask.")

Nel file HelloFlask/templates/index.html aggiungere il markup seguente come prima istruzione nell'elemento <body>:
```
<div><a href="about">About</a></div>
```
Questo markup aggiunge un collegamento alla pagina /about per l'app Flask. In un passaggio successivo sostituire questo collegamento con una barra di spostamento.
Salvare le modifiche del progetto ed eseguire di nuovo il progetto. Passare alla pagina /about e controllare lo spostamento tra le varie pagine dell'app.
Quando hai finito, termina l'app.

Dai un nome alla funzione della pagina

Flask non impone restrizioni o requisiti per il nome della funzione di pagina. L'@app.route decorator determina gli URL per cui Flask chiama la funzione per generare una risposta. Gli sviluppatori in genere associano il nome della funzione della pagina alla route, ma questo tipo di associazione non è obbligatorio.

Usare l'ereditarietà dei modelli per l'intestazione e la navigazione

Invece di collegamenti di spostamento espliciti in ogni pagina, molte app Web hanno un'intestazione di personalizzazione e una barra di spostamento che fornisce i collegamenti di pagina più importanti, i menu popup e così via. Per garantire la coerenza all'interno dell'app, l'intestazione e la barra di spostamento devono essere uguali in tutte le pagine, ma non è necessario ripetere lo stesso codice in ogni modello di pagina. È possibile definire le parti comuni di tutte le pagine in un singolo file.

Il sistema di creazione modelli di Flask (Jinja per impostazione predefinita) offre due modi per riutilizzare elementi specifici in più modelli:

Include sono altri modelli di pagina inseriti in una posizione specifica nel modello di riferimento con la sintassi {% include <template_path> %}. È anche possibile usare una variabile se si vuole modificare il percorso in modo dinamico nel codice. Le include vengono in genere usate nel corpo di una pagina per eseguire il pull del modello condiviso in una posizione specifica nella pagina.
ereditarietà usa la sintassi {% extends <template_path> %} all'inizio di un modello di pagina per specificare un modello di base condiviso su cui si basa il modello di riferimento. L'ereditarietà viene comunemente usata per definire un layout condiviso, una barra di spostamento e altre strutture per le pagine di un'app. Questo approccio richiede modelli di riferimento per aggiungere o modificare solo aree specifiche del modello di base denominato blocchi .

Per entrambi gli approcci, il valore <template_path> è relativo alla cartella dei modelli dell'app (sono consentiti anche../ o ./).

Un modello di base delinea i blocchi usando i tag {% block <block_name> %} e {% endblock %}. Se un modello di riferimento usa tag con lo stesso nome di blocco, il contenuto del blocco nel modello di riferimento esegue l'override del blocco corrispondente nel modello di base.

I passaggi seguenti illustrano l'ereditarietà dei modelli:

In Esplora soluzioni, fare clic con il pulsante destro del mouse sulla cartella HelloFlask/templates e creare un nuovo file dal modello Pagina HTML con il nome layout.html.

Sostituire il contenuto del file layout.html con il markup HTML seguente:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>{{ title }}</title>
   <link rel="stylesheet" type="text/css" href="/static/site.css" />
</head>

<body>
   <div class="navbar">
      <a href="/" class="navbar-brand">Hello Flask</a>
      <a href="{{ url_for('home') }}" class="navbar-item">Home</a>
      <a href="{{ url_for('about') }}" class="navbar-item">About</a>
   </div>

   <div class="body-content">
      {% block content %}
      {% endblock %}
      <hr/>
      <footer>
         <p>&copy; 2024</p>
      </footer>
   </div>
</body>
</html>

Questo modello contiene un blocco denominato content, che identifica tutto il contenuto che le pagine di riferimento devono sostituire.

Nel file HelloFlask/static/site.css aggiungere gli stili seguenti alla fine del file:

.navbar {
   background-color: lightslategray;
   font-size: 1em;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   color: white;
   padding: 8px 5px 8px 5px;
}

.navbar a {
   text-decoration: none;
   color: inherit;
}

.navbar-brand {
   font-size: 1.2em;
   font-weight: 600;
}

.navbar-item {
   font-variant: small-caps;
   margin-left: 30px;
}

.body-content {
   padding: 5px;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Queste definizioni di stile generano un risultato interessante per questo esercizio. Questa procedura dettagliata non illustra la progettazione reattiva.

Sostituire il contenuto del file HelloFlask/templates/index.html con il markup seguente:
```
{% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Il modello di index fa ora riferimento al modello di base ed esegue l'override del blocco content. È possibile notare che usando l'ereditarietà, questo modello è semplificato.
Sostituire il contenuto del file di HelloFlask/templates/about.html con il markup seguente, quindi il modello di about fa riferimento anche al modello di base ed esegue l'override del blocco content:
```
{% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Eseguire di nuovo l'app e osservare i risultati. Usare i collegamenti della barra di spostamento per passare da una pagina all'altra.
Al termine, arrestare l'app e salvare le modifiche del progetto.
Poiché sono state apportate modifiche sostanziali all'app, è consigliabile salvare le modifiche in un repository Git. Per altre informazioni, vedere Eseguire il commit delle modifiche al controllo del codice sorgente nel passaggio 2 di questa serie di esercitazioni.

Revisione dell'esercitazione

Congratulazioni per completare questa esercitazione su Flask in Visual Studio.

In questa esercitazione si è appreso come:

Creare un progetto Flask con più pagine
Usare i modelli per creare visualizzazioni di pagina diverse
Gestire file statici, aggiungere pagine e usare l'ereditarietà dei modelli

Documentazione del Progettista di Modelli Jinja (jinja.pocoo.org)
url_for nella documentazione dell'oggetto Flask Application (flask.pocoo.org)
Codice sorgente dell'esercitazione su GitHub (Microsoft/python-sample-vs-learning-flask)

Condividi tramite