Condividi tramite

Esercitazione: Introduzione al framework Web Django in Visual Studio

  • Articolo

Django è un framework Python di alto livello progettato per lo sviluppo rapido, sicuro e scalabile di applicazioni Web. Questa esercitazione esplora il framework Django nel contesto dei modelli di progetto. Visual Studio fornisce i modelli di progetto per semplificare la creazione di app Web basate su Django.

In questa esercitazione apprenderai a:

  • Creare un progetto Django di base in un repository Git usando il modello "Progetto Web Django vuoto" (passaggio 1).
  • Creare un'app Django con una pagina ed eseguire il rendering di tale pagina usando un modello (passaggio 2).
  • Gestire file statici, aggiungere pagine e usare l'ereditarietà dei modelli (passaggio 3).
  • Usare il modello Progetto Web Django per creare un'app con più pagine e progettazione reattiva (passaggio 4).
  • Autenticare gli utenti (passaggio 5).

Prerequisiti

  • Visual Studio 2017 o versione successiva in Windows con le opzioni seguenti:
    • Carico di lavoro Sviluppo Python (scheda Carico di lavoro nel programma di installazione). Per istruzioni, vedere Installare il supporto Python in Visual Studio.
    • GIT per Windows e Estensione GitHub per Visual Studio nella scheda Singoli componenti sotto a Strumenti per il codice.
  • Visual Studio 2022 in Windows con le opzioni seguenti:
    • Carico di lavoro Sviluppo Python (scheda Carico di lavoro nel programma di installazione). Per altre istruzioni, vedere Installare il supporto python in Visual Studio.
    • Git per Windows nella scheda Singoli componenti in Strumenti di codice.

I modelli di progetto Django includono anche versioni precedenti di Python Tools per Visual Studio. I dettagli del modello potrebbero essere diversi da quelli descritti in questa esercitazione (in particolare diversi con le versioni precedenti del framework Django).

Lo sviluppo python non è attualmente supportato in Visual Studio per Mac. In Mac e Linux usare l'estensione Python in Visual Studio Code.

"Progetti di Visual Studio" e "progetti Django"

Nella terminologia di Django, un "progetto Django" include diversi file di configurazione a livello di sito insieme a una o più "app". Per creare un'applicazione Web completa, è possibile distribuire queste app in un host Web. Un progetto Django può contenere più app e la stessa app può essere inclusa in più progetti Django.

Un progetto di Visual Studio può contenere il progetto Django insieme a più app. Ogni volta che questa esercitazione fa riferimento a un "progetto", fa riferimento al progetto di Visual Studio. Quando fa riferimento alla parte "Progetto Django" dell'applicazione Web, si riferisce in particolare a un "progetto Django".

Nel corso di questa esercitazione si creerà una singola soluzione di Visual Studio che contiene tre progetti Django separati. Ogni progetto contiene una singola app Django. È possibile passare facilmente da un file all'altro per il confronto, mantenendo i progetti nella stessa soluzione.

Passaggio 1-1: Creare un progetto e una soluzione di Visual Studio

