Jak vytvořit jednoduchou aplikaci pomocí Django a React

Jak vytvořit jednoduchou aplikaci s Djangem a Reactem

Chcete vytvořit webovou aplikaci s výkonným backendem a dynamickým frontendem? Skvělým způsobem, jak toho dosáhnout, je kombinace Djanga, frameworku pro jazyk Python, s Reactem, knihovnou pro jazyk JavaScript. Django se stará o backendové úkoly, jako je správa databází a tvorba API, zatímco React vytváří responzivní a interaktivní uživatelské rozhraní.

Klíčové kroky:

1. Nastavení prostředí:
   • Nainstalujte Python 3.x pro Django a Node.js pro React.
   • K správě závislostí Pythonu použijte virtuální prostředí.
   • Ověřte instalace pomocí python --version, node --versiona npm --version.
2. Uspořádejte si projekt:
   • Vytvořte samostatné složky pro backend Django a frontend React.
   • Použijte django-admin startproject pro nastavení backendu a npx create-react-app pro inicializaci frontendu.
3. Sestavení backendu:
   • 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 tak, aby byla umožněna komunikace mezi frontendem a backendem.
4. Vývoj frontendu:
   • Použijte komponenty Reactu ke správě úkolů a interakcí s uživateli.
   • Nainstalujte Axios pro API požadavky a integrujte jej s koncovými body Django.
   • Vytvořte styl aplikace pomocí CSS pro přehledné uživatelské rozhraní.
5. Připojení a testování:
   • Spusťte Django na localhost:8000 a React na localhost:3000.
   • Otestujte koncové body API pomocí nástrojů jako Postman nebo přímo v prohlížeči.
   • Zajistěte správné nastavení CORS pro plynulou komunikaci.

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

Projekt v Djangu a Reactu pro začátečníky – vytvořte si full-stackovou aplikaci pro poznámky

Požadavky na nastavení a instalaci

Než začnete s vývojem aplikace v Djangu a Reactu, 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 v Djangu a Reactu v průběhu vývoje.

Systémové požadavky a nástroje

Abyste mohli začít, bude váš vývojový počítač 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 oficiálních webových stránek nebo použít správce balíčků vašeho systému. Pro uživatele macOS to Homebrew zjednodušuje pomocí brew install python. Uživatelé Windows by si měli stáhnout instalační program z python.org, zatímco uživatelé Linuxu jej mohou nainstalovat pomocí příkazů jako apt install python3 na Ubuntu nebo podobnými příkazy pro jiné distribuce.

Nastavení Node.js a npm: Node.js je dodáván společně s npm (Node Package Manager). Budete potřebovat npm verze 6 nebo vyšší, přičemž verze 7.5.4 je spolehlivou volbou. Stáhněte si Node.js z nodejs.org, kde je npm automaticky zahrnut.

Virtuální prostředí Pythonu: 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ý venv nebo nástroje jako pipenv nebo virtualenvwrapper pro více funkcí. Pokud používáte Windows, balíček virtualenvwrapper-win balíček poskytuje podobné funkce.

Chcete-li ověřit správnost instalace, spusťte v terminálu následující příkazy:

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

Vytvoření struktury projektu

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

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

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

Nastavte si virtuální prostředí Pythonu v adresáři projektu:

python -m venv venv

Aktivujte virtuální prostředí:

• Na macOS/Linuxu: source venv/bin/activate
• Ve 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ů

Jakmile je vaše prostředí připraveno, je čas nainstalovat potřebné balíčky pro Django i React.

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

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í RESTful API, což usnadňuje tvorbu koncových bodů pro váš frontend v Reactu.
• Django-cors-headers umožňuje sdílení zdrojů mezi doménami (CORS), což je nezbytné pro komunikaci mezi vaším frontendem v Reactu (běžícím na portu 3000) a backendem v Djangu (běžícím na portu 8000).

Nastavení frontendu React: K 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 adresáři, včetně nezbytných balíčků, vývojových nástrojů a skriptů pro sestavení.

