Jak vytvořit jednoduchou aplikaci pomocí Django a React

Chcete vytvořit webovou aplikaci se silným backendem a dynamickým frontendem? Skvělým způsobem, jak toho dosáhnout, je spárování frameworku Django, který je vytvořen v jazyce Python, s knihovnou React, která je vytvořena v jazyce JavaScript. Django se stará o úlohy backendu, jako je správa databáze a vytváření rozhraní API, zatímco React vytváří citlivé, interaktivní uživatelské rozhraní.

Klíčové kroky:

1. Nastavení prostředí:- Nainstalujte Python 3.x pro Django a Node.js pro React.

   • Ke správě závislostí Pythonu použijte virtuální prostředí.
   • Potvrďte instalaci pomocí python --version, node --version a npm --version.

2. Uspořádejte svůj projekt:- Vytvořte samostatné složky pro backend Django a frontend React.

   • Pro nastavení backendu použijte django-admin startproject a pro inicializaci frontendu npx create-react-app.

3. Vytvořte backend:- Vytvořte aplikace Django, definujte modely a vygenerujte migrace.

   • K vytvoření koncových bodů API použijte Django REST Framework.
   • Nakonfigurujte django-cors-headers, abyste umožnili komunikaci mezi frontendem a backendem.

4. Vývoj frontendu:- Použijte komponenty React ke správě úloh a interakcí s uživateli.

   • Nainstalujte Axios pro požadavky API a integrujte jej s koncovými body Django.
   • Aplikaci stylizujte pomocí CSS pro čisté uživatelské rozhraní.

5. Připojení a testování:- Spusťte Django na localhost:8000 a React na localhost:3000.

   • Testujte koncové body API pomocí nástrojů jako Postman nebo přímo v prohlížeči.
   • Zajistěte správné nastavení CORS pro bezproblémovou komunikaci.

Toto nastavení vám umožní efektivně vytvořit full-stack aplikaci s jasným oddělením backendu a frontendu. Postupujte podle těchto kroků a vytvořte škálovatelnou interaktivní webovou aplikaci.

ProjektDjango a React pro začátečníky - Vytvořte si fullstackovou aplikaci Notes

Požadavky na nastavení a instalaci

Než začnete vytvářet aplikaci Django a React, je nezbytné nastavit vývojové prostředí s potřebnými nástroji a závislostmi. Tento základ vám pomůže hladce vytvářet, integrovat a testovat komponenty Django a React v průběhu práce.

Systémové požadavky a nástroje

Abyste mohli začít, bude váš vývojový stroj potřebovat Python 3.x pro Django a Node.js pro React. Konkrétně Django 5.0 vyžaduje Python 3.x, zatímco React funguje s Node.js verze 12 nebo vyšší.

Instalace Pythonu: Python si můžete stáhnout přímo z jeho oficiálních webových stránek nebo použít správce balíčků vašeho systému. Pro uživatele systému MacOS je to jednoduché díky nástroji Homebrew: brew install python. Uživatelé systému Windows by si měli stáhnout instalační program z webu python.org, zatímco uživatelé Linuxu jej mohou nainstalovat pomocí příkazů jako apt install python3 v Ubuntu nebo podobných příkazů pro ostatní distribuce.

Nastavení Node.js a npm: Node.js se dodává s balíčkem npm (Node Package Manager). Budete potřebovat npm verze 6 nebo vyšší, přičemž spolehlivou volbou je verze 7.5.4. Stáhněte si Node.js ze stránek nodejs.org, které automaticky obsahují balíček npm.

Virtuální prostředí Python: Používání virtuálních prostředí je klíčem ke správě závislostí specifických pro daný projekt bez konfliktů. Můžete použít vestavěný modul venv nebo nástroje jako pipenv nebo virtualenvwrapper, které mají více funkcí. Pokud používáte systém Windows, podobnou funkci poskytuje balíček virtualenvwrapper-win.

Pro potvrzení instalace spusťte v terminálu tyto příkazy:

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

Vytvoření struktury projektu

Dobře uspořádaná struktura projektu je nezbytná pro oddělení a správu kódu backendu a frontendu. Začněte vytvořením hlavního adresáře projektu:

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