Quando si usa Django dalla riga di comando, in genere si avvia un progetto eseguendo il django-admin startproject <project_name> comando . In Visual Studio il modello "Progetto Web Django vuoto" fornisce la stessa struttura all'interno di un progetto e di una soluzione di Visual Studio.

  1. In Visual Studio selezionare File>Nuovo>Progetto, cercare "Django" e quindi selezionare il modello Progetto Web Django vuoto. (È anche possibile trovare il modello in Python>Web nell'elenco a sinistra.

    New project dialog in Visual Studio for the Blank Django Web Project

  2. Nei campi nella parte inferiore della finestra di dialogo immettere le informazioni seguenti, come mostrato nella figura precedente, e quindi selezionare OK:

    • Nome: impostare il nome del progetto di Visual Studio su BasicProject. Questo nome verrà usato anche per il progetto Django.
    • Percorso: specificare un percorso in cui creare la soluzione e il progetto di Visual Studio.
    • Soluzione: per questa impostazione lasciare il valore predefinito Crea nuova soluzione.
    • Nome della soluzione: impostare su LearningDjango, un nome appropriato per la soluzione come contenitore per più progetti in questa esercitazione.
    • Crea directory per soluzione: lasciare impostato il valore predefinito.
    • Crea nuovo repository Git: selezionare questa opzione (deselezionata per impostazione predefinita), in modo che Visual Studio crei un repository Git locale durante la creazione della soluzione. Se questa opzione non è visualizzata, eseguire il programma di installazione di Visual Studio e aggiungere GIT per Windows ed Estensione GitHub per Visual Studio nella scheda Singoli componenti in Strumenti per il codice.

  3. Dopo un istante, Visual Studio visualizza una finestra di dialogo con il messaggio Questo progetto richiede pacchetti esterni, riportata di seguito. Questa finestra di dialogo viene visualizzata perché il modello include un file requirements.txt che fa riferimento al pacchetto Django 1.x più recente. Selezionare Mostra pacchetti necessari per visualizzare le dipendenze esatte.

    Prompt saying that the project requires external packages

  4. Selezionare l'opzione Installazione manuale. A breve si creerà l'ambiente virtuale per assicurarsi che venga escluso dal controllo del codice sorgente. È sempre possibile creare l'ambiente da requirements.txt.

  1. In Visual Studio selezionare File>Nuovo>progetto, cercare "Django" e selezionare il modello Progetto Web Django vuoto e quindi selezionare Avanti.

    New project dialog in Visual Studio for the Blank Django Web Project.

  2. Immettere le informazioni seguenti e quindi selezionare Crea:

    • Nome progetto: impostare il nome del progetto di Visual Studio su BasicProject. Questo nome verrà usato anche per il progetto Django.
    • Percorso: specificare un percorso in cui creare la soluzione e il progetto di Visual Studio.
    • Soluzione: lasciare questa opzione di controllo impostata su Crea nuova soluzione predefinita.
    • Nome soluzione: impostare su LearningDjango, appropriato per la soluzione come contenitore per più progetti in questa esercitazione.

Passaggio 1-2: Esaminare i controlli Git e pubblicare il progetto in un repository remoto

Poiché è stata selezionata la finestra di dialogo Crea nuovo repository Git nella finestra di dialogo Nuovo progetto , il progetto viene già sottoposto a commit nel controllo del codice sorgente locale al termine del processo di creazione. In questo passaggio si acquisirà familiarità con i controlli Git di Visual Studio e la finestra Team Explorer, in cui viene usato il controllo del codice sorgente.

  1. Esaminare i controlli Git nella parte inferiore della finestra principale di Visual Studio. Da sinistra a destra, questi controlli mostrano i commit di cui è stato annullato il push, le modifiche non sottoposte a commit, il nome del repository e il ramo corrente:

    Git controls in the Visual Studio window

    Nota

    Se non si seleziona Crea nuovo repository Git nella finestra di dialogo Nuovo progetto, i controlli Git mostrano solo il comando Aggiungi al controllo del codice sorgente, che crea un repository locale.

    Add to Source Control appears in Visual Studio if you've not created a repository

  2. Selezionare il pulsante Modifiche. Visual Studio visualizza la pagina Modifiche nella finestra di Team Explorer. Poiché del nuovo progetto creato è già stato automaticamente eseguito il commit nel controllo del codice sorgente, non viene visualizzata alcuna modifica in sospeso.

    Team Explorer window on the Changes page

  3. Nella barra di stato di Visual Studio selezionare il pulsante dei commit di cui è stato annullato il push (freccia in su con 2) per aprire la pagina Sincronizzazione in Team Explorer. Poiché è presente solo un repository locale, la pagina fornisce semplici opzioni per pubblicare il repository in diversi repository remoti.

    Team Explorer window showing available Git repository options for source control

    È possibile scegliere qualsiasi servizio desiderato per i propri progetti. Questa esercitazione mostra l'uso di GitHub, in cui il codice di esempio completo per l'esercitazione è disponibile nel repository Microsoft/python-sample-vs-learning-django.

  4. Quando si seleziona uno qualsiasi dei controlli Pubblica, Team Explorer chiede altre informazioni. Ad esempio, quando si pubblica l'esempio per questa esercitazione, il repository stesso doveva essere creato per primo, nel qual caso l'opzione Push to Remote Repository è stata usata con l'URL del repository.

    Team Explorer window for pushing to an existing remote repository

    Se non è disponibile un repository esistente, le opzioni Pubblica in GitHub e Esegui push ad Azure DevOps consentono di crearne uno direttamente da Visual Studio.

  5. Durante lo svolgimento di questa esercitazione, abituarsi a usare periodicamente i controlli in Visual Studio per il commit e il push delle modifiche. Questa esercitazione ricorda di eseguire queste operazioni nei momenti appropriati.

Suggerimento

Per spostarsi rapidamente all'interno di Team Explorer, selezionare l'intestazione (che indica Modifiche o Push nelle immagini precedenti) per visualizzare un menu di scelta rapida delle pagine disponibili.

In questo passaggio si acquisisce familiarità con i controlli Git di Visual Studio e Team Explorer. Con la finestra Team Explorer si userà il controllo del codice sorgente.

  1. Per eseguire il commit del progetto nel controllo del codice sorgente locale:

    1. Selezionare Aggiungi al controllo del codice sorgente nell'angolo inferiore della finestra principale di Visual Studio.
    2. Selezionare quindi l'opzione Git .
    3. Verrà visualizzata la finestra Crea repository Git, in cui è possibile creare ed eseguire il push di un nuovo repository.

    Create a Git repository.

  2. Dopo aver creato un repository, viene visualizzato un set di nuovi controlli Git nella parte inferiore. Da sinistra a destra, questi controlli mostrano commit non crittografati, modifiche di cui non è stato eseguito il commit, il ramo corrente e il nome del repository.

    Git controls in the Visual Studio window.

  3. Selezionare il pulsante Modifiche Git. Visual Studio apre quindi la pagina Modifiche Git in Team Explorer. Non vengono visualizzate modifiche in sospeso perché il progetto appena creato viene già eseguito automaticamente il commit nel controllo del codice sorgente.

    Team Explorer window on the Git Changes page.

  4. Nella barra di stato di Visual Studio selezionare il pulsante dei commit di cui è stato annullato il push (freccia in su con 2) per aprire la pagina Sincronizzazione in Team Explorer. La pagina Sincronizzazione offre opzioni semplici per pubblicare il repository locale in repository remoti diversi.

    Team Explorer window showing available Git repository options for source control.

    È possibile scegliere qualsiasi servizio desiderato per i progetti. Questa esercitazione mostra l'uso di GitHub, in cui il codice di esempio completo per l'esercitazione è disponibile nel repository Microsoft/python-sample-vs-learning-django.

  5. Quando si seleziona uno qualsiasi dei controlli Pubblica, Team Explorer chiede altre informazioni. Ad esempio, quando si pubblica l'esempio per questa esercitazione, il repository stesso deve essere creato per primo, nel qual caso l'opzione Push to Remote Repository è stata usata con l'URL del repository.

    Team Explorer window for pushing to an existing remote repository.

    Se non è disponibile un repository esistente, le opzioni Pubblica in GitHub e Esegui push ad Azure DevOps consentono di crearne uno direttamente da Visual Studio.

  6. Durante lo svolgimento di questa esercitazione, abituarsi a usare periodicamente i controlli in Visual Studio per il commit e il push delle modifiche. Questa esercitazione ricorda di eseguire queste operazioni nei momenti appropriati.

Suggerimento

Per spostarsi rapidamente all'interno di Team Explorer, selezionare l'intestazione (che indica Modifiche o Push nelle immagini precedenti) per visualizzare un menu di scelta rapida delle pagine disponibili.

Domanda: Quali sono alcuni dei vantaggi dell'uso del controllo del codice sorgente sin dall'inizio di un progetto?

Risposta: Il controllo del codice sorgente fin dall'inizio, soprattutto se si usa anche un repository remoto, fornisce un normale backup fuori sede del progetto. A differenza della gestione di un progetto in un file system locale, il controllo del codice sorgente fornisce una cronologia delle modifiche completa e la possibilità di ripristinare un singolo file o l'intero progetto allo stato precedente. La cronologia delle modifiche consente di determinare la causa delle regressioni (errori di test). Quando più persone lavorano su un progetto, il controllo del codice sorgente gestisce la sovrascrittura e fornisce la risoluzione dei conflitti.

Infine, il controllo del codice sorgente, che è fondamentalmente una forma di automazione, consente di automatizzare compilazioni, test e gestione delle versioni. È il primo passaggio dell'uso di DevOps per un progetto. Non c'è davvero motivo di non usare il controllo del codice sorgente fin dall'inizio perché le barriere all'ingresso sono basse.

Per altre informazioni sul controllo del codice sorgente come automazione, vedere The Source of Truth: The Role of Repository in DevOps, un articolo di MSDN Magazine scritto per le app per dispositivi mobili che si applicano anche alle app Web.

Domanda: È possibile impedire a Visual Studio di generare automaticamente il commit di un nuovo progetto?

Risposta: sì. Per disabilitare il commit automatico, passare alla pagina Impostazioni in Team Explorer. Selezionare Impostazioni globali Git>, deselezionare l'opzione Commit changes after merge by default (Esegui commit modifiche dopo l'unione per impostazione predefinita) e quindi selezionare Aggiorna.

