Tutorial: Usar o modelo completo do Projeto Web do Django no Visual Studio

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

As etapas anteriores nesta série de tutoriais criam uma solução do Visual Studio e projetos do Django para dois aplicativos. BasicProject é um aplicativo mínimo baseado no modelo em Branco do Projeto Web do Django e HelloDjangoApp usa o modelo de aplicativo do Django 1.9 para servir arquivos estáticos com visualizações de página a partir de modelos HTML.

Na Etapa 4, você adiciona um terceiro aplicativo Django à solução com base no modelo de completo do Projeto Web do Django. Este modelo ajuda você a criar um aplicativo Django mais completo com três páginas que herdam de um modelo de página base. O aplicativo emprega bibliotecas JavaScript estáticas como jQuery e Bootstrap. Os recursos de autenticação do modelo são descritos na etapa final na série de tutoriais.

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

• Criar um aplicativo Web Django mais completo usando o modelo de do Projeto Web do Django
• Examinar a estrutura de projeto do Django fornecida pelo modelo
• Explorar as exibições e os modelos de página criados pelo modelo de projeto
• Examinar o roteamento de URL fornecido pelo modelo

Pré-requisitos

• Uma solução do Visual Studio criada na etapa : Etapa 1: criar projeto e solução do Visual Studio, que usa o modelo do Projeto Web do Django em branco.

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

• (Opcional) Examine as instruções nas etapas anteriores para um fluxo de trabalho do Django de ponta a ponta no Visual Studio:

  • Etapa 2: Criar aplicativo com exibições e modelos de página
  • Etapa 3: Servir arquivos estáticos e usar modelos HTML

Criar projeto a partir do modelo

Siga estas etapas para criar o aplicativo Web Django a partir do modelo de completo do Projeto Web do Django:

1. No Visual Studio, vá para o Explorador de Soluções, clique com o botão direito na solução LearningDjango e selecione Adicionar>Novo Projeto.

   Nota

   A etapa 1 da série de tutoriais cria a solução LearningDjango Visual Studio para conter todos os projetos do Django descritos nesta série. Mantendo todos os seus projetos do Django na mesma solução, você pode alternar facilmente entre arquivos diferentes para comparação.

   Se você preferir usar uma solução separada do Visual Studio para o projeto do Django nesta etapa do tutorial, selecione Arquivo>Novo projeto> em vez disso.

2. Na caixa de diálogo Adicionar um novo projeto, procure "Django", escolha o modelo Projeto Web do Django e selecione Avançar.

3. Configure seu novo projeto:

   1. Defina o nome do projeto como DjangoWeb.

   2. Especifique a localização para o Visual Studio salvar o projeto. (O padrão é o local atual para a solução e os projetos existentes do Django.)

4. Selecione Criar.

Criar ambiente virtual

Depois que o Visual Studio iniciar a criação do projeto, você deverá ver o prompt de mensagem O arquivo de especificação de pacote do Python "requirements.txt" foi detectado no projeto "DjangoWeb".:

A mensagem indica que o modelo selecionado inclui um arquivo requirements.txt que você pode usar para criar um ambiente virtual para o projeto.

Importante

Se você não vir o prompt de mensagem, poderá sofrer erros ao tentar criar o superusuário do Django na próxima seção.

Confirme se o Visual Studio reconhece o arquivo requirements.txt do projeto. Em do Gerenciador de Soluções, expanda a pasta de projeto DjangoWeb e abra o arquivo requirements.txt. O Visual Studio deve exibir o prompt de mensagem conforme o esperado.

Siga estas etapas para configurar o ambiente virtual:

1. No prompt de mensagem, selecione o link para instalar ou criar um ambiente virtual .

2. Na caixa de diálogo Adicionar Ambiente Virtual, selecione Criar para aceitar os padrões.

Criar um superusuário do Django

Depois que o Visual Studio criar o projeto DjangoWeb, o arquivo readme.html do projeto será aberto. O arquivo inclui instruções para criar um superusuário do Django (ou seja, um administrador) para o projeto.

Siga estas etapas para criar um superusuário do Django:

1. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto DjangoWeb, selecione Python e selecione Criar Superusuário do Django:

   

2. No prompt, insira os detalhes da conta para o projeto, incluindo o nome de usuário, a senha e o endereço de email.

   Você não precisa usar credenciais de segurança para uma conta existente. Você pode criar um novo nome de usuário e senha para usar especificamente com o aplicativo Web Django.

3. Registre as credenciais para uso posterior. Você precisa das credenciais para exercer os recursos de autenticação do aplicativo Web.

Executar o projeto Web do Django

Agora você está pronto para executar o aplicativo Web Django e ver os recursos fornecidos pelo modelo:

1. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto DjangoWeb e selecione Definir como Projeto de Inicialização.

   Esse comando define o projeto selecionado como o de projeto de inicialização padrão para a solução do Visual Studio. Quando você inicia o Depurador, o Visual Studio executa o código do projeto de inicialização. No Gerenciador de Soluções, o nome do projeto inicial da solução é mostrado em negrito:

   