Další balíček pro frontend: Po nastavení projektu React přejděte do adresáře frontend adresář a nainstalujte Axios, knihovnu pro odesílání HTTP požadavků na vaše Django API:

cd frontend
npm install axios

V tomto okamžiku je vaše vývojové prostředí plně vybaveno Pythonem 3.x, Djangem, Node.js, Reactem a všemi nezbytnými nástroji. Virtuální prostředí Pythonu zajišťuje izolaci vašich backendových závislostí, zatímco npm spravuje vaše balíčky JavaScriptu samostatně. Nyní jste připraveni začít s vývojem vaší full-stack aplikace!

Vytvoření backendu pomocí Django

Nastavte backend v Djangu s databázovými modely, koncovými body API a integrací pro frontend v Reactu.

Vytvoření projektu a aplikace v Djangu

Začněte vytvořením projektu Django, který zahrnuje nastavení, konfigurace databáze a možnosti specifické pro aplikaci. V rámci tohoto projektu vytvoříte aplikaci Django – balíček v jazyce Python určený pro konkrétní úkoly, jako je správa uživatelských dat nebo obsahu.

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

django-admin startproject backend .

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

Dále vytvořte aplikaci pro zpracování konkrétní funkcionality. Například systém pro správu úkolů:

python manage.py startapp tasks

Tím se vytvoří tasks adresář s nezbytnými soubory, jako jsou models.py, views.py, admin.pya složku migrations složku. Dbejte na to, abyste se vyhnuli konfliktům při pojmenování s vestavěnými názvy, jako jsou „django“ nebo „test“.

Aplikaci zaregistrujte v nastavení projektu tak, že ji přidáte do INSTALLED_APPS seznam v 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
]

Nastavení modelů a serializátorů

Definujte svou datovou strukturu pomocí modelů Django. Například jednoduchý Task model pro aplikaci na správu úkolů lze přidat do 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

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

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

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 tasks/serializers.pydefinujte serializátor pro Task model:

from rest_framework import serializers
from .models import Task

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

Django ModelSerializer automaticky generuje pole a metody na základě modelu. Explicitní výčet polí zajistí, že neúmyslně nezveřejníte citlivá data.

Vytváření koncových bodů API

Django REST Framework zjednodušuje tvorbu API. Pro standardní operace CRUD použijte ViewSets spolu s routéry, abyste dosáhli přehledné struktury v duchu REST.

V tasks/views.pyvytvořte API pohledy:

from rest_framework import viewsets
from rest_framework.permissions import AllowAny
from .models import Task
from .serializers import TaskSerializer

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer
    permission_classes = [AllowAny]  # For development only

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

Nastavte směrování URL v 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)),
]

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

from django.contrib import admin
from django.urls import path, include

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

Konfigurace hlaviček CORS

Aby mohl váš frontend v Reactu (běžící na portu 3000) komunikovat s backendem v Djangu (na portu 8000), nakonfigurujte Cross-Origin Resource Sharing (CORS). Bez toho prohlížeče z bezpečnostních důvodů blokují požadavky mezi doménami.

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

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # Add this at the top
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

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

CORS_ALLOW_CREDENTIALS = True

Pro rychlé testování můžete použít CORS_ALLOW_ALL_ORIGINS = True, ale bezpečnější je specifikovat povolené zdroje.

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

Přístup k API získáte na adrese http://127.0.0.1:8000/api/tasks/. K testování operací, jako jsou požadavky GET a POST, použijte prohlížitelné API.

Alternativně můžete testovat pomocí cURL nebo Postmanu:

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

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

Pro automatizované testování přidejte testovací případy do 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

S hotovým backendem jste připraveni jej propojit s frontendem React.

Vytvoření frontendu pomocí Reactu

Chcete-li vytvořit poutavé rozhraní pro váš backend v Djangu, použijete React ke správě interakcí s uživateli – od prohlížení úkolů až po přidávání nových.

