Cum să creați o aplicație simplă cu Django și React

Căutați să creați o aplicație web cu un backend puternic și un frontend dinamic? Împerecherea Django, un cadru Python, cu React, o bibliotecă JavaScript, este o modalitate excelentă de a realiza acest lucru. Django se ocupă de sarcinile de backend, cum ar fi gestionarea bazelor de date și crearea API-urilor, în timp ce React creează o interfață de utilizator interactivă și receptivă.

Pași cheie:

1. Configurați-vă mediul:- Instalați Python 3.x pentru Django și Node.js pentru React.

   • Utilizați medii virtuale pentru a gestiona dependențele Python.
   • Confirmați instalațiile cu python --version, node --version și npm --version.

2. Organizați-vă proiectul:- Creați foldere separate pentru backend-ul Django și frontend-ul React.

   • Utilizați django-admin startproject pentru configurarea backend-ului și npx create-react-app pentru inițializarea frontend-ului.

3. Construiți backend-ul:- Creați aplicații Django, definiți modele și generați migrări.

   • Utilizați Django REST Framework pentru a crea puncte finale API.
   • Configurați django-cors-headers pentru a permite comunicarea între frontend și backend.

4. Dezvoltați frontend-ul:- Utilizați componente React pentru a gestiona sarcinile și interacțiunile cu utilizatorii.

   • Instalați Axios pentru cererile API și integrați-l cu punctele finale Django.
   • Stilizați aplicația cu CSS pentru o interfață de utilizator curată.

5. Conectați și testați:- Rulați Django pe localhost:8000 și React pe localhost:3000.

   • Testați punctele finale API cu instrumente precum Postman sau direct în browser.
   • Asigurați-vă că setările CORS sunt adecvate pentru o comunicare fără probleme.

Această configurare vă permite să construiți eficient o aplicație full-stack cu o separare clară între backend și frontend. Urmați acești pași pentru a crea o aplicație web scalabilă și interactivă.

ProiectDjango și React pentru începători - Construiți o aplicație FullStack Notes

Cerințe de configurare și instalare

Înainte de a începe să vă construiți aplicația Django și React, este esențial să vă configurați mediul de dezvoltare cu instrumentele și dependențele necesare. Această bază vă va ajuta să creați, să integrați și să testați componentele Django și React fără probleme pe măsură ce continuați.

Cerințe de sistem și instrumente

Pentru a începe, mașina dvs. de dezvoltare va avea nevoie de Python 3.x pentru Django și Node.js pentru React. Mai exact, Django 5.0 necesită Python 3.x, în timp ce React funcționează cu Node.js versiunea 12 sau superioară.

Instalarea Python: Puteți descărca Python direct de pe site-ul său oficial sau puteți utiliza managerul de pachete al sistemului dumneavoastră. Pentru utilizatorii de macOS, Homebrew simplifică procedura cu brew install python. Utilizatorii Windows ar trebui să obțină programul de instalare de pe python.org, în timp ce utilizatorii Linux îl pot instala cu comenzi precum apt install python3 pe Ubuntu sau comenzi similare pentru alte distribuții.

Configurarea Node.js și npm: Node.js vine la pachet cu npm (Node Package Manager). Veți avea nevoie de versiunea npm 6 sau superioară, versiunea 7.5.4 fiind o alegere fiabilă. Descărcați Node.js de la nodejs.org, care va include automat npm.

Mediile virtuale Python: Utilizarea mediilor virtuale este esențială pentru gestionarea dependențelor specifice proiectului fără conflicte. Puteți utiliza modulul venv încorporat sau instrumente precum pipenv sau virtualenvwrapper pentru mai multe funcții. Dacă sunteți pe Windows, pachetul virtualenvwrapper-win oferă funcționalități similare.

Pentru a vă confirma instalațiile, executați aceste comenzi în terminal:

python --version node --version npm --version

Crearea structurii proiectului

O structură de proiect bine organizată este esențială pentru a vă păstra codul backend și frontend separat și ușor de gestionat. Începeți prin a crea un director principal pentru proiectul dvs:

mkdir django-react-app cd django-react-app

În interiorul acestui director, creați două foldere: unul pentru backend-ul Django și altul pentru frontend-ul React. Această separare vă permite să întrețineți și să implementați fiecare parte independent.