Uvnitř tohoto adresáře vytvořte dvě složky: jednu pro backend Django a druhou pro frontend React. Toto oddělení vám umožní udržovat a nasazovat každou část nezávisle.

V adresáři projektunastavte virtuální prostředí Python:

Python -m venv venv

Aktivujte virtuální prostředí:

• V systému MacOS/Linux: source venv/bin/activate
• V systému Windows: venv\Scripts\activate

Tento krok zajistí, že všechny závislosti Pythonu pro váš projekt budou izolovány.

Instalace požadovaných balíčků

Když máte prostředí připravené, je čas nainstalovat potřebné balíčky pro Django i React.

Balíčky backendu Django: Dokud je vaše virtuální prostředí aktivní, nainstalujte Django a jeho podpůrné knihovny pomocí pip:

Django: pip install django pip install djangorestframework pip install django-cors-headers

• Django se stará o logiku na straně serveru, správu databáze a směrování URL.
• Django REST Framework zjednodušuje proces vytváření rozhraní RESTful API a usnadňuje vytváření koncových bodů pro váš frontend React.
• Django-cors-headers umožňuje Cross-Origin Resource Sharing (CORS), což je nezbytné pro komunikaci mezi vaším frontendem React (běžícím na portu 3000) a backendem Django (běžícím na portu 8000).

Nastavení frontendu React: Pro nastavení prostředí React použijte nástroj create-react-app. Tento příkaz inicializuje projekt React a nainstaluje všechny potřebné závislosti:

npx create-react-app frontend

Tím se vytvoří nový projekt React v adresáři frontend, doplněný o základní balíčky, vývojové nástroje a skripty pro sestavení.

Další balíček Frontend: Po nastavení projektu React přejděte do adresáře frontend a nainstalujte knihovnu Axios, která slouží k provádění požadavků HTTP na rozhraní API Django:

cd frontend npm install axios

V tomto okamžiku je vaše vývojové prostředí plně vybaveno jazykem Python 3.x, Django, Node.js, React a všemi potřebnými nástroji. Virtuální prostředí Pythonu zajišťuje, že vaše závislosti na backendu jsou izolované, zatímco npm zpracovává vaše balíčky JavaScriptu samostatně. Nyní jste připraveni začít vytvářet svou full-stack aplikaci!

Vytvoření backendu pomocí Django

Nastavte backend Django s databázovými modely, koncovými body API a integrací pro frontend React.

Vytvoření projektu a aplikace Django

Začněte vytvořením projektu Django, který obsahuje nastavení, konfiguraci databáze a možnosti specifické pro aplikaci. Uvnitř tohoto projektu vytvoříte aplikaci Django - balíček jazyka Python určený pro specifické úlohy, jako je správa uživatelských dat nebo obsahu.

Přejděte do kořenového adresáře projektu (kde je nastaveno virtuální prostředí) a vytvořte projekt Django:

django-admin startproject backend .

Tento příkaz vytvoří soubory projektu přímo v aktuálním adresáři, čímž se vyhnete další složce. Všimnete si nových souborů jako manage.py (pro spouštění příkazů Django) a adresáře backend obsahujícího soubory jako settings.py, urls.py, asgi.py a wsgi.py.

Dále vytvořte aplikaci, která bude zpracovávat konkrétní funkce. Například systém pro správu úkolů:

python manage.py startapp tasks

Tím se vytvoří adresář tasks se základními soubory, jako jsou models.py, views.py, admin.py, a adresář migrations. Dbejte na to, abyste se vyhnuli konfliktům názvů s vestavěnými názvy jako "django" nebo "test".

Zaregistrujte aplikaci v nastavení projektu přidáním do seznamu INSTALLED_APPS v souboru backend/settings.py:

django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', 'corsheaders', 'tasks', # Zaregistrujte svou aplikaci ]

Nastavení modelů a serializátorů

Definujte strukturu dat pomocí modelů Django. Například jednoduchý model Task pro aplikaci pro správu úkolů můžete přidat do souboru tasks/models.py:

z django.db import models třída 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) třída Meta: ordering = ['-created_at'] def __str__(self): return self.title

