Tutorial: Creación de una aplicación de Django con vistas y plantillas de página en Visual Studio

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

Visual Studio permite crear aplicaciones de Django a partir de plantillas de proyecto que proporcionan un punto de partida más amplio para los proyectos. En el paso 1 de la serie de tutoriales se describe cómo crear los archivos de configuración de nivel de sitio para un proyecto web de Django para admitir una o varias aplicaciones web de Django. En el paso 2, agregará contenido al proyecto web de Django para crear la primera aplicación web de Django con una sola página con varias vistas representadas.

En el paso 2 del tutorial, aprenderá a:

• Creación de una aplicación de Django con una sola página
• Ejecución de la aplicación desde el proyecto de Django
• Representación de una vista mediante HTML
• Representación de una vista mediante una plantilla de página de Django

Prerrequisitos

• Una solución de Visual Studio y un proyecto de Django creados en el paso 1: Crear una solución de Visual Studio y un proyecto de Django.

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

Creación de una aplicación de Django con una estructura predeterminada

Una aplicación de Django es un paquete de Python independiente que contiene un conjunto de archivos relacionados con un propósito específico. Un proyecto de Django puede contener muchas aplicaciones, que ayudan a un host web a servir muchos puntos de entrada independientes (o rutas) desde un único nombre de dominio. Por ejemplo, un proyecto de Django para un dominio contoso.com como podría contener una aplicación para la www.contoso.com ruta, una segunda aplicación para la support.contoso.com ruta y una tercera aplicación para la docs.contoso.com ruta. En este escenario, el proyecto de Django controla el enrutamiento y la configuración de direcciones URL de nivel de sitio en los archivos urls.py y settings.py . Cada aplicación tiene su propio estilo y comportamiento distintos a través de su enrutamiento interno, vistas, modelos, archivos estáticos e interfaz administrativa.

El desarrollo de una aplicación django suele comenzar con un conjunto estándar de archivos. Visual Studio proporciona plantillas para inicializar una aplicación de Django con estos archivos dentro de un proyecto de Django. También hay un comando de menú integrado que sirve para el mismo propósito.

Uso de una plantilla para crear una aplicación

Siga estos pasos para crear la aplicación a partir de una plantilla:

1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto de Visual Studio (BasicProject) y seleccione Agregar>nuevo elemento.

   

2. En el cuadro de diálogo Agregar nuevo elemento , seleccione la plantilla Aplicación django 1.9 :

   1. Escriba el nombre de la aplicación HelloDjangoApp.

   2. Selecciona Agregar.

   

Uso del comando de menú integrado para crear una aplicación

Siga estos pasos para crear la aplicación mediante el comando de menú de Django integrado:

1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto de Visual Studio (BasicProject) y seleccione Agregar>aplicación django.

   

2. En el cuadro de diálogo Agregar aplicación de Django , escriba el nombre de la aplicación HelloDjangoApp:

   

3. Selecciona Aceptar.

Exploración de la carpeta de la aplicación django

Al crear la aplicación HelloDjangoApp , Visual Studio crea una carpeta con el mismo nombre en el proyecto de Visual Studio:

La carpeta contiene los siguientes elementos:

Elemento	Descripción
Migraciones	Carpeta en la que Django almacena scripts que actualizan la base de datos para alinearse con los cambios en los modelos. A continuación, las herramientas de migración de Django aplican los cambios necesarios a cualquier versión anterior de la base de datos para que coincida con los modelos actuales. Cuando se usan migraciones, se mantiene el foco en los modelos y se deja que Django controle el esquema de base de datos subyacente. Para los ejercicios de esta serie de tutoriales, la carpeta contiene un archivo __init__.py , que indica que la carpeta define su propio paquete de Python. Para obtener más información, consulte la documentación de Django.
__init__.py	La presencia del archivo init identifica la aplicación Django como un paquete.
plantillas	Carpeta para plantillas de página de Django que contiene un único archivo index.html . El archivo index.html se coloca en la carpeta que tiene el mismo nombre que el nombre de la aplicación. Las plantillas son bloques de HTML en los que las vistas pueden agregar información para representar dinámicamente una página. Las "variables" de la plantilla de página, como {{ content }} en el archivo deindex.html, son marcadores de posición para valores dinámicos, como se explica más adelante en este artículo. Normalmente, las aplicaciones de Django crean un espacio de nombres para sus plantillas colocándolos en una subcarpeta que coincida con el nombre de la aplicación.
admin.py	El archivo de Python en el que extiende la interfaz administrativa de la aplicación, que se usa para ver y editar datos en una base de datos. Inicialmente, este archivo contiene solo la instrucción , from django.contrib import admin. De forma predeterminada, Django incluye una interfaz administrativa estándar a través de entradas en el archivo de settings.py del proyecto de Django. Para activar la interfaz, puede descomentar las líneas existentes en el archivo urls.py.
apps.py	Un archivo de Python que define una clase de configuración para la aplicación. (Vea el ejemplo que sigue a esta tabla).
models.py	Los modelos son objetos de datos, identificados por funciones, a través de las cuales las vistas interactúan con la base de datos subyacente de la aplicación. Django proporciona la capa de conexión de base de datos para que las aplicaciones no se preocupen por sí mismos con los detalles de los modelos. El archivo models.py es un lugar predeterminado donde se crean los modelos. Inicialmente, el archivo models.py contiene solo la instrucción , from django.db import models.
tests.py	Un archivo de Python que contiene la estructura básica de las pruebas unitarias.
views.py	Las vistas son similares a las páginas web, que toman una solicitud HTTP y devuelven una respuesta HTTP. Normalmente, las vistas se representan como HTML y los exploradores web saben cómo mostrar, pero una vista no necesariamente tiene que ser visible (como un formulario intermedio). Una función de Python define la vista que representa el CÓDIGO HTML en el explorador. El archivo views.py es un lugar predeterminado donde se crean las vistas. Inicialmente, el archivo views.py contiene solo la instrucción , from django.shortcuts import render.

Cuando se usa el nombre "HelloDjangoApp", el contenido del archivo apps.py aparece de la siguiente manera:

from django.apps import AppConfig

class HelloDjangoAppConfig(AppConfig):
    name = 'HelloDjangoApp'

Creación de una aplicación en Visual Studio o desde la línea de comandos

El comando Agregar>aplicación django y el comando Agregar>nuevo elemento (combinado con una plantilla de aplicación de Django) generan los mismos archivos que el comando manage.py startapp <app_name>de la CLI de Django . La ventaja de crear la aplicación Django en Visual Studio es que la carpeta de la aplicación y todos sus archivos se integran automáticamente en el proyecto. Puede usar el mismo comando de Visual Studio para crear cualquier número de aplicaciones en el proyecto.

Añadir vistas de página específicas de la aplicación

Si ejecuta el proyecto actual en Visual Studio seleccionando DepurarIniciar depuración> (F5) o Servidor web en la barra de herramientas principal, verá la página predeterminada de Django. Normalmente, las aplicaciones web tienen varias páginas con vistas diferentes. Una ruta única para la dirección URL de la aplicación identifica cada página de la aplicación.

Siga estos pasos para definir vistas de página específicas de la aplicación y agregar la aplicación al proyecto de Django:

1. En la subcarpeta HelloDjangoApp del proyecto de Visual Studio, reemplace el contenido del archivo views.py por el código siguiente:

   from django.shortcuts import render
   from django.http import HttpResponse
   
   def index(request):
       return HttpResponse("Hello, Django!")
   

   Este código importa la representación necesaria y las definiciones HTTP y define una vista denominada index.

