Tutorial: Uso de la plantilla completa de Proyecto web de Django en Visual Studio

En este artículo se presenta el paso 4 de la serie de tutoriales Trabajar con el marco web de Django en Visual Studio.

Los pasos anteriores de esta serie de tutoriales crean una solución de Visual Studio y proyectos de Django para dos aplicaciones. BasicProject es una aplicación mínima basada en la plantilla Proyecto Web de Django en blanco y HelloDjangoApp usa la plantilla de Aplicación de Django 1.9 para ofrecer archivos estáticos con vistas de página desde plantillas HTML.

En el paso 4, agrega una tercera aplicación de Django a la solución basada en la plantilla completa del Proyecto Web de Django. Esta plantilla le ayuda a crear una aplicación django completa con tres páginas que heredan de una plantilla de página base. La aplicación emplea bibliotecas estáticas de JavaScript como jQuery y Bootstrap. Las funcionalidades de autenticación de la plantilla se describen en el paso final de la serie de tutoriales.

En el paso 4 del tutorial, aprenderá a:

• Creación de una aplicación web de Django completa mediante la plantilla Proyecto web de Django
• Revise la estructura del proyecto de Django proporcionada por la plantilla.
• Explorar las vistas y las plantillas de página creadas por la plantilla de proyecto
• Examen del enrutamiento de direcciones URL proporcionado por la plantilla

Prerrequisitos

• Una solución de Visual Studio creada en Paso 1: Crear proyecto y solución de Visual Studio, que usa la plantilla Proyecto web de Django en blanco.

• Revise la sección requisitos previos del paso 1 de esta serie de tutoriales para obtener más información sobre las versiones de plantilla de Django, los proyectos de Visual Studio frente a los proyectos de Django y el desarrollo de Python en Mac.

• (Opcional) Revise las instrucciones de los pasos anteriores para un flujo de trabajo de Django de un extremo a otro en Visual Studio:

  • paso 2: Crear aplicación con vistas y plantillas de página
  • paso 3: Servir archivos estáticos y usar plantillas HTML

Creación de un proyecto a partir de una plantilla

Siga estos pasos para crear la aplicación web de Django a partir de la plantilla completa Proyecto web de Django:

1. En Visual Studio, vaya a Explorador de soluciones, haga clic derecho en la solución LearningDjango y seleccione Agregar>Nuevo proyecto.

   Nota

   El paso 1 de la serie de tutoriales crea la solución LearningDjango Visual Studio para contener todos los proyectos de Django descritos en esta serie. Al mantener todos los proyectos de Django en la misma solución, puede cambiar fácilmente entre archivos diferentes para la comparación.

   Si prefiere usar una solución de Visual Studio independiente para el proyecto de Django en este paso del tutorial, seleccione Archivo>Nuevo>Proyecto en su lugar.

2. En el cuadro de diálogo Agregar un nuevo proyecto, busque "Django", elija la plantilla Proyecto web de Django y seleccione Siguiente.

3. Configure el nuevo proyecto:

   1. Asigne el Nombre del proyecto a DjangoWeb.

   2. Especifique la ubicación para Visual Studio para guardar el proyecto. (El valor predeterminado es la ubicación actual para la solución y los proyectos de Django existentes).

4. Seleccione Crear.

Creación de un entorno virtual

Después de que Visual Studio inicie la creación del proyecto, debería ver el mensaje : se detectó el archivo de especificación de paquetes de Python "requirements.txt" en el proyecto "DjangoWeb".

El mensaje indica que la plantilla seleccionada incluye un archivo requirements.txt que puede usar para crear un entorno virtual para el proyecto.

Importante

Si no ve el mensaje, es posible que experimente errores al intentar crear el superusuario de Django en la sección siguiente.

Confirme que Visual Studio reconoce el archivo requirements.txt para el proyecto. En explorador de soluciones, expanda la carpeta del proyecto DjangoWeb y abra el archivo requirements.txt. Visual Studio debe mostrar el mensaje según lo previsto.

Siga estos pasos para configurar el entorno virtual:

1. En el mensaje de la indicación, seleccione el vínculo para instalar en un entorno virtual o crear uno nuevo.

2. En el cuadro de diálogo Agregar entorno virtual, seleccione Crear para aceptar los valores predeterminados.

Creación de superusuario de Django

Una vez que Visual Studio crea el proyecto DjangoWeb, se abre el archivo readme.html del proyecto. El archivo incluye instrucciones para crear una superusuario de Django (es decir, un administrador) para el proyecto.