Configurați mediul virtual Python în directorul proiectului:

python -m venv venv

Activați mediul virtual:

• Pe macOS/Linux: source venv/bin/activate
• Pe Windows: venv\Scripts\activate

Acest pas asigură izolarea tuturor dependențelor Python pentru proiectul dumneavoastră.

Instalarea pachetelor necesare

Cu mediul pregătit, este timpul să instalați pachetele necesare atât pentru Django, cât și pentru React.

Pachete backend Django: În timp ce mediul dvs. virtual este activ, instalați Django și bibliotecile sale de suport utilizând pip:

pip install django pip install djangorestframework pip install django-cors-headers

• Django gestionează logica server-side, gestionarea bazelor de date și rutarea URL.
• Django REST Framework simplifică procesul de creare a API-urilor RESTful, facilitând crearea de puncte finale pentru frontend-ul React.
• Django-cors-headers permite Cross-Origin Resource Sharing (CORS), care este esențial pentru comunicarea dintre frontend-ul React (care rulează pe portul 3000) și backend-ul Django (care rulează pe portul 8000).

Configurarea frontend-ului React: Pentru a configura mediul React, utilizați instrumentul create-react-app. Această comandă inițializează un proiect React și instalează toate dependențele necesare:

npx create-react-app frontend

Aceasta va crea un nou proiect React într-un director frontend, complet cu pachete esențiale, instrumente de dezvoltare și scripturi de compilare.

Pachet suplimentar Frontend: După configurarea proiectului React, navigați în directorul frontend și instalați Axios, o bibliotecă pentru efectuarea de cereri HTTP către API-ul Django:

cd frontend npm install axios

În acest moment, mediul dvs. de dezvoltare este complet echipat cu Python 3.x, Django, Node.js, React și toate instrumentele necesare. Mediul virtual Python asigură izolarea dependențelor backend, în timp ce npm gestionează separat pachetele JavaScript. Acum sunteți gata să începeți să vă construiți aplicația full-stack!

Construirea backend-ului cu Django

Configurați un backend Django cu modele de baze de date, puncte finale API și integrare pentru un frontend React.

Crearea unui proiect și a unei aplicații Django

Începeți prin a crea un proiect Django, care include setări, configurații ale bazei de date și opțiuni specifice aplicației. În cadrul acestui proiect, veți construi o aplicație Django - un pachet Python conceput pentru sarcini specifice, cum ar fi gestionarea datelor sau a conținutului utilizatorilor.

Navigați în directorul rădăcină al proiectului (unde este configurat mediul dvs. virtual) și creați proiectul Django:

django-admin startproject backend .

Această comandă generează fișiere de proiect direct în directorul curent, evitând un folder suplimentar. Veți observa noi fișiere precum manage.py (pentru rularea comenzilor Django) și un director backend care conține fișiere precum settings.py, urls.py, asgi.py și wsgi.py.

Apoi, creați o aplicație pentru a gestiona o funcționalitate specifică. De exemplu, un sistem de gestionare a sarcinilor:

python manage.py startapp tasks

Aceasta creează un director tasks cu fișiere esențiale precum models.py, views.py, admin.py și un folder migrations. Asigurați-vă că evitați conflictele de denumire cu nume încorporate precum "django" sau "test".

Înregistrați aplicația în setările proiectului adăugând-o la lista INSTALLED_APPS din backend/settings.py:

INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', 'corsheaders', 'tasks', # Register your app ]

Configurarea modelelor și a serializatorilor

Definiți-vă structura de date cu ajutorul modelelor Django. De exemplu, un model Task simplu pentru aplicația de gestionare a sarcinilor poate fi adăugat în tasks/models.py:

from django.db import models class Task(models.Model): title = models.CharField(max_length=200) description = models.TextField(blank=True) completed = models.BooleanField(default=False) created_at = models.DateTimeField(auto_now_add=True) updated_at = models.DateTimeField(auto_now=True) class Meta: ordering = ['-created_at'] def __str__(self): return self.title

Acest model include câmpuri precum CharField pentru text scurt, TextField pentru conținut mai lung, BooleanField pentru valori true/false și DateTimeField pentru timestamps. Clasa Meta specifică opțiuni precum ordonarea implicită.

