Tutorial: Criar um aplicativo Django com exibições e modelos de página no Visual Studio

2025-06-12

Este artigo apresenta a Etapa 2 da série de tutoriais Trabalhar com a estrutura web do Django no Visual Studio.

O Visual Studio permite que você crie aplicativos Django a partir de modelos de projeto que fornecem um ponto de partida mais extenso para seus projetos. Etapa 1 da série de tutoriais descreve como criar os arquivos de configuração no nível do site para um projeto Web do Django para dar suporte a um ou mais aplicativos Web Django. Na Etapa 2, você adiciona conteúdo ao projeto Web do Django para criar seu primeiro aplicativo Web Django com uma única página com várias exibições renderizadas.

Na Etapa 2 do tutorial, você aprenderá a:

Criar um aplicativo Django com uma única página
Executar o aplicativo no projeto do Django
Renderizar uma exibição usando HTML
Renderizar uma exibição usando um modelo de página do Django

Pré-requisitos

Uma solução do Visual Studio e um projeto do Django criado na etapa 1 do : criar a solução do Visual Studio e o projeto do Django.
Examine a seção pré-requisitos na Etapa 1 desta série de tutoriais para obter detalhes sobre versões de modelo do Django, projetos do Visual Studio versus projetos do Django e desenvolvimento do Python no Mac.

Criar aplicativo Django com estrutura padrão

Um aplicativo Django é um pacote separado do Python que contém um conjunto de arquivos relacionados para uma finalidade específica. Um projeto Django pode conter muitas aplicações, que ajudam um servidor web a gerenciar muitos pontos de entrada separados (ou rotas) de um único nome de domínio. Por exemplo, um projeto do Django para um domínio como contoso.com pode conter um aplicativo para a rota www.contoso.com, um segundo aplicativo para a rota support.contoso.com e um terceiro aplicativo para a rota docs.contoso.com. Nesse cenário, o projeto do Django manipula o roteamento de URL no nível do site e as configurações nos arquivos urls.py e settings.py. Cada aplicativo tem seu próprio estilo e comportamento distintos por meio de seu roteamento interno, exibições, modelos, arquivos estáticos e interface administrativa.

O desenvolvimento de um aplicativo Django geralmente começa com um conjunto padrão de arquivos. O Visual Studio fornece modelos para inicializar um aplicativo Django com esses arquivos em um projeto do Django. Há também um comando de menu integrado que serve à mesma finalidade.

Usar o modelo para criar um aplicativo

Siga estas etapas para criar o aplicativo a partir de um modelo:

No Gerenciador de Soluções, clique com o botão direito do mouse no projeto do Visual Studio (BasicProject) e selecione Adicionar>Novo Item.
Na caixa de diálogo Adicionar Novo Item, selecione o modelo Django 1.9 App:
1. Insira o aplicativo NameHelloDjangoApp.
2. Selecione Adicionar.

Siga estas etapas para criar o aplicativo usando o comando de menu integrado do Django:

No Gerenciador de Soluções , clique com o botão direito do mouse no projeto do Visual Studio (BasicProject) e selecione Adicionar>app Django.
Na caixa de diálogo Adicionar Aplicativo Django, insira o nome do aplicativo HelloDjangoApp:
Selecione OK.

Explorar a pasta do aplicativo Django

Quando você cria o aplicativo HelloDjangoApp, o Visual Studio cria uma pasta com o mesmo nome em seu projeto do Visual Studio:

A pasta contém os seguintes itens:

Item	Descrição
migrações	Uma pasta na qual o Django armazena scripts que atualizam o banco de dados para alinhar com as alterações nos modelos. Em seguida, as ferramentas de migração do Django aplicam as alterações necessárias a qualquer versão anterior do banco de dados para corresponder aos modelos atuais. Ao usar migrações, você mantém o foco em seus modelos e permite que o Django lide com o esquema de banco de dados subjacente. Para os exercícios desta série de tutoriais, a pasta contém um arquivo __init__.py, que indica que a pasta define seu próprio pacote python. Para obter mais informações, consulte a documentação do Django.
__init__.py	A presença do arquivo init identifica o aplicativo Django como um pacote.
modelos	Uma pasta para modelos de página do Django que contém um único arquivo index.html. O arquivo index.html é colocado na pasta que tem o mesmo nome que o nome do aplicativo. Os modelos são blocos de HTML nos quais as exibições podem adicionar informações para renderizar dinamicamente uma página. As "variáveis" do modelo de página, como `{{ content }}` no arquivo index.html, são espaços reservados para valores dinâmicos, conforme explicado posteriormente neste artigo. Normalmente, os aplicativos Django criam um namespace para seus modelos colocando-os em uma subpasta que corresponde ao nome do aplicativo.
admin.py	O arquivo Python no qual você estende a interface administrativa do aplicativo, que é usada para exibir e editar dados em um banco de dados. Inicialmente, esse arquivo contém apenas a instrução, `from django.contrib import admin`. Por padrão, o Django inclui uma interface administrativa padrão por meio de entradas no arquivo de settings.py do projeto django. Para ativar a interface, você pode descomentar as entradas existentes no arquivo urls.py.
apps.py	Um arquivo Python que define uma classe de configuração para o aplicativo. (Veja o exemplo que segue esta tabela.)
models.py	Os modelos são objetos de dados, identificados por funções, por meio dos quais as exibições interagem com o banco de dados subjacente do aplicativo. O Django fornece a camada de conexão de banco de dados para que os aplicativos não se preocupem com os detalhes dos modelos. O arquivo models.py é um local padrão em que você cria seus modelos. Inicialmente, o arquivo models.py contém apenas a instrução, `from django.db import models`.
tests.py	Um arquivo Python que contém a estrutura básica de testes de unidade.
views.py	As exibições são semelhantes às páginas da Web, que usam uma solicitação HTTP e retornam uma resposta HTTP. Normalmente, as exibições são renderizadas como HTML e os navegadores da Web sabem como exibir, mas uma exibição não precisa necessariamente ser visível (como um formulário intermediário). Uma função Python define a exibição que renderiza o HTML para o navegador. O arquivo views.py é um local padrão em que você cria seus modos de exibição. Inicialmente, o arquivo views.py contém apenas a instrução, `from django.shortcuts import render`.

Quando você usa o nome "HelloDjangoApp", o conteúdo do arquivo apps.py aparece da seguinte maneira:

from django.apps import AppConfig

class HelloDjangoAppConfig(AppConfig):
    name = 'HelloDjangoApp'

Criar aplicativo no Visual Studio ou na linha de comando

O comando Adicionar>aplicativo Django e o comando Adicionar>Novo Item (combinado com um modelo de aplicativo Django) produzem os mesmos arquivos que o comando da CLI do Django manage.py startapp <app_name>. O benefício de criar o aplicativo Django no Visual Studio é que a pasta do aplicativo e todos os seus arquivos são integrados automaticamente ao projeto. Você pode usar o mesmo comando do Visual Studio para criar qualquer número de aplicativos em seu projeto.

Adicionar exibições de páginas específicas de aplicativo

Se você executar seu projeto atual no Visual Studio selecionando Depurar>Iniciar Depuração (F5) ou Servidor Web na barra de ferramentas principal, você verá a página padrão do Django. Os aplicativos Web geralmente têm várias páginas com exibições diferentes. Uma rota exclusiva para o endereço de URL do aplicativo identifica cada página no aplicativo.

Siga estas etapas para definir exibições de página específicas do aplicativo e adicionar o aplicativo ao projeto do Django:

Na subpasta HelloDjangoApp do projeto do Visual Studio, substitua o conteúdo do arquivo views.py pelo seguinte código:
```
from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello, Django!")
```
Esse código importa as definições de HTTP e de renderização necessárias e define uma exibição chamada index.

Na subpasta BasicProject do projeto do Visual Studio, modifique o arquivo urls.py para corresponder ao código a seguir. Você pode manter os comentários instrutivos no arquivo atual, como preferir.

from django.urls import include, re_path
import HelloDjangoApp.views

# Django processes URL patterns in the order they appear in the array
urlpatterns = [
    re_path(r'^$', HelloDjangoApp.views.index, name='index'),
    re_path(r'^home$', HelloDjangoApp.views.index, name='home')
]