Tento model obsahuje pole jako CharField pro krátký text, TextField pro delší obsah, BooleanField pro hodnoty true/false a DateTimeField pro časové značky. Třída Meta určuje možnosti, jako je výchozí řazení.

Model aplikujte na svou databázi spuštěním migrace:

python manage.py makemigrations tasks python manage.py migrate

Chcete-li převést data modelu do formátu JSON, použijte serializátory Django REST Framework. V souboru tasks/serializers.py definujte serializér pro model Task:

třída TaskSerializer(serializers.ModelSerializer): třída Meta: model = Task fields = ['id', 'title', 'description', 'completed', 'created_at', 'updated_at'] read_only_fields = ['created_at', 'updated_at']

ModelSerializer automaticky generuje pole a metody na základě modelu. Explicitní výpis polí zajistí, že nedojde k neúmyslnému odhalení citlivých dat.

Vytváření koncových bodů API

Django REST Framework zjednodušuje vytváření rozhraní API. Pro standardní operace CRUD použijte sady ViewSet se směrovači pro čistou strukturu RESTful.

V souboru tasks/views.py vytvořte pohledy API:

z rest_framework import viewsets z rest_framework.permissions import AllowAny z .models import Task z .serializers import TaskSerializer třída TaskViewSet(viewsets.ModelViewSet): queryset = Task.objects.all() serializer_class = TaskSerializer permission_classes = [AllowAny] # Pouze pro vývoj

ModelViewSet automaticky zpracovává výpis, vytváření, načítání, aktualizaci a mazání úloh.

Nastavte směrování URL v souboru tasks/urls.py:

router = DefaultRouter() router.register(r'tasks', TaskViewSet) urlpatterns = [ path('api/', include(router.urls)), ]

Zahrňte tyto URL do hlavního souboru backend/urls.py:

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

Konfigurace hlaviček CORS

Chcete-li, aby váš frontend React (běžící na portu 3000) komunikoval s backendem Django (na portu 8000), nakonfigurujte funkci sdílení zdrojů na různých zdrojích (CORS). Bez tohoto nastavení prohlížeče z bezpečnostních důvodů blokují požadavky cross-origin.

Aktualizujte soubor backend/settings.py tak, aby obsahoval konfiguraci CORS:

MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # Přidejte toto na začátek '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', ] # Nastavení CORS pro vývoj CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", # Vývojový server React "http://127.0.0.1:3000", ] CORS_ALLOW_CREDENTIALS = True

Pro rychlé testování můžete použít CORS_ALLOW_ALL_ORIGINS = True, ale zadání povolených původů je bezpečnější.

Testování koncových bodů API

Před integrací frontendu React otestujte koncové body API, abyste se ujistili, že fungují podle očekávání. Spusťte vývojový server Django:

python manage.py runserver

Získejte přístup k rozhraní API na adrese http://127.0.0.1:8000/api/tasks/. Pomocí prohlížecího rozhraní API otestujte operace, jako jsou požadavky GET a POST.

Případně testujte pomocí cURL nebo Postman:

# Otestujte požadavek GET na výpis úkolů curl -X GET http://127.0.0.1:8000/api/tasks/ # Otestujte požadavek POST na vytvoření úkolu curl -X POST http://127.0.0.1:8000/api/tasks/ \ -H "Content-Type: application/json" \ -d '{"title": "Test Task", "description": "This is a test task"}

Pro automatizované testování přidejte testovací případy do souboru tasks/tests.py:

Třída TaskAPITestCase(APITestCase): def test_create_task(self): # Přidejte sem svá tvrzení a testovací logiku pass

Když máte backend na místě, jste připraveni jej propojit s frontendem Reactu.

Vytváření frontendů pomocí React

Abyste vytvořili poutavé rozhraní pro backend Django, použijete React pro správu interakcí s uživateli - vše od prohlížení úloh až po přidávání nových.

Nastavení projektu React

Začněte nastavením frontendu React pomocí nástroje Create React App. Přejděte do kořenového adresáře svého projektu (kde se nachází váš backend Django) a spusťte:

