15 λεπτά ανάγνωσης - 28 Νοεμβρίου 2025
Μάθετε πώς να δημιουργείτε μια εφαρμογή ιστού πλήρους φάσης χρησιμοποιώντας το Django για το backend και το React για το frontend, με βήμα προς βήμα καθοδήγηση.
Ψάχνετε να δημιουργήσετε μια διαδικτυακή εφαρμογή με ισχυρό backend και δυναμικό frontend; Η σύζευξη του Django, ενός πλαισίου Python, με το React, μια βιβλιοθήκη JavaScript, είναι ένας πολύ καλός τρόπος για να το πετύχετε αυτό. Το Django χειρίζεται εργασίες του backend, όπως η διαχείριση βάσεων δεδομένων και η δημιουργία API, ενώ το React δημιουργεί μια ευέλικτη, διαδραστική διεπαφή χρήστη.
Βασικά βήματα:
Ρυθμίστε το περιβάλλον σας:- Εγκαταστήστε την Python 3.x για το Django και το Node.js για το React.
python --version, node --version και npm --version.Οργανώστε το έργο σας:- Δημιουργήστε ξεχωριστούς φακέλους για το backend του Django και το frontend του React.
το django-admin startproject για τη ρύθμιση του backend και το npx create-react-app για την αρχικοποίηση του frontend.Κατασκευάστε το backend:- Δημιουργήστε εφαρμογές Django, ορίστε μοντέλα και δημιουργήστε μετακινήσεις.
το django-cors-headers για να καταστεί δυνατή η επικοινωνία μεταξύ frontend και backend.Ανάπτυξη του Frontend:- Χρησιμοποιήστε στοιχεία React για τη διαχείριση εργασιών και αλληλεπιδράσεων χρήστη.
Συνδέστε και δοκιμάστε:- Εκτελέστε το Django στο localhost:8000 και το React στο localhost:3000.
Αυτή η ρύθμιση σας επιτρέπει να δημιουργήσετε αποτελεσματικά μια εφαρμογή πλήρους στοίβας με σαφή διαχωρισμό μεταξύ backend και frontend. Ακολουθήστε αυτά τα βήματα για να δημιουργήσετε μια κλιμακούμενη, διαδραστική εφαρμογή ιστού.
Πριν ξεκινήσετε να κατασκευάζετε την εφαρμογή Django και React, είναι ζωτικής σημασίας να ρυθμίσετε το περιβάλλον ανάπτυξης με τα απαραίτητα εργαλεία και εξαρτήσεις. Αυτή η βάση θα σας βοηθήσει να δημιουργήσετε, να ενσωματώσετε και να δοκιμάσετε ομαλά τα στοιχεία του Django και του React καθώς προχωράτε.
Για να ξεκινήσετε, η μηχανή ανάπτυξής σας θα χρειαστεί Python 3.x για το Django και Node.js για το React. Συγκεκριμένα, το Django 5.0 απαιτεί Python 3.x, ενώ το React λειτουργεί με Node.js έκδοσης 12 ή υψηλότερης.
Εγκατάσταση της Python: Μπορείτε να κατεβάσετε την Python απευθείας από τον επίσημο ιστότοπό της ή να χρησιμοποιήσετε τον διαχειριστή πακέτων του συστήματός σας. Για τους χρήστες του macOS, το Homebrew το κάνει απλό με το brew install python. Οι χρήστες των Windows θα πρέπει να πάρουν τον εγκαταστάτη από το python.org, ενώ οι χρήστες Linux μπορούν να την εγκαταστήσουν με εντολές όπως apt install python3 στο Ubuntu ή παρόμοιες εντολές για άλλες διανομές.
Ρύθμιση του Node.js και του npm: Το Node.js έρχεται πακέτο με το npm (Node Package Manager). Θα χρειαστείτε την έκδοση 6 ή νεότερη του npm, με την έκδοση 7.5.4 να αποτελεί μια αξιόπιστη επιλογή. Κατεβάστε το Node.js από το nodejs.org, το οποίο θα περιλαμβάνει αυτόματα το npm.
Εικονικά περιβάλλοντα Python: Η χρήση εικονικών περιβαλλόντων είναι το κλειδί για τη διαχείριση των εξαρτήσεων συγκεκριμένων έργων χωρίς συγκρούσεις. Μπορείτε να χρησιμοποιήσετε την ενσωματωμένη ενότητα venv ή εργαλεία όπως το pipenv ή το virtualenvwrapper για περισσότερες δυνατότητες. Αν είστε σε Windows, το πακέτο virtualenvwrapper-win παρέχει παρόμοια λειτουργικότητα.
Για να επιβεβαιώσετε τις εγκαταστάσεις σας, εκτελέστε αυτές τις εντολές στο τερματικό σας:
python --version node --version npm --version
Μια καλά οργανωμένη δομή έργου είναι απαραίτητη για να κρατάτε τον κώδικα του backend και του frontend χωριστά και διαχειρίσιμα. Ξεκινήστε δημιουργώντας έναν κύριο κατάλογο για το έργο σας:
mkdir django-react-app cd django-react-app
Μέσα σε αυτόν τον κατάλογο, δημιουργήστε δύο φακέλους: έναν για το Django backend σας και έναν για το React frontend σας. Αυτός ο διαχωρισμός σας επιτρέπει να συντηρείτε και να αναπτύσσετε κάθε μέρος ανεξάρτητα.
Ρυθμίστε το εικονικό περιβάλλον της Python μέσα στον κατάλογο project:
python -m venv venv
Ενεργοποιήστε το εικονικό περιβάλλον:
source venv/bin/activatevenv\Scripts\activateΑυτό το βήμα διασφαλίζει ότι όλες οι εξαρτήσεις της Python για το έργο σας είναι απομονωμένες.
Με το περιβάλλον σας έτοιμο, ήρθε η ώρα να εγκαταστήσετε τα απαραίτητα πακέτα τόσο για το Django όσο και για το React.
Πακέτα για το Django Backend: Ενώ το εικονικό σας περιβάλλον είναι ενεργό, εγκαταστήστε το Django και τις υποστηρικτικές βιβλιοθήκες του χρησιμοποιώντας το pip:
pip install django pip install djangorestframework pip install django-cors-headers
Ρύθμιση του React Frontend: Για να ρυθμίσετε το περιβάλλον σας React, χρησιμοποιήστε το εργαλείο create-react-app. Αυτή η εντολή αρχικοποιεί ένα έργο React και εγκαθιστά όλες τις απαραίτητες εξαρτήσεις:
npx create-react-app frontend
Αυτό θα δημιουργήσει ένα νέο έργο React σε έναν κατάλογο frontend, πλήρες με τα βασικά πακέτα, τα εργαλεία ανάπτυξης και τα σενάρια κατασκευής.
Πρόσθετο πακέτο frontend: Αφού δημιουργήσετε το React project σας, πλοηγηθείτε στον κατάλογο frontend και εγκαταστήστε το Axios, μια βιβλιοθήκη για την πραγματοποίηση αιτήσεων HTTP στο Django API σας:
cd frontend npm install axios
Σε αυτό το σημείο, το περιβάλλον ανάπτυξής σας είναι πλήρως εξοπλισμένο με Python 3.x, Django, Node.js, React και όλα τα απαραίτητα εργαλεία. Το εικονικό περιβάλλον της Python διασφαλίζει ότι οι εξαρτήσεις του backend σας είναι απομονωμένες, ενώ το npm χειρίζεται τα πακέτα JavaScript σας ξεχωριστά. Τώρα είστε έτοιμοι να αρχίσετε να χτίζετε την full-stack εφαρμογή σας!
Δημιουργήστε ένα backend Django με μοντέλα βάσεων δεδομένων, τελικά σημεία API και ενσωμάτωση για ένα frontend React.
Ξεκινήστε δημιουργώντας ένα έργο Django, το οποίο περιλαμβάνει ρυθμίσεις, διαμορφώσεις βάσης δεδομένων και επιλογές που αφορούν την εφαρμογή. Μέσα σε αυτό το έργο, θα δημιουργήσετε μια εφαρμογή Django - ένα πακέτο Python σχεδιασμένο για συγκεκριμένες εργασίες, όπως η διαχείριση δεδομένων χρηστών ή περιεχομένου.
Πλοηγηθείτε στον ριζικό κατάλογο του έργου σας (όπου έχει δημιουργηθεί το εικονικό σας περιβάλλον) και δημιουργήστε το έργο Django:
django-admin startproject backend .
Αυτή η εντολή δημιουργεί αρχεία έργου απευθείας στον τρέχοντα κατάλογο, αποφεύγοντας έναν επιπλέον φάκελο. Θα παρατηρήσετε νέα αρχεία όπως το manage.py (για την εκτέλεση των εντολών του Django) και έναν κατάλογο backend που περιέχει αρχεία όπως τα settings.py, urls.py, asgi.py και wsgi.py.
Στη συνέχεια, δημιουργήστε μια εφαρμογή για τη διαχείριση συγκεκριμένων λειτουργιών. Για παράδειγμα, ένα σύστημα διαχείρισης εργασιών:
python manage.py startapp tasks
Αυτό δημιουργεί έναν κατάλογο tasks με βασικά αρχεία όπως τα models.py, views.py, admin.py και έναν φάκελο migrations. Φροντίστε να αποφύγετε συγκρούσεις ονοματοδοσίας με ενσωματωμένα ονόματα όπως "django" ή "test".
Καταχωρήστε την εφαρμογή στις ρυθμίσεις του έργου σας προσθέτοντάς την στη λίστα INSTALLED_APPS στο 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 ]
Ορίστε τη δομή των δεδομένων σας με τα μοντέλα του Django. Για παράδειγμα, ένα απλό μοντέλο Task για την εφαρμογή διαχείρισης εργασιών μπορεί να προστεθεί στο 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
Αυτό το μοντέλο περιλαμβάνει πεδία όπως CharField για σύντομο κείμενο, TextField για μεγαλύτερο περιεχόμενο, BooleanField για αληθείς/ψευδείς τιμές και DateTimeField για χρονοσφραγίδες. Η κλάση Meta καθορίζει επιλογές όπως η προεπιλεγμένη ταξινόμηση.
Εφαρμόστε το μοντέλο στη βάση δεδομένων σας εκτελώντας μεταναστεύσεις:
python manage.py makemigrations tasks python manage.py migrate
Για να μετατρέψετε τα δεδομένα του μοντέλου σε JSON, χρησιμοποιήστε τους σειριοποιητές του Django REST Framework. Στο tasks/serializers.py, ορίστε έναν σειροποιητή για το μοντέλο 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 δημιουργεί αυτόματα πεδία και μεθόδους με βάση το μοντέλο. Η ρητή απαρίθμηση των πεδίων διασφαλίζει ότι δεν εκθέτετε ακούσια ευαίσθητα δεδομένα.
Το Django REST Framework απλοποιεί τη δημιουργία API. Για τυπικές λειτουργίες CRUD, χρησιμοποιήστε ViewSets με δρομολογητές για μια καθαρή, RESTful δομή.
Στο tasks/views.py, δημιουργήστε προβολές 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] # Μόνο για ανάπτυξη
Το ModelViewSet χειρίζεται αυτόματα την καταχώριση, τη δημιουργία, την ανάκτηση, την ενημέρωση και τη διαγραφή εργασιών.
Ρυθμίστε τη δρομολόγηση URL στο αρχείο 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)), ]
Συμπεριλάβετε αυτές τις διευθύνσεις URL στο κύριο αρχείο backend/urls.py:
from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('tasks.urls')), ]
Για να επιτρέψετε στο frontend του React (που εκτελείται στη θύρα 3000) να επικοινωνεί με το backend του Django (στη θύρα 8000), ρυθμίστε το Cross-Origin Resource Sharing (CORS). Χωρίς αυτό, οι φυλλομετρητές μπλοκάρουν τα cross-origin αιτήματα για λόγους ασφαλείας.
Ενημερώστε το backend/settings.py για να συμπεριλάβει τη διαμόρφωση 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 για την ανάπτυξη CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", # React development server "http://127.0.0.1:3000", ] CORS_ALLOW_CREDENTIALS = True
Για γρήγορες δοκιμές, μπορείτε να χρησιμοποιήσετε το CORS_ALLOW_ALL_ORIGINS = True, αλλά ο προσδιορισμός των επιτρεπόμενων προελεύσεων είναι ασφαλέστερος.
Πριν ενσωματώσετε το frontend του React, δοκιμάστε τα τελικά σημεία API για να βεβαιωθείτε ότι λειτουργούν όπως αναμένεται. Εκκινήστε τον διακομιστή ανάπτυξης του Django:
python manage.py runserver
Αποκτήστε πρόσβαση στο API στη διεύθυνση http://127.0.0.1:8000/api/tasks/. Χρησιμοποιήστε το περιηγήσιμο API για να δοκιμάσετε λειτουργίες όπως τα αιτήματα GET και POST.
Εναλλακτικά, δοκιμάστε με το cURL ή το Postman:
# Δοκιμή αιτήματος GET για τη λίστα εργασιών curl -X GET http://127.0.0.1:8000/api/tasks/ # Δοκιμή αιτήματος POST για τη δημιουργία μιας εργασίας curl -X POST http://127.0.0.1:8000/api/tasks/ \ -H "Content-Type: application/json" \ -d '{"title": "Test Task", "description": "}''
Για αυτοματοποιημένο έλεγχο, προσθέστε περιπτώσεις δοκιμών στο 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
Με το backend στη θέση του, είστε έτοιμοι να το συνδέσετε με το frontend του React.
Για να δημιουργήσετε μια ελκυστική διεπαφή για το Django backend σας, θα χρησιμοποιήσετε το React για τη διαχείριση των αλληλεπιδράσεων του χρήστη - από την προβολή εργασιών μέχρι την προσθήκη νέων.
Ξεκινήστε με τη δημιουργία του frontend σας με React χρησιμοποιώντας το Create React App. Πλοηγηθείτε στον ριζικό κατάλογο του έργου σας (όπου βρίσκεται το Django backend σας) και εκτελέστε:
npx create-react-app frontend cd frontend
Αυτή η εντολή δημιουργεί μια εφαρμογή React με βασικά αρχεία όπως τα package.json, src/App.js και public/index.html. Περιλαμβάνει επίσης εργαλεία όπως το webpack για την ομαδοποίηση, το Babel για τη μεταγλώττιση JavaScript και έναν διακομιστή ανάπτυξης για δοκιμές.
Στη συνέχεια, εγκαταστήστε το Axios για το χειρισμό των αιτημάτων HTTP προς το Django API σας:
npm install axios
Το Axios κάνει τις κλήσεις API απλούστερες, διαχειριζόμενο την ανάλυση JSON και προσφέροντας καλύτερο χειρισμό σφαλμάτων από την ενσωματωμένη συνάρτηση fetch(). Υποστηρίζει επίσης χαρακτηριστικά όπως οι αναχαιτιστές αιτήσεων και απαντήσεων.
Η δομή του φακέλου σας θα πρέπει τώρα να μοιάζει με αυτό:
project-root/ ├── backend/ │ ├── manage.py │ ├── backend/ │ └── tasks/ └── frontend/ ├── package.json ├── public/ └── src/
Για να επιβεβαιώσετε ότι όλα λειτουργούν, ξεκινήστε τον διακομιστή ανάπτυξης του React:
npm start
Αυτό εκκινεί την εφαρμογή στη διεύθυνση http://localhost:3000, εμφανίζοντας την προεπιλεγμένη σελίδα καλωσορίσματος του React. Κρατήστε αυτόν τον διακομιστή σε λειτουργία κατά τη διάρκεια της ανάπτυξης - επαναφορτώνεται αυτόματα όταν κάνετε αλλαγές.
Ας δημιουργήσουμε ένα συστατικό TaskList για την εμφάνιση των εργασιών που λαμβάνονται από το Django API σας. Προσθέστε τα ακόλουθα στο src/components/TaskList.js:
import React from 'react'; const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => { return ( <div className="task-list"> <h2>Οι εργασίες σας</h2> {tasks.length === 0 ? ( <p>Δεν υπάρχουν διαθέσιμες εργασίες. Δημιουργήστε την πρώτη σας εργασία!</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: {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" > Διαγραφή </button> </div> </li> ))} </ul> )} </div> ); }; export default TaskList,
Στη συνέχεια, δημιουργήστε ένα στοιχείο TaskForm για την προσθήκη νέων εργασιών. Προσθέστε το στο 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="Τίτλος εργασίας" value={title} onChange={(e) => setTitle(e.target.value)} disabled={isSubmitting} required /> </div> <div className="form-group">- <textarea placeholder="Περιγραφή εργασίας (προαιρετική)" 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,
Για κάποιο βασικό styling, δημιουργήστε ένα αρχείο src/App.css και προσθέστε:
.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 #dddd; border-radius: .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; }
Τα άγκιστρα του React όπως το useState και το useEffect διευκολύνουν τη διαχείριση της κατάστασης και την αλληλεπίδραση με το Django backend σας. Για να συγκεντρώσετε τις κλήσεις API, δημιουργήστε ένα αρχείο υπηρεσιών 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,
Τέλος, ενσωματώστε τα πάντα στο 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); } } }; // Πρόσθετες μέθοδοι για την προσθήκη, ενημέρωση και διαγραφή εργασιών θα πήγαιναν εδώ }
Με αυτή τη ρύθμιση, το React frontend σας είναι έτοιμο να χειριστεί διαδραστικά τις εργασίες, ενώ επικοινωνεί απρόσκοπτα με το Django backend σας.
Κουραστήκατε από αργές αναπτύξεις ή όρια εύρους ζώνης; Η FDC Servers προσφέρει άμεση αποκλειστική ισχύ, παγκόσμια εμβέλεια και ευέλικτα πακέτα κατασκευασμένα για κάθε κλίμακα. Έτοιμοι για αναβάθμιση;
Ξεκλειδώστε την απόδοση τώραΤώρα που το backend και το frontend σας είναι έτοιμα και λειτουργούν, το επόμενο βήμα είναι να εξασφαλίσετε την ομαλή επικοινωνία μεταξύ τους. Αυτό περιλαμβάνει τη δημιουργία τελικών σημείων API, τη διαχείριση των αιτήσεων και την αντιμετώπιση τυχόν προβλημάτων ενσωμάτωσης.
Η εφαρμογή σας React πρέπει να γνωρίζει πού να εντοπίσει τα τελικά σημεία του API του Django. Για να το πετύχετε αυτό, ενημερώστε το αρχείο src/services/api.js με ρυθμίσεις που αφορούν το περιβάλλον:
import axios from 'axios'; // Καθορισμός της βασικής διεύθυνσης URL του API με βάση το περιβάλλον 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 δευτερόλεπτα 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,
Για την παραγωγή, προσθέστε ένα αρχείο .env στη ρίζα του React project σας με το ακόλουθο περιεχόμενο:
REACT_APP_API_URL=https://your-production-domain.com/api
Αυτή η ρύθμιση διασφαλίζει ότι η εφαρμογή σας React μπορεί να αλληλεπιδράσει απρόσκοπτα με το Django backend σας, είτε βρίσκεστε σε ένα τοπικό περιβάλλον ανάπτυξης είτε σε ανάπτυξη στην παραγωγή. Με τη διαμόρφωση των τελικών σημείων API, είστε έτοιμοι να αντλήσετε και να χειριστείτε δεδομένα του backend.
Μόλις οριστεί η διαμόρφωση του API, μπορείτε να εκτελέσετε λειτουργίες CRUD για τη διαχείριση δεδομένων μεταξύ του React και του Django. Ενημερώστε το 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); 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 delete task:', err); } } }- if (loading) { return <div className="loading">Φόρτωση εργασιών...</div>; } return ( <div className="App">- <header className="App-header">- <h1>Διαχείριση εργασιών</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,
Αυτός ο κώδικας χειρίζεται τη δημιουργία εργασιών, τις ενημερώσεις, τις διαγραφές και τη διαχείριση σφαλμάτων. Το UI ενημερώνεται αμέσως για μια ομαλή εμπειρία χρήστη, και τα σφάλματα διαχειρίζονται με αξιοπρέπεια με την επαναφορά των αλλαγών ή την εμφάνιση κατάλληλων μηνυμάτων.
Ένα από τα πιο συνηθισμένα εμπόδια κατά τη σύνδεση του Django και του React είναι η αντιμετώπιση των σφαλμάτων CORS (Cross-Origin Resource Sharing). Αυτά προκύπτουν επειδή οι φυλλομετρητές μπλοκάρουν τις αιτήσεις μεταξύ διαφορετικών προελεύσεων για λόγους ασφαλείας. Κατά τη διάρκεια της ανάπτυξης, το React συνήθως εκτελείται στο localhost:3000, ενώ το Django λειτουργεί στο localhost:8000, δημιουργώντας ένα σενάριο cross-origin.
Για να αντιμετωπίσετε τα προβλήματα CORS, βεβαιωθείτε ότι έχετε διαμορφώσει τις κεφαλίδες CORS στις ρυθμίσεις του Django, όπως περιγράφεται στην ενότητα "Διαμόρφωση κεφαλίδων CORS". Αφού πραγματοποιήσετε τις αλλαγές, επανεκκινήστε το διακομιστή Django για να τις εφαρμόσετε.
Ακολουθούν μερικά συνηθισμένα σφάλματα αιτήσεων API και οι λύσεις τους:
owner έλειπε από το αίτημα. Πάντα να ελέγχετε διπλά ότι το frontend σας στέλνει όλα τα απαιτούμενα πεδία που αναμένονται από τα μοντέλα του Django.generics.RetrieveUpdateAPIView σε generics.RetrieveUpdateDestroyAPIView ώστε να περιλαμβάνει υποστήριξη για αιτήσεις DELETE.Με το Django backend και το React frontend συνδεδεμένα, ήρθε η ώρα να εκκινήσετε και τους δύο διακομιστές ανάπτυξης και να δοκιμάσετε την εφαρμογή. Αυτό περιλαμβάνει την ταυτόχρονη λειτουργία των δύο διακομιστών και τη διασφάλιση ότι όλα λειτουργούν ομαλά μαζί.
Για να τρέξετε την εφαρμογή σας Django-React, θα χρειαστείτε δύο τερματικά παράθυρα - ένα για κάθε διακομιστή. Αυτή η ρύθμιση επιτρέπει στο backend και το frontend να λειτουργούν ανεξάρτητα, ενώ επικοινωνούν μέσω κλήσεων API.
Εκκίνηση του διακομιστή Django Backend:
Ανοίξτε το πρώτο παράθυρο τερματικού και πλοηγηθείτε στον ριζικό κατάλογο του Django project σας.
Ενεργοποιήστε το εικονικό περιβάλλον της Python:
source venv/bin/activate
Εκκινήστε τον διακομιστή ανάπτυξης του Django:
python manage.py runserver
Ο διακομιστής θα είναι διαθέσιμος στη διεύθυνση http://127.0.0.1:8000/.
Εκκίνηση του διακομιστή React Frontend:
Ανοίξτε ένα δεύτερο παράθυρο τερματικού και πλοηγηθείτε στον κατάλογο του έργου σας React:
cd frontend
Εκκινήστε τον διακομιστή ανάπτυξης του React:
npm start
Αυτό θα ανοίξει αυτόματα ένα παράθυρο προγράμματος περιήγησης στη διεύθυνση http://localhost:3000/.
Μόλις τρέξουν και οι δύο διακομιστές, μπορείτε να αρχίσετε να δοκιμάζετε τη λειτουργικότητα της εφαρμογής σας.
Με τους διακομιστές σε λειτουργία και τα CORS και τα τελικά σημεία API ρυθμισμένα σωστά, ήρθε η ώρα να επικυρώσετε τη ροή δεδομένων μεταξύ του frontend και του backend.
Επαλήθευση API backend:
Ελέγξτε τα τελικά σημεία API του Django απευθείας με την επίσκεψη:
http://localhost:8000/api/tasks
Αυτό θα πρέπει να εμφανίσει το περιηγήσιμο περιβάλλον API του Django REST Framework, όπου μπορείτε να εκτελέσετε λειτουργίες CREATE και READ.
Αποκτήστε πρόσβαση στη διεπαφή διαχείρισης του Django στη διεύθυνση:
http://localhost:8000/admin
Συνδεθείτε με τα διαπιστευτήριά σας ως υπερχρήστης για να δημιουργήσετε, να επεξεργαστείτε ή να διαγράψετε εργασίες. Μπορείτε επίσης να δοκιμάσετε τις λειτουργίες UPDATE και DELETE επισκεπτόμενοι την ιστοσελίδα:
http://localhost:8000/api/tasks/{id}
Δοκιμές ολοκλήρωσης frontend-backend:
http://localhost:3000 και επιβεβαιώστε ότι φορτώνει σωστά, εμφανίζοντας εργασίες από το backend του Django.Εάν η εφαρμογή σας περιλαμβάνει φίλτρα ή άλλες λειτουργίες, δοκιμάστε τα διεξοδικά για να επιβεβαιώσετε ότι οι εργασίες εμφανίζονται όπως αναμένεται.
Αν αντιμετωπίσετε προβλήματα κατά τη διάρκεια της δοκιμής, παρακάτω θα βρείτε μερικές κοινές λύσεις που μπορείτε να δοκιμάσετε.
Σφάλματα σύνδεσης API:
Βεβαιωθείτε ότι και οι δύο διακομιστές λειτουργούν στις αντίστοιχες θύρες τους: Django στη διεύθυνση http://localhost:8000 και React στη διεύθυνση http://localhost:3000.
Χρησιμοποιήστε τα εργαλεία ανάπτυξης του προγράμματος περιήγησης (καρτέλα δικτύου) για να εντοπίσετε κωδικούς κατάστασης HTTP όπως 404 ή 500.
Ελέγξτε τη ρύθμιση μεσολάβησης στο αρχείο package.json του έργου σας React:
"proxy": "http://localhost:8000"
Εάν κάνετε αλλαγές, επανεκκινήστε τον διακομιστή React.
Προβλήματα εκκίνησης του διακομιστή:
Αν ο διακομιστής Django δεν ξεκινάει, ελέγξτε για ελλείπουσες μετακινήσεις:
python manage.py makemigrations python manage.py migrate
Για προβλήματα του διακομιστή React, δοκιμάστε να επανεγκαταστήσετε τις εξαρτήσεις:
npm install
Προβλήματα ροής δεδομένων:
console.log() στο React ή δηλώσεις εκτύπωσης σε προβολές του Django, για να εντοπίσετε τη ροή δεδομένων./api/tasks/).Δημιουργήσατε μια διαδικτυακή εφαρμογή που συνδυάζει το Django και το React, δίνοντάς σας μια σταθερή εισαγωγή στην ανάπτυξη πλήρους στοίβας. Αυτό το έργο αναδεικνύει βασικές έννοιες όπως ο διαχωρισμός του backend από το frontend, η εκτέλεση λειτουργιών CRUD και η διαχείριση αιτημάτων πολλαπλής προέλευσης με τη χρήση ρυθμίσεων CORS. Στην πορεία, εργαστήκατε με το Django REST Framework για τη δημιουργία APIs και χρησιμοποιήσατε τα hooks του React για τη διαχείριση της κατάστασης - δεξιότητες που επιτρέπουν την ομαλή ενσωμάτωση μεταξύ αυτών των δύο ισχυρών εργαλείων.
Πηγαίνοντας την εφαρμογή σας στο επόμενο επίπεδο
Υπάρχουν πολλά περιθώρια για να επεκτείνετε τη λειτουργικότητα της εφαρμογής σας. Για παράδειγμα, μπορείτε να προσθέσετε τον έλεγχο ταυτότητας JWT χρησιμοποιώντας το Django REST Framework για να ασφαλίσετε τα δεδομένα των χρηστών και την πρόσβαση στο API. Αυτό θα σας επιτρέψει να προσφέρετε λειτουργίες και εξατομικευμένες εμπειρίες ειδικά για κάθε χρήστη.
Αν η εφαρμογή σας χρειάζεται ενημερώσεις σε πραγματικό χρόνο, σκεφτείτε να χρησιμοποιήσετε το Django Channels για να ενεργοποιήσετε την υποστήριξη WebSocket. Αυτό είναι ιδανικό για λειτουργίες όπως ζωντανά ταμπλό, συστήματα συνομιλίας ή ειδοποιήσεις, μετατρέποντας την εφαρμογή σας σε μια πιο δυναμική και διαδραστική πλατφόρμα.
Καθώς η εφαρμογή σας αναπτύσσεται, η προηγμένη οπτικοποίηση δεδομένων γίνεται σημαντική. Συνδυάζοντας τις δυνατότητες απεικόνισης του React με την αποτελεσματική ανάκτηση δεδομένων από το backend, θα είστε σε θέση να χειρίζεστε και να εμφανίζετε αποτελεσματικά πολύπλοκα σύνολα δεδομένων.
Προετοιμασία για παραγωγή
Όταν προετοιμάζετε την εφαρμογή σας για παραγωγή, επικεντρωθείτε στην ανάπτυξη, την ασφάλεια και την απόδοση. Ενώ η τρέχουσα ρύθμιση είναι εξαιρετική για τοπική ανάπτυξη, τα περιβάλλοντα παραγωγής απαιτούν επιπλέον βήματα. Αυτά περιλαμβάνουν τη ρύθμιση μεταβλητών περιβάλλοντος, τη βελτιστοποίηση της βάσης δεδομένων σας και την εφαρμογή ισχυρών μηχανισμών διαχείρισης σφαλμάτων.
Αυτές οι βελτιώσεις βασίζονται στις δεξιότητες που έχετε ήδη αναπτύξει - όπως ο σχεδιασμός API, η αρχιτεκτονική βασισμένη σε συστατικά και η ολοκλήρωση πλήρους στοίβας. Κατακτώντας αυτές τις προηγμένες τεχνικές, θα είστε καλά εξοπλισμένοι για να αναλάβετε έργα επιχειρηματικού επιπέδου και να συνεχίσετε να αναπτύσσεστε ως προγραμματιστής ιστού.
Η χρήση του Django για το backend και του React για το frontend δημιουργεί ένα ισχυρό μείγμα για την ανάπτυξη σύγχρονων διαδικτυακών εφαρμογών. Το Django παρέχει ένα σταθερό πλαίσιο γεμάτο με εργαλεία που βελτιώνουν την ανάπτυξη του backend, ενώ το React λάμπει στην κατασκευή δυναμικών και διαδραστικών διεπαφών χρήστη.
Αυτός ο συνδυασμός προάγει έναν καθαρό διαχωρισμό των αρμοδιοτήτων, ο οποίος βοηθά να διατηρείται οργανωμένη η βάση κώδικα και να επεκτείνεται ευκολότερα με την πάροδο του χρόνου. Η δομή του React που βασίζεται σε στοιχεία ενθαρρύνει την επαναχρησιμοποίηση στοιχείων UI, ενώ το πλαίσιο REST του Django απλοποιεί τη διαδικασία δημιουργίας APIs, εξασφαλίζοντας την ομαλή επικοινωνία μεταξύ frontend και backend. Μαζί, προσφέρουν μια γρήγορη, αποτελεσματική και χρηστοκεντρική προσέγγιση στην ανάπτυξη εφαρμογών.
Για να αντιμετωπίσετε ζητήματα CORS μεταξύ ενός frontend React και ενός backend Django, το πακέτο django-cors-headers είναι μια εύχρηστη λύση. Αρχικά, εγκαταστήστε το χρησιμοποιώντας το pip. Στη συνέχεια, στο αρχείο settings.py, προσθέστε το 'corsheaders' στη λίστα INSTALLED_APPS. Μετά από αυτό, συμπεριλάβετε το 'corsheaders.middleware.CorsMiddleware' στην κορυφή της λίστας MIDDLEWARE για να εξασφαλίσετε τη σωστή σειρά εκτέλεσης του middleware.
Κατά τη διάρκεια της ανάπτυξης, μπορείτε να απλοποιήσετε τα πράγματα θέτοντας CORS_ORIGIN_ALLOW_ALL = True στο αρχείο settings.py. Αυτό επιτρέπει αιτήσεις από οποιαδήποτε προέλευση. Ωστόσο, σε ένα περιβάλλον παραγωγής, είναι πολύ ασφαλέστερο να ορίσετε συγκεκριμένα αξιόπιστα domains χρησιμοποιώντας τη ρύθμιση CORS_ALLOWED_ORIGINS. Αυτή η προσέγγιση βοηθά στη διατήρηση αυστηρότερης ασφάλειας.
Με αυτή τη διαμόρφωση, η εφαρμογή React μπορεί να αλληλεπιδρά ομαλά με τα APIs του Django, ενώ παραμένει συμβατή με τις απαιτήσεις CORS.
Για να προετοιμάσετε την εφαρμογή σας Django και React για την παραγωγή, ξεκινήστε με την προσαρμογή των ρυθμίσεων του Django για μια ασφαλή ρύθμιση. Αυτό περιλαμβάνει τη ρύθμιση του DEBUG σε False και τον προσδιορισμό του ALLOWED_HOSTS για να ελέγξετε ποιοι τομείς μπορούν να έχουν πρόσβαση στην εφαρμογή σας. Αυτές οι αλλαγές είναι απαραίτητες για την προστασία της εφαρμογής σας σε ένα ζωντανό περιβάλλον.
Στη συνέχεια, επιλέξτε μια αξιόπιστη πλατφόρμα φιλοξενίας για το Django backend και τα στατικά αρχεία σας. Βεβαιωθείτε ότι η υποδομή σας είναι κατασκευασμένη για να διαχειρίζεται την κυκλοφορία και τις απαιτήσεις σε επίπεδο παραγωγής. Για το frontend του React, χρησιμοποιήστε τα κατάλληλα εργαλεία κατασκευής για να δημιουργήσετε μια βελτιστοποιημένη κατασκευή παραγωγής.
Μόλις η εφαρμογή σας React είναι έτοιμη, ρυθμίστε έναν διακομιστή ιστού όπως το Nginx για να εξυπηρετεί τόσο το frontend React όσο και το backend Django. Η σωστή διαμόρφωση του διακομιστή διασφαλίζει ότι η εφαρμογή σας εκτελείται αποτελεσματικά και παρέχει μια απρόσκοπτη εμπειρία για τους χρήστες.
Πριν ξεκινήσετε τη λειτουργία, δοκιμάστε διεξοδικά την εφαρμογή σας στο περιβάλλον παραγωγής. Αυτό το βήμα βοηθά στον εντοπισμό και την επίλυση τυχόν προβλημάτων, διασφαλίζοντας ότι η εφαρμογή σας λειτουργεί αξιόπιστα μόλις ξεκινήσει.
Εξερευνήστε τα καλύτερα εργαλεία παρακολούθησης για αφιερωμένους διακομιστές και VPS το 2025, εστιάζοντας στην τεχνητή νοημοσύνη, την αυτοματοποίηση και την ανάλυση σε πραγματικό χρόνο.
12 λεπτά ανάγνωσης - 28 Νοεμβρίου 2025
10 λεπτά ανάγνωσης - 15 Οκτωβρίου 2025
Ευέλικτες επιλογές
Παγκόσμια εμβέλεια
Άμεση ανάπτυξη
Ευέλικτες επιλογές
Παγκόσμια εμβέλεια
Άμεση ανάπτυξη