2. Selecione Depurar>Iniciar Depuração (F5) ou use o botão servidor Web na barra de ferramentas para executar o servidor:

   

Explorar páginas do aplicativo Web

O aplicativo criado pelo modelo tem três páginas: "Página Inicial", "Sobre" e "Contato". Há links para cada página na barra de navegação.

1. Tente alternar entre as páginas usando as opções na barra de navegação.

2. Examine as diferentes partes do aplicativo em execução, incluindo o conteúdo da página. Observe como a rota de endereço de URL é alterada com base na página atual.

3. Autentique com o aplicativo selecionando a opção Entrar na barra de navegação. Insira as credenciais de superusuário fornecidas na seção anterior.

4. O aplicativo criado pelo modelo de template do Projeto Web do Django usa o Bootstrap para um layout responsivo, acomodando dispositivos móveis. Para ver essa capacidade de resposta, redimensione o navegador para uma exibição estreita para que o conteúdo seja renderizado verticalmente e a barra de navegação se transforme em um ícone de menu:

   

Você pode deixar o aplicativo em execução para os exercícios na próxima seção.

Se você quiser salvar seu trabalho, interrompa o aplicativo e siga as instruções nas etapas anteriores nesta série de tutoriais:

• Etapa 1 (excluir arquivos de ambiente virtual do controle do código-fonte)
• Etapa 2 (confirmar alterações no controle do código-fonte)

Examinar a estrutura do projeto do aplicativo Web

O modelo do Projeto Web do Django cria um projeto de aplicativo Web no Visual Studio com a seguinte estrutura:

• Arquivos na raiz do projeto DjangoWeb Visual Studio:

  • manage.py: o utilitário administrativo do Django.
  • db.sqlite3: um banco de dados SQLite padrão.
  • requirements.txt: identifica pacotes no projeto que têm uma dependência no Django 1.x.
  • readme.html: contém informações sobre o aplicativo Web, incluindo requisitos e procedimentos críticos de uso. O Visual Studio exibe esse arquivo após a criação do projeto. Conforme descrito anteriormente, esse arquivo tem as instruções para criar uma conta de superusuário (administrador) para o aplicativo.

• A pasta DjangoWeb/app:

  Esta pasta contém todos os arquivos do aplicativo, incluindo exibições, modelos, testes, formulários. Essa pasta também tem subpastas com arquivos, incluindo modelos , migrações e estático. Você geralmente renomeia a pasta do aplicativo para usar um nome mais distinto, como o próprio nome do aplicativo.

• A pasta DjangoWeb/DjangoWeb:

  Essa pasta é a pasta de projeto do Django. Ele contém os arquivos de projeto típicos do Django: __init__.py, settings.py, urls.pye wsgi.py. O arquivo settings.py já está configurado para o aplicativo e o arquivo de banco de dados usando o modelo de projeto. O arquivo urls.py também já está configurado com as rotas para todas as páginas do aplicativo, incluindo o formulário de login.

Compartilhar ambiente virtual entre projetos do Visual Studio

Você pode compartilhar um ambiente virtual entre projetos do Visual Studio. No entanto, tenha em mente que projetos diferentes provavelmente usam pacotes diferentes ao longo do tempo. Um ambiente virtual compartilhado deve conter todos os pacotes para todos os projetos que o usam.

Para usar um ambiente virtual existente, siga estas etapas:

1. Quando solicitado a instalar dependências no Visual Studio, selecione a opção Instalarei eu mesmo.

2. No Gerenciador de Soluções, clique com o botão direito do mouse no nó Ambientes do Python e escolha Adicionar Ambiente Virtual Existente.

3. Navegue até a pasta que contém o ambiente virtual e selecione OK.

Examinar exibições e modelos de página

O código para as exibições de página criadas pelo projeto web Django está localizado no arquivo app/views.py do projeto. Cada função de exibição chama a função auxiliar django.shortcuts.render com o caminho para um modelo e um objeto de dicionário simples. A função about cria a visualização para a página "Sobre" no aplicativo web.

def about(request):
   """Renders the about page."""
   assert isinstance(request, HttpRequest)
   return render(
      request,
      'app/about.html',
      {
         'title':'About',
         'message':'Your application description page.',
         'year':datetime.now().year,
      }
   )

Os modelos de página HTML para as exibições estão localizados na pasta app/templates/app do projeto (que você normalmente renomeia). O modelo base, layout.html, é o mais extenso. O arquivo refere-se a todos os arquivos estáticos necessários (JavaScript e CSS) para as exibições do aplicativo.