Aplicați modelul la baza dvs. de date prin rularea migrărilor:

python manage.py makemigrations tasks python manage.py migrate

Pentru a converti datele modelului în JSON, utilizați serializatoarele Django REST Framework. În tasks/serializers.py, definiți un serializator pentru modelul Task:

from rest_framework import serializers from .models import Task class TaskSerializer(serializers.ModelSerializer): class Meta: model = Task fields = ['id', 'title', 'description', 'completed', 'created_at', 'updated_at'] read_only_fields = ['created_at', 'updated_at']

ModelSerializer generează automat câmpuri și metode pe baza modelului. Listarea explicită a câmpurilor vă asigură că nu expuneți neintenționat date sensibile.

Construirea punctelor finale API

Django REST Framework simplifică crearea API-urilor. Pentru operațiunile CRUD standard, utilizați ViewSets cu routere pentru o structură curată, RESTful.

În tasks/views.py, creați vizualizări API:

from rest_framework import viewsets from rest_framework.permissions import AllowAny from .models import Task from .serializers import TaskSerializer class TaskViewSet(viewsets.ModelViewSet): queryset = Task.objects.all() serializer_class = TaskSerializer permission_classes = [AllowAny] # Numai pentru dezvoltare

ModelViewSet gestionează automat listarea, crearea, recuperarea, actualizarea și ștergerea sarcinilor.

Configurați rutarea URL în tasks/urls.py:

from django.urls import path, include from rest_framework.routers import DefaultRouter from .views import TaskViewSet router = DefaultRouter() router.register(r'tasks', TaskViewSet) urlpatterns = [ path('api/', include(router.urls)), ]

Includeți aceste URL-uri în fișierul principal backend/urls.py:

from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('tasks.urls')), ]

Configurarea antetelor CORS

Pentru a permite frontend-ului React (care rulează pe portul 3000) să comunice cu backend-ul Django (pe portul 8000), configurați Cross-Origin Resource Sharing (CORS). Fără aceasta, browserele blochează solicitările cross-origin din motive de securitate.

Actualizați backend/settings.py pentru a include configurația CORS:

MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # Adăugați acest lucru la început 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ] # Setări CORS pentru dezvoltare CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", # Server de dezvoltare React "http://127.0.0.1:3000", ] CORS_ALLOW_CREDENTIALS = True

Pentru testarea rapidă, puteți utiliza CORS_ALLOW_ALL_ORIGINS = True, dar specificarea originilor permise este mai sigură.

Testarea punctelor finale API

Înainte de a integra frontend-ul React, testați punctele finale API pentru a vă asigura că funcționează conform așteptărilor. Porniți serverul de dezvoltare Django:

python manage.py runserver

Accesați API-ul la http://127.0.0.1:8000/api/tasks/. Utilizați API-ul navigabil pentru a testa operațiuni precum cererile GET și POST.

Alternativ, testați cu cURL sau Postman:

# Testați solicitarea GET pentru a lista sarcinile curl -X GET http://127.0.0.1:8000/api/tasks/ # Testați solicitarea POST pentru a crea o sarcină curl -X POST http://127.0.0.1:8000/api/tasks/ \ -H "Content-Type: application/json" \ -d '{"title": "Test Task", "description": "Aceasta este o sarcină de testare"}'

Pentru testarea automată, adăugați cazuri de testare în tasks/tests.py:

from rest_framework.test import APITestCase from rest_framework import status from .models import Task class TaskAPITestCase(APITestCase): def test_create_task(self): # Add your assertions and test logic here pass

Cu backend-ul instalat, sunteți gata să îl conectați la frontend-ul React.

Construirea front-end-ului cu React

Pentru a crea o interfață atractivă pentru backend-ul Django, veți utiliza React pentru a gestiona interacțiunile utilizatorului - de la vizualizarea sarcinilor la adăugarea unora noi.

Configurarea unui proiect React

Începeți prin a vă configura frontend-ul React utilizând Create React App. Navigați la directorul rădăcină al proiectului (unde se află backend-ul Django) și executați

npx create-react-app frontend cd frontend

