Jak zbudować prostą aplikację z Django i React

Chcesz stworzyć aplikację internetową z silnym backendem i dynamicznym frontendem? Połączenie Django, frameworka Pythona, z React, biblioteką JavaScript, to świetny sposób na osiągnięcie tego celu. Django obsługuje zadania backendowe, takie jak zarządzanie bazami danych i tworzenie API, podczas gdy React tworzy responsywny, interaktywny interfejs użytkownika.

Kluczowe kroki:

1. Konfiguracja środowiska:- Zainstaluj Python 3.x dla Django i Node.js dla React.

   • Użyj wirtualnych środowisk do zarządzania zależnościami Pythona.
   • Potwierdź instalacje za pomocą python --version, node --version i npm --version.

2. Zorganizuj swój projekt:- Stwórz oddzielne foldery dla backendu Django i frontendu React.

   • Użyj django-admin startproject do konfiguracji backendu i npx create-react-app do inicjalizacji frontendu.

3. Zbuduj backend:- Tworzenie aplikacji Django, definiowanie modeli i generowanie migracji.

   • Użyj Django REST Framework do zbudowania punktów końcowych API.
   • Skonfiguruj django-cors-headers, aby umożliwić komunikację między frontendem i backendem.

4. Rozwijaj frontend:- Użyj komponentów React do zarządzania zadaniami i interakcjami użytkownika.

   • Zainstaluj Axios dla żądań API i zintegruj go z punktami końcowymi Django.
   • Stylizuj aplikację za pomocą CSS, aby uzyskać przejrzysty interfejs użytkownika.

5. Połącz i przetestuj:- Uruchom Django na localhost: 8000 i React na localhost:3000.

   • Przetestuj punkty końcowe API za pomocą narzędzi takich jak Postman lub bezpośrednio w przeglądarce.
   • Zapewnij odpowiednie ustawienia CORS dla płynnej komunikacji.

Taka konfiguracja pozwala efektywnie zbudować aplikację typu full-stack z wyraźnym oddzieleniem backendu od frontendu. Wykonaj te kroki, aby stworzyć skalowalną, interaktywną aplikację internetową.

ProjektDjango i React dla początkujących - Zbuduj aplikację FullStack Notes

Wymagania konfiguracyjne i instalacja

Przed rozpoczęciem tworzenia aplikacji Django i React kluczowe jest skonfigurowanie środowiska programistycznego z niezbędnymi narzędziami i zależnościami. Ta podstawa pomoże ci płynnie tworzyć, integrować i testować komponenty Django i React.

Wymagania systemowe i narzędzia

Aby rozpocząć, twoja maszyna deweloperska będzie potrzebować Pythona 3.x dla Django i Node.js dla Reacta. W szczególności, Django 5.0 wymaga Pythona 3.x, podczas gdy React działa z Node.js w wersji 12 lub wyższej.

Instalacja Pythona: Pythona można pobrać bezpośrednio z jego oficjalnej strony internetowej lub skorzystać z systemowego menedżera pakietów. Dla użytkowników macOS, Homebrew ułatwia to dzięki brew install python. Użytkownicy systemu Windows powinni pobrać instalator ze strony python.org, podczas gdy użytkownicy Linuksa mogą zainstalować go za pomocą poleceń takich jak apt install python3 na Ubuntu lub podobnych poleceń dla innych dystrybucji.

Konfiguracja Node.jsi npm: Node.js jest dostarczany w pakiecie z npm (Node Package Manager). Będziesz potrzebował npm w wersji 6 lub wyższej, przy czym wersja 7.5.4 jest niezawodnym wyborem. Pobierz Node.js ze strony nodejs.org, która automatycznie dołączy npm.

Wirtualne środowiska Python: Korzystanie z wirtualnych środowisk jest kluczem do zarządzania zależnościami specyficznymi dla projektu bez konfliktów. Możesz użyć wbudowanego modułu venv lub narzędzi takich jak pipenv lub virtualenvwrapper, aby uzyskać więcej funkcji. Jeśli korzystasz z systemu Windows, pakiet virtualenvwrapper-win zapewnia podobną funkcjonalność.