2. En la subcarpeta BasicProject del proyecto de Visual Studio, modifique el archivo urls.py para que coincida con el código siguiente. Puede mantener los comentarios instructivos en el archivo actual, como prefiera.

   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 patrón de dirección URL describe las vistas a las que Django enruta direcciones URL específicas relativas al sitio (es decir, la parte de ruta que sigue a la dirección https://www.domain.com/URL ):

• La primera entrada de la urlPatterns definición que comienza con la expresión ^$ regular es el enrutamiento de la página raíz del sitio, /.
• La segunda entrada, ^home$, enruta a la página de la aplicación /home .

Observe que la definición de este código de ejemplo muestra que puede tener varios enrutamientos a la misma vista.

Defina cadenas de ruta sin formato con el prefijo (r)

El r prefijo de una cadena de ruta en Python significa "raw". Este prefijo indica a Python que no escape ningún carácter dentro de la cadena de ruta. Las expresiones regulares de las cadenas de ruta usan muchos caracteres especiales. El r prefijo de una cadena de ruta es más fácil de leer que el carácter de escape \.

Uso de los caracteres de intercalación (^) y dólar ($) en rutas

En expresiones regulares que definen patrones de dirección URL, el símbolo de intercalación ^ significa "inicio de línea" y el signo $ de dólar significa "fin de línea". Hay varios usos para estos caracteres en direcciones URL relativas a la raíz del sitio (la parte que sigue a la dirección https://www.domain.com/de la aplicación ):

• La expresión regular ^$ esencialmente significa "en blanco" y coincide con la dirección URL completa del directorio raíz del sitio de la aplicación, https://www.domain.com/.
• El patrón ^home$ coincide exactamente con https://www.domain.com/home/, que es la ruta del sitio seguida por /home. (Django no usa la barra / final en detección de patrones).
• Si no usa un signo de dólar al final $ en una expresión regular, como para la cadena de ruta ^home, la coincidencia de patrones de URL se aplica a cualquier URL que comience con home, tal como home, homework, homestead, home192837, etc.

Para experimentar con diferentes expresiones regulares, pruebe herramientas en línea como regex101.com en pythex.org.

Ejecución de la aplicación desde el proyecto de Django

Después de agregar contenido específico de la aplicación, vuelva a ejecutar la aplicación y compruebe las vistas de ruta en el explorador:

1. Cuando la aplicación se abra en el navegador, compruebe las vistas de página para las rutas del / (raíz del sitio) y las rutas de URL /home en el navegador. En ambas rutas, la aplicación muestra el mensaje Hola, Django! en el explorador.

2. Cuando haya terminado, seleccione Ctrl+C en la ventana de la consola, seguido de cualquier tecla para detener la aplicación. También puede seleccionar Depurar>Detener la depuración.

3. Cierre las ventanas abiertas del explorador para la aplicación.

Confirmación de los cambios en el control de código fuente

Después de actualizar el código de la aplicación Django y probar las actualizaciones, puede revisar y confirmar los cambios en el control de código fuente:

1. Guarde los cambios en los archivos del proyecto, como con el método abreviado de teclado Ctrl+S .

2. En la barra de controles de Git, seleccione los cambios no confirmados (lápiz 11) para abrir la ventana Cambios de Git :

   

3. En la ventana Cambios de Git , escriba un mensaje de confirmación y seleccione Confirmar todo:

   

   Cuando se completa la confirmación, Visual Studio muestra el mensaje Commit <hash> creado localmente.

4. (Opcional) Inserte los cambios confirmados en el repositorio remoto:

   1. En la barra de controles de Git, seleccione las confirmaciones salientes o entrantes (flechas 1/0).

   2. Seleccione Sincronizar (extraer y, a continuación, insertar) o Insertar.

   

   También puede acumular varias confirmaciones locales antes de insertarlas en el repositorio remoto.

Para los procedimientos posteriores de esta serie de tutoriales, puede consultar esta sección para conocer los pasos para confirmar los cambios en el control de código fuente.

Usar plantillas para representar páginas y vistas

La index función del archivo views.py genera una respuesta HTTP de texto sin formato para la página de la aplicación Django. La mayoría de las páginas web del mundo real responden con páginas HTML enriquecidas que a menudo incorporan datos activos. La razón principal por la que los desarrolladores definen vistas mediante una función es generar contenido dinámicamente.

El argumento del HttpResponse método es simplemente una cadena. Puede compilar cualquier CÓDIGO HTML dentro de una cadena mediante el contenido dinámico. Dado que es mejor separar el marcado de los datos, es mejor colocar el marcado en una plantilla y mantener los datos en el código.

Ajustar vistas para usar HTML en línea

Convierta el procesamiento de la vista para usar HTML en línea para la página con algo de contenido dinámico.

1. En la subcarpeta HelloDjangoApp del proyecto de Visual Studio, abra el archivo views.py .

2. Reemplace la index función por el código siguiente (mantenga las instrucciones existentes from ):

   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)
   

   La función revisada index genera una respuesta HTML mediante el contenido dinámico que se actualiza cada vez que actualiza la página.

3. Guarde los cambios y vuelva a ejecutar la aplicación. La página ahora muestra la fecha y hora actuales junto con "Hola Django! Mensaje.

4. Actualice la página varias veces para confirmar que se realizan las actualizaciones de la fecha y la hora. Cuando haya terminado, detenga la aplicación.

Creación de una plantilla HTML para vistas de página

La generación de HTML en el código funciona bien para páginas pequeñas. Sin embargo, a medida que las páginas son más sofisticadas, debe mantener las partes HTML estáticas de la página (junto con referencias a archivos CSS y JavaScript) como "plantillas de página". A continuación, puede insertar el contenido dinámico generado por código en las plantillas de página. En la sección anterior, solo la fecha y hora de la now.strftime llamada es dinámica, lo que significa que el resto del contenido se puede colocar en una plantilla de página.

Una plantilla de página de Django es un bloque de HTML que contiene varios tokens de reemplazo denominados "variables". Las llaves de apertura y cierre {{ y }} delimitan las variables, como {{ content }}. A continuación, el módulo de plantillas de Django reemplaza las variables por el contenido dinámico que se proporciona en el código.

Siga estos pasos para convertir el proceso de representación de páginas para usar una plantilla HTML:

1. En la subcarpeta HelloDjangoApp del proyecto de Visual Studio, abra el archivo settings.py .

2. Actualice las referencias de aplicación en la INSTALLED_APPS definición para incluir el nombre HelloDjangoAppde la aplicación. Agregue el nombre de la aplicación como la primera entrada de la lista:

   INSTALLED_APPS = [
       'HelloDjangoApp',
       # Existing entries in the list ...
   ]
   

   Agregar la aplicación a la lista informa al proyecto de Django de que hay una carpeta denominada HelloDjangoApp que contiene una aplicación.

3. Confirme que la configuración del TEMPLATES objeto establece APP_DIRS en True:

   'APP_DIRS': True,
   

   Esta instrucción indica a Django que busque plantillas en la carpeta templates de una aplicación instalada. (Esta instrucción debe incluirse en la definición de forma predeterminada).

4. En la subcarpeta HelloDjangoApp, abra el archivo de plantilla de página templates/HelloDjangoApp/index.html.

5. Confirme que el archivo contiene solo una variable, {{ content }}:

   <html>
     <head>
       <title></title>
     </head>
   
     <body>
       {{ content }}
     </body>
   </html>
   

   La {{ content }} instrucción es un marcador de posición o un token de reemplazo (también denominado variable de plantilla) para el que se proporciona un valor en el código.

6. En la subcarpeta HelloDjangoApp del proyecto de Visual Studio, abra el archivo views.py .

7. Reemplace la index función por el código siguiente que usa la django.shortcuts.render función auxiliar (mantenga las instrucciones existentes from ):

   def index(request):
      now = datetime.now()
   
      return render(
         request,
         "HelloDjangoApp/index.html",  # Relative path from the 'templates' folder to the template file
         {
            'content': "<strong>Hello Django!</strong> on " + now.strftime("%A, %d %B, %Y at %X")
         }
      )
   

   La render función auxiliar proporciona una interfaz simplificada para trabajar con plantillas de página. Esta función tiene tres argumentos:

   • Objeto de solicitud.
   • Ruta de acceso relativa al archivo de plantilla dentro de la carpeta templates de la aplicación. Un archivo de plantilla se nombra según la vista que compatibiliza, si procede.
   • Diccionario de variables a las que hace referencia la plantilla. Puede incluir objetos en el diccionario, donde una variable de la plantilla puede hacer referencia a {{ object.property }}.

8. Guarde los cambios del proyecto y vuelva a ejecutar la aplicación.

   Observe que la sintaxis del HTML (\<strong> ...) del valor content no se representa como HTML porque el motor de plantillas (Jinja) efectúa un escape automático del contenido HTML. El escape automático evita vulnerabilidades accidentales a ataques por inyección.

   Los desarrolladores suelen recopilar información de una página y emplearla como valor en otra usando un marcador de posición de plantilla. El escape también sirve como recordatorio de que es mejor mantener HTML fuera del código.

   Cuando haya terminado, detenga la aplicación.

Usa marcadores de posición distintos

Puede usar marcadores de posición distintos para cada fragmento de datos dentro del marcado HTML. A continuación, vuelva a ajustar la index función para proporcionar los valores de marcador de posición específicos:

1. Reemplace el contenido del archivo templates/HelloDjangoApp/index.html de la aplicación por el código siguiente:

   <html>
     <head>
       <title>{{ title }}</title>
     </head>
     <body>
       <strong>{{ message }}</strong>{{ content }}
     </body>
   </html>
   

   Este marcado HTML agrega un título de página y mantiene todo el formato de la plantilla de página.

2. En el archivo HelloDjangoApp/views.py , reemplace la index función por el código siguiente:

   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")
           }
       )
   

   Este código proporciona valores para todas las variables de la plantilla de página.

