Condividi tramite

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

  • Articolo

Passaggio precedente: Creare un'app Django con visualizzazioni e modelli di pagina

Nei passaggi precedenti dell'esercitazione si è appreso come creare un'app Django minima con una singola pagina HTML. Le app Web moderne, tuttavia, contengono molte pagine. Le pagine Web moderne usano risorse condivise come file CSS e JavaScript per fornire stili e comportamenti coerenti.

In questo passaggio viene descritto come:

  • Usare i modelli di elementi di Visual Studio per aggiungere rapidamente nuovi file di tipi diversi con un comodo codice boilerplate (passaggio 3-1)
  • Configurare il progetto Django per gestire i file statici (passaggio 3-2)
  • Aggiungere altre pagine all'app (passaggio 3-3)
  • Usare l'ereditarietà dei modelli per creare un'intestazione e una barra di spostamento usate in più pagine (passaggio 3-4)

Passaggio 3-1: Acquisire familiarità con i modelli di elementi

Durante lo sviluppo di un'app Django, in genere si aggiungono molti file Python, HTML, CSS e JavaScript. Per ogni tipo di file (file come web.config che potrebbe essere necessario per la distribuzione), Visual Studio offre utili modelli di elemento per iniziare.

Per visualizzare i modelli disponibili, passare a Esplora soluzioni, fare clic con il pulsante destro del mouse sulla cartella in cui si vuole creare l'elemento e quindi scegliere Aggiungi>nuovo elemento.

Add new item dialog in Visual Studio.

Per usare un modello, selezionare il modello desiderato, specificare un nome per il file e quindi selezionare Aggiungi. Aggiungendo un elemento in questo modo il file viene aggiunto automaticamente al progetto di Visual Studio e vengono contrassegnate le modifiche per il controllo del codice sorgente.

Domanda: In che modo Visual Studio individua i modelli di elementi da offrire?

Risposta: Il file di progetto di Visual Studio (con estensione pyproj) contiene un identificatore del tipo di progetto che lo contrassegna come progetto Python. Visual Studio usa l'identificatore del tipo per visualizzare solo i modelli di elemento adatti al tipo di progetto. In questo modo, Visual Studio può fornire un set completo di modelli di elemento per molti tipi di progetto senza chiedere di ordinarli ogni volta.

Passaggio 3-2: Rendere disponibili 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. I file Python non vengono mai trasmessi al computer di un utente. Altri file, tuttavia, come CSS e JavaScript, vengono usati esclusivamente dal browser. Quindi, il server host li recapita così come è ogni volta che vengono richiesti. Tali file sono detti file "statici" e Django può fornirli automaticamente senza che sia necessario scrivere codice.

Un progetto Django è configurato per impostazione predefinita per gestire i file statici dalla cartella statica dell'app, grazie alle righe nel file di settings.py del progetto Django:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = posixpath.join(*(BASE_DIR.split(os.path.sep) + ['static']))

È possibile organizzare i file all'interno di statici usando qualsiasi struttura di cartelle desiderata e quindi usare i percorsi relativi all'interno di tale cartella per fare riferimento ai file. Per illustrare il processo, seguire la procedura seguente per aggiungere un file CSS all'app, quindi usare tale foglio di stile nel modello index.html :

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella HelloDjangoApp nel progetto di Visual Studio, selezionare Aggiungi>Nuova cartella e assegnare alla cartella il nome static.

  2. Fare clic con il pulsante destro del mouse sulla cartella static e scegliere Aggiungi>Nuovo elemento. Nella finestra di dialogo visualizzata selezionare il modello Foglio di stile , assegnare al file site.cssil nome e selezionare Aggiungi.

    Add new item dialog for static file.

    Il file site.css viene visualizzato nel progetto e aperto nell'editor. La struttura di cartelle dovrebbe essere simile all'immagine seguente:

    Static file structure as shown in Solution Explorer.

  3. Sostituire il contenuto del file site.css con il codice seguente e salvare il file:

    .message {
    font-weight: 600;
    color: blue;
}

  4. Sostituire il contenuto del file templates/HelloDjangoApp/index.html dell'app con il codice seguente. Il codice sostituisce l'elemento <strong> utilizzato nel passaggio 2 con un <span> oggetto che fa riferimento alla message classe di stile. L'uso di una classe di stile offre maggiore flessibilità nello stile dell'elemento. Se il file index.html non è stato spostato in una sottocartella nei modelli quando si usa VS 2017 15.7 e versioni precedenti, fare riferimento ai nomi dei modelli nel passaggio 2-4.

    <html>
    <head>
        <title>{{ title }}</title>
        {% load static %} <!-- Instruct Django to load static files -->
        <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
    </head>
    <body>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>

  5. Eseguire il progetto per osservare i risultati. Al termine, arrestare il server ed eseguire il commit delle modifiche nel controllo del codice sorgente, se lo si desidera (come illustrato nel passaggio 2).