Aby potwierdzić instalację, uruchom następujące polecenia w terminalu:

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

Tworzenie struktury projektu

Dobrze zorganizowana struktura projektu jest niezbędna do oddzielenia kodu backendu i frontendu i zarządzania nimi. Zacznij od stworzenia głównego katalogu dla swojego projektu:

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

Wewnątrz tego katalogu utwórz dwa foldery: jeden dla backendu Django, a drugi dla frontendu React. Takie rozdzielenie pozwoli ci utrzymywać i wdrażać każdą część niezależnie.

Skonfigurujwirtualne środowisko Pythona w katalogu projektu:

python -m venv venv

Aktywuj środowisko wirtualne:

• Na macOS/Linux: źródło venv/bin/activate
• W systemie Windows: venv\Scripts\activate

Ten krok zapewnia, że wszystkie zależności Pythona dla twojego projektu są odizolowane.

Instalacja wymaganych pakietów

Mając gotowe środowisko, czas zainstalować niezbędne pakiety zarówno dla Django, jak i Reacta.

Pakiety backendu Django: Gdy twoje wirtualne środowisko jest aktywne, zainstaluj Django i wspierające je biblioteki za pomocą pip:

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

• Django obsługuje logikę po stronie serwera, zarządzanie bazami danych i routing URL.
• Django REST Framework upraszcza proces budowania RESTful API, ułatwiając tworzenie punktów końcowych dla frontendu React.
• Django-cors-headers umożliwia Cross-Origin Resource Sharing (CORS), co jest niezbędne do komunikacji między frontendem Reacta (działającym na porcie 3000) a backendem Django (działającym na porcie 8000).

Konfiguracja frontendu React: Aby skonfigurować środowisko React, użyj narzędzia create-react-app. Polecenie to inicjuje projekt React i instaluje wszystkie niezbędne zależności:

npx create-react-app frontend

Spowoduje to utworzenie nowego projektu React w katalogu frontend, wraz z niezbędnymi pakietami, narzędziami deweloperskimi i skryptami kompilacji.

Dodatkowy pakiet frontendowy: Po skonfigurowaniu projektu React, przejdź do katalogu frontend i zainstaluj Axios, bibliotekę do wykonywania żądań HTTP do API Django:

cd frontend npm install axios

W tym momencie twoje środowisko programistyczne jest w pełni wyposażone w Python 3.x, Django, Node.js, React i wszystkie niezbędne narzędzia. Wirtualne środowisko Pythona zapewnia izolację zależności backendu, podczas gdy npm obsługuje pakiety JavaScript oddzielnie. Teraz jesteś gotowy, aby rozpocząć tworzenie aplikacji full-stack!

Budowanie backendu za pomocą Django

Skonfiguruj backend Django z modelami baz danych, punktami końcowymi API i integracją dla frontendu React.

Tworzenie projektu i aplikacji Django

Zacznij od stworzenia projektu Django, który zawiera ustawienia, konfiguracje bazy danych i opcje specyficzne dla aplikacji. Wewnątrz tego projektu zbudujesz aplikację Django - pakiet Pythona przeznaczony do konkretnych zadań, takich jak zarządzanie danymi użytkownika lub treścią.

Przejdź do głównego katalogu projektu (gdzie skonfigurowane jest wirtualne środowisko) i utwórz projekt Django:

django-admin startproject backend .

To polecenie generuje pliki projektu bezpośrednio w bieżącym katalogu, unikając dodatkowego folderu. Zauważysz nowe pliki, takie jak manage.py (do uruchamiania komend Django) i katalog backend zawierający pliki takie jak settings.py, urls.py, asgi.py i wsgi.py.

Następnie utwórz aplikację do obsługi określonej funkcjonalności. Na przykład system zarządzania zadaniami:

python manage.py startapp tasks

Spowoduje to utworzenie katalogu tasks z niezbędnymi plikami, takimi jak models.py, views.py, admin.py i folderem migrations. Upewnij się, że unikasz konfliktów nazewnictwa z wbudowanymi nazwami, takimi jak "django" lub "test".