Passaggio 1-3: Creare l'ambiente virtuale ed escluderlo dal controllo del codice sorgente

Dopo aver configurato il controllo del codice sorgente per il progetto, è possibile creare l'ambiente virtuale contenente i pacchetti Django necessari per il progetto. È quindi possibile usare Team Explorer per escludere la cartella dell'ambiente dal controllo del codice sorgente.

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nodo Ambienti Python e scegliere Aggiungi ambiente virtuale.

    Add Virtual environment command in Solution Explorer

  2. Viene visualizzata una finestra di dialogo Aggiungi ambiente virtuale con un messaggio che indica Che è stato trovato un file requirements.txt. Questo messaggio indica che Visual Studio usa tale file per configurare l'ambiente virtuale.

    Add virtual environment dialog with requirements.txt message

  3. Selezionare Crea per accettare i valori predefiniti. È possibile modificare il nome dell'ambiente virtuale, se si vuole, e questa operazione modifica solo il nome della sottocartella dell'ambiente, ma env è una convenzione standard.

  4. Accettare i privilegi di amministratore se richiesto, quindi attendere alcuni minuti mentre Visual Studio scarica e installa i pacchetti. Questo per Django significa l'espansione di diverse migliaia di file in circa altrettante sottocartelle. È possibile visualizzare lo stato di avanzamento nella finestra Output di Visual Studio. Durante l'attesa, leggere le sezioni delle domande seguenti.

  5. Nei controlli Git di Visual Studio (sulla barra di stato) selezionare l'indicatore delle modifiche (che mostra 99*) che apre la pagina Modifiche in Team Explorer.

    La creazione dell'ambiente virtuale ha comportato migliaia di modifiche, ma non è necessario includerle nel controllo del codice sorgente, perché sarà sempre possibile, per l'utente o per chiunque altro cloni il progetto, ricreare l'ambiente da requirements.txt.

    Per escludere l'ambiente virtuale, fare clic con il pulsante destro del mouse sulla cartella env e selezionare Ignora questi elementi locali.

    Ignoring a virtual environment in source control changes

  6. Dopo l'esclusione dell'ambiente virtuale, le sole modifiche rimanenti riguardano il file di progetto e quello con estensione gitignore. Il file con estensione gitignore contiene una voce aggiunta per la cartella dell'ambiente virtuale. È possibile fare doppio clic sul file per visualizzare una differenza.

  7. Immettere un messaggio di commit e selezionare il pulsante Commit all (Commit all ), quindi eseguire il push dei commit nel repository remoto.

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nodo Ambienti Python e scegliere Aggiungi ambiente.

    Add Virtual environment command in Solution Explorer.

  2. Selezionare Crea per accettare le impostazioni predefinite, nella finestra di dialogo Aggiungi ambiente virtuale. È possibile modificare il nome dell'ambiente virtuale, se si vuole, e questa operazione modifica solo il nome della sottocartella dell'ambiente, ma env è una convenzione standard.

    Add virtual environment dialog with requirements.txt message.

  3. Se richiesto, fornire il consenso per i privilegi di amministratore, attendere alcuni minuti mentre Visual Studio scarica e installa i pacchetti. Durante questo periodo, migliaia di file vengono trasferiti in molte sottocartelle. È possibile visualizzare lo stato di avanzamento nella finestra Output di Visual Studio. Durante l'attesa, leggere le sezioni delle domande seguenti.

  4. Nei controlli Git di Visual Studio (sulla barra di stato) selezionare l'indicatore delle modifiche (che mostra 99*) che apre la pagina Modifiche in Team Explorer.

    La creazione dell'ambiente virtuale ha apportato migliaia di modifiche, ma non è necessario includerne alcuna nel controllo del codice sorgente perché l'utente (o chiunque altro clona il progetto) può sempre ricreare l'ambiente da requirements.txt.

  5. Per escludere l'ambiente virtuale, fare clic con il pulsante destro del mouse sulla cartella env e selezionare Ignora questi elementi locali.

    Ignoring a virtual environment in source control changes.

  6. Dopo aver escluso l'ambiente virtuale, le uniche modifiche rimanenti sono apportate al file di progetto e al file con estensione gitignore . Il file con estensione gitignore contiene una voce aggiunta per la cartella dell'ambiente virtuale. È possibile fare doppio clic sul file per visualizzare una differenza.

  7. Immettere un messaggio di commit e selezionare il pulsante Commit all (Commit all ), quindi eseguire il push dei commit nel repository remoto.

