Cum se creează o aplicație simplă cu Django și React

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

Doriți să creați o aplicație web cu un backend puternic și un frontend dinamic? Combinarea Django, un framework 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 receptivă și interactivă.

Pași cheie:

1. Configurați-vă mediul de lucru:
   • Instalați Python 3.x pentru Django și Node.js pentru React.
   • Folosește medii virtuale pentru a gestiona dependențele Python.
   • Verificați instalările 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 migrații.
   • 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 componentele React pentru a gestiona sarcinile și interacțiunile utilizatorilor.
   • Instalați Axios pentru cererile API și integrați-l cu punctele finale Django.
   • Personalizați aplicația cu CSS pentru o interfață de utilizator curată.
5. Conectare și testare:
   • 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 corecte pentru o comunicare fără probleme.

Această configurare vă permite să creați în mod 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ă.

Proiect Django și React pentru începători – Creați o aplicație FullStack pentru notițe

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 avansați.

Cerințe de sistem și instrumente

Pentru a începe, computerul dvs. de dezvoltare va avea nevoie de Python 3.x pentru Django și de 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 o versiune ulterioară.

Instalarea Python: Puteți descărca Python direct de pe site-ul său oficial sau puteți folosi managerul de pachete al sistemului. Pentru utilizatorii de macOS, Homebrew simplifică procesul cu brew install python. Utilizatorii de Windows ar trebui să descarce programul de instalare de pe python.org, în timp ce utilizatorii de 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 npm versiunea 6 sau o versiune mai recentă, versiunea 7.5.4 fiind o alegere fiabilă. Descărcați Node.js de pe 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 folosi modulul încorporat venv sau instrumente precum pipenv sau virtualenvwrapper pentru mai multe funcționalități. Dacă utilizați Windows, pachetul virtualenvwrapper-win oferă funcționalități similare.

Pentru a verifica dacă instalările au fost efectuate corect, executați următoarele comenzi în terminal:

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

Crearea structurii proiectului

O structură de proiect bine organizată este esențială pentru a menține 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 în mod 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 dvs.

Instalarea pachetelor necesare

Odată ce mediul dvs. este pregătit, este momentul să instalați pachetele necesare atât pentru Django, cât și pentru React.

Pachete backend Django: În timp ce mediul virtual este activ, instalați Django și bibliotecile sale de suport folosind pip:

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

• Django se ocupă de logica de pe partea de server, de gestionarea bazelor de date și de rutarea URL-urilor.
• Django REST Framework simplifică procesul de creare a API-urilor RESTful, facilitând crearea de endpoints pentru frontend-ul React.
• Django-cors-headers activează 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 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 frontend , complet cu pachetele esențiale, instrumentele de dezvoltare și scripturile de compilare.

Pachet suplimentar pentru frontend: După configurarea proiectului React, navigați în directorul frontend și instalați Axios, o bibliotecă pentru efectuarea de solicitări HTTP către API-ul dvs. 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-ului, în timp ce npm gestionează separat pachetele JavaScript. Acum sunteți gata să începeți construirea aplicației dvs. 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 utilizatorilor sau a conținutului.

Accesați directorul rădăcină al proiectului (unde este configurat mediul virtual) și creați proiectul Django:

django-admin startproject backend .

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

Apoi, creați o aplicație care să gestioneze funcționalități specifice. De exemplu, un sistem de gestionare a sarcinilor:

python manage.py startapp tasks

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

Înregistrați aplicația în setările proiectului dvs. adăugând-o la INSTALLED_APPS lista 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 structura datelor cu ajutorul modelelor Django. De exemplu, un Task model 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 de tip adevărat/fals și DateTimeField pentru marcaje de timp. Clasa Meta clasă specifică opțiuni precum ordonarea implicită.

Aplicați modelul la baza de date prin rularea migrațiilor:

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 Task model:

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']

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

Crearea punctelor finale API

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

Î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]  # For development only

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

Configurați rutarea URL-urilor î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 anteturilor 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ă cererile între origini din motive de securitate.

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

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # Add this at the top
    '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',
]

# CORS settings for development
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # React development server
    "http://127.0.0.1:3000",
]

CORS_ALLOW_CREDENTIALS = True

Pentru testare 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 de capăt 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:

# Test GET request to list tasks
curl -X GET http://127.0.0.1:8000/api/tasks/

# Test POST request to create a task
curl -X POST http://127.0.0.1:8000/api/tasks/ \
  -H "Content-Type: application/json" \
  -d '{"title": "Test Task", "description": "This is a test task"}'

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

Odată ce backend-ul este gata, sunteți pregătiți să îl conectați la frontend-ul React.

Construirea frontend-ului cu React