Cada padrão de URL descreve as exibições para as quais o Django roteia URLs específicas relativas ao site (ou seja, a parte de rota que segue o endereço de URL https://www.domain.com/):

A primeira entrada na definição de urlPatterns que começa com a expressão regular ^$ é o roteamento para a página raiz do site, /.
A segunda entrada, ^home$, roteia para a página /home do aplicativo.

Observe que a definição neste código de exemplo demonstra que você pode ter vários roteamentos para a mesma exibição.

Definir cadeias de caracteres de rota brutas com o prefixo (r)

O prefixo r em uma cadeia de caracteres de rota em Python significa "bruto". Esse prefixo instrui o Python a não escapar nenhum caractere dentro da cadeia de caracteres de rota. As expressões regulares para cadeias de caracteres de rota usam muitos caracteres especiais. O prefixo r em uma cadeia de caracteres de rota é mais fácil de ler do que o caractere de escape \.

Usar caracteres de sinal de interpolação (^) e cifrão ($) em rotas

Em expressões regulares que definem padrões de URL, o símbolo de cursor ^ significa "início da linha" e o sinal de dólar $ significa "fim da linha". Há vários usos para esses caracteres em URLs em relação à raiz do site (a parte que segue o endereço do aplicativo https://www.domain.com/):

A expressão regular ^$ efetivamente significa "em branco" e corresponde ao endereço da URL completo da raiz do site do aplicativo, https://www.domain.com/.
O padrão ^home$ corresponde exatamente a https://www.domain.com/home/, que é a rota do site seguida por /home. (O Django não usa o / à direita nos padrões correspondentes).
Se você não usa um sinal de cifrão à direita $ em uma expressão regular, como para a cadeia de caracteres de rota ^home, os padrões correspondentes de URL se aplicarão a qualquer URL que comece com home, como home, homework, homestead, home192837 e assim por diante.

Para fazer experimentos com expressões regulares diferentes, use ferramentas online, como regex101.com em pythex.org.

Executar aplicativo do projeto Django

Depois de adicionar conteúdo específico do aplicativo, execute seu aplicativo novamente e verifique as exibições de rota no navegador:

Quando o aplicativo for aberto no navegador, verifique as exibições de página para as rotas de URL / (raiz do site) e /home no navegador. Para ambas as rotas, o aplicativo exibe a mensagem Hello, Django! no navegador.
Quando terminar, selecione Ctrl+C na janela do console, seguido por qualquer chave para interromper o aplicativo. Você também pode selecionar Depurar>Parar Depuração.
Feche todas as janelas abertas do navegador para o aplicativo.

Fazer commit de alterações no controle do código-fonte

Depois de atualizar o código do aplicativo Django e testar as atualizações, você pode examinar e confirmar suas alterações no controle do código-fonte:

Salve as alterações em seus arquivos de projeto, como com o atalho de teclado Ctrl+S.
Na barra de controles do Git, selecione as alterações não confirmadas (lápis 11) para abrir a janela Alterações do Git:
Na janela Alterações do Git, insira uma mensagem de commit e selecione Efetuar Commit de Tudo:

Quando o commit for concluído, o Visual Studio exibirá a mensagem <Hash> de commit criado localmente.
(Opcional) Envie por push as alterações confirmadas para o repositório remoto:
1. Na barra de controles git, selecione as confirmações de saída/entrada (setas 1/0).
2. Selecione Sincronizar (efetuar pull e push) ou Efetuar push.
Você também pode acumular vários commits locais antes de enviá-los para o repositório remoto.

Salve as alterações em seus arquivos de projeto, usando o atalho de teclado Ctrl+S.
Selecione as alterações não confirmadas (lápis 11) na parte inferior direita no Visual Studio, que abre Team Explorer:
No Team Explorer, insira uma mensagem de commit, como "Criar página específica do aplicativo do Django", e selecione Efetuar Commit de Tudo.

Quando a confirmação for concluída, o Visual Studio exibirá a mensagem Commit <hash> criada localmente. Sincronizar para compartilhar suas alterações com o servidor.
(Opcional) Envie por push as alterações confirmadas para o repositório remoto:
1. No Team Explorer, selecione Sincronizar.
2. Expanda Commits de Saída e selecione Efetuar Push.
Você também pode acumular múltiplos commits locais antes de enviá-los para o repositório remoto.

Para procedimentos subsequentes nesta série de tutoriais, você pode consultar esta seção para obter as etapas para confirmar alterações no controle do código-fonte.

Usar modelos para renderizar páginas e exibições

A função index no arquivo views.py gera uma resposta HTTP de texto sem formatação para a página do aplicativo Django. A maioria das páginas da Web do mundo real responde com páginas HTML avançadas que geralmente incorporam dados dinâmicos. O principal motivo pelo qual os desenvolvedores definem exibições usando uma função é gerar conteúdo dinamicamente.

O argumento para o método HttpResponse é apenas uma cadeia de caracteres. Você pode criar qualquer HTML em uma cadeia de caracteres usando conteúdo dinâmico. Como é melhor separar a marcação dos dados, é melhor colocar a marcação em um modelo e manter os dados no código.

Ajustar exibições para usar HTML embutido

Converta o processamento de exibição para usar HTML embutido para a página com algum conteúdo dinâmico:

Na subpasta HelloDjangoApp do projeto do Visual Studio, abra o arquivo views.py.

Substitua a função index pelo código a seguir (mantenha as instruções from existentes):

from datetime import datetime

def index(request):
   now = datetime.now()

   html_content = "<html><head><title>Hello, Django</title></head><body>"
   html_content += "<strong>Hello Django!</strong> on " + now.strftime("%A, %d %B, %Y at %X")
   html_content += "</body></html>"

   return HttpResponse(html_content)

A função de index revisada gera uma resposta HTML usando conteúdo dinâmico que é atualizado sempre que você atualiza a página.

Salve suas alterações e execute seu aplicativo novamente. A página agora mostra a data e a hora atuais junto com a mensagem "Hello Django!".
Atualize a página algumas vezes para confirmar se a data e a hora são atualizadas. Quando terminar, interrompa o aplicativo.

Criar modelo HTML para exibições de página

Gerar HTML no código funciona bem para páginas pequenas. No entanto, à medida que as páginas ficam mais sofisticadas, você precisa manter as partes HTML estáticas de sua página (juntamente com referências a arquivos CSS e JavaScript) como "modelos de página". Em seguida, você pode inserir o conteúdo dinâmico gerado por código nos modelos de página. Na seção anterior, somente a data e a hora da chamada now.strftime são dinâmicas, o que significa que todo o outro conteúdo pode ser colocado em um modelo de página.

Um modelo de página do Django é um bloco de HTML que contém vários tokens de substituição chamados "variáveis". Abra e feche os parênteses {{ e }} delineie as variáveis, como {{ content }}. Em seguida, o módulo de modelo do Django substitui as variáveis pelo conteúdo dinâmico fornecido no código.

Siga estas etapas para converter o processo de renderização de página para usar um modelo HTML:

Na subpasta HelloDjangoApp do projeto do Visual Studio, abra o arquivo settings.py.
Atualize as referências de aplicativo na definição de INSTALLED_APPS para incluir o nome do aplicativo HelloDjangoApp. Adicione o nome do aplicativo como a primeira entrada na lista:
```
INSTALLED_APPS = [
    'HelloDjangoApp',
    # Existing entries in the list ...
]
```
Adicionar o aplicativo à lista informa ao projeto django que há uma pasta chamada HelloDjangoApp que contém um aplicativo.
Confirme que a configuração do objeto TEMPLATES define APP_DIRS para True:
```
'APP_DIRS': True,
```
Esta instrução instrui o Django a procurar modelos na pasta modelos para um aplicativo instalado. (Essa instrução deve ser incluída na definição por padrão.)
Na subpasta HelloDjangoApp, abra o arquivo de modelo de página /HelloDjangoApp/index.html.
Confirme se o arquivo contém apenas uma variável, {{ content }}:
```
<html>
 <head>
 <title></title>
 </head>

 <body>
 {{ content }}
 </body>
</html>
```
A instrução {{ content }} é um espaço reservado ou token de substituição (também chamada de variável de modelo) para o qual você fornece um valor no código.
Na subpasta HelloDjangoApp do projeto do Visual Studio, abra o arquivo views.py.
Substitua a função index pelo código a seguir que usa a função auxiliar django.shortcuts.render (mantenha as instruções from existentes):
```
def index(request):
 now = datetime.now()

 return render(
 request,
 "HelloDjangoApp/index.html", # Relative path from the 'templates' folder to the template file
 {
 'content': "Hello Django! on " + now.strftime("%A, %d %B, %Y at %X")
 }
 )
```
A função auxiliar render fornece uma interface simplificada para trabalhar com modelos de página. Essa função tem três argumentos:
- O objeto de solicitação.
- O caminho relativo para o arquivo de modelo na pasta modelos do aplicativo. Um arquivo de modelo é nomeado de acordo com a exibição que ele dá suporte, se apropriado.
- Um dicionário de variáveis às quais o modelo se refere. Você pode incluir objetos no dicionário, em que uma variável no modelo pode se referir a {{ object.property }}.
Salve as alterações do projeto e execute o aplicativo novamente.

Observe que a sintaxe HTML embutida (\ ...) dentro do valor content não é renderizada como HTML porque o mecanismo de modelagem (Jinja) escapa automaticamente o conteúdo HTML. O escape automático evita vulnerabilidades acidentais a ataques de injeção.

Os desenvolvedores geralmente coletam entradas de uma página e a usam como um valor em outra usando um espaço reservado de modelo. O escape também serve como um lembrete de que é melhor manter HTML fora do código.

Quando terminar, interrompa o aplicativo.

Usar espaços reservados distintos

Você pode usar marcadores de posição distintos para cada dado na marcação HTML. Em seguida, ajuste a função index novamente para fornecer os valores de espaço reservado específicos:

Substitua o conteúdo do arquivo de modelo de página /templates/HelloDjangoApp/index.html pela seguinte marcação:
```
<html>
 <head>
 <title>{{ title }}</title>
 </head>
 <body>
 {{ message }}{{ content }}
 </body>
</html>
```
Essa marcação HTML adiciona um título de página e mantém toda a formatação no modelo de página.

No arquivo HelloDjangoApp/views.py, substitua a função index pelo seguinte código:

def index(request):
    now = datetime.now()

    return render(
        request,
        "HelloDjangoApp/index.html",  # Relative path from the 'templates' folder to the template file
        # "index.html", # Use this code for VS 2017 15.7 and earlier
        {
            'title' : "Hello Django",
            'message' : "Hello Django!",
            'content' : " on " + now.strftime("%A, %d %B, %Y at %X")
        }
    )

Esse código fornece valores para todas as variáveis no modelo de página.

Salve suas alterações e execute seu aplicativo novamente. Desta vez, você deverá ver a saída renderizada corretamente:
Você pode confirmar suas alterações no controle do código-fonte e atualizar seu repositório remoto. Para saber mais, confira Fazer commit de alterações no controle do código-fonte.

Modelos de página separados

Os modelos geralmente são mantidos em arquivos HTML separados, mas você também pode usar um modelo embutido. Arquivos separados são recomendados para manter uma separação limpa entre marcação e código.

Use a extensão .html para modelos

A extensão .html para arquivos de modelo de página é totalmente opcional. Você sempre pode identificar o caminho relativo exato para o arquivo no primeiro argumento para a função render_template. No entanto, o Visual Studio (e outros editores) normalmente oferece recursos como preenchimento de código e coloração de sintaxe com arquivos .html, o que compensa o fato de os templates de página não serem HTML.

Quando você trabalha com um projeto do Django, o Visual Studio detecta automaticamente se o arquivo HTML que você está editando é, na verdade, um modelo do Django e fornece determinados recursos de preenchimento automático. Se você começa a inserir um comentário no modelo de página do Django ({#), o Visual Studio insere automaticamente os caracteres de fechamento #}. Os comandos Comentar Seleção e Remover Marca de Comentário da Seleção (no menu Editar>Avançado) também usam comentários de modelo em vez de comentários em HTML.

Solucionar problemas

Ao executar seu aplicativo, você pode encontrar problemas relacionados ao arquivo de modelo do seu aplicativo. Examine os pontos a seguir e verifique se a configuração do projeto do Django está correta.

Modelo não encontrado

Se o Django ou o Visual Studio exibir um erro de Modelo não encontrado, verifique se o aplicativo está na lista INSTALLED_APPS. Esta lista está no arquivo settings.py na subpasta do aplicativo do seu projeto do Visual Studio (como HelloDjangoApp). Se a lista não tiver uma entrada para seu aplicativo, o Django não examina a pasta modelos do aplicativo.

Estrutura de modelo duplicada

Quando o Django procura um modelo referenciado na função render, ele usa o primeiro arquivo que corresponde ao caminho relativo. Se você tiver vários aplicativos Django no mesmo projeto com as mesmas estruturas de pasta para modelos, é provável que um aplicativo possa usar involuntariamente um modelo de outro aplicativo. Para evitar esses erros, sempre crie uma subpasta na pasta de modelos de um aplicativo que corresponda ao nome do aplicativo para evitar qualquer duplicidade.

Próxima etapa

Etapa 3: Fornecer arquivos estáticos, adicionar páginas e usar a herança do modelo

Compartilhar via