npx create-react-app frontend cd frontend

Tento příkaz nastaví aplikaci React se základními soubory, jako jsou package.json, src/App.js a public/index.html. Obsahuje také nástroje jako webpack pro sdružování, Babel pro kompilaci JavaScriptu a vývojový server pro testování.

Dále nainstalujte aplikaci Axios pro zpracování požadavků HTTP na rozhraní Django API:

Instalace: npm install axios

Axios zjednodušuje volání API tím, že spravuje parsování JSON a nabízí lepší zpracování chyb než vestavěná funkce fetch(). Podporuje také funkce, jako jsou interceptory požadavků a odpovědí.

Vaše struktura složek by nyní měla vypadat takto:

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

Chcete-li potvrdit, že vše funguje, spusťte vývojový server React:

npm start

Tím se spustí aplikace na adrese http://localhost:3000 a zobrazí se výchozí uvítací stránka React. Během vývoje nechte tento server spuštěný - automaticky se načte, když provedete změny.

Vytváření komponent React

Vytvořme komponentu TaskList, která bude zobrazovat úkoly načtené z vašeho rozhraní Django API. Do souboru src/components/TaskList.js přidejte následující příkaz:

({ tasks, onToggleComplete, onDeleteTask }) => { return ( <div className="task-list"> <h2>Your Tasks</h2> {tasks.length === 0 ? ( <p>No tasks available. Vytvořte svůj první úkol!</p> ) : ( <ul> {tasks.map((task) => ( <li key={task.id} className={`task-item ${task.completed ? 'dokončeno' : ''}`}> <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;

Dále vytvořte komponentu TaskForm pro přidávání nových úkolů. Přidejte ji do souboru src/components/TaskForm.js:

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('Chyba při přidávání úlohy:', error); } finally { setIsSubmitting(false); } }; return ( <form onSubmit={handleSubmit} className="task-form"> <h2>Add New Task</h2> <div className="form-group"> <input type="text" placeholder="Název úkolu" value={title} onChange={(e) => setTitle(e.target.value)} disabled={isSubmitting} required /> </div> <div className="form-group"> <textarea placeholder="Popis úkolu (nepovinný)" value={description} onChange={(e) => setDescription(e.target.value)} disabled={isSubmitting} rows="3" /> </div> <button type="submit" disabled={isSubmitting || !title.trim()}> {isSubmitting ? 'Přidávání...' : 'Přidat úkol'} </button> </form> ); }; export default TaskForm;

Pro základní stylování vytvořte soubor src/App.css a přidejte:

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

Správa stavu a integrace rozhraní API

Háčky React jako useState a useEffect usnadňují správu stavu a interakci s backendem Django. Chcete-li centralizovat volání API, vytvořte soubor služby src/services/api.js:

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;

Nakonec vše integrujte do 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); } }; // Sem by šly další metody pro přidávání, aktualizaci a mazání úloh }

S tímto nastavením je váš frontend React připraven interaktivně zpracovávat úlohy a zároveň bezproblémově komunikovat s backendem Django.

Propojení Djanga a Reactu

Nyní, když jsou váš backend a frontend zprovozněny, je dalším krokem zajištění hladké komunikace mezi nimi. To zahrnuje nastavení koncových bodů API, správu požadavků a řešení případných zádrhelů integrace.

Nastavení adres API v Reactu

Vaše aplikace React musí vědět, kde se nacházejí koncové body rozhraní API Django. Abyste toho dosáhli, aktualizujte soubor src/services/api.js s konfigurací specifickou pro dané prostředí:

import axios from 'axios'; // Určete základní URL API na základě prostředí 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 sekundový 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;

Pro produkční účely přidejte do kořenového adresáře projektu React soubor .env s následujícím obsahem:

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

Toto nastavení zajistí, že vaše aplikace React bude moci bez problémů komunikovat s backendem Django, ať už jste v lokálním vývojovém prostředí, nebo nasazujete do produkce. Po konfiguraci koncových bodů API jste připraveni načítat a manipulovat s daty backendu.

Získávání dat z backendu

Po nastavení konfigurace API můžete provádět operace CRUD pro správu dat mezi Reactem a Django. Aktualizujte src/App.js tak, aby tyto operace zvládal:

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('Nepodařilo se načíst úlohy. Zkontrolujte prosím připojení.'); console.error('Chyba při načítání úloh:', 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, aby se TaskForm postaral o chybu } }; 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('Chyba při aktualizaci úkolu:', err); } }; const handleDeleteTask = async (taskId) => { if (!window.confirm('Určitě chcete tento úkol smazat?'))) { return; } try { await taskAPI.deleteTask(taskId); setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId)); } catch (err) { console.error('Chyba při mazání úlohy:', err); } }; if (loading) { return <div className="loading">Načítání úloh...</div> } return ( <div className="App"> <header className="App-header"> <h1>Správce úloh</h1> </header> <main className="container"> {error && <div className="error-message">{error}</div>} <TaskForm onAddTask={handleAddTask} /> <TaskList tasks={úkoly} onToggleComplete={handleToggleComplete} onDeleteTask={handleDeleteTask} /> </main> </div> ); } export default App;