Domanda: Perché è utile creare un ambiente virtuale?

Risposta: Un ambiente virtuale è un ottimo strumento per isolare le dipendenze esatte dell'app. Questo isolamento evita i conflitti all'interno di un ambiente Python globale e semplifica i test e la collaborazione. Quando si sviluppa un'app, si finisce per introdurre nel tempo molti utili pacchetti Python. È possibile aggiornare facilmente il file requirements.txt del progetto mantenendo i pacchetti in un ambiente virtuale specifico del progetto. Il file requirements.txt descrive l'ambiente, incluso nel controllo del codice sorgente. Quando il progetto viene copiato in altri computer, tra cui server di compilazione, server di distribuzione e altri computer di sviluppo, è facile ricreare l'ambiente usando solo requirements.txt, che è il motivo per cui non è necessario includere l'ambiente nel controllo del codice sorgente. Per altre informazioni, vedere Usare ambienti virtuali.

Domanda: Come si rimuove un ambiente virtuale di cui è già stato eseguito il commit nel controllo del codice sorgente?

Risposta: Prima di tutto, modificare il file con estensione gitignore per escludere la cartella. Trovare la sezione alla fine con il commento # Python Tools for Visual Studio (PTVS) e aggiungere una nuova riga per la cartella dell'ambiente virtuale, ad esempio /BasicProject/env. Visual Studio non mostra il file in Esplora soluzioni. Per aprire direttamente il file, passare a File Apri>file>. È anche possibile aprire il file da Team Explorer. Passare alla pagina Impostazioni e selezionare Repository Impostazioni. Passare ora alla sezione Ignora e attributi e selezionare il collegamento Modifica accanto a .gitignore.