Pentru a crea o interfață atractivă pentru backend-ul tău Django, vei folosi React pentru a gestiona interacțiunile utilizatorilor – de la vizualizarea sarcinilor până la adăugarea unor sarcini noi.

Configurarea unui proiect React

Începeți prin a configura frontend-ul React folosind Create React App. Navigați la directorul rădăcină al proiectului (unde se află backend-ul Django) și rulaț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 gruparea fișierelor, Babel pentru compilarea JavaScript și un server de dezvoltare pentru testare.

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

npm install axios

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

Structura folderelor ar trebui să arate acum astfel:

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

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

npm start

Aceasta lansează aplicația la adresa http://localhost:3000, afișând pagina de bun venit implicită a React. Menține acest server în funcțiune pe durata dezvoltării — se reîncarcă automat atunci când faci modificări.

Crearea componentelor React

Să creăm o TaskList componentă pentru a afișa sarcinile preluate din API-ul tău Django. Adaugă următorul cod în 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>No tasks available. Create your first task!</p>
      ) : (
        <ul>
          {tasks.map((task) => (
            <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 TaskForm componentă pentru adăugarea de sarcini noi. Adăugați acest cod în 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.target.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 un stil de bază, creați un src/App.css fișier ș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; color: black; }
.btn-delete { background: #dc3545; color: white; }

Gestionarea stării și integrarea API-ului

Hook-uri 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 serviciu 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 final, 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);
    }
  };

  // Additional methods for adding, updating, and deleting tasks would go here
}

Cu această configurare, frontend-ul tău React este pregătit să gestioneze sarcini în mod interactiv, comunicând în același timp fără probleme cu backend-ul tău Django.

Conectarea Django și React

Acum că backend-ul și frontend-ul sunt operaționale, următorul pas este să asigurați o comunicare fluentă între ele. Acest lucru implică configurarea punctelor finale API, gestionarea cererilor și rezolvarea eventualelor probleme de integrare.

Configurarea adreselor URL API în React

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

import axios from 'axios';

// Determine API base URL based on environment
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 mediul de producție, adăugați un .env fișier în directorul rădăcină al proiectului React cu următorul conținut:

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

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

Preluarea datelor din backend