Nastavení projektu React

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

npx create-react-app frontend
cd frontend

Tento příkaz nastaví aplikaci React s nezbytnými soubory, jako jsou package.json, src/App.js, a public/index.html. Zahrnuje také nástroje jako webpack pro svazkování, Babel pro kompilaci JavaScriptu a vývojový server pro testování.

Dále nainstalujte Axios pro zpracování HTTP požadavků na vaše Django API:

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á 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 ověřit, zda vše funguje, spusťte vývojový server Reactu:

npm start

Tím se spustí aplikace na adrese http://localhost:3000, kde se zobrazí výchozí úvodní stránka Reactu. Nechte tento server běžet po celou dobu vývoje – při provedení změn se stránka automaticky znovu načte.

Vytváření komponent Reactu

Vytvořme komponentu TaskList komponentu pro zobrazení úkolů načtených z vašeho Django API. Přidejte následující kód do souboru src/components/TaskList.js:

import React from 'react';

const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => {
  return (
    <div className="task-list">
      <h2>Your Tasks</h2>
      {tasks.length === 0 ? (
        <p>No tasks available. Create your first task!</p>
      ) : (
        <ul>
          {tasks.map((task) => (
            <li key={task.id} className={`task-item ${task.completed ? 'completed' : ''}`}>
              <div className="task-content">
                <h3>{task.title}</h3>
                <p>{task.description}</p>
                <small>Created: {new Date(task.created_at).toLocaleDateString()}</small>
              </div>
              <div className="task-actions">
                <button 
                  onClick={() => onToggleComplete(task.id, !task.completed)}
                  className={task.completed ? 'btn-undo' : 'btn-complete'}
                >
                  {task.completed ? 'Undo' : 'Complete'}
                </button>
                <button 
                  onClick={() => onDeleteTask(task.id)}
                  className="btn-delete"
                >
                  Delete
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default TaskList;

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

import React, { useState } from 'react';

const TaskForm = ({ onAddTask }) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!title.trim()) return;

    setIsSubmitting(true);
    try {
      await onAddTask({ title: title.trim(), description: description.trim() });
      setTitle('');
      setDescription('');
    } catch (error) {
      console.error('Error adding task:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="task-form">
      <h2>Add New Task</h2>
      <div className="form-group">
        <input
          type="text"
          placeholder="Task title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          disabled={isSubmitting}
          required
        />
      </div>
      <div className="form-group">
        <textarea
          placeholder="Task description (optional)"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          disabled={isSubmitting}
          rows="3"
        />
      </div>
      <button type="submit" disabled={isSubmitting || !title.trim()}>
        {isSubmitting ? 'Adding...' : 'Add Task'}
      </button>
    </form>
  );
};

export default TaskForm;

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

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

Správa stavu a integrace API

React háčky jako useState a useEffect usnadňují správu stavu a interakci s vaším Django backendem. Chcete-li centralizovat volání API, vytvořte soubor služby 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;

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

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

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

Propojení Django a React

Nyní, když jsou váš backend i frontend v provozu, je dalším krokem zajištění plynulé komunikace mezi nimi. To zahrnuje nastavení koncových bodů API, správu požadavků a řešení případných problémů s integrací.

Nastavení URL adres API v Reactu

Vaše aplikace React potřebuje vědět, kde najít koncové body API Django. K tomu je třeba aktualizovat soubor src/services/api.js soubor o konfiguraci specifickou pro dané prostředí:

import axios from 'axios';

// Determine API base URL based on environment
const getApiBaseUrl = () => {
  if (process.env.NODE_ENV === 'production') {
    return process.env.REACT_APP_API_URL || 'https://your-production-domain.com/api';
  }
  return 'http://127.0.0.1:8000/api';
};

const API_BASE_URL = getApiBaseUrl();

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
  timeout: 10000, // 10 second timeout
});

export const taskAPI = {
  getTasks: () => api.get('/tasks/'),
  createTask: (taskData) => api.post('/tasks/', taskData),
  updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData),
  deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`),
};

export default api;

Pro produkční prostředí přidejte do kořenového adresáře vašeho projektu React soubor .env soubor s následujícím obsahem:

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

Toto nastavení zajišťuje, že vaše aplikace React může plynule komunikovat s vaším backendem Django, ať už se nacházíte v lokálním vývojovém prostředí, nebo nasazujete do produkčního prostředí. Po nakonfigurování koncových bodů API jste připraveni načítat a manipulovat s daty z backendu.

Načítání dat z backendu

Jakmile je konfigurace API nastavena, můžete provádět operace CRUD pro správu dat mezi Reactem a Djangem. Aktualizujte src/App.js pro zpracování těchto operací:

import React, { useState, useEffect } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import { taskAPI } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await taskAPI.getTasks();
      setTasks(response.data);
    } catch (err) {
      setError('Failed to fetch tasks. Please check your connection.');
      console.error('Error fetching tasks:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleAddTask = async (taskData) => {
    try {
      const response = await taskAPI.createTask(taskData);
      setTasks(prevTasks => [...prevTasks, response.data]);
    } catch (err) {
      console.error('Error adding task:', err);
      throw err; // Re-throw to let TaskForm handle the error
    }
  };

  const handleToggleComplete = async (taskId, completed) => {
    try {
      const taskToUpdate = tasks.find(task => task.id === taskId);
      const updatedTaskData = { ...taskToUpdate, completed };

      const response = await taskAPI.updateTask(taskId, updatedTaskData);
      setTasks(prevTasks =>
        prevTasks.map(task =>
          task.id === taskId ? response.data : task
        )
      );
    } catch (err) {
      console.error('Error updating task:', err);
    }
  };

  const handleDeleteTask = async (taskId) => {
    if (!window.confirm('Are you sure you want to delete this task?')) {
      return;
    }

    try {
      await taskAPI.deleteTask(taskId);
      setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId));
    } catch (err) {
      console.error('Error deleting task:', err);
    }
  };

  if (loading) {
    return <div className="loading">Loading tasks...</div>;
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Task Manager</h1>
      </header>
      <main className="container">
        {error && <div className="error-message">{error}</div>}
        <TaskForm onAddTask={handleAddTask} />
        <TaskList 
          tasks={tasks}
          onToggleComplete={handleToggleComplete}
          onDeleteTask={handleDeleteTask}
        />
      </main>
    </div>
  );
}

export default App;

Tento kód zajišťuje vytváření, aktualizaci a mazání úkolů a také správu chyb. Uživatelské rozhraní se okamžitě aktualizuje, což zajišťuje plynulý uživatelský zážitek, a chyby jsou elegantně řešeny 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 doménami. Během vývoje obvykle běží React na localhost:3000, zatímco Django běží na localhost:8000, čímž vzniká situace s odlišnými doménami.

Chcete-li vyřešit problémy s CORS, ujistěte se, že jste v nastavení Djanga nakonfigurovali hlavičky CORS podle pokynů v části „Konfigurace hlaviček CORS“. Po provedení změn restartujte server Django, aby se změny projevily.

Zde je několik běžných chyb při odesílání požadavků na API a jejich řešení:

• HTTP 400 (Bad Request): To obvykle znamená, že v datové části požadavku chybí některá povinná data nebo jsou nesprávně formátovaná. Například v listopadu 2023 se společnost FintanMi setkala s chybou 400 při vytváření komunity v projektu využívajícím Django REST Framework a React, protože v požadavku chybělo pole owner v požadavku chybělo pole. Vždy pečlivě zkontrolujte, zda váš frontend odesílá všechna povinná pole, která modely Django očekávají.
• HTTP 405 (Method Not Allowed): K této chybě dochází, když koncový bod API nepodporuje použitou metodu HTTP. Například společnost FintanMi nahlásila chybu 405 při pokusu o smazání příspěvku, což se podařilo vyřešit aktualizací pohledu Django z generics.RetrieveUpdateAPIView na generics.RetrieveUpdateDestroyAPIView tak, aby zahrnoval podporu pro DELETE požadavků.

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

Po propojení backendu v Djangu a frontendu v Reactu je čas spustit oba vývojové servery a aplikaci otestovat. To znamená spustit dva servery současně a ujistit se, že vše spolu hladce funguje.

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

K spuštění aplikace Django-React budete potřebovat dvě okna terminálu – jedno pro každý server. Toto nastavení umožňuje backendu a frontendu fungovat nezávisle, přičemž mezi sebou komunikují prostřednictvím volání API.

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

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

2. Aktivujte své virtuální prostředí Pythonu:

   source venv/bin/activate
   

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

   python manage.py runserver
   

   Server bude dostupný na adrese http://127.0.0.1:8000/.

Spuštění frontendového serveru React:

1. Otevřete druhé okno terminálu a přejděte do adresáře vašeho 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/.

Jakmile budou oba servery spuštěny, můžete začít testovat funkčnost vaší aplikace.

Testování plné funkčnosti aplikace

Jakmile jsou servery spuštěny a CORS i koncové body API jsou správně nakonfigurovány, je čas ověřit tok dat mezi frontendem a backendem.

Ověření backendového API:

• Otestujte koncové body API Django přímo na adrese:

  http://localhost:8000/api/tasks
  

  Mělo by se zobrazit procházitelné rozhraní API Django REST Framework, kde můžete provádět operace CREATE a READ.

• Přejděte do administračního rozhraní Django na adrese:

  http://localhost:8000/admin
  

  Přihlaste se pomocí přihlašovacích údajů superuživatele a vytvořte, upravte nebo smažte úkoly. Operace UPDATE a DELETE můžete otestovat také na adrese:

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

Testování integrace frontendu a backendu:

• Otevřete svou aplikaci React na adrese http://localhost:3000 a ověřte, zda se načte správně a zobrazí úkoly z backendu Django.
• Otestujte každou operaci CRUD prostřednictvím rozhraní React:
  • Přidejte nový úkol a zkontrolujte, zda se zobrazí jak v uživatelském rozhraní React, tak v backendu.
  • Upravte existující úkol a ujistěte se, že se změny uložily.
  • Smažte úkol a ověřte, zda byl odstraněn jak z frontendu, tak z databáze.

Pokud vaše aplikace obsahuje filtry nebo jiné funkce, důkladně je otestujte, abyste se ujistili, že se úkoly zobrazují podle očekávání.

Řešení běžných problémů

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

Chyby připojení k 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.
• Pomocí vývojářských nástrojů prohlížeče (karta Síť) zjistěte kódy HTTP stavů, jako jsou 404 nebo 500.

• Zkontrolujte proxy nastavení v souboru package.json :

  "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í nějaké 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, například console.log() v Reactu nebo print příkazy v pohledech Django, abyste mohli sledovat tok dat.
• Pečlivě zkontrolujte, zda se URL adresy API ve vaší aplikaci React přesně shodují se vzory URL adres v Djangu, včetně koncových lomítek (např. /api/tasks/).

Shrnutí a další kroky

Vytvořili jste webovou aplikaci, která kombinuje Django a React, čímž jste získali solidní úvod do full-stack vývoje. Tento projekt zdůrazňuje základní koncepty, jako je oddělení backendu od frontendu, provádění operací CRUD a správa požadavků z jiných domén pomocí nastavení CORS. V průběhu projektu jste pracovali s Django REST Frameworkem na vytváření API a používali jste React hooks pro správu stavu – tyto dovednosti umožňují hladkou integraci mezi těmito dvěma výkonnými nástroji.

Posuňte svou aplikaci na další úroveň

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

Pokud vaše aplikace vyžaduje aktualizace v reálném čase, zvažte použití Django Channels k zapnutí podpory WebSocketů. To se skvěle hodí pro funkce, jako jsou živé dashboardy, chatovací systémy nebo oznámení, díky čemuž se vaše aplikace promění v dynamičtější a interaktivnější platformu.

S růstem vaší aplikace nabývá na důležitosti pokročilá vizualizace dat. Kombinací renderovacích schopností Reactu s efektivním načítáním dat z backendu budete schopni efektivně zpracovávat a zobrazovat komplexní datové sady.

Příprava na produkční prostředí

Při přípravě aplikace na produkční prostředí se zaměřte na nasazení, bezpečnost a výkon. Ačkoli současné nastavení skvěle vyhovuje lokálnímu vývoji, produkční prostředí vyžadují další kroky. Patří mezi ně nastavení proměnných prostředí, optimalizace databáze a implementace robustních mechanismů pro zpracování chyb.

Tato vylepšení navazují na dovednosti, které jste si již osvojili – jako je návrh API, architektura založená na komponentách a full-stack integrace. Osvojením těchto pokročilých technik budete dobře připraveni řešit projekty na podnikové úrovni a dále se rozvíjet jako webový vývojář.

Často kladené otázky

Jaké jsou výhody použití Django pro backend a React pro frontend při vývoji webové aplikace?

Použití Django pro backend a React pro frontend vytváří silnou kombinaci pro vývoj moderních webových aplikací. Django poskytuje solidní framework nabitý nástroji, které zefektivňují vývoj backendu, zatímco React vyniká při tvorbě dynamických a interaktivních uživatelských rozhraní.

Tato kombinace podporuje jasné oddělení odpovědností, což pomáhá udržovat kódovou základnu přehlednou a usnadňuje její postupné rozšiřování. Komponentová struktura Reactu podporuje opakované použití prvků uživatelského rozhraní a REST Framework v Djangu zjednodušuje proces vytváření API, čímž zajišťuje plynulou 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 propojení frontendu v Reactu s backendem v Djangu?

Pro řešení problémů s CORS mezi frontendem v Reactu a backendem v Djangu je balíček django-cors-headers balíček. Nejprve jej nainstalujte pomocí pip. Poté do souboru settings.py souboru přidejte 'corsheaders' do seznamu INSTALLED_APPS . Poté vložte 'corsheaders.middleware.CorsMiddleware' na samý začátek souboru MIDDLEWARE seznamu, abyste zajistili správné pořadí provádění middlewaru.

Během vývoje si můžete práci zjednodušit nastavením CORS_ORIGIN_ALLOW_ALL = True v souboru settings.py. To umožní požadavky z jakéhokoli zdroje. 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 vyšší úroveň zabezpečení.

Díky této konfiguraci může vaše aplikace React hladce komunikovat s vašimi API Django a zároveň splňovat požadavky CORS.

Jak mohu připravit své aplikace Django a React na nasazení do produkčního prostředí?

Chcete-li připravit své aplikace Django a React pro produkční prostředí, začněte úpravou nastavení Django tak, aby bylo bezpečné. To zahrnuje nastavení DEBUG na False a určení ALLOWED_HOSTS , čímž určíte, které domény mají k vaší aplikaci přístup. Tyto změny jsou nezbytné pro ochranu vaší aplikace v produkčním prostředí.

Dále si vyberte spolehlivou hostingovou platformu pro váš Django backend a statické soubory. Ujistěte se, že vaše infrastruktura je navržena tak, aby zvládla provoz a nároky na produkční úrovni. Pro React frontend použijte vhodné nástroje pro sestavení, abyste vytvořili optimalizovanou produkční verzi.

Jakmile bude vaše aplikace React připravena, nastavte webový server, jako je Nginx, který bude obsluhovat jak frontend v Reactu, tak backend v Djangu. Správná konfigurace serveru zajistí, že vaše aplikace bude běžet efektivně a poskytne uživatelům plynulý zážitek.

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