Header Ads Widget

Ticker

6/recent/ticker-posts

Construyendo una aplicación CRUD con Django Rest Framework y Vue.js

 En este tutorial, aprenderá a usar Django y Vue.js para construir una aplicación web CRUD moderna (las operaciones de creación, lectura, actualización y eliminación son esenciales para la mayoría de las aplicaciones web). También aprenderá cómo integrar Django Rest Framework con Vue.js y cómo realizar llamadas HTTP usando vue-resource (también puede usar Axios o la API de búsqueda del navegador ).

Django + Vue.js

En pocas palabras, Django es un marco de back-end para crear aplicaciones web con Python. Vue.js es una biblioteca de interfaz de usuario para crear aplicaciones JavaScript en el front-end. Django Rest Framework es un módulo de Django para crear API basadas en Rest que luego se pueden consumir desde navegadores o dispositivos móviles.

Puede utilizar cualquier sistema de gestión de bases de datos como MySQL o PostgreSQL, etc. Dado que el ORM de Django puede abstraer todas las diferencias entre los sistemas de bases de datos y dejar trabajar con cualquier base de datos sin escribir código nuevo.

La parte de integración simplemente consiste en usar un cliente HTTP como Axios, vue-resource o incluso mejor, la API de recuperación del navegador para llamar a las API expuestas por DRF desde la aplicación Vue.js. Tanto las aplicaciones de servidor como las de cliente están desacopladas para que pueda intercambiar cualquier parte con cualquier otra biblioteca en el futuro. También puede crear aplicaciones móviles para consumir su API sin crear un nuevo servidor o cambiar nada en el lado del servidor.

Introducción a Vue.js

Vue.js es una biblioteca de JavaScript diseñada para crear SPA o aplicaciones web de una sola página. Es una biblioteca de JavaScript progresiva que se usa principalmente para crear interfaces de usuario (como React).

Vue.js funciona en la capa de vista de la arquitectura MVC (Model-View-Controller), por lo que no tiene conocimiento sobre ninguna tecnología de back-end y, por lo tanto, se puede integrar fácilmente con cualquier marco del lado del servidor.

Vue.js tiene muchas características modernas para crear capas de vista modernas. A continuación se muestra una lista de características:

  • Componentes
  • Programación reactiva
  • El enlace de datos
  • Directivas y filtros
  • Plantillas
  • Manejo de eventos, etc.

Puede encontrar más información sobre Vue.js visitando su sitio web oficial

¿Cómo usar Vue.js?

Puede integrar Vue.js en su proyecto de diferentes formas:

  • puede utilizar una CDN al incluir una <script>etiqueta en un archivo HTML,
  • puedes instalarlo a través de NPM,
  • puedes instalar usando Bower,
  • puede utilizar la CLI de Vue para crear un andamio en su proyecto.

En aras de la simplicidad, vamos a la <script>etiqueta para incluir Vue.js en nuestro proyecto Django.

Introducción a Django y Django Rest Framework

Django es un marco web basado en Python, diseñado para desarrolladores con fechas límite. Django utiliza una variación del controlador de vista de modelo o el patrón de diseño arquitectónico MVC llamado MTV, una abreviatura de M odel, T emplate, V iew.

Comenzar con Django es bastante fácil, primero asegúrese de tener instalado python y pip (administrador de paquetes de python). También se prefiere usar virtualenv para administrar y aislar sus entornos de desarrollo y también evitar conflictos entre diferentes versiones del mismo paquete.

Dirígete a tu terminal en Mac y Linux o al símbolo del sistema en Windows y luego ejecuta los siguientes comandos:

virtualenv env
source env/bin/activate
pip install django
django-admin startproject django-vuejs-demo
cd django-vuejs-demo
python manage.py startapp demoapp

Esto creará un nuevo entorno virtual, lo activará, instalará django framework, generará un nuevo proyecto Django y luego creará una nueva aplicación. Las aplicaciones de Django son una forma de organizar un proyecto de Django en módulos desacoplados y reutilizables.

A continuación, abra setting.pyen la carpeta raíz del proyecto y luego agregue su aplicación recién creada a la INSTALLED_APPSmatriz.

INSTALLED_APPS = [
    #...
    'demoapp'
]

Un último paso para configurar correctamente el proyecto Django: necesita migrar su base de datos.


python manage.py migrate