Odată ce configurația API-ului 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('Are you sure you want to delete this task?')) {
      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 și ștergerea sarcinilor, precum și gestionarea erorilor. Interfața utilizatorului se actualizează imediat pentru o experiență fluidă, iar erorile sunt gestionate cu eleganță prin anularea modificărilor sau afișarea mesajelor corespunzătoare.

Testarea și depanarea conexiunii

Una dintre cele mai frecvente dificultăți la conectarea Django și React este gestionarea erorilor CORS (Cross-Origin Resource Sharing). Acestea apar deoarece browserele blochează cererile între origini diferite din motive de securitate. În timpul dezvoltării, React rulează de obicei pe localhost:3000, în timp ce Django funcționează pe localhost:8000, creând astfel un scenariu de tip „cross-origin”.

Pentru a rezolva problemele legate de 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 comune ale cererilor API și soluțiile acestora:

• HTTP 400 (Bad Request): Aceasta înseamnă, de obicei, că unele date obligatorii lipsesc sau sunt incorecte în conținutul cererii. 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 câmpul lipsea din cerere. Verificați întotdeauna cu atenție 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 al API-ului nu acceptă metoda HTTP utilizată. De exemplu, FintanMi a semnalat o eroare 405 la încercarea de a șterge o postare, problemă care a fost rezolvată prin actualizarea vizualizării Django de la generics.RetrieveUpdateAPIView la generics.RetrieveUpdateDestroyAPIView pentru a include suportul pentru DELETE solicitări.

Rularea și testarea aplicației

Odată ce backend-ul Django și frontend-ul React sunt conectate, este momentul să porniți ambele servere de dezvoltare și să testați aplicația. Acest lucru implică rularea simultană a două servere și asigurarea faptului că totul funcționează fără probleme împreună.

Pornirea serverelor de dezvoltare

Pentru a rula aplicația Django-React, veți avea nevoie de două ferestre de terminal – câte una pentru fiecare server. Această configurație 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 frontend React:

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

   cd frontend
   

2. Porniți serverul de dezvoltare React:

   npm start
   

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

Odată ce ambele servere rulează, puteți începe testarea funcționalității aplicației dvs.

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

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

Verificarea API-ului backend:

• Testați direct punctele finale ale API-ului Django accesând:

  http://localhost:8000/api/tasks
  

  Ar trebui să se afișeze interfața API navigabilă a Django REST Framework, unde puteți efectua operațiuni CREATE și READ.

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

  http://localhost:8000/admin
  

  Autentificați-vă cu datele de autentificare 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 asigurați-vă 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.
  • Editaț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 funcționalități, testați-le temeinic pentru a vă asigura că sarcinile sunt afișate conform așteptărilor.

Remedierea problemelor frecvente

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

Erori de conexiune la 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, cum ar fi 404 sau 500.

• Verificați setarea proxy setarea din fișierul package.json :

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

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

Probleme la pornirea serverului:

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

  python manage.py makemigrations
  python manage.py migrate
  

• Pentru problemele legate de serverul React, încercați să reinstalați dependențele:

  npm install
  

Probleme cu fluxul de date:

• Utilizați instrumentele de dezvoltare ale browserului pentru a inspecta cererile de rețea și erorile din consolă.
• Adăugați instrucțiuni de depanare, cum ar fi console.log() în React sau print în vizualizările Django, pentru a urmări fluxul de date.
• Verificați încă o dată dacă adresele URL ale API-ului din aplicația dvs. React corespund exact cu modelele de adrese URL din Django, inclusiv barele oblice 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 operațiunilor CRUD și gestionarea cererilor cross-origin folosind setările CORS. Pe parcurs, ați lucrat cu Django REST Framework pentru a crea API-uri și ați folosit hook-uri React pentru gestionarea stării – abilități care permit o integrare fluidă între aceste două instrumente puternice.

Duceți-vă aplicația la nivelul următor

Există mult spațiu de manevră pentru a extinde funcționalitatea aplicației tale. De exemplu, poți adăuga autentificarea JWT folosind Django REST Framework pentru a securiza datele utilizatorilor și accesul la API. Acest lucru ți-ar permite să oferi funcționalități specifice utilizatorilor și experiențe personalizate.

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

Pe măsură ce aplicația dvs. se dezvoltă, vizualizarea avansată a datelor devine importantă. Combinând capacitățile de redare ale React cu preluarea eficientă a datelor din backend, veți putea gestiona și afișa seturi de date complexe în mod eficient.

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ță. Deși configurația actuală este excelentă pentru dezvoltarea locală, mediile de producție necesită pași suplimentari. Aceștia includ configurarea variabilelor de mediu, optimizarea bazei de date și implementarea unor mecanisme solide de gestionare a erorilor.

Aceste îmbunătățiri se bazează pe competențele pe care le-ați dezvoltat deja – precum proiectarea API-urilor, arhitectura bazată pe componente și integrarea full-stack. Stăpânind aceste tehnici avansate, veți fi bine pregătiți să abordați proiecte la nivel de întreprindere și să continuați să vă dezvoltați ca dezvoltator web.

Întrebări frecvente

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

Utilizarea Django pentru backend și a React pentru frontend creează o combinație puternică pentru dezvoltarea aplicațiilor web moderne. Django oferă un framework solid, dotat cu instrumente care eficientizează dezvoltarea backend-ului, în timp ce React excelează în crearea de interfețe de utilizator dinamice și interactive.

Această combinație favorizează o separare clară a responsabilităților, ceea ce ajută la menținerea codului organizat și mai ușor de extins în timp. Structura bazată pe componente a React încurajează reutilizarea elementelor de interfață cu utilizatorul, iar REST Framework-ul 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 în dezvoltarea aplicațiilor.

Cum pot rezolva problemele legate de CORS atunci când conectez un frontend React la un backend Django?

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

În timpul dezvoltării, puteți simplifica lucrurile setând CORS_ORIGIN_ALLOW_ALL = True în fișierul settings.py. Aceasta permite solicitările din orice sursă. Cu toate acestea, într-un mediu de producție, este mult mai sigur să definiți domenii de încredere specifice folosind setarea CORS_ALLOWED_ORIGINS setării. Această abordare contribuie la menținerea unui nivel mai ridicat de securitate.

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

Cum pot pregăti aplicațiile mele Django și React pentru implementarea în producție?

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

Apoi, alege o platformă de găzduire fiabilă pentru backend-ul Django și fișierele statice. Asigură-te că infrastructura ta este concepută să facă față traficului și cerințelor de la nivel de producție. Pentru frontend-ul React, folosește instrumentele de compilare adecvate pentru a genera o versiune de producție optimizată.

Odată ce aplicația React este gata, configurați un server web precum Nginx pentru a găzdui atât frontend-ul React, cât și backend-ul Django. O configurare corectă a serverului asigură funcționarea eficientă a aplicației și oferă o experiență fără întreruperi pentru utilizatori.

Înainte de lansarea în producție, testați temeinic aplicația în mediul de producție. Acest pas ajută la identificarea și rezolvarea eventualelor probleme, asigurându-vă că aplicația funcționează fiabil odată ce este lansată.