Zarejestruj aplikację w ustawieniach projektu, dodając ją do listy INSTALLED_APPS w 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', # Zarejestruj swoją aplikację ].

Konfigurowanie modeli i serializerów

Zdefiniuj swoją strukturę danych za pomocą modeli Django. Na przykład, prosty model Task dla aplikacji zarządzania zadaniami może być dodany w 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.

Model ten zawiera pola takie jak CharField dla krótkiego tekstu, TextField dla dłuższej treści, BooleanField dla wartości prawda/fałsz oraz DateTimeField dla znaczników czasu. Klasa Meta określa opcje, takie jak domyślne porządkowanie.

Zastosuj model do swojej bazy danych, uruchamiając migracje:

python manage.py makemigrations tasks python manage.py migrate

Aby przekonwertować dane modelu na JSON, użyj serializatorów Django REST Framework. W tasks/serializers.py zdefiniuj serializator dla modelu 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 automatycznie generuje pola i metody na podstawie modelu. Wyraźne wyszczególnienie pól gwarantuje, że wrażliwe dane nie zostaną przypadkowo ujawnione.

Tworzenie punktów końcowych API

Django REST Framework upraszcza tworzenie API. Dla standardowych operacji CRUD, użyj ViewSets z routerami dla czystej, RESTful struktury.

W tasks/views.py utwórz widoki 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] # Tylko dla deweloperów

ModelViewSet automatycznie obsługuje listowanie, tworzenie, pobieranie, aktualizowanie i usuwanie zadań.

Skonfiguruj routing URL w 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)), ]

Dołącz te adresy URL do głównego pliku backend/urls.py:

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

Konfigurowanie nagłówków CORS

Aby umożliwić frontendowi Reacta (działającemu na porcie 3000) komunikację z backendem Django (na porcie 8000), skonfiguruj Cross-Origin Resource Sharing (CORS). Bez tego przeglądarki blokują żądania cross-origin ze względów bezpieczeństwa.

Zaktualizuj backend/settings.py, aby uwzględnić konfigurację CORS:

MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # Dodaj to na górze '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

Do szybkiego testowania można użyć CORS_ALLOW_ALL_ORIGINS = True, ale określenie dozwolonego pochodzenia jest bezpieczniejsze.

Testowanie punktów końcowych API

Przed integracją frontendu React, przetestuj punkty końcowe API, aby upewnić się, że działają zgodnie z oczekiwaniami. Uruchom serwer deweloperski Django:

python manage.py runserver

Uzyskaj dostęp do API pod adresem http://127.0.0.1:8000/api/tasks/. Użyj API z możliwością przeglądania, by przetestować operacje takie jak żądania GET i POST.

Alternatywnie, przetestuj za pomocą cURL lub 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": "To jest zadanie testowe"}

Dla zautomatyzowanych testów, dodaj przypadki testowe w 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): # Dodaj tutaj asercje i logikę testową pass

Mając gotowy backend, możesz połączyć go z frontendem React.

Tworzenie frontendu za pomocą React

Aby stworzyć angażujący interfejs dla backendu Django, użyjesz Reacta do zarządzania interakcjami użytkownika - od przeglądania zadań po dodawanie nowych.

Konfigurowanie projektu React

Zacznij od skonfigurowania frontendu React za pomocą Create React App. Przejdź do głównego katalogu projektu (gdzie znajduje się backend Django) i uruchom:

npx create-react-app frontend cd frontend

To polecenie tworzy aplikację React z niezbędnymi plikami, takimi jak package.json, src/App.js i public/index.html. Zawiera również narzędzia takie jak webpack do tworzenia pakietów, Babel do kompilacji JavaScript i serwer deweloperski do testowania.

Następnie zainstaluj Axios do obsługi żądań HTTP do API Django:

npm install axios

Axios upraszcza wywołania API, zarządzając parsowaniem JSON i oferując lepszą obsługę błędów niż wbudowana funkcja fetch(). Obsługuje również funkcje takie jak przechwytywanie żądań i odpowiedzi.

Struktura folderów powinna teraz wyglądać następująco:

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