Această comandă configurează o aplicație React cu fișiere esențiale precum package.json, src/App.js și public/index.html. De asemenea, include instrumente precum webpack pentru împachetare, Babel pentru compilarea JavaScript și un server de dezvoltare pentru testare.

Apoi, instalați Axios pentru gestionarea cererilor HTTP către API-ul Django:

npm install axios

Axios simplifică apelurile API prin gestionarea analizei JSON și oferă o mai bună gestionare a erorilor decât funcția încorporată fetch(). De asemenea, suportă caracteristici precum interceptorii de cereri și răspunsuri.

Structura folderului dvs. ar trebui să arate acum astfel:

project-root/ ├── backend/ │ ├── manage.py │ ├── backend/ │ └── tasks/ └── frontend/ ├── package.json ├── public/ └── src/

Pentru a confirma că totul funcționează, porniți serverul de dezvoltare React:

npm start

Acest lucru lansează aplicația la http://localhost:3000, afișând pagina de întâmpinare React implicită. Mențineți acest server în funcțiune în timpul dezvoltării - acesta se reîncarcă automat atunci când faceți modificări.

Crearea componentelor React

Să creăm o componentă TaskList pentru a afișa sarcinile preluate din API-ul Django. Adăugați următoarele la src/components/TaskList.js:

import React from 'react'; const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => { return ( <div className="task-list"> <h2>Your Tasks</h2> {tasks.length === 0 ? ( <p>Nu există sarcini disponibile. Creați-vă prima sarcină!</p> ) : ( <ul> {tasks.map((sarcină) => ( <li key={task.id} className={`task-item ${task.completed ? 'completed' : ''}`}> <div className="task-content"> <h3>{task.title}</h3> <p>{task.description}</p> <small>Created: {new Date(task.created_at).toLocaleDateString()}</small> </div> <div className="task-actions"> <button onClick={() => onToggleComplete(task.id, ! task.completed)} className={task.completed ? 'btn-undo' : 'btn-complete'} > {task.completed ? 'Undo' : 'Complete'} </button> <button onClick={() => onDeleteTask(task.id)} className="btn-delete" > Delete </button> </div> </li> ))} </ul> )} </div> ); }; export default TaskList;

Apoi, creați o componentă TaskForm pentru adăugarea de sarcini noi. Adăugați-o la src/components/TaskForm.js:

import React, { useState } from 'react'; const TaskForm = ({ { onAddTask }) => { const [title, setTitle] = useState(''); const [description, setDescription] = useState(''); const [isSubmitting, setIsSubmitting] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); if (!title.trim()) return; setIsSubmitting(true); try { await onAddTask({ title: title.trim(), description: description.trim() }); setTitle(''); setDescription(''); } catch (error) { console.error('Error adding task:', error); } finally { setIsSubmitting(false); } }; return ( <form onSubmit={handleSubmit} className="task-form"> <h2>Add New Task</h2> <div className="form-group"> <input type="text" placeholder="Task title" value={title} onChange={(e) => setTitle(e.țintă.value)} disabled={isSubmitting} required /> </div> <div className="form-group"> <textarea placeholder="Task description (optional)" value={description} onChange={(e) => setDescription(e.target.value)} disabled={isSubmitting} rows="3" /> </div> <button type="submit" disabled={isSubmitting || !title.trim()}> {isSubmitting ? 'Adding...' : 'Add Task'} </button> </form> ); }; export default TaskForm;

Pentru câteva stiluri de bază, creați un fișier src/App.css și adăugați:

.task-list { margin: 20px 0; } .task-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; border: 1px solid #ddd; margin-bottom: 10px; border-radius: 5px; } .task-item.completed { background-color: #f0f8f0; text-decoration: line-through; opacity: 0.7; } .task-form { background: #f9f9f9; padding: 20px; border-radius: 5px; margin-bottom: 20px; } .form-group { margin-bottom: 15px; } .form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 3px; } .btn-complete, .btn-undo, .btn-delete { margin-left: 10px; padding: 5px 10px; border: none; border-radius: 3px; cursor: pointer; } .btn-complete { background: #28a745; color: white; } .btn-undo { background: #ffc107; culoare: negru; } .btn-delete { background: #dc3545; culoare: alb; }

