15 perc olvasás - 2025. november 28.
Tanulja meg, hogyan készítsen egy teljes körű webes alkalmazást a Django segítségével a backendhez és a React segítségével a frontendhez, lépésről lépésre történő útmutatással.
Erős backenddel és dinamikus frontenddel rendelkező webes alkalmazást szeretne létrehozni? A Django, egy Python keretrendszer és a React, egy JavaScript könyvtár párosítása remek módja ennek elérésére. A Django olyan backend feladatokat kezel, mint az adatbázis-kezelés és az API létrehozása, míg a React egy reszponzív, interaktív felhasználói felületet hoz létre.
Kulcslépések:
A környezet beállítása:- Telepítse a Python 3.x-et a Django és a Node.js-t a React esetében.
python --verzióval, a node --verzióval és az npm --verzióval.Szervezze meg a projektjét:- Hozzon létre külön mappákat a Django backend és a React frontend számára.
django-admin startprojectet a backend beállításához és az npx create-react-app-ot a frontend inicializálásához.Építse fel a backendet:- Hozzon létre Django alkalmazásokat, definiáljon modelleket és generáljon migrációkat.
a django-cors-headers-t a frontend és a backend közötti kommunikáció lehetővé tételéhez.A frontend fejlesztése:- React komponensek használata a feladatok és a felhasználói interakciók kezeléséhez.
Csatlakoztassa és tesztelje:- Futtassa a Djangót a localhost:8000, a Reactot pedig a localhost:3000 címen.
Ez a beállítás lehetővé teszi, hogy hatékonyan építsen egy full-stack alkalmazást a backend és a frontend egyértelmű elkülönítésével. Kövesse ezeket a lépéseket egy skálázható, interaktív webes alkalmazás létrehozásához.
Mielőtt elkezdené a Django és React alkalmazás építését, elengedhetetlen, hogy beállítsa a fejlesztőkörnyezetét a szükséges eszközökkel és függőségekkel. Ez az alapozás segít abban, hogy a Django és React komponensek létrehozása, integrálása és tesztelése zökkenőmentesen menjen tovább.
A kezdéshez a fejlesztőgépednek Python 3.x-re lesz szüksége a Django esetében és Node.js-re a React esetében. Konkrétan a Django 5.0-hoz Python 3.x szükséges, míg a React a Node.js 12-es vagy magasabb verziójával működik.
A Python telepítése: Letöltheti a Pythont közvetlenül a hivatalos weboldaláról, vagy használhatja a rendszer csomagkezelőjét. A macOS felhasználók számára a Homebrew megkönnyíti a brew install python segítségével. A Windows felhasználóknak a python.org oldalról kell lekérniük a telepítőt, míg a Linux felhasználók olyan parancsokkal telepíthetik, mint az apt install python3 az Ubuntun vagy hasonló parancsok más disztribúciókhoz.
A Node.js és az npm beállítása: A Node.js az npm (Node Package Manager) csomaggal együtt érkezik. Az npm 6-os vagy magasabb verziójára lesz szükséged, a 7.5.4-es verzió megbízható választás. Töltse le a Node.js-t a nodejs.org oldalról, amely automatikusan tartalmazza az npm-et.
Python virtuális környezetek: A virtuális környezetek használata kulcsfontosságú a projektspecifikus függőségek konfliktusok nélküli kezeléséhez. Használhatja a beépített venv modult, vagy olyan eszközöket, mint a pipenv vagy a virtualenvwrapper, amelyek további funkciókat biztosítanak. Ha Windowson dolgozik, a virtualenvwrapper-win csomag hasonló funkciókat biztosít.
A telepítések megerősítéséhez futtassa ezeket a parancsokat a terminálban:
python --verzió node --verzió npm --verzió
A jól szervezett projektstruktúra elengedhetetlen ahhoz, hogy a backend és a frontend kódja elkülönüljön és kezelhető legyen. Kezdd azzal, hogy létrehozol egy fő könyvtárat a projekted számára:
mkdir django-react-app cd django-react-app
Ebben a könyvtárban hozzon létre két mappát: egyet a Django backendnek, egyet pedig a React frontendnek. Ez a szétválasztás lehetővé teszi, hogy az egyes részeket egymástól függetlenül karbantarthasd és telepíthesd.
Állítsd be a Python virtuális környezetedet a projekt könyvtáron belül:
python -m venv venv
Aktiválja a virtuális környezetet:
source venv/bin/activatevenv\Scripts\activateEz a lépés biztosítja, hogy a projekted összes Python függősége elszigetelve legyen.
Miután a környezeted készen áll, itt az ideje, hogy telepítsd a szükséges csomagokat mind a Django, mind a React számára.
Django Backend csomagok: Amíg a virtuális környezeted aktív, telepítsd a Django-t és a támogató könyvtárakat a pip segítségével:
pip install django pip install djangorestframework pip install django-cors-headers pip install django-cors-headers
React Frontend beállítása: A React környezet beállításához használja a create-react-app eszközt. Ez a parancs inicializál egy React projektet és telepíti az összes szükséges függőséget:
npx create-react-app frontend
Ez létrehoz egy új React projektet egy frontend könyvtárban, az alapvető csomagokkal, fejlesztői eszközökkel és build scriptekkel együtt.
További frontend csomag: A React projekt beállítása után navigáljon a frontend könyvtárba, és telepítse az Axios-t, a Django API-hoz intézett HTTP-kérésekhez szükséges könyvtárat:
cd frontend npm install axios
Ezen a ponton a fejlesztőkörnyezeted teljesen fel van szerelve Python 3.x, Django, Node.js, React és az összes szükséges eszközzel. A Python virtuális környezet biztosítja, hogy a backend függőségeid elszigeteltek legyenek, míg az npm külön kezeli a JavaScript csomagjaidat. Most már készen állsz arra, hogy elkezdd a full-stack alkalmazásod építését!
Állítson fel egy Django backendet adatbázis-modellekkel, API végpontokkal és egy React frontend integrációjával.
Kezdje egy Django projekt létrehozásával, amely tartalmazza a beállításokat, az adatbázis-konfigurációkat és az alkalmazásspecifikus beállításokat. Ezen a projekten belül létrehoz egy Django alkalmazást - egy Python-csomagot, amelyet olyan speciális feladatokra terveztek, mint a felhasználói adatok vagy tartalmak kezelése.
Navigálj a projekted gyökérkönyvtárába (ahol a virtuális környezeted van beállítva), és hozd létre a Django projektet:
django-admin startproject backend .
Ez a parancs közvetlenül az aktuális könyvtárban generálja a projektfájlokat, elkerülve egy extra mappát. Olyan új fájlokat fogsz észrevenni, mint a manage.py (a Django parancsok futtatásához) és egy backend könyvtárat, amely olyan fájlokat tartalmaz, mint a settings.py, urls.py, asgi.py és wsgi.py.
Ezután hozzon létre egy alkalmazást a konkrét funkciók kezelésére. Például egy feladatkezelő rendszert:
python manage.py startapp tasks
Ez létrehoz egy tasks könyvtárat olyan alapvető fájlokkal, mint a models.py, views.py, admin.py, és egy migrációs mappát. Ügyeljen arra, hogy elkerülje a névkonfliktusokat az olyan beépített nevekkel, mint a "django" vagy a "test".
Regisztráld az alkalmazást a projekt beállításaiban a backend/settings.py fájlban az INSTALLED_APPS listához való hozzáadásával:
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', 'corsheaders', 'tasks', # Regisztrálja az alkalmazást ]
Definiáld az adatstruktúrádat a Django modellekkel. Például egy egyszerű Task modellt a feladatkezelő alkalmazáshoz a tasks/models.py fájlban adhatunk hozzá:
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.
Ez a modell olyan mezőket tartalmaz, mint a CharField a rövid szöveghez, TextField a hosszabb tartalomhoz, BooleanField az igaz/hamis értékekhez, és DateTimeField az időbélyegekhez. A Meta osztály olyan opciókat határoz meg, mint az alapértelmezett sorrend.
A modellt migrációk futtatásával alkalmazza az adatbázisára:
python manage.py makemigrations tasks python manage.py migrate
A modell adatainak JSON-ba való konvertálásához használjuk a Django REST Framework szerializálóit. A tasks/serializers.py fájlban definiáljunk egy szerializálót a Task modellhez:
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']
A ModelSerializer a modell alapján automatikusan generálja a mezőket és metódusokat. A mezők explicit felsorolása biztosítja, hogy ne tegyen ki akaratlanul érzékeny adatokat.
A Django REST keretrendszer leegyszerűsíti az API létrehozását. A szabványos CRUD műveletekhez használjon ViewSets-et útválasztókkal a tiszta, RESTful struktúra érdekében.
A tasks/views.py fájlban hozzon létre API-nézeteket:
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] # Csak fejlesztésre.
A ModelViewSet automatikusan kezeli a feladatok listázását, létrehozását, lekérdezését, frissítését és törlését.
Állítsuk be az URL útválasztást a tasks/urls.py fájlban:
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)), ]
Vegyük fel ezeket az URL-eket a fő backend/urls.py fájlba:
from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('tasks.urls')), ]
Ahhoz, hogy a React frontend (amely a 3000-es porton fut) kommunikálhasson a Django backenddel (a 8000-es porton), konfigurálja a Cross-Origin Resource Sharing (CORS) fejlécet. Enélkül a böngészők biztonsági okokból blokkolják a cross-origin kéréseket.
Frissítse a backend/settings.py állományt a CORS konfigurációval:
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 beállítások a fejlesztéshez CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", # React fejlesztési szerver "http://127.0.0.1:3000", ] CORS_ALLOW_CREDENTIALS = True
Gyors teszteléshez használhatja a CORS_ALLOW_ALL_ORIGINS = True értéket, de az engedélyezett eredet megadása biztonságosabb.
A React frontend integrálása előtt tesztelje az API végpontokat, hogy megbizonyosodjon arról, hogy azok az elvárásoknak megfelelően működnek. Indítsa el a Django fejlesztői szervert:
python manage.py runserver
Lépjen be az API-ba a http://127.0.0.1:8000/api/tasks/ címen. Használja a böngészhető API-t olyan műveletek tesztelésére, mint a GET és POST kérések.
Alternatívaként tesztelhet cURL vagy Postman segítségével is:
# GET-kérés tesztelése a feladatok listázásához curl -X GET http://127.0.0.1:8000/api/tasks/ # POST-kérés tesztelése egy feladat létrehozásához curl -X POST http://127.0.0.1:8000/api/tasks/ \ -H "Content-Type: application/json" \ -d '{"title": "Tesztfeladat", "description": "Ez egy tesztfeladat"}''
Az automatizált teszteléshez adjunk hozzá teszteseteket a tasks/tests.py fájlban:
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
Ha a backend a helyén van, akkor készen állunk arra, hogy összekapcsoljuk a React frontenddel.
Ahhoz, hogy a Django backendhez egy megnyerő felületet hozzon létre, a Reactot fogja használni a felhasználói interakciók kezelésére - a feladatok megtekintésétől az újak hozzáadásáig mindent.
Kezdje a React frontend beállításával a Create React App segítségével. Navigáljon a projekt gyökérkönyvtárába (ahol a Django backendje található) és futtassa a:
npx create-react-app frontend cd frontend
Ez a parancs létrehoz egy React alkalmazást olyan alapvető fájlokkal, mint a package.json, src/App.js és public/index.html. Emellett olyan eszközöket is tartalmaz, mint a webpack a csomagoláshoz, a Babel a JavaScript-fordításhoz és egy fejlesztői szerver a teszteléshez.
Ezután telepítse az Axios-t a Django API-hoz érkező HTTP-kérések kezeléséhez:
npm install axios
Az Axios egyszerűbbé teszi az API-hívásokat azáltal, hogy kezeli a JSON elemzést és jobb hibakezelést kínál, mint a beépített fetch() függvény. Támogatja az olyan funkciókat is, mint a kérés- és válasz-interceptorok.
A mappaszerkezetednek most már így kell kinéznie:
projekt-gyökér/ ├── backend/ │ ├── manage.py │ ├── backend/ │ └── tasks/ └── frontend/ ├── package.json ├── public/ └── src/
Hogy megerősítsük, hogy minden működik, indítsuk el a React fejlesztői szervert:
npm start
Ez elindítja az alkalmazást a http://localhost:3000 címen , és megjeleníti az alapértelmezett React üdvözlő oldalt. A fejlesztés során tartsd ezt a szervert futva - automatikusan újratöltődik, ha változtatásokat végzel.
Hozzunk létre egy TaskList komponenst a Django API-ból lehívott feladatok megjelenítéséhez. Adjuk hozzá a következőket az src/components/TaskList.js fájlhoz:
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. Hozzon létre egy első feladatot!</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;
Ezután hozzon létre egy TaskForm komponenst az új feladatok hozzáadásához. Adjuk hozzá az src/components/TaskForm.js fájlhoz:
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('Hiba a feladat hozzáadásában:', error); } finally { setIsSubmitting(false); } }; return ( <form onSubmit={handleSubmit} className="task-form"> <h2>Új feladat hozzáadása</h2> <div className="form-group"> <input type="text" placeholder="Feladat címe" value={title} onChange={(e) => setTitle(e.target.value)} disabled={isSubmitting} required /> </div> <div className="form-group"> <textarea placeholder="Feladat leírása (opcionális)" 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;
Néhány alapvető stílushoz hozzon létre egy src/App.css fájlt, és adja hozzá:
.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; }
A React hooks, mint a useState és useEffect megkönnyítik az állapot kezelését és a Django backenddel való interakciót. Az API-hívások központosításához hozzon létre egy src/services/api.js szolgáltatásfájlt:
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;
Végül integráljon mindent az src/App.js állományba:
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); } } }; // Ide kerülnének a feladatok hozzáadására, frissítésére és törlésére szolgáló további módszerek }
Ezzel a beállítással a React frontend készen áll a feladatok interaktív kezelésére, miközben zökkenőmentesen kommunikál a Django backenddel.
Elege van a lassú telepítésekből vagy a sávszélességkorlátozásokból? Az FDC Servers azonnali dedikált teljesítményt, globális elérhetőséget és rugalmas, bármilyen léptékhez kialakított terveket kínál. Készen áll a frissítésre?
Teljesítmény feloldása mostMost, hogy a backend és a frontend már működik, a következő lépés a zökkenőmentes kommunikáció biztosítása közöttük. Ez magában foglalja az API végpontok beállítását, a kérések kezelését és az esetleges integrációs buktatók kezelését.
A React alkalmazásodnak tudnia kell, hogy hol találja a Django API végpontjait. Ehhez frissítse az src/services/api.js fájlt a környezet-specifikus beállításokkal:
import axios from 'axios'; // API alap URL meghatározás a környezet alapján 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 másodperces időkorlát }); 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;
A termeléshez adjon hozzá egy .env fájlt a React projekt gyökeréhez a következő tartalommal:
REACT_APP_API_URL=https://your-production-domain.com/api
Ez a beállítás biztosítja, hogy a React alkalmazásod zökkenőmentesen tudjon együttműködni a Django backenddel, akár helyi fejlesztőkörnyezetben, akár a termelésbe telepítve. Az API végpontok konfigurálásával készen áll a backend adatok lekérdezésére és manipulálására.
Miután az API-konfigurációt beállította, CRUD műveleteket végezhet a React és a Django közötti adatok kezelésére. Frissítse az src/App.js állományt, hogy kezelni tudja ezeket a műveleteket:
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('Sikertelen volt a feladatok lekérése. Kérjük, ellenőrizze a kapcsolatot.'); console.error('Hiba a feladatok lekérése:', 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, hogy a TaskForm kezelje a hibát } } }; 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">Feladatok betöltése...</div>; } return ( <div className="App"> <header className="App-header"> <h1>Feladatkezelő</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;
Ez a kód kezeli a feladatok létrehozását, frissítését, törlését és a hibakezelést. A felhasználói felület azonnal frissül a zökkenőmentes felhasználói élmény érdekében, a hibák kezelése pedig a változások visszaállításával vagy a megfelelő üzenetek megjelenítésével történik.
A Django és a React összekapcsolásakor az egyik leggyakoribb akadály a CORS (Cross-Origin Resource Sharing) hibák kezelése. Ezek azért merülnek fel, mert a böngészők biztonsági okokból blokkolják a különböző eredetű kéréseket. A fejlesztés során a React jellemzően a localhost:3000, míg a Django a localhost:8000 címen fut, ami cross-origin forgatókönyvet hoz létre.
A CORS problémák kezeléséhez győződjön meg arról, hogy a CORS fejléceket a Django beállításaiban a "CORS fejlécek konfigurálása" szakaszban leírtak szerint konfigurálta. A módosítások elvégzése után indítsa újra a Django szerverét, hogy a módosítások érvényesüljenek.
Íme néhány gyakori API-kérési hiba és azok megoldása:
tulajdonos mező hiányzott a kérésből. Mindig ellenőrizze kétszer is, hogy a frontendje elküldi-e a Django modellek által elvárt összes szükséges mezőt.generics.RetrieveUpdateAPIView-ról generics.RetrieveUpdateDestroyAPIView-ra frissítette, hogy tartalmazza a DELETE kérések támogatását.Miután a Django backend és a React frontend csatlakoztatva van, itt az ideje mindkét fejlesztői szervert elindítani és tesztelni az alkalmazást. Ez magában foglalja a két szerver egyidejű futtatását és annak biztosítását, hogy minden zökkenőmentesen működjön együtt.
A Django-React alkalmazás futtatásához két terminálablakra lesz szükséged - egy-egy szerverre. Ez a beállítás lehetővé teszi, hogy a backend és a frontend egymástól függetlenül működjön, miközben API-hívásokon keresztül kommunikálnak.
A Django Backend szerver elindítása:
Nyissa meg az első terminálablakot, és navigáljon a Django projekt gyökérkönyvtárába.
Aktiválja a Python virtuális környezetét:
source venv/bin/activate
Indítsa el a Django fejlesztői szervert:
python manage.py runserver
A szerver a http://127.0.0.1:8000/ címen lesz elérhető.
A React Frontend szerver elindítása:
Nyisson egy második terminálablakot, és navigáljon a React projekt könyvtárába:
cd frontend
Indítsa el a React fejlesztői szervert:
npm start
Ez automatikusan megnyit egy böngészőablakot a http://localhost:3000/ címen.
Miután mindkét szerver fut, elkezdheti tesztelni az alkalmazás működőképességét.
Miután a szerverek működnek, a CORS és az API végpontok pedig megfelelően konfigurálva vannak, itt az ideje, hogy validáljuk az adatáramlást a frontend és a backend között.
Backend API ellenőrzése:
Tesztelje közvetlenül a Django API végpontjait a következő látogatással:
http://localhost:8000/api/tasks
Ennek meg kell jelenítenie a Django REST keretrendszer böngészhető API felületét, ahol CREATE és READ műveleteket végezhet.
A Django admin felületének elérése a következő címen:
http://localhost:8000/admin
Jelentkezzen be a szuperfelhasználói hitelesítő adatokkal a feladatok létrehozásához, szerkesztéséhez vagy törléséhez. Az UPDATE és DELETE műveleteket is kipróbálhatja, ha ellátogat:
http://localhost:8000/api/tasks/{id}
Frontend-Backend integrációs tesztelés:
http://localhost:3000 oldalon, és erősítse meg, hogy az helyesen töltődik be, és megjeleníti a Django backendből származó feladatokat.Ha az alkalmazás szűrőket vagy egyéb funkciókat tartalmaz, alaposan tesztelje ezeket, hogy megbizonyosodjon arról, hogy a feladatok az elvárt módon jelennek meg.
Ha a tesztelés során bármilyen problémával találkozik, itt van néhány gyakori javítási lehetőség, amelyet kipróbálhat.
API-kapcsolati hibák:
Győződjön meg róla, hogy mindkét szerver a saját portján fut: Django a http://localhost:8000 és a React a http://localhost:3000 porton.
Használja a böngésző fejlesztői eszközeit (hálózat fül) a HTTP státuszkódok, például a 404 vagy 500 azonosításához.
Ellenőrizze a proxy beállítását a React projekt package.json fájljában:
"proxy": "http://localhost:8000"
Ha változtatásokat hajtott végre, indítsa újra a React szervert.
Kiszolgáló indítási problémák:
Ha a Django szerver nem indul el, ellenőrizze a hiányzó migrációkat:
python manage.py makemigrations python manage.py migrate
React szerver problémák esetén próbálja meg a függőségek újratelepítését:
npm install
Adatáramlási problémák:
console.log() a Reactban vagy print utasításokat a Django nézetekben, hogy nyomon követhesse az adatáramlást./api/tasks/).Létrehoztál egy webes alkalmazást, amely a Djangót és a Reactot ötvözi, így szilárd bevezetést kaptál a full-stack fejlesztésbe. Ez a projekt olyan alapvető fogalmakra világít rá, mint a backend és a frontend szétválasztása, a CRUD műveletek végrehajtása és a CORS-beállítások segítségével a cross-origin kérések kezelése. Útközben a Django REST keretrendszerrel dolgoztál API-k létrehozásához, és React horgokat használtál az állapotkezeléshez - olyan készségeket, amelyek lehetővé teszik e két nagy teljesítményű eszköz zökkenőmentes integrációját.
Az alkalmazásod a következő szintre emelése
Rengeteg lehetőség van az alkalmazásod funkcionalitásának bővítésére. Például a Django REST Framework segítségével JWT-hitelesítést adhatsz hozzá a felhasználói adatok és az API-hozzáférés biztonságossá tételéhez. Ez lehetővé tenné, hogy felhasználó-specifikus funkciókat és személyre szabott élményeket kínáljon.
Ha az alkalmazásodnak valós idejű frissítésekre van szüksége, fontold meg a Django Channels használatát a WebSocket támogatás engedélyezéséhez. Ez tökéletes az olyan funkciókhoz, mint az élő műszerfalak, chatrendszerek vagy értesítések, dinamikusabb és interaktívabb platformmá alakítva az alkalmazást.
Ahogy az alkalmazásod növekszik, a fejlett adatvizualizáció fontossá válik. A React renderelési képességeinek a hatékony backend-adatlekérdezéssel való kombinálásával hatékonyan kezelheted és jelenítheted meg az összetett adathalmazokat.
Felkészülés a gyártásra
Amikor az alkalmazást gyártásra készíti elő, összpontosítson a telepítésre, a biztonságra és a teljesítményre. Míg a jelenlegi beállítás nagyszerű a helyi fejlesztéshez, a termelési környezetek extra lépéseket igényelnek. Ezek közé tartozik a környezeti változók beállítása, az adatbázis optimalizálása és az erős hibakezelési mechanizmusok megvalósítása.
Ezek a fejlesztések a már kifejlesztett készségekre épülnek - mint például az API-tervezés, a komponensalapú architektúra és a teljes körű integráció. Ezeknek a fejlett technikáknak az elsajátításával jól felkészült leszel arra, hogy vállalati szintű projektekkel foglalkozz, és tovább fejlődj webfejlesztőként.
A Django használata a backendhez és a React használata a frontendhez erős keveréket hoz létre a modern webes alkalmazások fejlesztéséhez. A Django egy olyan eszközökkel teli, szilárd keretrendszert biztosít, amely racionalizálja a backend-fejlesztést, míg a React a dinamikus és interaktív felhasználói felületek építésében tündököl.
Ez a kombináció elősegíti a felelősségi körök tiszta szétválasztását, ami segít a kódbázis szervezettségét és idővel történő könnyebb bővítését. A React komponensalapú felépítése ösztönzi a felhasználói felület elemeinek újrafelhasználását, a Django REST keretrendszere pedig leegyszerűsíti az API-k építésének folyamatát, biztosítva a zökkenőmentes kommunikációt a frontend és a backend között. Együtt gyors, hatékony és felhasználóközpontú megközelítést kínálnak az alkalmazásfejlesztéshez.
A React frontend és a Django backend közötti CORS-problémák megoldására a django-cors-headers csomag egy praktikus megoldás. Először is telepítse a pip segítségével. Ezután a settings.py fájlban a 'corsheaders' szót add hozzá az INSTALLED_APPS listához. Ezt követően a MIDDLEWARE lista legelején szerepeltesd a 'corsheaders.middleware.CorsMiddleware' -t, hogy biztosítsd a megfelelő middleware végrehajtási sorrendet.
A fejlesztés során egyszerűsítheti a dolgokat, ha a settings.py fájlban beállítja a CORS_ORIGIN_ALLOW_ALL = True értéket. Ez lehetővé teszi a bármilyen eredetű kéréseket. Termelési környezetben azonban sokkal biztonságosabb, ha a CORS_ALLOWED_ORIGINS beállítással konkrét megbízható tartományokat határozunk meg. Ez a megközelítés segít a szigorúbb biztonság fenntartásában.
Ezzel a konfigurációval a React alkalmazásod zökkenőmentesen együttműködhet a Django API-kkal, miközben megfelel a CORS követelményeknek.
Ahhoz, hogy Django és React alkalmazásodat felkészítsd a termelésre, kezdd a Django beállítások biztonságos beállításához való igazításával. Ez magában foglalja a DEBUG hamis értékre állítását és az ALLOWED_HOSTS megadásával azt is, hogy szabályozza, mely tartományok férhetnek hozzá az alkalmazásához. Ezek a módosítások elengedhetetlenek az alkalmazás éles környezetben történő védelméhez.
Ezután válasszon egy megbízható tárhelyplatformot a Django backend és a statikus fájlok számára. Győződjön meg róla, hogy az infrastruktúrája úgy van kialakítva, hogy képes legyen kezelni a termelési szintű forgalmat és igényeket. A React frontendhez használd a megfelelő build-eszközöket egy optimalizált termelési build létrehozásához.
Ha a React alkalmazásod készen áll, állíts be egy webkiszolgálót, például az Nginxet, hogy kiszolgálja mind a React frontendet, mind a Django backendet. A megfelelő szerverkonfiguráció biztosítja az alkalmazás hatékony futtatását és zökkenőmentes felhasználói élményt.
Mielőtt élesben elindulna, alaposan tesztelje az alkalmazást a termelési környezetben. Ez a lépés segít azonosítani és megoldani az esetleges problémákat, így biztosítva, hogy az alkalmazásod megbízhatóan működjön, miután elindítottad.
Fedezze fel a dedikált szerverek és VPS-ek legjobb felügyeleti eszközeit 2025-ben, az AI-ra, az automatizálásra és a valós idejű elemzésekre összpontosítva.
12 perc olvasás - 2025. november 28.
10 perc olvasás - 2025. október 15.
Rugalmas lehetőségek
Globális elérés
Azonnali telepítés
Rugalmas lehetőségek
Globális elérés
Azonnali telepítés