Tento kód se stará o vytváření, aktualizace, mazání a správu chyb. Uživatelské rozhraní se okamžitě aktualizuje, aby bylo uživatelské prostředí bezproblémové, a chyby jsou spravovány elegantně vrácením změn nebo zobrazením příslušných zpráv.

Testování a ladění připojení

Jednou z nejčastějších překážek při propojování Djanga a Reactu je řešení chyb CORS (Cross-Origin Resource Sharing). Ty vznikají proto, že prohlížeče z bezpečnostních důvodů blokují požadavky mezi různými původy. Během vývoje React obvykle běží na localhost:3000, zatímco Django funguje na localhost:8000, což vytváří scénář křížového původu.

Chcete-li řešit problémy s CORS, ujistěte se, že jste v nastavení Django nakonfigurovali hlavičky CORS, jak je popsáno v části "Konfigurace hlaviček CORS". Po provedení změn restartujte server Django, aby se změny uplatnily.

Zde je několik běžných chyb v požadavcích API a jejich řešení:

• HTTP 400 (špatný požadavek): Obvykle to znamená, že v nákladu požadavku chybí některá požadovaná data nebo jsou chybně formulována. Například v listopadu 2023 se FintanMi setkal s chybou 400 při vytváření komunity v projektu Django REST Framework a React, protože v požadavku chybělo pole vlastníka. Vždy dvakrát zkontrolujte, zda váš frontend odesílá všechna požadovaná pole očekávaná modely Django.
• HTTP 405 (metoda není povolena): K tomu dochází, když koncový bod API nepodporuje používanou metodu HTTP. Například FintanMi hlásil chybu 405 při pokusu o odstranění příspěvku, což bylo vyřešeno aktualizací zobrazení Django z generics.RetrieveUpdateAPIView na generics.RetrieveUpdateDestroyAPIView, aby zahrnovalo podporu požadavků DELETE.

Spuštění a testování aplikace

Po připojení backendu Django a frontendu React je čas spustit oba vývojové servery a aplikaci otestovat. To zahrnuje spuštění dvou serverů současně a ujištění, že vše společně funguje bez problémů.

Spuštění vývojových serverů

Pro spuštění aplikace Django-React budete potřebovat dvě terminálová okna - pro každý server jedno. Toto nastavení umožňuje, aby backend a frontend fungovaly nezávisle a zároveň komunikovaly prostřednictvím volání API.

Spuštění backendového serveru Django:

1. Otevřete první okno terminálu a přejděte do kořenového adresáře projektu Django.

2. Aktivujte virtuální prostředí Python:

   Zdroj: venv/bin/activate
   

3. Spusťte vývojový server Django:

   python manage.py runserver
   

   Server bude k dispozici na adrese http://127.0.0.1:8000/.

Spuštění serveru React Frontend: Spusťte server Django:

1. Otevřete druhé okno terminálu a přejděte do adresáře projektu React:

   cd frontend
   

2. Spusťte vývojový server React:

   Npm start
   

   Tím se automaticky otevře okno prohlížeče na adrese http://localhost:3000/.