Domanda: Qual è lo scopo del tag {% load static %} ?

Risposta: La riga {% load static %} è necessaria prima di fare riferimento ai file statici in elementi come <head> e <body>. Nell'esempio illustrato in questa sezione, "file statici" fa riferimento a un set di tag di modello Django personalizzato, che consente di usare la {% static %} sintassi per fare riferimento ai file statici. In assenza di {% load static %}, verrà generata un'eccezione quando viene eseguita l'app.

Domanda: Ci sono convenzioni per organizzare i file statici?

Risposta: È possibile aggiungere altri file CSS, JavaScript e HTML nella cartella statica nel modo desiderato . Un modo tipico per organizzare i file statici consiste nel creare sottocartelle denominate fonts, scripts e content (per i fogli di stile e qualsiasi altro file). In ogni caso, ricordarsi di includere tali cartelle nel percorso del file relativo nei {% static %} riferimenti.

Domanda: È possibile completare la stessa attività senza usare il tag {% load static %} ?

Risposta: Sì, puoi.

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

Passaggio 3-3: Aggiungere una pagina all'app

L'aggiunta di un'altra pagina all'app:

  • Aggiunta di una funzione Python che definisce la visualizzazione.
  • Aggiunta di un modello per il markup della pagina.
  • Aggiunta del routing necessario al file urls.py del progetto Django.

I passaggi seguenti aggiungono una pagina "About" al progetto "HelloDjangoApp" e i collegamenti alla pagina dalla home page:

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella templates/HelloDjangoApp. Selezionare Aggiungi>nuovo elemento e selezionare il modello di elemento pagina HTML. Assegnare un nome al file about.html e selezionare Aggiungi.

    Add new item dialog for about file.

    Suggerimento

    Se il comando Nuovo elemento non viene visualizzato nel menu Aggiungi , assicurarsi di aver arrestato il server in modo che Visual Studio esce dalla modalità di debug.

  2. Sostituire il contenuto di about.html con il markup seguente (sostituire il collegamento esplicito alla home page con una semplice barra di spostamento nel passaggio 3-4):

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

  3. Aprire il file views.py dell'app e aggiungere una funzione denominata about che usa il modello:

    def about(request):
    return render(
        request,
        "HelloDjangoApp/about.html",
        {
            'title' : "About HelloDjangoApp",
            'content' : "Example app page for Django."
        }
    )

  4. Aprire il file urls.py del progetto Django e aggiungere la riga seguente alla matrice urlPatterns:

    re_path(r'^about$', HelloDjangoApp.views.about, name='about'),

  5. Aprire il file templates/HelloDjangoApp/index.html e aggiungere la riga seguente sotto l'elemento <body> da collegare alla pagina About (sostituire di nuovo questo collegamento con una barra di spostamento nel passaggio 3-4):

    <div><a href="about">About</a></div>

  6. Salvare tutti i file con il comando di menu File>Salva tutto oppure premere CTRL+MAIUSC+S. Tecnicamente, questo passaggio non è necessario perché l'esecuzione del progetto in Visual Studio salva automaticamente i file. Tuttavia, è un buon comando sapere su.

  7. Eseguire il progetto per osservare i risultati e controllare lo spostamento tra le pagine. Al termine, chiudere il server.

Domanda: Se si cerca usare "index" per il collegamento alla home page, non funziona. Perché?

Risposta: Anche se la funzione di visualizzazione nel file views.py è denominata index, i modelli di routing URL nel file di urls.py del progetto Django non contengono un'espressione regolare che corrisponde alla stringa "index". Per trovare la corrispondenza con la stringa, è necessario aggiungere un'altra voce per il criterio ^index$.

