Paso 4. Usar la plantilla completa de Proyecto web de Django
Paso anterior: Atender archivos estáticos, agregar páginas y usar la herencia de plantilla
Ahora que ha explorado los conceptos básicos de Django en Visual Studio, puede comprender fácilmente la aplicación más completa que presenta la plantilla "Django Web Project".
En este paso, hará lo siguiente:
- Crear una aplicación web de Django más completa mediante la plantilla "Proyecto web de Django" y examinar la estructura del proyecto (paso 4.1)
- Comprender las vistas y las plantillas de página creadas por la plantilla de proyecto, que consta de tres páginas que heredan de una plantilla de página base y emplea las bibliotecas estáticas de JavaScript, como jQuery y Bootstrap (paso 4.2)
- Comprender el enrutamiento de direcciones URL que proporciona la plantilla (paso 4.3)
La plantilla también proporciona autenticación básica, que se explica en el paso 5.
Paso 4.1: Crear un proyecto a partir de la plantilla
En Visual Studio, vaya al Explorador de soluciones, haga clic con el botón derecho en la solución LearningDjango creada anteriormente en este tutorial. Después, seleccione Agregar>Nuevo proyecto. (En caso de que desee utilizar una nueva solución, tendrá que seleccionar Archivo>Nuevo>Proyecto).
En el cuadro de diálogo Nuevo proyecto, busque y seleccione la plantilla Proyecto web de Django. Llame al proyecto "DjangoWeb" y seleccione Crear.
Como la plantilla incluye un archivo requirements.txt, Visual Studio solicita la ubicación para instalar las dependencias. Cuando lo haga, elija la opción Install into a virtual environment (Instalar en un entorno virtual) y, en el cuadro de diálogo Agregar entorno virtual, seleccione Crear para aceptar los valores predeterminados.
Cuando Visual Studio termine de configurar el entorno virtual, siga las instrucciones del archivo readme.html que aparece para crear un superusuario de Django (es decir, un administrador). Haga clic con el botón derecho en el proyecto de Visual Studio y seleccione el comando Python>Crear superusuario de Django; a continuación, siga las indicaciones. Asegúrese de registrar su nombre de usuario y contraseña cuando los use al ejecutar las características de autenticación de la aplicación.
Establezca el proyecto DjangoWeb como predeterminado para la solución de Visual Studio; para ello, haga clic con el botón derecho en ese proyecto en el Explorador de soluciones y seleccione Establecer como proyecto de inicio. El proyecto de inicio, que se muestra en negrita, es lo que ejecuta cuando se inicia el depurador.
Seleccione Depurar>Iniciar depuración (F5) o use el botón Servidor web de la barra de herramientas para ejecutar el servidor.
La aplicación creada mediante la plantilla tiene tres páginas: Home, About y Contact. Puede desplazarse entre las páginas mediante la barra de navegación. Tómese un par de minutos para examinar las diferentes partes de la aplicación. Para autenticarse en la aplicación a través del comando Iniciar sesión, use las credenciales de superusuario creadas anteriormente.
La aplicación creada por la plantilla "Proyecto web de Django" usa Bootstrap para el diseño con capacidad de respuesta que acoge los factores de los formatos 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 en ejecución para las secciones siguientes.
Si quiere detener la aplicación y confirmar los cambios en el control de código fuente, abra la página Cambios en Team Explorer, haga clic con el botón derecho en la carpeta del entorno virtual (probablemente env) y seleccione Omitir estos elementos locales.
Examen de lo que crea la plantilla
En el nivel más amplio, la plantilla "Proyecto web de Django" crea la siguiente estructura:
- Archivos en la raíz del proyecto:
- manage.py: la utilidad administrativa de Django.
- db.sqlite3: una base de datos de SQLite predeterminada.
- requirements.txt: contiene una dependencia en Django 1.x.
- readme.html: un archivo que se muestra en Visual Studio después de crear el proyecto. Como se indicó en la sección anterior, siga estas instrucciones para crear una cuenta de superusuario (administrador) para la aplicación.
- La carpeta app contiene todos los archivos de la aplicación, lo que incluye vistas, modelos, pruebas, formularios, plantillas y archivos estáticos (vea el paso 4-2). Puede cambiar el nombre de esta carpeta para utilizar otro que le ayude a distinguirla mejor.
- La carpeta DjangoWeb (proyecto de Django) contiene los archivos de proyecto típicos de Django: __init__.py, settings.py, urls.py y 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 ya está configurado con las rutas a todas las páginas de la aplicación, incluido el formulario de inicio de sesión.
Pregunta: ¿Es posible compartir un entorno virtual entre los proyectos de Visual Studio?
Respuesta: Sí, sin embargo, debe hacerlo con el conocimiento de que los distintos proyectos probablemente usen paquetes diferentes a lo largo del tiempo. Por lo tanto, un entorno virtual compartido debe contener todos los paquetes para todos los proyectos que lo usan.
No obstante, para usar un entorno virtual existente, siga estos pasos:
- Cuando se le solicite instalar las dependencias en Visual Studio, seleccione la opción Los instalaré de forma manual.
- En el Explorador de soluciones, haga clic con el botón derecho en el nodo Entornos de Python y seleccione Agregar entorno virtual existente.
- Vaya la carpeta que contiene el entorno virtual, selecciónela y luego elija Aceptar.
Paso 4.2: Comprender las vistas y las plantillas de página creadas por la plantilla de proyecto
Tal y como se observa cuando se ejecuta el proyecto, la aplicación contiene tres vistas: inicio, información y contacto. El código de estas vistas se encuentra en el archivo views.py. Cada función de la vista llama a django.shortcuts.render con la ruta de acceso a una plantilla y un sencillo objeto de diccionario. Por ejemplo, la función about es quien controla la página de información:
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 se encuentran en la carpeta templates/app de la aplicación (y normalmente se quiere cambiar el nombre app por el de la aplicación real). La plantilla base, layout.html, es la más extensa. El archivo layout.html hace referencia a todos los archivos estáticos necesarios (JavaScript y CSS). El archivo layout.html también define un bloque denominado "contenido" que otras páginas invalidan y proporciona otro bloque denominado "scripts". Los siguientes extractos anotados del archivo layout.html muestran estas áreas concretas:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- Define a 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>
<!-- Navbar omitted -->
<div class="container body-content">
<!-- "content" block that pages are expected to override -->
{% block content %}{% endblock %}
<hr/>
<footer>
<p>© {{ year }} - My Django Application</p>
</footer>
</div>
<!-- Additional scripts; use the "scripts" block to add page-specific scripts. -->
<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>
{% block scripts %}{% endblock %}
</body>
</html>
Las plantillas de página individuales, about.html, contact.html e index.html, amplían la plantilla base layout.html. El archivo de plantilla about.html es el más sencillo y muestra las etiquetas {% extends %} y {% block content %} :
{% extends "app/layout.html" %}
{% 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 contenido más largo en el bloque "content".
En la carpeta templates/app también hay una cuarta página login.html, junto con loginpartial.html, que se traslada a layout.html mediante {% include %}. Estos archivos de plantilla se describen en el paso 5 sobre la autenticación.
Pregunta: ¿Es posible aplicar sangría a {% block %} y {% endblock %} en la plantilla de página de Django?
Respuesta : Sí. Las plantillas de página de Django funcionan correctamente si se aplica sangría a las etiquetas de bloque, quizás para alinearlas en sus elementos principales más adecuados. Para ver claramente dónde se colocan las etiquetas de bloque, las plantillas de página de Visual Studio no aplican sangría a las etiquetas de bloque.
Paso 4.3: Comprender el enrutamiento de direcciones URL creado por la plantilla
El archivo urls.py del proyecto Django, tal como lo crea la plantilla "Proyecto web de Django", contiene el código siguiente:
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 primeros tres patrones de dirección URL se asignan directamente a las vistas home, contact y about en el archivo views.py de la aplicación. Los patrones ^login/$ y ^logout$, por otra parte, usan las vistas de Django integradas en lugar de vistas definidas por la aplicación. Las llamadas al método url también incluyen datos adicionales para personalizar la vista. En el paso 5 se exploran estas llamadas.
Pregunta: En el proyecto que he creado, ¿por qué el patrón de dirección URL "about" usa "^about" en lugar de "^about$" como se ha visto aquí?
Respuesta: La falta de la "$" al final de la expresión regular se debe simplemente a un descuido en muchas de las versiones de la plantilla del proyecto. El patrón de dirección URL funciona perfectamente en una página denominada "about". Sin embargo, sin el carácter "$" final, el patrón de dirección URL coincide también con direcciones URL como "about=django", "about09876", "aboutoflaughter", etc. El símbolo "$" al final se muestra aquí para crear un patrón de dirección URL que coincida solo con "about".
Pasos siguientes
Profundizar un poco más
- Escribiendo su primera aplicación en Django, parte 4 (formas y vistas genéricas) (docs.djangoproject.com)
- Código fuente del tutorial en GitHub: Microsoft/python-sample-vs-learning-django
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de