Po spuštění obou serverů můžete začít testovat funkčnost své aplikace.

Testování plné funkčnosti aplikace

Po spuštění serverů a správné konfiguraci CORS a koncových bodů API je čas ověřit tok dat mezi frontendem a backendem.

Ověření rozhraní API backendu:

• Otestujte koncové body rozhraní API Django přímo návštěvou:

  http://localhost:8000/api/tasks.
  

  Mělo by se zobrazit prohlížecí rozhraní API frameworku Django REST, kde můžete provádět operace CREATE a READ.

• Přístup k rozhraní správce Django na adrese:

  http://localhost:8000/admin.
  

  Přihlaste se pomocí přihlašovacích údajů superuživatele a vytvářejte, upravujte nebo odstraňujte úlohy. Operace UPDATE a DELETE si můžete vyzkoušet také na adrese:

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

Testování integrace frontend-backend:

• Otevřete aplikaci React na adrese http://localhost:3000 a ověřte, že se správně načítá a zobrazuje úlohy z backendu Django.
• Otestujte jednotlivé operace CRUD prostřednictvím rozhraní React:- Přidejte novou úlohu a zkontrolujte, zda se zobrazí jak v uživatelském rozhraní React, tak v backendu.
  • Upravte existující úlohu a zkontrolujte, zda se změny uložily.
  • Odstraňte úlohu a ověřte, zda je odstraněna z frontendu i databáze.

Pokud vaše aplikace obsahuje filtry nebo jiné funkce, důkladně je otestujte a ověřte, zda se úkoly zobrazují podle očekávání.

Oprava běžných problémů

Pokud během testování narazíte na nějaké problémy, zde je několik běžných oprav, které můžete vyzkoušet.

Chyby připojení API:

• Ujistěte se, že oba servery běží na svých příslušných portech: Django na http://localhost:8000 a React na http://localhost:3000.

• Použijte nástroje pro vývojáře prohlížeče (karta Síť) k identifikaci stavových kódů HTTP, jako je 404 nebo 500.

• Zkontrolujte nastavení proxy serveru v souboru package.json projektu React:

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

  Pokud provedete změny, restartujte server React.

Problémy se spuštěním serveru:

• Pokud se server Django nespustí, zkontrolujte, zda nechybí migrace:

  python manage.py makemigrations python manage.py migrate
  

• V případě problémů se serverem React zkuste přeinstalovat závislosti:

  npm install
  

Problémy s tokem dat:

• Pomocí vývojářských nástrojů prohlížeče zkontrolujte síťové požadavky a chyby v konzoli.
• Přidejte ladicí příkazy, jako je console.log() v Reactu nebo příkazy print v pohledech Django, a sledujte tok dat.
• Překontrolujte, zda adresy URL rozhraní API v aplikaci React přesně odpovídají vzorům URL Django, včetně koncového lomítka (např. /api/tasks/).

Shrnutí a další kroky

Vytvořili jste webovou aplikaci, která kombinuje Django a React, čímž jste se solidně seznámili s vývojem celého balíku. Tento projekt zdůrazňuje základní koncepty, jako je oddělení backendu od frontendu, provádění operací CRUD a správa cross-origin požadavků pomocí nastavení CORS. Cestou jste pracovali s rámcem Django REST Framework při vytváření rozhraní API a používali háčky Reactu pro správu stavu - dovednosti, které umožňují hladkou integraci těchto dvou výkonných nástrojů.

Posunutí aplikace na další úroveň

Existuje spousta možností, jak rozšířit funkčnost vaší aplikace. Můžete například přidat ověřování JWT pomocí Django REST Framework a zabezpečit tak uživatelská data a přístup k API. To by vám umožnilo nabízet funkce specifické pro uživatele a personalizované zážitky.

Pokud vaše aplikace potřebuje aktualizace v reálném čase, zvažte použití Django Channels, které umožní podporu WebSocket. To je ideální pro funkce, jako jsou živé ovládací panely, chatovací systémy nebo oznámení, které z vaší aplikace udělají dynamičtější a interaktivnější platformu.