Siga estos pasos para crear un superusuario de Django:

1. En Explorador de soluciones, haga clic con el botón derecho en el proyecto de DjangoWeb, seleccione Pythony, a continuación, seleccione Django Crear superusuario:

   

2. En el indicador de comandos, escriba los detalles de la cuenta del proyecto, incluido el nombre de usuario, la contraseña y la dirección de correo electrónico.

   No tiene que usar credenciales de seguridad para una cuenta existente. Puede crear un nuevo nombre de usuario y una contraseña para usarlos específicamente con la aplicación web de Django.

3. Registre las credenciales para su uso posterior. Necesita las credenciales para ejercer las características de autenticación de la aplicación web.

Ejecución del proyecto web de Django

Ahora está listo para ejecutar la aplicación web de Django y ver las características proporcionadas por la plantilla:

1. En Explorador de soluciones, haga clic con el botón derecho en el proyecto DjangoWeb y seleccione Establecer como proyecto de inicio.

   Este comando establece el proyecto seleccionado como proyecto de inicio predeterminado para la solución de Visual Studio. Al iniciar el Depurador, Visual Studio ejecuta el código para el proyecto de inicio. En Explorador de soluciones, el nombre del proyecto de inicio de la solución se muestra en negrita:

   

2. Seleccione Depurar>Iniciar depuración (F5) o use el botón Servidor web de la barra de herramientas para ejecutar el servidor:

   

Exploración de páginas de aplicaciones web

La aplicación creada por la plantilla tiene tres páginas: "Inicio", "Acerca de" y "Contacto". Hay vínculos para cada página de la barra de navegación.

1. Intente cambiar entre las páginas mediante las opciones de la barra de navegación.

2. Examine las distintas partes de la aplicación en ejecución, incluido el contenido de la página. Observe cómo cambia la ruta de dirección URL en función de la página actual.

3. Para autenticarse con la aplicación, seleccione la opción Iniciar sesión en la barra de navegación. Escriba las credenciales de superusuario que proporcionó en la sección anterior.

4. La aplicación creada por la plantilla Proyecto web de Django usa Bootstrap para un diseño adaptable que se adapta a dispositivos móviles. Para ver esta capacidad de respuesta, cambie el tamaño del explorador a una vista estrecha para que el contenido se represente verticalmente y la barra de navegación se convierta en un icono de menú:

   

Puede dejar la aplicación abierta para los ejercicios de la próxima sección.

Si desea guardar el trabajo, detenga la aplicación y siga las instrucciones de los pasos anteriores de esta serie de tutoriales:

• paso 1 (excluir archivos de entorno virtual del control de código fuente)
• paso 2 (confirmar cambios en el control de código fuente)

Examen de la estructura del proyecto de aplicación web

La plantilla proyecto web de Django crea un proyecto de aplicación web en Visual Studio con la estructura siguiente:

• Archivos en la raíz del proyecto DjangoWeb de Visual Studio:

  • manage.py: utilidad administrativa de Django.
  • db.sqlite3: una base de datos SQLite predeterminada.
  • requirements.txt: identifica los paquetes del proyecto que tienen una dependencia de Django 1.x.
  • readme.html: contiene información sobre la aplicación web, incluidos los requisitos y los procedimientos de uso críticos. Visual Studio muestra este archivo después de la creación del proyecto. Como se ha descrito anteriormente, este archivo tiene las instrucciones para crear una cuenta de superusuario (administrador) para la aplicación.

• La carpeta DjangoWeb/app:

  Esta carpeta contiene todos los archivos de la aplicación, incluidas las vistas , los modelos , las pruebas , los formularios . Esta carpeta también tiene subcarpetas con archivos, incluidos plantillas , migraciones y archivos estáticos . Normalmente cambia el nombre de la aplicación carpeta para usar un nombre más distintivo, como el propio nombre de la aplicación.

• La carpeta DjangoWeb/DjangoWeb:

  Esta carpeta es la carpeta del proyecto de Django. Contiene los archivos de proyecto de Django típicos: __init__.py, settings.py, urls.pyy wsgi.py. El archivo settings.py ya está configurado para la aplicación y el archivo de base de datos mediante la plantilla de proyecto. El archivo urls.py también está configurado con las rutas a todas las páginas de la aplicación, incluido el formulario Iniciar sesión.

Uso compartido de un entorno virtual entre proyectos de Visual Studio