Esto creará un archivo de base de datos sqlite en la carpeta raíz de su proyecto y creará tablas Django. Si desea utilizar otro sistema de base de datos como PostgreSQL, asegúrese de actualizar su configuración.

Marco de descanso de Django

El sitio web oficial de DRF define DRF como:

El marco Django REST es un conjunto de herramientas potente y flexible para crear API web.

Algunas razones por las que es posible que desee utilizar el marco REST:

La API navegable en la Web es una gran ventaja de usabilidad para sus desarrolladores. Políticas de autenticación que incluyen paquetes para OAuth1a y OAuth2. Serialización que admite fuentes de datos ORM y no ORM. Personalizable hasta el final: solo use vistas regulares basadas en funciones si no necesita las funciones más potentes. Amplia documentación y excelente apoyo de la comunidad. Utilizado y de confianza por empresas reconocidas internacionalmente, incluidas Mozilla, Red Hat, Heroku y Eventbrite.

También necesita instalar DRF y agregarlo al archivo de configuración de su proyecto:


pip install djangorestframework
pip install django-filter  # Filtering support

Luego agregue rest_frameworka la INSTALLED_APPSmatriz en settings.py.

INSTALLED_APPS = [
    #...
    'rest_framework',
    'rest_framework.authtoken',
    'django_filters',
    'demoapp'
]

Crear la primera vista de Django

No necesitamos crear una función de vista separada o una vista basada en clases, demoapp/views.pypero puede hacerlo si lo desea. Dado que la vista se usa solo para representar la plantilla, usaremos el TemplateView.as_view()método y mapearemos la vista directamente ^$enurls.py

from django.conf.urls import url, include
from django.contrib import admin
from django.views.generic import TemplateView

urlpatterns = [
    url(r'^$', view=TemplateView.as_view(template_name='demoapp/home.html')),
    url(r'^admin/', admin.site.urls)
]

Abrimos, urls.pyluego importamos y TemplateViewluego creamos una asignación de URL con el template_nameconjunto endemoapp/index.html

También puede crear una función de vista en demoapp/views.py:

from django.shortcuts import render
def home(request):
    return render(request, 'home.html')

luego mapearlo con:

from django.conf.urls import url
from django.contrib import admin
from demoapp.views import home

urlpatterns = [
    url(r'^$', home, name='home'),
    url(r'^admin/', admin.site.urls)
]

Abra y settings.pyluego en la TEMPLATESmatriz agregue la siguiente configuración si no está presente

 'DIRS': [os.path.join(BASE_DIR, "templates"),]

Esto le dice a Django dónde buscar plantillas.

A continuación, deberá crear un archivo de plantilla ( home.html) endemoapp/templates/demoapp

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django Vue.js Demo</title>
</head>

<body>
   Hello Vue.js
</body>

</html>

Puede iniciar su servidor de desarrollo para comprobar si todo funciona como se esperaba:

python manage.py runserver

A continuación, abra su navegador y navegue hasta http: // localhost: 8000 / .

¿Cómo integrar Vue.js con Django Rest Framework?

Tiene dos opciones para integrar Vue.js con Django Rest Framework:

  • Arquitectura parcialmente desacoplada (enfoque basado en plantillas de Jinja2): usamos Django como lo hacemos normalmente, es decir, procesamos y servimos las plantillas desde el servidor, luego usamos Vue.js para mostrar los datos de contexto de la plantilla. En este enfoque, no tenemos una arquitectura realmente desacoplada entre el cliente y el servidor. De hecho, tenemos un back-end de API, creado con DRF que podemos usar con cualquier otro cliente, pero aún usamos Django para servir las plantillas y el código Vue.js.

  • Arquitectura completamente desacoplada: usamos Django y Vue.js como niveles completamente separados. Django con DRF se usa para construir la API, manejar la autenticación y la autorización y luego exponer públicamente los puntos finales de la API al cliente Vue.js. El cliente tiene su propia estructura con archivos HTML estáticos, código CSS y Vue.js.

En ambos casos, usamos DRF para construir un servidor API y luego consumimos la API de la aplicación Vue.js usando clientes HTTP como Axios , vue-resource o la API de recuperación del navegador .

Añadiendo Vue.js

Usemos una plantilla Jinja2 para servir una aplicación Vue.js.

Abra home.htmly siga estos pasos:

Incluya Vue.js en <head>:

<script src="https://unpkg.com/vue"></script> 