Aby potwierdzić, że wszystko działa, uruchom serwer deweloperski React:

npm start

Spowoduje to uruchomienie aplikacji pod adresem http://localhost:3000, wyświetlając domyślną stronę powitalną React. Serwer ten powinien pozostać uruchomiony podczas tworzenia aplikacji - będzie on automatycznie przeładowywany po wprowadzeniu zmian.

Tworzenie komponentów React

Stwórzmy komponent TaskList do wyświetlania zadań pobranych z API Django. Dodaj następujące elementy do src/components/TaskList.js:

import React from 'react'; const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => { return ( <div className="task-list"> <h2>Twoje zadania</h2> {tasks.length == 0 ? ( <p>Brak dostępnych zadań. Utwórz swoje pierwsze zadanie!</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" > Usuń </button> </div> </li> ))} </ul> )} </div> ); }; export default TaskList;

Następnie utwórz komponent TaskForm do dodawania nowych zadań. Dodaj go do 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('Błąd dodawania zadania:', 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="Opis zadania (opcjonalnie)" value={opis} onChange={(e) => setDescription(e.target.value)} disabled={isSubmitting} rows="3" /> </div> <button type="submit" disabled={isSubmitting || !title.trim()}> {isSubmitting ? 'Dodawanie...' : 'Dodaj zadanie'} </button> </form> ); }; export default TaskForm;

Aby uzyskać podstawową stylizację, utwórz plik src/App.css i dodaj:

.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; }

Zarządzanie stanem i integracja API

Haki Reacta, takie jak useState i useEffect, ułatwiają zarządzanie stanem i interakcję z backendem Django. Aby scentralizować wywołania API, utwórz plik usługi 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;

Na koniec zintegruj wszystko w 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); } }; // Dodatkowe metody dodawania, aktualizowania i usuwania zadań będą tutaj }

Dzięki tej konfiguracji frontend Reacta jest gotowy do interaktywnej obsługi zadań przy jednoczesnej płynnej komunikacji z backendem Django.

Łączenie Django i React

Teraz, gdy backend i frontend są już uruchomione, następnym krokiem jest zapewnienie płynnej komunikacji między nimi. Wiąże się to z konfiguracją punktów końcowych API, zarządzaniem żądaniami i rozwiązywaniem wszelkich problemów z integracją.

Konfigurowanie adresów URL API w React

Twoja aplikacja React musi wiedzieć, gdzie zlokalizować punkty końcowe API Django. Aby to osiągnąć, zaktualizuj plik src/services/api.js konfiguracjami specyficznymi dla środowiska:

import axios from 'axios'; // Określ bazowy URL API na podstawie środowiska 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;

W wersji produkcyjnej dodaj plik .env do katalogu głównego projektu React z następującą zawartością:

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

Ta konfiguracja zapewnia, że aplikacja React może płynnie współdziałać z backendem Django, niezależnie od tego, czy jesteś w lokalnym środowisku programistycznym, czy wdrażasz ją na produkcji. Po skonfigurowaniu punktów końcowych API, jesteś gotowy do pobierania danych z backendu i manipulowania nimi.

Pobieranie danych z zaplecza