Puede compartir un entorno virtual entre proyectos de Visual Studio. Sin embargo, tenga en cuenta que es probable que diferentes proyectos usen paquetes diferentes a lo largo del tiempo. Un entorno virtual compartido debe contener todos los paquetes de todos los proyectos que lo usan.

Para usar un entorno virtual existente, siga estos pasos:

1. Cuando se le pida que instale dependencias en Visual Studio, seleccione la opción Yo las instalaré manualmente.

2. En el Explorador de soluciones, haga clic con el botón derecho en el nodo Entornos de Python y seleccione Agregar entorno virtual existente.

3. Vaya a y seleccione la carpeta que contiene el entorno virtual y, a continuación, seleccione Aceptar.

Examen de vistas y plantillas de página

El código para las vistas de página creado por el proyecto web de Django se encuentra en el archivo del proyecto app/views.py. Cada función de vista llama a la función auxiliar django.shortcuts.render con la ruta de acceso a una plantilla y un objeto de diccionario simple. La función about crea la vista de la página "Acerca de" en la aplicación 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,
      }
   )

Las plantillas de página HTML para las vistas se encuentran en la carpeta app/templates/app del proyecto (que normalmente renombras). La plantilla base, layout.html, es la más extensa. El archivo hace referencia a todos los archivos estáticos necesarios (JavaScript y CSS) para las vistas de la aplicación.

Esta plantilla también define dos secciones de block: content y scripts. Las otras páginas de la aplicación web invalidan la sección {% block content %} del archivo layout.html. Puede ver las dos secciones de block dentro del elemento <body> en esta versión anotada del archivo 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>

Las plantillas de página HTML individuales, about.html, contact.htmly index.html, cada una amplían la plantilla base layout.html. El archivo de plantilla about.html es el más sencillo y muestra la etiqueta {% extends %} y la sección {% 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 %}

Los archivos de plantilla index.html y contact.html usan la misma estructura y proporcionan más instrucciones en el bloque content.

La carpeta app/templates/app contiene dos plantillas de página HTML más. El archivo login.html define el contenido de la página de la aplicación de inicio de sesión . El archivo loginpartial.html se incluye en el archivo layout.html con la instrucción {% include %}. El último paso (autenticar usuarios) en esta serie de tutoriales describe estos dos archivos de plantilla con más detalle.

Etiquetas de sangría {% block %} y {% endblock %} en plantillas

Los ejemplos HTML muestran el marcado proporcionado en la plantilla de página en Visual Studio. Tenga en cuenta que las etiquetas block no están sangradas en el marcado. Para mostrar claramente la ubicación de las etiquetas block, las plantillas de página de Visual Studio no indentan estas etiquetas.

Sin embargo, las plantillas de página de Django funcionan bien si indentas las etiquetas block. Algunos desarrolladores prefieren alinear las etiquetas dentro de sus elementos HTML primarios adecuados.

Examen de patrones de ruta de dirección URL

El archivo de dirección URL del proyecto de Django (DjangoWeb/DjangoWeb/urls.py) creado por la plantilla Proyecto web de Django contiene el código siguiente:

"""
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),
]

Los tres primeros patrones de dirección URL se asignan directamente a las funciones de vista home, contacty about definidas en el archivo app/views.py del proyecto. Los patrones login/ y logout/ corresponden a las características de autenticación de la aplicación.

Patrones de ruta de dirección URL especiales, como ^login/$ y ^logout$, acceden a vistas integradas de Django en lugar de vistas definidas por la aplicación. Las llamadas al método url también incluyen datos adicionales para personalizar la vista. El último paso (autenticar usuarios) en esta serie de tutoriales describe cómo trabajar con llamadas URL.

Explorar las diferencias en los patrones de dirección URL

En Paso 3 (herencia de plantillas HTML) de esta serie de tutoriales, la ruta de acceso de la página "Acerca de" usa el patrón '^about$'. Este patrón difiere de la ruta URL presentada en este paso del tutorial. Según la versión de la plantilla, el código de ejemplo podría mostrar el patrón de dirección URL de página "Acerca de" como about/ o ^about en lugar de ^about$.

La falta del signo de dólar final $ en la expresión regular es un descuido en muchas versiones de la plantilla de proyecto. El patrón de dirección URL funciona perfectamente bien para una página denominada "about" o "About". Sin embargo, sin el carácter final $, el patrón de dirección URL también coincide con las direcciones URL como "about=django", "about09876", "about-face", etc. El carácter final $ crea un patrón de dirección URL que garantiza que solo coincida con el término "about".

Paso siguiente

paso 5: Autenticación de usuarios en django