Gestionarea stării și integrarea API

Cârligele React precum useState și useEffect facilitează gestionarea stării și interacțiunea cu backend-ul Django. Pentru a centraliza apelurile API, creați un fișier de servicii src/services/api.js:

import axios from 'axios'; const API_BASE_URL = 'http://127.0.0.1:8000/api'; const api = axios.create({ baseURL: API_BASE_URL, headers: { 'Content-Type': 'application/json', }, }); export const taskAPI = { getTasks: () => api.get('/tasks/'), createTask: (taskData) => api.post('/tasks/', taskData), updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData), deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`), }; export default api;

În cele din urmă, integrați totul în src/App.js:

import React, { useState, useEffect } from 'react'; import TaskList from './components/TaskList'; import TaskForm from './components/TaskForm'; import { taskAPI } from './services/api'; import './App.css'; function App() { const [tasks, setTasks] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetchTasks(); }, []); const fetchTasks = async () => { try { setLoading(true); const response = await taskAPI.getTasks(); setTasks(response.data); } catch (err) { setError(err); } finally { setLoading(false); } }; // Metode suplimentare pentru adăugarea, actualizarea și ștergerea sarcinilor ar merge aici }

Cu această configurație, frontend-ul React este gata să gestioneze sarcini în mod interactiv, comunicând în același timp fără probleme cu backend-ul Django.

Conectarea Django și React

Acum că backend-ul și frontend-ul dvs. sunt funcționale, următorul pas este să asigurați o comunicare fără probleme între ele. Acest lucru implică configurarea punctelor finale API, gestionarea cererilor și soluționarea oricăror probleme de integrare.

Configurarea URL-urilor API în React

Aplicația React trebuie să știe unde să localizeze punctele finale ale API Django. Pentru a realiza acest lucru, actualizați fișierul src/services/api.js cu configurații specifice mediului:

import axios from 'axios'; // Determinarea URL-ului de bază al API pe baza mediului const getApiBaseUrl = () => { if (process.env.NODE_ENV === 'production') { return process.env.REACT_APP_API_URL || 'https://your-production-domain.com/api'; } return 'http://127.0.0.1:8000/api'; }; const API_BASE_URL = getApiBaseUrl(); const api = axios.create({ baseURL: API_BASE_URL, headers: { 'Content-Type': 'application/json', }, timeout: 10000, // 10 second timeout }); export const taskAPI = { getTasks: () => api.get('/tasks/'), createTask: (taskData) => api.post('/tasks/', taskData), updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData), deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`), }; export default api;

Pentru producție, adăugați un fișier .env la rădăcina proiectului React cu următorul conținut:

REACT_APP_API_URL=https://your-production-domain.com/api

Această configurare asigură faptul că aplicația React poate interacționa fără probleme cu backend-ul Django, indiferent dacă vă aflați într-un mediu de dezvoltare local sau în producție. Cu punctele finale API configurate, sunteți gata să preluați și să manipulați datele din backend.

Preluarea datelor din backend

Odată ce configurația API este stabilită, puteți efectua operațiuni CRUD pentru a gestiona datele între React și Django. Actualizați src/App.js pentru a gestiona aceste operațiuni:

import React, { useState, useEffect } from 'react'; import TaskList from './components/TaskList'; import TaskForm from './components/TaskForm'; import { taskAPI } from './services/api'; import './App.css'; function App() { const [tasks, setTasks] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetchTasks(); }, []); const fetchTasks = async () => { try { setLoading(true); setError(null); const response = await taskAPI.getTasks(); setTasks(response.data); } catch (err) { setError('Failed to fetch tasks. Please check your connection.'); console.error('Error fetching tasks:', err); } finally { setLoading(false); } } }; const handleAddTask = async (taskData) => { try { const response = await taskAPI.createTask(taskData); setTasks(prevTasks => [...prevTasks, response.data]); } catch (err) { console.error('Error adding task:', err); throw err; // Re-throw to let TaskForm handle the error } }; const handleToggleComplete = async (taskId, completed) => { try { const taskToUpdate = tasks.find(task => task.id === taskId); const updatedTaskData = { ...taskToUpdate, completed }; const response = await taskAPI.updateTask(taskId, updatedTaskData); setTasks(prevTasks => prevTasks.map(task => task.id === taskId ? response.data : task ); } catch (err) { console.error('Error updating task:', err); } }; const handleDeleteTask = async (taskId) => { if (!window.confirm('Sunteți sigur că doriți să ștergeți această sarcină?')) { return; } try { await taskAPI.deleteTask(taskId); setTasks(prevTasks => prevTasks.filter(task => task.id ! == taskId)); } catch (err) { console.error('Error deleting task:', err); } } }; if (loading) { return <div className="loading">Loading tasks...</div>; } return ( <div className="App"> <header className="App-header"> <h1>Task Manager</h1> </header> <main className="container"> {error && <div className="error-message">{error}</div>} <TaskForm onAddTask={handleAddTask} /> <TaskList tasks={tasks} onToggleComplete={handleToggleComplete} onDeleteTask={handleDeleteTask} /> </main> </div> ); } export default App;

Acest cod gestionează crearea, actualizarea, ștergerea și gestionarea erorilor sarcinilor. Interfața de utilizator se actualizează imediat pentru o experiență de utilizare fără probleme, iar erorile sunt gestionate elegant prin revenirea asupra modificărilor sau afișarea mesajelor corespunzătoare.

Testarea și depanarea conexiunii

Unul dintre cele mai frecvente obstacole la conectarea Django și React este gestionarea erorilor CORS (Cross-Origin Resource Sharing). Acestea apar deoarece browserele blochează solicitările între origini diferite din motive de securitate. În timpul dezvoltării, React rulează de obicei pe localhost:3000, în timp ce Django operează pe localhost:8000, creând un scenariu de origine încrucișată.

Pentru a rezolva problemele CORS, asigurați-vă că ați configurat anteturile CORS în setările Django, așa cum este descris în secțiunea "Configurarea anteturilor CORS". După efectuarea modificărilor, reporniți serverul Django pentru a le aplica.

Iată câteva erori frecvente de solicitare API și soluțiile lor:

• HTTP 400 (solicitare greșită): Aceasta înseamnă de obicei că unele date necesare lipsesc sau sunt malformate în sarcina utilă a solicitării. De exemplu, în noiembrie 2023, FintanMi a întâmpinat o eroare 400 la crearea unei comunități într-un proiect Django REST Framework și React, deoarece câmpul owner lipsea din cerere. Verificați întotdeauna de două ori dacă frontend-ul dvs. trimite toate câmpurile obligatorii așteptate de modelele Django.
• HTTP 405 (Metodă nepermisă): Aceasta apare atunci când punctul final API nu acceptă metoda HTTP utilizată. De exemplu, FintanMi a raportat o eroare 405 atunci când a încercat să elimine o postare, care a fost rezolvată prin actualizarea vizualizării Django de la generics.RetrieveUpdateAPIView la generics.RetrieveUpdateDestroyAPIView pentru a include suport pentru cererile DELETE.

Rularea și testarea aplicației

Cu backend-ul Django și frontend-ul React conectate, este timpul să lansați ambele servere de dezvoltare și să testați aplicația. Aceasta implică rularea simultană a două servere și asigurarea faptului că totul funcționează fără probleme.

Pornirea serverelor de dezvoltare

Pentru a rula aplicația Django-React, veți avea nevoie de două ferestre de terminal - una pentru fiecare server. Această configurare permite backend-ului și frontend-ului să funcționeze independent, comunicând în același timp prin apeluri API.

Pornirea serverului backend Django:

1. Deschideți prima fereastră de terminal și navigați la directorul rădăcină al proiectului Django.

2. Activați mediul virtual Python:

   source venv/bin/activate
   

3. Porniți serverul de dezvoltare Django:

   python manage.py runserver
   

   Serverul va fi disponibil la adresa http://127.0.0.1:8000/.

Pornirea serverului React Frontend:

1. Deschideți o a doua fereastră de terminal și navigați la directorul proiectului React:

   cd frontend
   

2. Lansați serverul de dezvoltare React:

   npm start
   

   Aceasta va deschide automat o fereastră de browser la http://localhost:3000/.

Odată ce ambele servere sunt în funcțiune, puteți începe să testați funcționalitatea aplicației dvs.

Testarea funcționalității complete a aplicației

Odată ce serverele sunt funcționale, iar CORS și punctele finale API sunt configurate corespunzător, este timpul să validați fluxul de date între frontend și backend.

Verificarea API backend:

• Testați direct punctele finale ale API Django vizitând:

  http://localhost:8000/api/tasks
  

  Aceasta ar trebui să afișeze interfața API navigabilă a Django REST Framework, în care puteți efectua operațiuni CREATE și READ.

• Accesați interfața de administrare Django la adresa:

  http://localhost:8000/admin
  

  Conectați-vă cu acreditările de superutilizator pentru a crea, edita sau șterge sarcini. De asemenea, puteți testa operațiunile UPDATE și DELETE accesând:

  http://localhost:8000/api/tasks/{id}
  

Testarea integrării Frontend-Backend:

• Deschideți aplicația React la http://localhost:3000 și confirmați că se încarcă corect, afișând sarcinile din backend-ul Django.
• Testați fiecare operațiune CRUD prin interfața React:- Adăugați o sarcină nouă și verificați dacă aceasta apare atât în interfața React, cât și în backend.
  • Modificați o sarcină existentă și asigurați-vă că modificările sunt salvate.
  • Ștergeți o sarcină și verificați dacă aceasta este eliminată atât din frontend, cât și din baza de date.

Dacă aplicația dvs. include filtre sau alte caracteristici, testați-le temeinic pentru a confirma că sarcinile sunt afișate conform așteptărilor.

Rezolvarea problemelor comune

Dacă întâmpinați probleme în timpul testării, iată câteva soluții comune pe care să le încercați.

Erori de conectare API:

• Asigurați-vă că ambele servere rulează pe porturile respective: Django la http://localhost:8000 și React la http://localhost:3000.

• Utilizați instrumentele de dezvoltare ale browserului (fila rețea) pentru a identifica codurile de stare HTTP precum 404 sau 500.

• Verificați setarea proxy în fișierul package.json al proiectului React:

  "proxy": "http://localhost:8000"
  

  Dacă faceți modificări, reporniți serverul React.

Probleme de pornire a serverului:

• Dacă serverul Django nu pornește, verificați dacă lipsesc migrări:

  python manage.py makemigrations python manage.py migrate
  

• Pentru problemele serverului React, încercați să reinstalați dependențele:

  npm install
  

Probleme de flux de date:

• Utilizați instrumentele de dezvoltare ale browserului pentru a inspecta solicitările de rețea și erorile din consolă.
• Adăugați instrucțiuni de depanare, precum console.log() în React sau instrucțiuni de tipărire în vizualizările Django, pentru a urmări fluxul de date.
• Verificați de două ori dacă URL-urile API din aplicația React corespund exact modelelor URL Django, inclusiv slash-urile finale (de exemplu, /api/tasks/).

Rezumat și pași următori

Ați creat o aplicație web care combină Django și React, oferindu-vă o introducere solidă în dezvoltarea full-stack. Acest proiect evidențiază concepte esențiale precum separarea backend-ului de frontend, efectuarea de operații CRUD și gestionarea cererilor cross-origin utilizând setările CORS. Pe parcurs, ați lucrat cu Django REST Framework pentru a construi API-uri și ați folosit cârlige React pentru gestionarea stării - abilități care permit o integrare ușoară între aceste două instrumente puternice.

Ducerea aplicației dvs. la nivelul următor

Există o mulțime de posibilități de extindere a funcționalității aplicației dvs. De exemplu, puteți adăuga autentificarea JWT utilizând Django REST Framework pentru a securiza datele utilizatorilor și accesul la API. Acest lucru v-ar permite să oferiți caracteristici specifice utilizatorului și experiențe personalizate.

Dacă aplicația dvs. are nevoie de actualizări în timp real, luați în considerare utilizarea Django Channels pentru a activa suportul WebSocket. Acest lucru este perfect pentru caracteristici precum tablouri de bord live, sisteme de chat sau notificări, transformând aplicația dvs. într-o platformă mai dinamică și mai interactivă.

Pe măsură ce aplicația dvs. crește, vizualizarea avansată a datelor devine importantă. Prin combinarea capacităților de redare ale React cu preluarea eficientă a datelor din backend, veți putea gestiona și afișa eficient seturi de date complexe.

Pregătirea pentru producție

Atunci când vă pregătiți aplicația pentru producție, concentrați-vă pe implementare, securitate și performanță. În timp ce configurația actuală este excelentă pentru dezvoltarea locală, mediile de producție necesită pași suplimentari. Acestea includ configurarea variabilelor de mediu, optimizarea bazei de date și implementarea unor mecanisme puternice de gestionare a erorilor.

Aceste îmbunătățiri se bazează pe competențele pe care le-ați dezvoltat deja - cum ar fi proiectarea API, arhitectura bazată pe componente și integrarea completă. Prin stăpânirea acestor tehnici avansate, veți fi bine echipat pentru a aborda proiecte la nivel de întreprindere și pentru a continua să vă dezvoltați ca dezvoltator web.

Întrebări frecvente

Care sunt avantajele utilizării Django pentru backend și React pentru frontend în construirea unei aplicații web?

Utilizarea Django pentru backend și React pentru frontend creează o combinație puternică pentru dezvoltarea de aplicații web moderne. Django oferă un cadru solid dotat cu instrumente care simplifică dezvoltarea backend, în timp ce React strălucește în crearea de interfețe utilizator dinamice și interactive.

Această combinație promovează o separare clară a responsabilităților, ceea ce ajută la menținerea bazei de cod organizată și mai ușor de extins în timp. Structura bazată pe componente a React încurajează reutilizarea elementelor UI, iar cadrul REST al Django simplifică procesul de creare a API-urilor, asigurând o comunicare fluentă între frontend și backend. Împreună, acestea oferă o abordare rapidă, eficientă și centrată pe utilizator pentru dezvoltarea aplicațiilor.

Cum rezolv problemele CORS atunci când conectez un frontend React la un backend Django?

Pentru a rezolva problemele CORS între un frontend React și un backend Django, pachetul django-cors-headers este o soluție utilă. Mai întâi, instalați-l utilizând pip. Apoi, în fișierul settings.py, adăugați "corsheaders" la lista INSTALLED_APPS. După aceea, includeți "corsheaders.middleware.CorsMiddleware" chiar în partea de sus a listei MIDDLEWARE pentru a asigura ordinea corectă de execuție a middleware-ului.

În timpul dezvoltării, puteți simplifica lucrurile prin setarea CORS_ORIGIN_ALLOW_ALL = True în settings.py. Acest lucru permite cereri de la orice origine. Cu toate acestea, într-un mediu de producție, este mult mai sigur să definiți domenii de încredere specifice utilizând setarea CORS_ALLOWED_ORIGINS. Această abordare ajută la menținerea unei securități mai stricte.

Cu această configurație, aplicația React poate interacționa fără probleme cu API-urile Django, respectând în același timp cerințele CORS.

Cum pot să-mi pregătesc aplicația Django și React pentru implementarea în producție?

Pentru a vă pregăti aplicația Django și React pentru producție, începeți prin a vă ajusta setările Django pentru o configurare sigură. Aceasta include setarea DEBUG la False și specificarea ALLOWED_HOSTS pentru a controla domeniile care vă pot accesa aplicația. Aceste modificări sunt esențiale pentru protejarea aplicației dvs. într-un mediu real.

Apoi, selectați o platformă de găzduire fiabilă pentru backend-ul Django și fișierele statice. Asigurați-vă că infrastructura dvs. este construită pentru a face față traficului și cererilor la nivel de producție. Pentru frontend-ul React, utilizați instrumentele de construcție adecvate pentru a genera o construcție optimizată pentru producție.

Odată ce aplicația React este gata, configurați un server web precum Nginx pentru a servi atât frontend-ul React, cât și backend-ul Django. Configurarea corectă a serverului asigură rularea eficientă a aplicației dvs. și oferă utilizatorilor o experiență fără cusur.

Înainte de a intra în funcțiune, testați-vă temeinic aplicația în mediul de producție. Acest pas ajută la identificarea și rezolvarea oricăror probleme, asigurând funcționarea fiabilă a aplicației odată lansată.