In secondo luogo, aprire una finestra di comando, passare a una cartella come BasicProject. La cartella BasicProject contiene la cartella dell'ambiente virtuale, ad esempio env, ed eseguire git rm -r env. Eseguire quindi il commit delle modifiche dalla riga di comando (git commit -m 'Remove venv') o dalla pagina Modifiche di Team Explorer.

Passaggio 1-4: Esaminare il codice boilerplate

Al termine della creazione del progetto, esaminare il codice boilerplate del progetto Django, che è lo stesso generato dal comando django-admin startproject <project_name> dell'interfaccia della riga di comando.

  1. La radice del progetto ha manage.py, l'utilità amministrativa della riga di comando Django impostata automaticamente da Visual Studio come file di avvio del progetto. Eseguire l'utilità nella riga di comando usando python manage.py <command> [options]. Per attività Django comuni, Visual Studio offre pratici comandi di menu. Fare clic con il pulsante destro del mouse sul progetto in Esplora soluzioni e scegliere Python per visualizzare l'elenco. Alcuni di questi comandi verranno visualizzati nel corso di questa esercitazione.

    Django commands on a Python project context menu.

  2. Nel progetto è presente una cartella con lo stesso nome del progetto. La cartella contiene i file di progetto Django di base:

    • __init.py: file vuoto che indica a Python che questa cartella è un pacchetto Python.
    • settings.py: contiene le impostazioni per il progetto Django, che verrà modificato durante lo sviluppo di un'app Web.
    • urls.py: contiene un sommario per il progetto Django, che verrà modificato anche durante lo sviluppo.
    • wsgi.py: punto di ingresso per i server Web compatibili con WSGI per gestire il progetto. In genere si lascia questo file così come è, perché fornisce gli hook per i server Web di produzione.

    Django project files in Solution Explorer.

  3. Come indicato sopra, il modello di Visual Studio aggiunge anche un file requirements.txt al progetto specificando la dipendenza dei pacchetti Django. La presenza di questo file è il motivo per cui creare un ambiente virtuale quando si crea il progetto per la prima volta.