Este modelo também define duas seções de block: content e scripts. As outras páginas do aplicativo Web substituem a seção {% block content %} no arquivo layout.html. Você pode ver as duas seções block dentro do elemento <body> nesta versão anotada do arquivo layout.html:

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8" />

   <!-- Define viewport for Bootstrap's responsive rendering -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ title }} - My Django Application</title>

   {% load staticfiles %}
   <link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap.min.css' %}" />
   <link rel="stylesheet" type="text/css" href="{% static 'app/content/site.css' %}" />
   <script src="{% static 'app/scripts/modernizr-2.6.2.js' %}"></script>
</head>

<body>
   <!-- Navigation bar section omitted in this excerpt -->

   <div class="container body-content">

<!-- Content block - App pages override this block -->
{% block content %}
{% endblock %}

      <!-- App header and footer content -->
      <hr/>
      <footer>
         <p>&copy; {{ year }} - My Django Application</p>
      </footer>

   </div>

   <script src="{% static 'app/scripts/jquery-1.10.2.js' %}"></script>
   <script src="{% static 'app/scripts/bootstrap.js' %}"></script>
   <script src="{% static 'app/scripts/respond.js' %}"></script>

<!-- Scripts block - List page-specific scripts in this block -->
{% block scripts %}
{% endblock %}

</body>

</html>

Os modelos de página HTML individuais, about.html, contact.htmle index.html, cada um estende o modelo base layout.html. O arquivo de modelo about.html é o mais simples e mostra a marca de {% extends %} e a seção {% block content %}:

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

<!-- Content block overrides "content" block in layout template -->
{% block content %}

<h2>{{ title }}.</h2>
<h3>{{ message }}</h3>

<p>Use this area to provide additional information.</p>

{% endblock %}

Os arquivos de modelo index.html e contact.html usam a mesma estrutura e fornecem mais instruções no bloco content.

A pasta aplicativo/modelos/aplicativo contém mais dois modelos de página HTML. O arquivo login.html define o conteúdo da página de login do aplicativo . O arquivo loginpartial.html é trazido para o arquivo layout.html com a instrução {% include %}. O última Etapa (autenticar usuários) nesta série de tutoriais descreve esses dois arquivos de modelo com mais detalhes.

Recuar tags {% block %} e {% endblock %} em modelos

Os exemplos de HTML mostram a marcação fornecida no modelo de página no Visual Studio. Observe que as tags block não têm recuo na marcação. Para mostrar claramente o local das tags block, os modelos de página do Visual Studio não recuam essas tags.

No entanto, os modelos de página do Django funcionarão bem se você recuar as tags block. Alguns desenvolvedores preferem alinhar as tags em seus elementos HTML pai apropriados.

Examinar padrões de rota de URL

O arquivo de URL do projeto Django (DjangoWeb/DjangoWeb/urls.py) criado pelo modelo do Projeto Web do Django contém o seguinte código:

"""
Definition of urls for DjangoWeb
"""

from datetime import datetime
from django.urls import path
from django.contrib import admin
from django.contrib.auth.views import LoginView, LogoutView
from app import forms, views

urlpatterns = [
    path('', views.home, name='home'),
    path('contact/', views.contact, name='contact'),
    path('about/', views.about, name='about'),
    path('login/',
         LoginView.as_view
         (
             template_name='app/login.html',
             authentication_form=forms.BootstrapAuthenticationForm,
             extra_context=
             {
                 'title': 'Log in',
                 'year' : datetime.now().year,
             }
         ),
         name='login'),
    path('logout/', LogoutView.as_view(next_page='/'), name='logout'),
    path('admin/', admin.site.urls),
]

Os três primeiros padrões de URL são mapeados diretamente para as funções de exibição home, contact e about definidas no arquivo app/views.py do projeto. Os padrões login/ e logout/ correspondem aos recursos de autenticação do aplicativo.

Padrões de rota de URL especiais como ^login/$ e ^logout$ acessam exibições internas do Django em vez de exibições definidas pelo aplicativo. As chamadas para o método url também incluem dados extras para personalizar a exibição. Nesta série de tutoriais, a última Etapa (autenticar usuários) descreve como trabalhar com chamadas de URL.

Explorar diferenças nos padrões de URL

Na Etapa 3 (herança do modelo HTML) desta série de tutoriais, o caminho para a página "Sobre" usa o padrão '^about$'. Esse padrão difere da rota de URL apresentada nesta etapa do tutorial. Dependendo da versão do modelo, o código de exemplo pode mostrar o padrão de URL da página "Sobre" como about/ ou ^about em vez de ^about$.

A falta do sinal de dólar à direita $ na expressão regular é um descuido em muitas versões do modelo de projeto. O padrão de URL funciona perfeitamente bem para uma página chamada "about" ou "About". No entanto, sem o caractere $ à direita, o padrão de URL também corresponde a URLs como "about=django", "about09876", "about-face" e assim por diante. O caractere $ à direita cria um padrão de URL que garante correspondências somente para o termo "about".

Próxima etapa

Etapa 5: Autenticar usuários no Django