Jak vaše aplikace roste, stává se důležitou pokročilá vizualizace dat. Kombinací vykreslovacích schopností Reactu s efektivním backendovým načítáním dat budete schopni efektivně zpracovávat a zobrazovat složité datové sady.

Příprava na produkci

Při přípravě aplikace na produkci se zaměřte na nasazení, zabezpečení a výkon. Zatímco současné nastavení je skvělé pro lokální vývoj, produkční prostředí vyžaduje další kroky. Patří mezi ně nastavení proměnných prostředí, optimalizace databáze a implementace silných mechanismů pro ošetření chyb.

Tato vylepšení vycházejí z dovedností, které jste si již osvojili - například návrh API, architektura založená na komponentách a integrace celého balíku. Zvládnutím těchto pokročilých technik budete dobře vybaveni pro řešení projektů na podnikové úrovni a další růst jako webový vývojář.

Často kladené dotazy

Jaké jsou výhody použití Djanga pro backend a Reactu pro frontend při vytváření webové aplikace?

Použití Djanga pro backend a Reactu pro frontend vytváří silnou kombinaci pro vývoj moderních webových aplikací. Django poskytuje solidní framework plný nástrojů, které zjednodušují vývoj backendu, zatímco React vyniká při vytváření dynamických a interaktivních uživatelských rozhraní.

Tato kombinace podporuje čisté oddělení odpovědností, což pomáhá udržet kódovou základnu organizovanou a snadněji rozšiřitelnou v průběhu času. Komponentová struktura Reactu podporuje opakované použití prvků uživatelského rozhraní a REST Framework Django zjednodušuje proces vytváření rozhraní API a zajišťuje hladkou komunikaci mezi frontendem a backendem. Společně nabízejí rychlý, efektivní a na uživatele zaměřený přístup k vývoji aplikací.

Jak vyřešit problémy s CORS při připojení frontendu React k backendu Django?

Pro řešení problémů CORS mezi frontendem React a backendem Django je užitečným řešením balíček django-cors-headers. Nejprve jej nainstalujte pomocí pip. Poté v souboru settings.py přidejte 'corsheaders' do seznamu INSTALLED_APPS. Poté zařaďte 'corsheaders.middleware.CorsMiddleware' úplně na začátek seznamu MIDDLEWARE, abyste zajistili správné pořadí spouštění middlewaru.

Během vývoje si můžete situaci zjednodušit tím, že v souboru settings.py nastavíte CORS_ORIGIN_ALLOW_ALL = True. Tím povolíte požadavky z libovolného původu. V produkčním prostředí je však mnohem bezpečnější definovat konkrétní důvěryhodné domény pomocí nastavení CORS_ALLOWED_ORIGINS. Tento přístup pomáhá udržovat přísnější zabezpečení.

Díky této konfiguraci může vaše aplikace React hladce komunikovat s rozhraními API Django a zároveň zůstat v souladu s požadavky CORS.

Jak mohu připravit svou aplikaci Django a React na produkční nasazení?

Chcete-li připravit aplikaci Django a React na produkční nasazení, začněte úpravou nastavení Django pro bezpečné nastavení. To zahrnuje nastavení DEBUG na False a zadání ALLOWED_HOSTS pro kontrolu, které domény mohou k vaší aplikaci přistupovat. Tyto změny jsou nezbytné pro ochranu vaší aplikace v ostrém provozu.

Dále vyberte spolehlivou hostingovou platformu pro backend Djanga a statické soubory. Ujistěte se, že je vaše infrastruktura vytvořena tak, aby zvládla provoz a požadavky na produkční úrovni. Pro frontend React použijte vhodné nástroje pro sestavení, abyste vygenerovali optimalizované produkční sestavení.

Jakmile je aplikace React připravena, nastavte webový server, například Nginx, který bude sloužit jak pro frontend React, tak pro backend Django. Správná konfigurace serveru zajistí, že vaše aplikace poběží efektivně a uživatelům poskytne bezproblémové prostředí.

Před spuštěním ostrého provozu aplikaci důkladně otestujte v produkčním prostředí. Tento krok pomůže identifikovat a vyřešit případné problémy a zajistí, že vaše aplikace bude po spuštění fungovat spolehlivě.