Domanda: Visual Studio può generare un file requirements.txt da un ambiente virtuale dopo che si installano altri pacchetti?

Risposta: sì. Espandere il nodo Ambienti Python, fare clic con il pulsante destro del mouse sull'ambiente virtuale e scegliere il comando Genera requirements.txt. È utile usare questo comando periodicamente man mano che si modifica l'ambiente e si esegue il commit delle modifiche apportate a requirements.txt nel controllo del codice sorgente, insieme a tutte le altre modifiche del codice che dipendono dall'ambiente. Se si configura l'integrazione continua in un server di compilazione, è necessario generare il file ed eseguire il commit delle modifiche ogni volta che si modifica l'ambiente.

Passaggio 1-5: Eseguire il progetto Django vuoto

  1. In Visual Studio selezionare Debug>Avvia debug (F5) o usare il pulsante Server Web sulla barra degli strumenti (il browser visualizzato potrebbe variare):

    Run web server toolbar button in Visual Studio.

  2. L'esecuzione del server significa eseguire il comando manage.py runserver <port>, che avvia il server di sviluppo predefinito di Django. Se Visual Studio visualizza il messaggio Impossibile avviare il debugger perché manca il file di avvio, fare clic con il pulsante destro del mouse su manage.py in Esplora soluzioni e selezionare Imposta come file di avvio.

  3. Quando si avvia il server, viene visualizzata una finestra della console che visualizza anche il log del server. Visual Studio apre automaticamente un browser all'indirizzo http://localhost:<port>. Poiché il progetto Django non ha app, Django mostra solo una pagina predefinita per confermare che quello che hai finora funziona bene.

    Django project default view.

  4. Al termine, arrestare il server chiudendo la finestra della console o usando il comando Debug>Interrompi debug in Visual Studio.

Domanda: Django è un server Web e un framework?

Risposta: Sì e no. Django dispone di un server Web predefinito usato a scopo di sviluppo. Questo server Web viene usato quando si esegue l'app Web in locale, ad esempio durante il debug in Visual Studio. Quando si esegue la distribuzione in un host Web, tuttavia, Django usa invece il server Web dell'host. Il modulo wsgi.py nel progetto Django si occupa dell'hook nei server di produzione.

Domanda: Qual è la differenza tra l'uso dei comandi del menu Debug e dei comandi del server nel sottomenu Python del progetto?

Risposta: Oltre ai comandi del menu Debug e ai pulsanti della barra degli strumenti, è possibile avviare il server anche usando i comandi Python>Avvia server o Python>Avvia il server di debug del menu di scelta rapida del progetto. Entrambi i comandi aprono una finestra della console in cui verrà visualizzato l'URL locale (localhost:port) per il server in esecuzione. Tuttavia, è necessario aprire manualmente un browser con tale URL e l'esecuzione del server di debug non avvia automaticamente il debugger di Visual Studio. Se si desidera, è possibile collegare un debugger al processo in esecuzione usando il comando Debug>Connetti a processo .

Passaggi successivi

A questo punto, il progetto Django di base non contiene app. Si creerà un'app nel passaggio successivo. Poiché si useranno app Django più del progetto Django, non sarà necessario conoscere più i file boilerplate per il momento.

Creare un'app Django con visualizzazioni e modelli di pagina

Approfondimento