3. Guarde los cambios y vuelva a ejecutar la aplicación. Esta vez debería ver la salida representada correctamente:

   

4. Puede confirmar los cambios en el control de código fuente y actualizar el repositorio remoto. Para obtener más información, consulte Confirmar cambios en el control de código fuente.

Plantillas de página independientes

Normalmente, las plantillas se mantienen en archivos HTML independientes, pero también puede usar una plantilla insertada. Se recomienda separar los archivos para mantener una separación limpia entre el marcado y el código.

Uso de la extensión .html para plantillas

La extensión .html para los archivos de plantilla de página es totalmente opcional. Siempre puede identificar la ruta de acceso relativa exacta al archivo en el primer argumento de la render_template función. Aun así, Visual Studio (y otros editores) suelen proporcionar características como la finalización de código y el coloreado de sintaxis con archivos .html, lo que compensa con creces el hecho de que las plantillas de página no sean HTML.

Al trabajar con un proyecto de Django, Visual Studio detecta automáticamente si el archivo HTML que está editando es realmente una plantilla de Django y proporciona determinadas características de autocompletar. Si empieza a escribir un comentario de plantilla de página de Django ({#), Visual Studio suministra automáticamente los caracteres de cierre #}. Los comandos Selección con comentarios y Selección sin comentarios (en el menú Editar>Opciones avanzadas) también utilizan comentarios de plantilla en lugar de comentarios HTML.

Solución de problemas

Al ejecutar la aplicación, es posible que encuentre problemas relacionados con el archivo de plantilla de la aplicación. Revise los siguientes puntos y asegúrese de que la configuración del proyecto de Django sea correcta.

Plantilla no encontrada

Si Django o Visual Studio muestran un error Plantilla no encontrada, asegúrese de que su aplicación esté en la INSTALLED_APPS lista. Esta lista se encuentra en el archivo settings.py en la subcarpeta de la aplicación del proyecto de Visual Studio (por ejemplo , HelloDjangoApp). Si la lista no tiene una entrada para la aplicación, Django no sabe buscar en la carpeta de plantillas de la aplicación.

Estructura de plantilla duplicada

Cuando Django busca una plantilla a la que se hace referencia en la render función, usa el primer archivo que coincide con la ruta de acceso relativa. Si tiene varias aplicaciones de Django en el mismo proyecto con las mismas estructuras de carpetas para las plantillas, es probable que una aplicación pueda usar involuntariamente una plantilla de otra aplicación. Para evitar estos errores, cree siempre una subcarpeta en la carpeta templates de una aplicación que coincida con el nombre de la aplicación para evitar cualquier duplicación.

Paso siguiente

Paso 3: Servir archivos estáticos, agregar páginas y usar la herencia de plantillas