Come illustrato nella sezione successiva, è preferibile usare il {% url '<pattern_name>' %} tag nel modello di pagina per fare riferimento al nome di un modello. In tal caso, Django crea automaticamente l'URL appropriato. Sostituire, ad esempio, <div><a href="home">Home</a></div> in about.html con <div><a href="{% url 'index' %}">Home</a></div>. L'uso di 'index' in questo caso funziona perché il primo modello di URL in urls.py è in effetti denominato 'index' (in virtù dell'argomento name='index'). È anche possibile usare "home" per fare riferimento al secondo modello.

Passaggio 3-4: Usare l'ereditarietà dei modelli per creare un'intestazione e una barra di spostamento

Anziché avere collegamenti di spostamento espliciti in ogni pagina, le app Web moderne usano un'intestazione di personalizzazione e una barra di spostamento. Una barra di spostamento fornisce i collegamenti di pagina più importanti, i menu popup e così via. Per assicurarsi che l'intestazione e la barra di spostamento siano uguali in tutte le pagine, non ripetere lo stesso codice in ogni modello di pagina. È invece possibile definire le parti comuni di tutte le pagine in un'unica posizione.

Il sistema di modelli di Django offre due mezzi per riutilizzare elementi specifici in più modelli: include e ereditarietà.

  • Le inclusioni sono altri modelli di pagina che vengono inseriti in un punto specifico nel modello di riferimento usando la sintassi {% include <template_path> %}. Se si vuole modificare il percorso in modo dinamico nel codice, è anche possibile usare una variabile. Le include vengono usate nel corpo di una pagina per eseguire il pull del modello condiviso in una posizione specifica nella pagina.

  • L'ereditarietà usa l'elemento {% extends <template_path> %} all'inizio di un modello di pagina per specificare un modello di base condiviso su cui è basato 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, in modo che i modelli di riferimento possano aggiungere o modificare aree specifiche del modello di base denominate blocchi.

In entrambi i casi <template_path> è relativo alla cartella templates dell'app (è consentito anche l'uso di ../ o ./).

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

I passaggi seguenti illustrano l'ereditarietà:

  1. Nella cartella templates/HelloDjangoApp dell'app creare un nuovo file HTML. Fare clic con il pulsante destro del mouse sulla cartella templates/HelloDjangoApp, selezionare Aggiungi>nuovo elemento e quindi selezionare il modello di elemento Pagina HTML. Assegnare un nome al file layout.html e selezionare Aggiungi.

    Add new item dialog for layout file.

  2. Sostituire il contenuto del file layout.html con il markup seguente. È possibile notare che questo modello contiene un blocco denominato "content" che è tutte le pagine di riferimento da sostituire:

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

<body>
    <div class="navbar">
       <a href="/" class="navbar-brand">Hello Django</a>
       <a href="{% url 'home' %}" class="navbar-item">Home</a>
       <a href="{% url 'about' %}" class="navbar-item">About</a>
    </div>

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

  3. Aggiungere gli stili seguenti al file static/site.css dell'app (questa procedura dettagliata non mira a illustrare la progettazione reattiva e questi stili servono semplicemente per generare un risultato interessante):

    .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;
}

  4. Modificare il file templates/HelloDjangoApp/index.html per fare riferimento al modello di base e renderlo utilizzabile all'interno della pagina. Aggiungere la riga seguente come riga 1 nella pagina HTML (sopra il tag HTML):

    {% extends "HelloDjangoApp/layout.html" %}

  5. È possibile notare che usando l'ereditarietà, questo modello diventa semplice da implementare all'interno del tag del corpo per eseguire l'override del blocco di contenuto:

    {% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}

  6. Modificare il file templates/HelloDjangoApp/about.html nello stesso modo per rendere disponibile il modello di layout. Aggiungere la stessa riga del passaggio 1 nella pagina HTML (sopra il tag HTML):

    {% extends "HelloDjangoApp/layout.html" %}

  7. Quindi, usando l'ereditarietà, implementare il modello all'interno del tag body per eseguire l'override del blocco di contenuto:

    {% block content %}
{{ content }}
{% endblock %}

  8. Eseguire il server per osservare i risultati. Al termine, chiudere il server.

    Running app showing the nav bar.

  9. Poiché verranno apportate modifiche sostanziali all'app, è di nuovo il momento di eseguire il commit delle modifiche nel controllo del codice sorgente.

Passaggi successivi

Usare il modello di progetto Web Django completo

Approfondimento