Los delimitadores de interpolación ` are the same for Jinja2 templating system and Vue.js. Lucky for us, Vue.js provides a way to change them, so we'll be using$ { and} $`

Agregue esto a <body>:


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

<script>
new Vue({
  delimiters: ['${', '}$'],
  el: '#app',
  data: {
    message: 'Hello from Vue.js'
  }
})
</script>

Eso es todo, hemos integrado Vue.js con Django. Si ejecuta su servidor Django y navega a su aplicación, debería ver el mensaje Hell from Vue.js.

Ahora necesitamos crear una API y luego consumir datos de nuestra aplicación Vue.js simple montada desde la home.htmlplantilla.

Configurando Vue-resource

Primero asegúrese de descargar y agregar resource-vue.min.js a la carpeta estática de su aplicación ( demoapp/static/demoapp).

También puedes usarlo desde un CDN

<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>

El complemento vue-resource para Vue.js proporciona un servicio HTTP que le permite realizar solicitudes HTTP (también llamadas llamadas API o solicitudes AJAX) y procesar respuestas HTTP, utilizando la interfaz XMLHttpRequest ** o ** JSONP del navegador .

  • Es compatible con los últimos navegadores modernos como Firefox, Chrome y Safari.
  • Admite interceptores HTTP para solicitudes y respuestas
  • Se puede usar con Vue.js 1 y Vue.js 2
  • Es compatible con la API Promise

Puede encontrar más información en el repositorio oficial de Github para resource-vue .

Antes de poder utilizar el servicio HTTP, debe configurarlo:

new Vue({

  http: {
    root: 'http://localhost:8000',
    headers: {
      Authorization: 'Basic YXBpOnBhc3N3b3Jk'
    }
  }

})

Todas las solicitudes deben ser relativas a la raíz .

Tenga en cuenta que vue-resource se retiró, pero aún se usa y desarrolla como un proyecto separado. Si desea otras alternativas, puede utilizar el cliente HTTP Axios .

Construyendo una API con DRF

No vamos a reinventar la rueda aquí, en su lugar usaremos una API simple que hemos construido previamente en este tutorial . Es una API simple para administrar inventarios de productos con cuatro modelos: Producto, Familia, Ubicación y Transacción y cuatro puntos finales de API / productos, / familias, / ubicaciones y / transacciones . Así que asegúrese de seguir ese tutorial para crear esta API si es la primera vez que trabaja con Django Rest Framework .

Envío de llamadas a la API desde Vue.js con vue-resource

Enviar una llamada a la API al servidor de la API Django Rest es fácil. Simplemente usa el $httpservicio inyectado con un método HTTP: GET, POST, PUT o DELETE (operaciones CRUD)

Agregue un método a su aplicación Vue.js que obtenga la lista de productos

   new Vue({
        delimiters: ['${', '}$'],
        el: '#app',
        data: {
            products: []

        },
        http: {
            root: 'http://localhost:8000',
            headers: {
              Authorization: '<TOKEN_HERE>'
            }
        },
        methods: {
            getProducts: function () {
                this.$http.get('products/').then(function (data,status,request) {
                if (status == 200) {
                    this.products = data.body.results;
                 }   
                })
            }
        },
        mounted: function () {
            this.getProducts();
        }
    })

Entonces agregamos una variable de productos en el objeto de datos Vue.js para contener nuestros productos recuperados y luego declaramos un método getProducts () (en el objeto de métodos Vue.js ). En este método usamos este. $ Http.get () para enviar una solicitud GET a nuestro servidor DRF y luego asignamos el resultado a la matriz this.products .

A continuación, llamamos al método getProducts () cuando se monta la aplicación Vue.js.

Ahora veamos cómo podemos agregar mostrar estos productos en la plantilla HTML.

 <div id="app">
    <ul>
        <li v-for="product in products">
            <h1>${ product.title }$</h1>
            <p> ${ product.description }$ </p>
        </li>
    </ul>
</div>

Entonces usamos v-for para iterar a través de la matriz de productos y luego usamos los delimitadores de interpolación personalizados para mostrar el título y la descripción del producto.

Conclusión

En este tutorial, hemos visto cómo comenzar a usar la API Django Rest con Vue.js para crear aplicaciones CRUD que consuman una API de un front-end de Vue.js utilizando el complemento vue-resource para enviar solicitudes HTTP.

Publicar un comentario

0 Comentarios