Cree una aplicación web con Django backend y React frontend

Traducción del artículo “Tutorial: Django REST con React (Django 3 y una pizca de pruebas)”

En este material aprenderás:

Cómo crear una API REST simple con Django;
Cómo agregar React a un proyecto Django;
Cómo conectar django y reaccionar.

Table of Contents

Preparación

Necesitará:

Comprensión básica de Python y Django;
Comprensión básica de JavaScript (y las especificaciones de ECMAScript 2015) y React
Instalado Node.js.

Crear un proyecto de Django en un entorno virtual de Python

Cree una nueva carpeta y navegue hasta ella:

mkdir django-react && cd $_

Luego active el entorno virtual de Python:

python3 -m venv venv source venv/bin/activate

Tenga en cuenta que todos los siguientes comandos deben ejecutarse desde la carpeta django-react y con entorno virtual habilitado.

Instale las dependencias de Django y Django REST Framework:

pip install django djangorestframework

Una vez instalado, crea un nuevo proyecto Django:

django-admin startproject django_react

Ahora vamos a crear una API de Django simple para crear y almacenar contactos.

Crear una aplicación con Django

Cada proyecto de Django puede tener muchas aplicaciones. Las aplicaciones pueden volverse reutilizables: para que puedan agregarse al administrador de paquetes de Python e instalarse a través de él en otro proyecto que requiera dicha aplicación.

Escuela de programadores Aula virtual para los grados 3-11

Inicio 5 de octubre, 8 meses, Online, Desde ₽71.200 hasta ₽76.000

tproger.ru Eventos y cursos en tproger.ru

Para crear una nueva aplicación Django, use el comando:

django-admin startapp app_name

donde app_name – Nombre de la aplicación.

En nuestro caso, el comando se verá así:

django-admin startapp leads

Ella creará una aplicación. leads en el archivo django-react. La estructura de carpetas en el proyecto ahora debería verse así:

(venv) your@prompt:~/Code/django-react$ tree -d -L 1 . ├── django_react ├── leads └── venv

Ahora hagamos que el proyecto Django use la nueva aplicación. Abrir documento django_react/settings.py y agrega la aplicación a INSTALLED_APPS:

INSTALLED_APPS = [     'django.contrib.admin',     'django.contrib.auth',     'django.contrib.contenttypes',     'django.contrib.sessions',     'django.contrib.messages',     'django.contrib.staticfiles',     'leads.apps.LeadsConfig', # activate the new app ]

Crear un modelo en la base de datos usando Django

Un modelo es un objeto que representa datos de una tabla. Casi todos los marcos web usan plantillas y Django no es una excepción.

Un modelo de Django puede tener uno o más campos. Cada campo corresponde a un campo de la tabla.

Vamos a almacenar contactos, por lo que el modelo Lead puede estar compuesto por estos campos:

Apellido;
Correo electrónico;
mensaje.

(Puede agregar otros campos, como un número de teléfono). Agreguemos otro campo con el tiempo de creación del modelo, porque Django no hace eso por defecto.

vamos a abrir leads/models.py y describe el modelo Lead:

from django.db import models  class Lead(models.Model):     name = models.CharField(max_length=100)     email = models.EmailField()     message = models.CharField(max_length=300)     created_at = models.DateTimeField(auto_now_add=True)

Nota: consulte la documentación de Django sobre los campos. Al diseñar la estructura de la plantilla, elija los campos más apropiados para usted.

Crea migraciones con el comando:

python manage.py makemigrations leads

y aplicarlos a la base de datos:

python manage.py migrate

empecemos a probar

Usted puede estar pensando, “¿Qué pasa con las pruebas? “.

Opinión: el desarrollo basado en pruebas es tonto. Discutir TDDtproger.ru

Hay toneladas de tutoriales de Django que comienzan así:

class SomeModelModelTest(TestCase):     def setUp(self):         SomeModel.objects.create(             name=fake.name(),             email=fake.email(),             phone=fake.phone_number(),             message=fake.text(),             source=fake.url()         )     def test_save_model(self):         saved_models = SomeModel.objects.count()         self.assertEqual(saved_models, 2)

No lo hagas así. No tiene sentido probar el modelo estándar de Django o probar el ORM de Django. Qué es exactamente lo que no se debe probar al crear una aplicación Django:

Código Django en línea (modelos, vistas);
Funciones integradas de Python.

¡No pruebes lo que ya ha sido probado! Entonces, ¿qué probar entonces?

Hemos agregado nuestro método a la plantilla de Django; pruébelo. Se agregó una vista estándar: pruébela. Pero, ¿cómo saber exactamente qué probar?

La Biblioteca de portadas te ayudará a averiguarlo. Instalarlo:

pip install coverage

Ahora, después de cada adición o cambio de código, ejecute coverage:

coverage run --source="." manage.py test

y crear un informe:

coverage html

Verá exactamente lo que necesita ser probado. Si prefiere ver el informe en la línea de comando, ejecute el comando:

coverage report

Serializadores de Django

La serialización es la conversión de un objeto de Python a otro formato. Después de la serialización, puede guardar el objeto en un archivo o enviarlo a través de la red.

Cómo evaluar la profesionalidad de un programador en 5 preguntas: los expertos responden tproger.ru

¿Por qué es necesaria la serialización? Un modelo de Django es una clase de Python. Para convertirlo en datos JSON, se necesita serialización.

Los serializadores también funcionan al revés: convierten JSON en objetos. Esto permite:

mostrar el modelo de Django en el navegador usando la conversión JSON;
realizar solicitudes CRUD (crear – leer – actualizar – eliminar) a la API en formato JSON.

En resumen, los serializadores de Django se pueden usar para realizar operaciones en los modelos de Django a través de una API.

Crear un nuevo archivo leads/serializers.py. serializador LeadSerializer contiene nuestro modelo y nuestros campos:

from rest_framework import serializers from .models import Lead  class LeadSerializer(serializers.ModelSerializer):     class Meta:         model = Lead         fields = ('id', 'name', 'email', 'message')

Creando una clase secundaria a partir de una clase serializers.ModelSerializer. ModelSerializer en Django es como ModelForm. Es útil cuando desea que el serializador coincida con el patrón.

Creación de vistas

Si ha trabajado con otros marcos antes, se sorprenderá de que Django no tenga controladores.

Marcos web: una introducción para Beginnerstproger.ru

Los controladores contienen la lógica para procesar solicitudes y devolver respuestas. La arquitectura MVC tradicional consta de un modelo (Model), una vista (View) y un controlador (Controller). Ejemplos de frameworks MVC: Rails (Ruby), Phoenix (Elixir), Laravel (PHP).

Django es un marco MVT. MVT es un modelo, una vista y un modelo (Plantilla). Hay muchos tipos de vistas en Django: vistas de funciones, vistas basadas en clases y vistas genéricas.

Utilice las funciones de visualización únicamente si la modificación de las vistas genéricas lleva más tiempo que la reescritura de la vista.

Usaremos representaciones genéricas. Nuestra sencilla aplicación sería:

devolver una selección de modelos;
crear nuevos objetos en la base de datos.

Usando la documentación, puede descubrir que hay una vista para devolver una selección y crear modelos: ListCreateAPIView. Esta vista contiene queryset y serializer_class.

queryset son los datos de muestra que devolverá la aplicación. En nuestro caso, todos los modelos. Lead. serializer_class es la clase de serializador para el modelo.

from .models import Lead from .serializers import LeadSerializer from rest_framework import generics  class LeadListCreate(generics.ListCreateAPIView):     queryset = Lead.objects.all()     serializer_class = LeadSerializer

Con tres líneas de código, creamos una vista para manejar las solicitudes GET y POST.

¿Qué más falta? Enrutamiento de URL. En otras palabras, necesitamos conectar URL y vistas.

Configuración de enrutamiento de URL

Necesitamos hacer solicitudes GET y POST para api/lead/ vista impulsada LeadListCreateque volverá y creará modelos.

Para configurar el enrutamiento de URL, edite el archivo django_react/urls.pyagregando la URL de la aplicación:

from django.urls import path, include  urlpatterns = [     path('', include('leads.urls')), ]

Así es como le decimos a Django que use las URL que están en la aplicación. leads.

Ahora crea un archivo leads/urls.py. Le conectaremos la representación. LeadListCreate y URL api/lead/:

from django.urls import path from . import views  urlpatterns = [     path('api/lead/', views.LeadListCreate.as_view() ), ]

Y finalmente, encienda rest_framework dentro INSTALLED_APPS. abrir django_react/settings.py y agrega la aplicación a INSTALLED_APPS:

# Application definition  INSTALLED_APPS = [     # omitted for brevity     'leads.apps.LeadsConfig',     'rest_framework' ]

Iniciemos el servidor Django:

python manage.py runserver

Vaya a la URL http://127.0.0.1:8000/api/lead/ y verá la API:

Tenga en cuenta que en producción, es mejor deshabilitar la capacidad de ver la API. Esto se puede hacer en la configuración:

REST_FRAMEWORK = {     'DEFAULT_RENDERER_CLASSES': (         'rest_framework.renderers.JSONRenderer',     ) }

Conectar Django y Reaccionar

Muchos desarrolladores se preguntan cómo conectar correctamente Django y React.

React: prácticas para ayudarte a convertirte en un desarrollador avanzado

¿Debe un enrutador React admitir el enrutamiento? ¿Necesito montar componentes de React en cada plantilla de Django?

La respuesta depende del caso.

Existen las siguientes formas de crear un proyecto en Django y React (son similares para casi todos los marcos web):

Reaccionar en una aplicación front-end nativa de Django. Cargue una plantilla HTML y deje que React administre la interfaz (dificultad: media).
Django REST como API independiente + React como SPA independiente (dificultad: alta, se requerirá autorización JWT).
Opción mixta: Reaccionar mini-aplicaciones en plantillas Django (dificultad: fácil, pero difícil de mantener).

Si es nuevo en Django REST y React, evite la opción 2. Elija la opción 1 en su lugar (React en una interfaz nativa de Django) si:

creas una aplicación que parece un sitio web;
habrá muchas acciones de usuario en la interfaz, se usa AJAX;
¿Está satisfecho con la autorización basada en sesiones?
realmente no te importan los problemas de SEO;
está satisfecho con el enrutador React.

Si mantiene React cerca de Django, será más fácil con un permiso. Será posible utilizar el sistema de autorización incorporado de Django para registrar e iniciar sesión de usuarios. Utilice una buena autenticación de sesión antigua y no se preocupe por los tokens y los JWT.

Seleccione la opción 3 (opción mixta: Reaccionar widgets en plantillas de Django) si:

el sitio no necesita usar mucho JavaScript;
El SEO es importante para usted y no puede usar Node.js para la representación del lado del servidor.

En este artículo, utilizaremos la opción 1.

Instalar React y Webpack

Vamos a crear una nueva aplicación Django para la interfaz:

django-admin startapp frontend

Verá una nueva carpeta llamada frontend en su estructura de carpetas:

(venv) your@prompt:~/Code/django-react$ tree -d -L 1 . ├── django_react ├── frontend ├── leads └── venv

Preparemos las carpetas para almacenar los componentes de React:

mkdir -p ./frontend/src/components

Y estático:

mkdir -p ./frontend/{static,templates}/frontend

Luego instala React, webpack y babel. Navegue a la carpeta frontend y cree un entorno:

cd ./frontend && npm init -y

Instale Webpack y la CLI de Webpack:

npm i webpack webpack-cli --save-dev

abrir package.json y escribir 2 guiones para producción y desarrollo:

"scripts": {   "dev": "webpack --mode development ./src/index.js --output ./static/frontend/main.js",   "build": "webpack --mode production ./src/index.js --output ./static/frontend/main.js" }

Guarde y cierre el archivo.

Instale babel para que el código sea compatible con navegadores más antiguos que no son compatibles con los últimos estándares de JavaScript:

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

Instalar reaccionar:

npm i react react-dom --save-dev

Configurar Babel (todavía en la carpeta frontend):

{     "presets": [         "@babel/preset-env", "@babel/preset-react"     ] }

Vamos a crear un archivo webpack.config.js para configurar el gestor de arranque babel:

module.exports = {   module: {     rules: [       {         test: /.js$/,         exclude: /node_modules/,         use: {           loader: "babel-loader"         }       }     ]   } };

Preparando una aplicación Django para la interfaz

Vamos a crear una vista en ./frontend/views.py:

from django.shortcuts import render   def index(request):     return render(request, 'frontend/index.html')

Vamos a crear un modelo en ./frontend/templates/frontend/index.html:

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <title>Django REST with React </head> <body> <div id="app">     <!-- React will load here --> </div> </body> {% load static %} <script src="https://web-cpv.ru/python/sozdaem-veb-prilojenie-s-bekendom-na-django-i-frontendom-na-react/{% static"frontend/main.js" %}"></script> </html>

Llamado en el modelo ./frontend/main.js – el archivo que generará el paquete web que contiene todo el código React.

Configuremos el enrutador Django: incluya la URL de la aplicación front-end en él. Editemos el archivo ./project/urls.py:

urlpatterns = [     path('', include('leads.urls')),     path('', include('frontend.urls')), ]

Vamos a crear un archivo ./frontend/urls.py:

from django.urls import path from . import views   urlpatterns = [     path('', views.index ), ]

Incluyamos la aplicación front-end en la lista de aplicaciones utilizadas en el archivo ./project/settings.py:

# Application definition  INSTALLED_APPS = [     'leads.apps.LeadsConfig',     'rest_framework',     'frontend', # enable the frontend app ]

Cuando navegue a http://127.0.0.1:8000/ solo verá una página en blanco por ahora (el servidor Django debe estar ejecutándose para que esto funcione).

Interfaz con reaccionar

Vamos a crear un componente React simple que mostrará nuestros datos. Si su base de datos está vacía, es hora de llenar la aplicación con datos.

Inicie el servidor Django y navegue hasta http://127.0.0.1:8000/api/lead/ para agregar contactos.

Vamos a crear un archivo ./frontend/src/components/App.js. Tendrá un componente React que solicita y devuelve datos.

import { render } from "react-dom";  class App extends Component {   constructor(props) {     super(props);     this.state = {       data: [],       loaded: false,       placeholder: "Loading"     };   }    componentDidMount() {     fetch("api/lead")       .then(response => {         if (response.status > 400) {           return this.setState(() => {             return { placeholder: "Something went wrong!" };           });         }         return response.json();       })       .then(data => {         this.setState(() => {           return {             data,             loaded: true           };         });       });   }    render() {     return (       <ul>         {this.state.data.map(contact => {           return (             <li key={contact.id}>               {contact.name} - {contact.email}             </li>           );         })}       </ul>     );   } }  export default App;  const container = document.getElementById("app"); render(<App />, container);

Tenga en cuenta que puede escribir el mismo componente como una función con un gancho useEffect.

Guarde y cierre el archivo. Ahora cree un punto de entrada para el paquete web – archivo ./frontend/src/index.js e importar el componente:

import App from "./components/App";

Ahora puede probar el resultado. Ejecutar paquete web:

npm run dev

Inicie el servidor Django:

python manage.py runserver

Vaya a http://127.0.0.1:8000/. Si ve el mensaje “Algo salió mal”, asegúrese de haber aplicado las migraciones y llenado la base de datos. Debería ver los datos representados por el componente React.