Get best of the week

Usando VueJS con Django

Se preparó una traducción del artículo antes del inicio del curso Python Web Developer .



Introducción


Ahora estoy trabajando en un proyecto muy interesante. Y todo es complicado, porque el proyecto en sí es de gran escala, y lo trato solo en mi tiempo libre, mientras trabajo a tiempo completo. Por lo tanto, debo ser efectivo. Afortunadamente, uso Django con su enfoque de "batería incluida" .

Utilizo toda la funcionalidad de Django, que acelera el desarrollo, y no me gustaría perder de vista su motor de plantillas. Por lo tanto, el backend para Django y el frontend para JavaScript SPA no son una opción para mí. Sin embargo, incluso el desarrollador de backend más ávido debe admitir que algunas cosas deben implementarse en el lado del cliente. Las acciones menores del usuario no deberían requerir una recarga de la página. Además, algunas partes de la aplicación web que creo requieren una interacción del usuario bastante complicada.

Por tradición, uno podría mezclar Django y jQuery para obtener el comportamiento deseado. Pero ahora hay nuevas tecnologías JavaScript como React y Vue. Dado que nuestro objetivo es encontrar un marco que podamos usar con Django sin tener que volver a escribir todo desde cero, utilizaremos Vue como una alternativa más fácil. En este artículo, le mostraré cómo comenzar a usar Vue con Django con un mínimo esfuerzo.

Instalación y configuración


Una de las razones para usar Vue es su excelente documentación . Tiene muchos ejemplos, una búsqueda decente y una tabla de contenido clara. El propósito de este artículo es mostrar que puede comenzar a usar Vue en sus proyectos de Django de inmediato sin las complejas horas de configuración. Por lo tanto, utilizaremos el método de conexión más simple Vue.js, agregándolo con la etiqueta <script>.

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Ahora estamos listos para crear nuestra primera instancia Vue.js:

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  delimiters: ["[[", "]]"],
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Tomé este ejemplo de la guía oficial de inicio. Sin embargo, hay algo más. Por defecto, Django y Vue usan las mismas etiquetas de plantilla. Por lo tanto, necesitamos separar explícitamente Vue de Django para evitar conflictos con el motor de plantillas de Django.

Acceda a los datos de Django desde Vue


La forma más fácil de obtener datos es usar el filtro incorporado jscon_scriptde Django . De esta manera, puede comenzar a usar sus modelos de Django como datos para instancias de Vue.

En HTML:

{{ django_template_variable|json_script:"djangoData" }}

Y luego en JavaScript cargamos los datos en una variable:

let jsVariable = JSON.parse(document.getElementById('djangoData').textContent);


Y ella está lista para usar con Vue:

new Vue({
  delimiters: ["[[", "]]"],
  el: '#app',
  data: jsVariable
})

Ejecutar solicitudes asincrónicas en el backend


Una de las tareas más comunes en el front-end en Vue es consultar la aplicación del servidor en el back-end. Con una aplicación Django completa, no necesitamos hacer esto con cada acción del usuario. En algunos casos, una recarga de página completa es excelente, y el sistema de plantillas Django proporcionará todos los beneficios. Pero para mejorar la experiencia del usuario y aprovechar al máximo Vue, es posible que aún necesitemos realizar solicitudes de backend en algunos casos.

Vue en sí mismo no sabe cómo manejar las solicitudes. En este artículo usaré axioscomo también lo recomienda la documentación oficial de Vue. Puedes elegir otras alternativas. Para pasar el mecanismo de protección CSRF de Django, los axios deben incluir la cookie apropiada en sus solicitudes. La forma más fácil es establecer valores axios globales de forma predeterminada:

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";

Además, podemos crear una instancia de axios con la configuración necesaria:

var instance = axios.create({
    xsrfCookieName: 'csrftoken',
    xsrfHeaderName: "X-CSRFTOKEN",
});

Su plantilla de Django debe contener una etiqueta {% csrf_token %}o, como alternativa, la vista correspondiente debe usar un decorador ensure_csrf_cookie(). El resto del backend predeterminado para una sesión de Django para autenticación funcionará de inmediato, lo que significa que puede anotar sus servicios en el backend con cosas como loginRequiredesta y simplemente funcionará. Para hacer una solicitud, puede usar axios:

axios.post('/django/backend/endpoint', {
    data: jsVariable 
})
    .then(function (response) {
        // handle response
    })
    .catch(function (error) {
        // handle error
    });

Esta llamada se puede realizar desde el mountedenlace de la instancia de Vue o desde cualquier otro lugar donde pueda poner código JavaScript.

Si activó CSRF_USE_SESSIONS CSRF_COOKIE_HTTPONLYDjango en la configuración, deberá leer el token CSRF del DOM. Para obtener más información sobre esto, consulte la documentación oficial de Django .

Conclusión


Cuando buscas en Google sobre Django + Vue, la mayoría de los resultados de búsqueda serán sobre cómo usar Django en el back-end y Vue para un proyecto separado en la interfaz. Tener dos proyectos independientes complica el trabajo y pierde el acceso al sistema de plantillas de Django, que a su vez es una forma muy efectiva de ahorrar tiempo. Por otro lado, el acceso a un marco como Vue puede hacer maravillas en el mundo de las aplicaciones web que van más allá de la funcionalidad CRUD.

Afortunadamente, no necesitamos elegir entre ellos. ¡Esta guía muestra que puedes mantenerte al día con dos conejos!


Ampliando las capacidades de Django (seminario web gratuito).

More articles:


All Articles