Po skonfigurowaniu API możesz wykonywać operacje CRUD, by zarządzać danymi między Reactem i Django. Zaktualizuj src/App.js, by obsługiwał te operacje:

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('Nie udało się pobrać zadań. Sprawdź połączenie.'); console.error('Błąd pobierania zadań:', 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('Błąd aktualizacji zadania:', err); } }; const handleDeleteTask = async (taskId) => { if (!window.confirm('Czy na pewno chcesz usunąć to zadanie?')) { return; } try { await taskAPI.deleteTask(taskId); setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId)); } catch (err) { console.error('Błąd usuwania zadania:', err); } }; if (loading) { return <div className="loading">Ładowanie zadań....</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;

Ten kod obsługuje tworzenie zadań, aktualizacje, usuwanie i zarządzanie błędami. Interfejs użytkownika aktualizuje się natychmiast, zapewniając płynną obsługę, a błędy są zarządzane z wdziękiem poprzez przywracanie zmian lub wyświetlanie odpowiednich komunikatów.

Testowanie i debugowanie połączenia

Jedną z najczęstszych przeszkód podczas łączenia Django i Reacta jest radzenie sobie z błędami CORS (Cross-Origin Resource Sharing). Pojawiają się one, ponieważ przeglądarki blokują żądania między różnymi źródłami ze względów bezpieczeństwa. Podczas rozwoju, React zazwyczaj działa na localhost: 3000, podczas gdy Django działa na localhost:8000, tworząc scenariusz cross-origin.

Aby rozwiązać problemy CORS, upewnij się, że skonfigurowałeś nagłówki CORS w ustawieniach Django, jak opisano w sekcji "Konfigurowanie nagłówków CORS". Po wprowadzeniu zmian, zrestartuj swój serwer Django, by je zastosować.

Oto kilka typowych błędów żądań API i ich rozwiązania:

• HTTP 400 (Bad Request): Zazwyczaj oznacza to, że w ładunku żądania brakuje pewnych wymaganych danych lub są one zniekształcone. Na przykład w listopadzie 2023 r. FintanMi napotkał błąd 400 podczas tworzenia społeczności w projekcie Django REST Framework i React, ponieważ w żądaniu brakowało pola właściciela. Zawsze dokładnie sprawdzaj, czy twój frontend wysyła wszystkie wymagane pola oczekiwane przez modele Django.
• HTTP 405 (Method Not Allowed): Występuje, gdy punkt końcowy API nie obsługuje używanej metody HTTP. Na przykład, FintanMi zgłosił błąd 405 przy próbie usunięcia postu, który został rozwiązany przez aktualizację widoku Django z generics.RetrieveUpdateAPIView do generics.RetrieveUpdateDestroyAPIView, by włączyć obsługę żądań DELETE.

Uruchamianie i testowanie aplikacji

Po połączeniu backendu Django i frontendu React, nadszedł czas na uruchomienie obu serwerów deweloperskich i przetestowanie aplikacji. Wiąże się to z uruchomieniem dwóch serwerów jednocześnie i upewnieniem się, że wszystko działa płynnie.

Uruchamianie serwerów deweloperskich

Aby uruchomić aplikację Django-React, będziesz potrzebował dwóch okien terminala - po jednym dla każdego serwera. Taka konfiguracja pozwala backendowi i frontendowi działać niezależnie, komunikując się poprzez wywołania API.

Uruchamianie serwera backendu Django:

1. Otwórz pierwsze okno terminala i przejdź do głównego katalogu projektu Django.

2. Aktywuj wirtualne środowisko Pythona:

   source venv/bin/activate
   

3. Uruchom serwer deweloperski Django:

   python manage.py runserver
   

   Serwer będzie dostępny pod adresem http://127.0.0.1:8000/.

Uruchamianie serwera frontendowego React:

1. Otwórz drugie okno terminala i przejdź do katalogu projektu React:

   cd frontend
   

2. Uruchom serwer deweloperski React:

   npm start
   

   Spowoduje to automatyczne otwarcie okna przeglądarki pod adresem http://localhost:3000/.

Po uruchomieniu obu serwerów można rozpocząć testowanie funkcjonalności aplikacji.

Testowanie pełnej funkcjonalności aplikacji

Po uruchomieniu serwerów, prawidłowym skonfigurowaniu CORS i punktów końcowych API, nadszedł czas, aby zweryfikować przepływ danych między frontendem a backendem.

Weryfikacja API backendu:

• Przetestuj swoje punkty końcowe API Django bezpośrednio odwiedzając:

  http://localhost:8000/api/tasks
  

  Powinno to wyświetlić przeglądalny interfejs API Django REST Framework, gdzie można wykonywać operacje CREATE i READ.

• Uzyskaj dostęp do interfejsu administratora Django pod adresem:

  http://localhost:8000/admin
  

  Zaloguj się przy użyciu poświadczeń superużytkownika, by tworzyć, edytować lub usuwać zadania. Możesz także przetestować operacje UPDATE i DELETE odwiedzając:

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

Testowanie integracji frontend-backend:

• Otwórz swoją aplikację React na http://localhost:3000 i potwierdź, że ładuje się poprawnie, wyświetlając zadania z backendu Django.
• Przetestuj każdą operację CRUD poprzez interfejs React:- Dodaj nowe zadanie i sprawdź, czy pojawia się ono zarówno w interfejsie React UI, jak i w backendzie.
  • Edytuj istniejące zadanie i upewnij się, że zmiany zostały zapisane.
  • Usuń zadanie i sprawdź, czy zostało ono usunięte zarówno z interfejsu użytkownika, jak i z bazy danych.

Jeśli twoja aplikacja zawiera filtry lub inne funkcje, przetestuj je dokładnie, aby potwierdzić, że zadania są wyświetlane zgodnie z oczekiwaniami.

Naprawianie typowych problemów

Jeśli napotkasz jakiekolwiek problemy podczas testowania, oto kilka typowych poprawek do wypróbowania.

Błędy połączenia API:

• Upewnij się, że oba serwery działają na odpowiednich portach: Django na http://localhost:8000, a React na http://localhost:3000.

• Użyj narzędzi deweloperskich przeglądarki (zakładka network), aby zidentyfikować kody statusu HTTP, takie jak 404 lub 500.

• Sprawdź ustawienie proxy w pliku package.json projektu React:

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

  Jeśli wprowadzisz zmiany, uruchom ponownie serwer React.

Problemy z uruchomieniem serwera:

• Jeśli serwer Django nie uruchamia się, sprawdź czy nie brakuje migracji:

  python manage.py makemigrations python manage.py migrate
  

• W przypadku problemów z serwerem React, spróbuj ponownie zainstalować zależności:

  npm install
  

Problemy z przepływem danych:

• Użyj narzędzi deweloperskich przeglądarki, aby sprawdzić żądania sieciowe i błędy konsoli.
• Dodaj instrukcje debugowania, takie jak console.log() w React lub print w widokach Django, aby prześledzić przepływ danych.
• Podwójnie sprawdź, czy adresy URL API w twojej aplikacji React dokładnie odpowiadają wzorcom adresów URL Django, włączając w to końcowe ukośniki (np. /api/tasks/).

Podsumowanie i kolejne kroki

Stworzyłeś aplikację internetową, która łączy Django i React, dając ci solidne wprowadzenie do programowania full-stack. Projekt ten podkreśla podstawowe koncepcje, takie jak oddzielenie backendu od frontendu, wykonywanie operacji CRUD i zarządzanie żądaniami cross-origin przy użyciu ustawień CORS. Po drodze pracowałeś z Django REST Framework do tworzenia interfejsów API i używałeś haków React do zarządzania stanem - umiejętności, które pozwalają na płynną integrację między tymi dwoma potężnymi narzędziami.

Przenoszenie aplikacji na wyższy poziom

Istnieje wiele możliwości rozszerzenia funkcjonalności aplikacji. Możesz na przykład dodać uwierzytelnianie JWT przy użyciu Django REST Framework, aby zabezpieczyć dane użytkownika i dostęp do API. Pozwoli to oferować funkcje specyficzne dla użytkownika i spersonalizowane doświadczenia.

Jeśli twoja aplikacja wymaga aktualizacji w czasie rzeczywistym, rozważ użycie Django Channels do włączenia obsługi WebSocket. Jest to idealne rozwiązanie dla funkcji takich jak pulpity nawigacyjne na żywo, systemy czatu lub powiadomienia, zmieniając aplikację w bardziej dynamiczną i interaktywną platformę.

Wraz z rozwojem aplikacji ważna staje się zaawansowana wizualizacja danych. Łącząc możliwości renderowania Reacta z wydajnym pobieraniem danych z zaplecza, będziesz w stanie efektywnie obsługiwać i wyświetlać złożone zestawy danych.

Przygotowanie do produkcji

Przygotowując aplikację do produkcji, należy skupić się na wdrożeniu, bezpieczeństwie i wydajności. Podczas gdy obecna konfiguracja jest świetna do lokalnego rozwoju, środowiska produkcyjne wymagają dodatkowych kroków. Obejmują one konfigurację zmiennych środowiskowych, optymalizację bazy danych i wdrożenie silnych mechanizmów obsługi błędów.

Te ulepszenia opierają się na umiejętnościach, które już rozwinąłeś - takich jak projektowanie API, architektura oparta na komponentach i integracja całego stosu. Opanowując te zaawansowane techniki, będziesz dobrze przygotowany do radzenia sobie z projektami na poziomie korporacyjnym i dalszego rozwoju jako programista stron internetowych.

Najczęściej zadawane pytania

Jakie są zalety używania Django dla backendu i Reacta dla frontendu w budowaniu aplikacji webowej?

Używanie Django dla backendu i Reacta dla frontendu tworzy silną mieszankę do tworzenia nowoczesnych aplikacji webowych. Django zapewnia solidny framework wypełniony narzędziami, które usprawniają rozwój backendu, podczas gdy React błyszczy w budowaniu dynamicznych i interaktywnych interfejsów użytkownika.

Takie połączenie sprzyja czystemu podziałowi obowiązków, co pomaga utrzymać porządek w bazie kodu i ułatwia jej rozbudowę w miarę upływu czasu. Oparta na komponentach struktura Reacta zachęca do ponownego wykorzystania elementów interfejsu użytkownika, a REST Framework Django upraszcza proces tworzenia interfejsów API, zapewniając płynną komunikację między frontendem a backendem. Razem oferują szybkie, wydajne i skoncentrowane na użytkowniku podejście do tworzenia aplikacji.

Jak rozwiązać problemy z CORS podczas łączenia frontendu React z backendem Django?

Aby rozwiązać problemy CORS między frontendem Reacta a backendem Django, przydatnym rozwiązaniem jest pakiet django-cors-headers. Najpierw zainstaluj go za pomocą pip. Następnie w pliku settings. py dodaj 'corsheaders' do listy INSTALLED_APPS. Następnie dodaj "corsheaders.middleware.CorsMiddleware" na samej górze listy MIDDLEWARE, aby zapewnić prawidłową kolejność wykonywania oprogramowania pośredniczącego.

Podczas programowania można uprościć sprawę, ustawiając CORS_ORIGIN_ALLOW_ALL = True w pliku settings.py. Pozwala to na żądania z dowolnego źródła. Jednak w środowisku produkcyjnym znacznie bezpieczniej jest zdefiniować określone zaufane domeny za pomocą ustawienia CORS_ALLOWED_ORIGINS. Takie podejście pomaga zachować większe bezpieczeństwo.

Dzięki takiej konfiguracji, twoja aplikacja React może płynnie współdziałać z API Django, pozostając w zgodzie z wymogami CORS.

Jak mogę przygotować moją aplikację Django i React do wdrożenia produkcyjnego?

Aby przygotować aplikację Django i React do wdrożenia produkcyjnego, zacznij od dostosowania ustawień Django do bezpiecznej konfiguracji. Obejmuje to ustawienie DEBUG na False i określenie ALLOWED_HOSTS, aby kontrolować, które domeny mogą uzyskać dostęp do twojej aplikacji. Zmiany te są niezbędne do ochrony aplikacji w środowisku live.

Następnie wybierz niezawodną platformę hostingową dla backendu Django i plików statycznych. Upewnij się, że twoja infrastruktura jest zbudowana do obsługi ruchu i wymagań na poziomie produkcyjnym. W przypadku frontendu React, użyj odpowiednich narzędzi do kompilacji, aby wygenerować zoptymalizowaną kompilację produkcyjną.

Gdy aplikacja React będzie już gotowa, skonfiguruj serwer WWW, taki jak Nginx, do obsługi zarówno frontendu React, jak i backendu Django. Odpowiednia konfiguracja serwera zapewnia wydajne działanie aplikacji i płynną obsługę użytkowników.

Przed uruchomieniem dokładnie przetestuj swoją aplikację w środowisku produkcyjnym. Ten krok pomaga zidentyfikować i rozwiązać wszelkie problemy, zapewniając niezawodne działanie aplikacji po jej uruchomieniu.