Kuidas ehitada lihtne rakendus Django ja Reactiga

Soovite luua tugeva backendiga ja dünaamilise frontendiga veebirakenduse? Pythoni raamistiku Django ja JavaScripti raamatukogu Reacti ühendamine on suurepärane võimalus selle saavutamiseks. Django tegeleb backendiga, näiteks andmebaaside haldamise ja API-de loomisega, samas kui React loob reageeriva, interaktiivse kasutajaliidese.

Peamised sammud:

1. Seadistage oma keskkond:
   • Paigaldage Django jaoks Python 3.x ja Reacti jaoks Node.js.
   • Kasutage virtuaalseid keskkondi Pythoni sõltuvuste haldamiseks.
   • Kinnitage paigaldused python --versiooniga, node --versiooniga ja npm --versiooniga.
2. Korraldage oma projekti:
   • Looge eraldi kaustad Django backendile ja Reacti frontendile.
   • Kasutage django-admin startproject backend'i seadistamiseks ja npx create-react-app frontend'i initsialiseerimiseks.
3. Ehitage backend:
   • Looge Django rakendused, määratlege mudelid ja genereerige migratsioonid.
   • Kasutage Django REST raamistikku API-punktide loomiseks.
   • Konfigureerige django-cors-headers, et võimaldada suhtlust frontend ja backend vahel.
4. Arendage frontend:
   • Kasutage Reacti komponente ülesannete ja kasutaja interaktsioonide haldamiseks.
   • Paigaldage Axios API päringute jaoks ja integreerige see Django lõpp-punktidega.
   • Stiilige rakendus CSS-iga puhta kasutajaliidese jaoks.
5. Ühendage ja testige:
   • Käivitage Django aadressil localhost:8000 ja React aadressil localhost:3000.
   • Testige API lõpp-punkte tööriistadega nagu Postman või otse brauseris.
   • Veenduge, et CORS-seaded oleksid korrektsed, et suhtlus oleks sujuv.

Selline seadistus võimaldab teil tõhusalt ehitada täisrakenduse, mis on selgelt eraldatud backendist ja frontendist. Järgige neid samme, et luua skaleeritav ja interaktiivne veebirakendus.

Django ja Reacti projekt algajatele - ehitage FullStack märkmete rakendus

Seadistamisnõuded ja paigaldamine

Enne Django ja Reacti rakenduse ehitamise alustamist on väga oluline seadistada arenduskeskkond koos vajalike tööriistade ja sõltuvustega. See vundament aitab teil Django ja Reacti komponente sujuvalt luua, integreerida ja testida, kui te edasi liigute.

Süsteeminõuded ja tööriistad

Alustamiseks on teie arendusmasinal vaja Django jaoks Python 3.x ja Reacti jaoks Node.js. Täpsemalt, Django 5.0 nõuab Python 3.x-i, React aga töötab Node.js-i versiooniga 12 või uuemaga.

Pythoni installimine: Pythoni saab alla laadida otse selle ametlikult veebilehelt või kasutada oma süsteemi paketihaldurit. MacOS-i kasutajate jaoks teeb Homebrew selle lihtsaks brew install pythoniga. Windowsi kasutajad peaksid võtma paigaldusprogrammi python.org, Linuxi kasutajad saavad selle paigaldada käskudega nagu apt install python3 Ubuntul või sarnaste käskudega teiste distributsioonide puhul.

Node.js ja npm seadistamine: Node.js tuleb koos npm-ga (Node Package Manager). Te vajate npm-i versiooni 6 või uuemat, kusjuures versioon 7.5.4 on usaldusväärne valik. Laadige Node.js alla nodejs.org, mis sisaldab automaatselt npm-i.

Pythoni virtuaalsed keskkonnad: Virtuaalsete keskkondade kasutamine on võtmetähtsusega, et hallata projektipõhiseid sõltuvusi ilma konfliktideta. Võite kasutada sisseehitatud venv-moodulit või selliseid vahendeid nagu pipenv või virtualenvwrapper, mis pakuvad rohkem funktsioone. Kui kasutate Windowsi, pakub virtualenvwrapper-win pakett sarnast funktsionaalsust.

Installatsioonide kinnitamiseks käivitage terminalis järgmised käsud:

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

Projekti struktuuri loomine

Hästi korraldatud projekti struktuur on oluline, et hoida oma backend- ja frontend-kood eraldi ja hallatavana. Alustage oma projekti jaoks peamise kataloogi loomisest:

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

Selle kataloogi sees looge kaks kausta: üks Django backendile ja teine Reacti frontendile. Selline eraldamine võimaldab teil mõlemat osa iseseisvalt hooldada ja juurutada.

Seadistage oma Pythoni virtuaalne keskkond projekti kataloogi sees:

python -m venv venv

Aktiveerige virtuaalne keskkond:

• MacOS/Linuxil: source venv/bin/activate
• Windowsis: venv\Scripts\activate

See samm tagab, et kõik teie projekti Pythoni sõltuvused on isoleeritud.

Vajalike pakettide paigaldamine

Kui keskkond on valmis, on aeg paigaldada vajalikud paketid nii Django kui ka Reacti jaoks.

Django backendipaketid: Kui teie virtuaalne keskkond on aktiivne, installige Django ja seda toetavad raamatukogud, kasutades pip-i:

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

• Django tegeleb serveripoolse loogika, andmebaaside haldamise ja URL-i marsruutimisega.
• Django REST Framework lihtsustab RESTful API-de loomise protsessi, mis lihtsustab lõpp-punktide loomist teie Reacti frontendile.
• Django-cors-headers võimaldab Cross-Origin Resource Sharing (CORS), mis on oluline teie React frontend'i (töötab pordil 3000) ja Django backend'i (töötab pordil 8000) vaheliseks suhtluseks.

React Frontend Setup: Reacti keskkonna seadistamiseks kasutage tööriista create-react-app. See käsk initsialiseerib Reacti projekti ja installeerib kõik vajalikud sõltuvused:

npx create-react-app frontend

See loob uue Reacti projekti frontendikataloogis, mis sisaldab olulisi pakette, arendusvahendeid ja build-skripte.

Täiendav frontendipakett: Pärast React-projekti loomist navigeerige frontend-kataloogi ja installige Axios, mis on raamatukogu HTTP-päringute tegemiseks Django API-le:

cd frontend
npm install axios

Sel hetkel on teie arenduskeskkond täielikult varustatud Python 3.x, Django, Node.js, React ja kõigi vajalike tööriistadega. Pythoni virtuaalne keskkond tagab, et teie backend-sõltuvused on isoleeritud, samas kui npm tegeleb teie JavaScript-pakettidega eraldi. Nüüd olete valmis alustama oma täisrakenduse ehitamist!

Backend'i ehitamine Django abil

Seadistage Django backend koos andmebaasimudelite, API-punktide ja Reacti frontendiga integreerimise jaoks.

Django projekti ja rakenduse loomine

Alustage Django projekti loomisest, mis sisaldab seadeid, andmebaasi konfiguratsioone ja rakendusspetsiifilisi valikuid. Selle projekti sees ehitate Django rakenduse - Pythoni paketi, mis on mõeldud konkreetsete ülesannete jaoks, näiteks kasutajate andmete või sisu haldamiseks.

Navigeerige oma projekti juurkataloogi (kuhu on loodud teie virtuaalne keskkond) ja looge Django projekt:

django-admin startproject backend .

See käsk genereerib projektifailid otse praegusesse kataloogi, vältides lisakausta. Märkate uusi faile nagu manage.py (Django käskude käivitamiseks) ja backend-kataloogi, mis sisaldab selliseid faile nagu settings.py, urls.py, asgi.py ja wsgi.py.

Järgmisena looge rakendus, mis tegeleb konkreetse funktsionaalsusega. Näiteks ülesannete haldamise süsteem:

python manage.py startapp tasks

See loob ülesannete kataloogi, mis sisaldab olulisi faile nagu models.py, views.py, admin.py ja migratsiooni kausta. Kindlasti väldi nimekonflikte sisseehitatud nimedega nagu "django" või "test"

Registreerige rakendus oma projekti seadetes, lisades selle nimekirja INSTALLED_APPS failis 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
]

Mudelite ja serialisaatorite seadistamine

Määrake oma andmestruktuur Django mudelite abil. Näiteks saab lihtsa Task-mudeli ülesannete haldamise rakenduse jaoks lisada faili 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

See mudel sisaldab selliseid välju nagu CharField lühikese teksti jaoks, TextField pikema sisu jaoks, BooleanField tõene/vale väärtuste jaoks ja DateTimeField ajatemplite jaoks. Meta-klass määrab sellised valikud nagu vaikimisi järjestus.

Rakendage mudel oma andmebaasi, käivitades migratsiooni:

python manage.py makemigrations tasks
python manage.py migrate

Mudeli andmete teisendamiseks JSON-iks kasutage Django REST raamistiku seriaatorit. Failis tasks/serializers.py defineerige ülesannete mudeli jaoks serializer:

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 genereerib mudeli põhjal automaatselt väljad ja meetodid. Väljade selgesõnaline loetlemine tagab, et te ei avalda tahtmatult tundlikke andmeid.

API lõpp-punktide loomine

Django REST raamistik lihtsustab API-de loomist. Tavapäraste CRUD-operatsioonide jaoks kasutage ViewSet'i koos marsruuteritega puhta REST-struktuuri loomiseks.

Luua API vaated tasks/views.py's:

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

ModelViewSet tegeleb automaatselt ülesannete loetlemise, loomise, hankimise, uuendamise ja kustutamise ülesannetega.

Seadistage URL-i marsruutimine failis 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)),
]

Sisestage need URL-id põhifaili backend/urls.py:

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

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

CORS-pealkirjade konfigureerimine

Selleks, et teie Reacti frontend (töötab pordis 3000) saaks suhelda Django backendiga (pordis 8000), konfigureerige CORS (Cross-Origin Resource Sharing). Ilma selleta blokeerivad veebilehitsejad turvalisuse kaalutlustel ristpäringupäringud.

Uuendage faili backend/settings.py, et lisada CORS-i konfiguratsioon:

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

Kiireks testimiseks võite kasutada CORS_ALLOW_ALL_ORIGINS = True, kuid lubatud päritolu määramine on turvalisem.

API lõpp-punktide testimine

Enne Reacti frontend'i integreerimist testige API lõpp-punkte, et tagada, et need toimiksid ootuspäraselt. Käivitage Django arendusserver:

python manage.py runserver

Juurdepääs API-le aadressil http://127.0.0.1:8000/api/tasks/. Kasutage sirvitud API-d, et testida toiminguid, nagu GET- ja POST-päringud.

Teise võimalusena testige cURL-i või Postmaniga:

# 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"}'

Automaatseks testimiseks lisage testjuhtumid faili 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

Kui backend on paigas, olete valmis ühendama selle Reacti frontendiga.

Frontend'i ehitamine Reactiga

Django backendile kaasahaarava kasutajaliidese loomiseks kasutate Reacti, et hallata kasutaja interaktsioone - kõike alates ülesannete vaatamisest kuni uute ülesannete lisamiseni.

Reacti projekti seadistamine

Alustage Reacti frontend'i loomisega, kasutades Create React App. Navigeerige oma projekti juurkataloogi (kus asub teie Django backend) ja käivitage:

npx create-react-app frontend
cd frontend

See käsk loob Reacti rakenduse koos oluliste failidega nagu package.json, src/App.js ja public/index.html. See sisaldab ka selliseid tööriistu nagu webpack pakkimiseks, Babel JavaScripti kompileerimiseks ja arendusserver testimiseks.

Järgmisena installige Axios, et käsitleda HTTP-päringuid oma Django API-le:

npm install axios

Axios muudab API-kutsed lihtsamaks, hallates JSON-i parsimist ja pakkudes paremat veakäitlust kui sisseehitatud funktsioon fetch(). Samuti toetab see selliseid funktsioone nagu päringu ja vastuse pealtkuulajad.

Teie kaustade struktuur peaks nüüd välja nägema selline:

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

Et kinnitada, et kõik toimib, käivitage Reacti arendusserver:

npm start

See käivitab rakenduse aadressil http://localhost:3000, kuvades vaikimisi Reacti tervituslehe. Hoidke seda serverit arenduse ajal käimas - see laadib automaatselt uuesti, kui te muudatusi teete.

Reacti komponentide loomine

Loome TaskList komponendi, et kuvada Django API-st hangitud ülesandeid. Lisage src/components/TaskList.js faili järgmine tekst:

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;

Järgmisena loome TaskForm komponendi uute ülesannete lisamiseks. Lisage see faili 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;

Põhilise kujunduse jaoks looge fail src/App.css ja lisage:

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

Riigi ja API-integratsiooni haldamine

Reacti konksud nagu useState ja useEffect muudavad oleku haldamise ja Django backendiga suhtlemise lihtsaks. API-kutsete tsentraliseerimiseks looge teenusfail 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;

Lõpuks integreerige kõik 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
}

Selle seadistuse abil on teie React frontend valmis interaktiivselt ülesandeid käsitlema, suheldes samal ajal sujuvalt teie Django backendiga.

Django ja Reacti ühendamine

Nüüd, kui teie backend ja frontend on loodud ja käivitatud, on järgmine samm nende vahelise sujuva kommunikatsiooni tagamine. See hõlmab API lõpp-punktide seadistamist, päringute haldamist ja võimalike integratsiooniprobleemide lahendamist.

API URL-ide seadistamine Reactis

Teie Reacti rakendus peab teadma, kus asuvad Django API lõpp-punktid. Selleks uuendage faili src/services/api.js keskkonnakohaste seadistustega:

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;

Tootmise jaoks lisage oma Reacti projekti juurest .env fail järgmise sisuga:

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

See seadistus tagab, et teie Reacti rakendus saab sujuvalt suhelda Django backendiga, olenemata sellest, kas olete kohalikus arenduskeskkonnas või juurutate selle tootmisse. Kui API lõpp-punktid on konfigureeritud, olete valmis backend-andmete hankimiseks ja manipuleerimiseks.

Andmete toomine backendist

Kui API konfiguratsioon on määratud, saate teostada CRUD-operatsioone andmete haldamiseks Reacti ja Django vahel. Uuendage src/App.js, et neid operatsioone hallata:

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;

See kood tegeleb ülesannete loomise, uuendamise, kustutamise ja veahaldusega. Kasutajaliides uuendatakse kohe, et kasutajakogemus oleks sujuv, ning vigu hallatakse graatsiliselt, muutusi tagasi võttes või asjakohaseid teateid näidates.

Ühenduse testimine ja vigade kõrvaldamine

Üks levinumaid takistusi Django ja Reacti ühendamisel on CORS (Cross-Origin Resource Sharing) vigadega tegelemine. Need tekivad seetõttu, et brauserid blokeerivad turvalisuse kaalutlustel päringuid erinevate päritoluriikide vahel. Arenduse ajal töötab React tavaliselt aadressil localhost:3000, samas kui Django töötab aadressil localhost:8000, mis loob ristpäritolu stsenaariumi.

CORS-probleemide lahendamiseks veenduge, et olete Django seadetes seadistanud CORS-pealkirjad, nagu on kirjeldatud jaotises "CORS-pealkirjade konfigureerimine". Pärast muudatuste tegemist taaskäivitage oma Django server, et neid rakendada.

Siin on paar tavalist API päringu viga ja nende lahendused:

• HTTP 400 (halb taotlus): See tähendab tavaliselt, et mõni nõutav andmestik on puudu või on taotluse kasulikus koormuses vääralt vormistatud. Näiteks FintanMi puutus novembris 2023 Django REST raamistiku ja Reacti projektis kogukonna loomisel kokku 400 veaga, sest päringus puudus omaniku väli. Kontrollige alati kaks korda, et teie frontend saadab kõik nõutavad väljad, mida Django mudelid eeldavad.
• HTTP 405 (meetod ei ole lubatud): See juhtub siis, kui API lõpp-punkt ei toeta kasutatavat HTTP-meetodit. Näiteks FintanMi teatas 405 veast, kui üritas postitust kustutada, mis lahendati Django vaate uuendamisega generics.RetrieveUpdateAPIView-st generics.RetrieveUpdateDestroyAPIView-ks, et lisada toetus DELETE päringutele.

Rakenduse käivitamine ja testimine

Kui teie Django backend ja React frontend on ühendatud, on aeg käivitada mõlemad arendusserverid ja testida rakendust. See hõlmab kahe serveri samaaegset käivitamist ja selle tagamist, et kõik töötab sujuvalt koos.

Arendusserverite käivitamine

Django-React rakenduse käivitamiseks on vaja kahte terminaliakent - ühte mõlema serveri jaoks. Selline seadistus võimaldab backendil ja frontendil töötada sõltumatult, suheldes samal ajal API-kutsete kaudu.

Django backend-serveri käivitamine:

1. Avage esimene terminaliaken ja navigeerige oma Django projekti juurkataloogi.

2. Aktiveerige oma Pythoni virtuaalne keskkond:

   source venv/bin/activate
   

3. Käivitage Django arendusserver:

   python manage.py runserver
   

   Server on saadaval aadressil http://127.0.0.1:8000/.

React Frontend Server'i käivitamine:

1. Avage teine terminaliaken ja navigeerige oma React projekti kataloogi:

   cd frontend
   

2. Käivitage Reacti arendusserver:

   npm start
   

   See avab automaatselt veebilehitseja akna aadressil http://localhost:3000/.

Kui mõlemad serverid on käivitunud, võite alustada oma rakenduse funktsionaalsuse testimist.

Rakenduse täieliku funktsionaalsuse testimine

Kui serverid on käivitunud ja töötavad ning CORS ja API-punktid on korralikult konfigureeritud, on aeg kontrollida andmevoolu frontend ja backend vahel.

Backend API kontrollimine:

• Testige oma Django API otsepunkte otse, külastades:

  http://localhost:8000/api/tasks
  

  See peaks kuvama Django REST raamistiku sirvitava API-liidese, kus saate teha CREATE ja READ operatsioone.

• Juurdepääs Django haldusliidesele aadressil:

  http://localhost:8000/admin
  

  Logige sisse oma ülemkasutaja volitustega, et luua, muuta või kustutada ülesandeid. Samuti saate UPDATE ja DELETE operatsioone testida külastades:

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

Frontend-Backend integratsiooni testimine:

• Avage oma Reacti rakendus aadressil http://localhost:3000 ja kinnitage, et see laadib korrektselt, kuvades Django backendist pärit ülesandeid.
• Testige iga CRUD-operatsiooni Reacti liidese kaudu:
  • Lisage uus ülesanne ja kontrollige, et see kuvatakse nii Reacti kasutajaliideses kui ka backendis.
  • Muutke olemasolevat ülesannet ja veenduge, et muudatused on salvestatud.
  • Kustutage ülesanne ja kontrollige, et see on eemaldatud nii frontendist kui ka andmebaasist.

Kui teie rakendus sisaldab filtreid või muid funktsioone, testige neid põhjalikult, et veenduda, et ülesanded kuvatakse ootuspäraselt.

Tavaliste probleemide lahendamine

Kui teil tekib testimise käigus mõni probleem, on siin mõned tavalised parandused, mida proovida.

API-ühenduse vead:

• Veenduge, et mõlemad serverid töötavad oma vastavatel sadamatel: Django aadressil http://localhost:8000 ja React aadressil http://localhost:3000.
• Kasutage veebilehitseja arendajatööriistu (vahekaart võrk), et tuvastada HTTP staatuskoodid, nagu 404 või 500.

• Kontrollida oma Reacti projekti package.json failis proxy seadistust:

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

  Kui teete muudatusi, taaskäivitage Reacti server.

Serveri käivitamise probleemid:

• Kui Django server ei käivitu, kontrollige puuduvaid migratsioone:

  python manage.py makemigrations
  python manage.py migrate
  

• Reacti serveri probleemide korral proovige sõltuvusi uuesti paigaldada:

  npm install
  

Andmevoogude probleemid:

• Kasutage veebilehitseja arendusvahendeid, et kontrollida võrgupäringuid ja konsooli vigu.
• Andmevoo jälgimiseks lisage silumisavaldusi, näiteks console.log() Reactis või print-avaldusi Django vaadetes.
• Kontrollige kaks korda, et API URL-d teie Reacti rakenduses vastaksid täpselt Django URL-mustritele, kaasa arvatud tagumised kaldkriipsud (nt /api/tasks/).

Kokkuvõte ja järgmised sammud

Olete loonud veebirakenduse, mis kombineerib Django ja Reacti, andes teile tugeva sissejuhatuse täismahus arendusse. See projekt toob esile olulised mõisted, nagu backend'i ja frontend'i eraldamine, CRUD-operatsioonide teostamine ja CORS-seadete abil päringuvaheliste päringute haldamine. Selle käigus olete töötanud Django REST raamistikuga API-de loomiseks ja kasutanud Reacti konksusid oleku haldamiseks - oskused, mis võimaldavad nende kahe võimsa tööriista sujuvat integreerimist.

Teie rakenduse viimine järgmisele tasemele

Teie rakenduse funktsionaalsuse laiendamiseks on palju ruumi. Näiteks saate lisada JWT-autentimise, kasutades Django REST Frameworki, et kindlustada kasutajate andmeid ja API-juurdepääsu. See võimaldaks teil pakkuda kasutajaspetsiifilisi funktsioone ja personaliseeritud kogemusi.

Kui teie rakendus vajab reaalajas uuendusi, kaaluge Django Channels 'i kasutamist, et võimaldada WebSocket-tuge. See sobib ideaalselt selliste funktsioonide jaoks nagu live-lauad, vestlussüsteemid või teavitused, muutes teie rakenduse dünaamilisemaks ja interaktiivsemaks platvormiks.

Kui teie rakendus kasvab, muutub arenenud andmete visualiseerimine oluliseks. Kombineerides Reacti renderdusvõimalusi tõhusa backend-andmete hankimisega, saate tõhusalt käsitleda ja kuvada keerulisi andmekogumeid.

Tootmiseks valmistumine

Rakenduse tootmiseks ettevalmistamisel keskenduge kasutuselevõtule, turvalisusele ja jõudlusele. Kuigi praegune seadistus sobib suurepäraselt kohalikuks arenduseks, nõuavad tootmiskeskkonnad täiendavaid samme. Nende hulka kuuluvad keskkonnamuutujate seadistamine, andmebaasi optimeerimine ja tugevate veakäitlusmehhanismide rakendamine.

Need parandused tuginevad juba välja töötatud oskustele - nagu API-disain, komponendipõhine arhitektuur ja täisintegratsioon. Nende täiustatud tehnikate valdamisega olete hästi varustatud, et tegeleda ettevõtte tasandi projektidega ja jätkata veebiarendajana arenemist.

KKK

Millised on veebirakenduse loomisel Django kasutamise eelised backendiks ja Reacti kasutamise eelised frontendiks?

Django kasutamine backendiks ja Reacti kasutamine frontendiks loob tugeva segu kaasaegsete veebirakenduste arendamiseks. Django pakub kindlat raamistikku, mis on täis vahendeid, mis lihtsustavad backend-arendust, samas kui React hiilgab dünaamiliste ja interaktiivsete kasutajaliideste loomisel.

See kombinatsioon soodustab vastutuse puhast eraldamist, mis aitab hoida koodibaasi organiseeritud ja aja jooksul lihtsamini laiendatavana. Reacti komponendipõhine struktuur soodustab kasutajaliidese elementide taaskasutamist ning Django REST raamistik lihtsustab API-de loomise protsessi, tagades sujuva kommunikatsiooni frontend ja backend vahel. Koos pakuvad nad kiiret, tõhusat ja kasutajakeskset lähenemist rakenduste arendamisele.

Kuidas lahendada CORS-probleemid Reacti frontend'i ühendamisel Django backend'iga?

React frontend'i ja Django backend'i vaheliste CORS-probleemide lahendamiseks on mugav lahendus django-cors-headers pakett. Kõigepealt installige see pipi abil. Seejärel lisage oma settings.py failis INSTALLED_APPS nimekirja 'corsheaders '. Pärast seda lisage 'corsheaders.middleware.CorsMiddleware ' nimekirja MIDDLEWARE kõige algusesse, et tagada õige vahevara täitmise järjekord.

Arenduse ajal saate asju lihtsustada, kui seadistate oma settings.py's CORS_ORIGIN_ALLOW_ALL = True. See lubab päringuid mis tahes päritolust. Tootmiskeskkonnas on aga palju turvalisem määratleda konkreetsed usaldusväärsed domeenid, kasutades seadistust CORS_ALLOWED_ORIGINS. See lähenemine aitab säilitada rangemat turvalisust.

Selle konfiguratsiooni abil saab teie Reacti rakendus suhelda sujuvalt Django API-dega, järgides samal ajal CORSi nõudeid.

Kuidas ma saan oma Django ja Reacti rakendust tootearenduseks ette valmistada?

Et valmistada oma Django ja Reacti rakendus ette tootmiseks, alustage Django seadete kohandamisest turvalise seadistuse jaoks. See hõlmab DEBUG-i seadistamist False'ile ja ALLOWED_HOSTS-i määramist, et kontrollida, millised domeenid saavad teie rakendusele ligi pääseda. Need muudatused on olulised teie rakenduse kaitsmiseks live-keskkonnas.

Järgmisena valige Django backendile ja staatilistele failidele usaldusväärne hostinguplatvorm. Veenduge, et teie taristu on ehitatud nii, et see suudaks taluda tootmistasandi liiklust ja nõudmisi. Kasutage Reacti frontaalosa jaoks sobivaid ehitustööriistu, et genereerida optimeeritud tootmiskoostis.

Kui teie Reacti rakendus on valmis, seadistage veebiserver, näiteks Nginx, et teenindada nii Reacti frontend kui ka Django backend. Nõuetekohane serveri seadistamine tagab teie rakenduse tõhusa töö ja pakub kasutajatele sujuvat kasutuskogemust.

Enne käivitamist testige oma rakendust põhjalikult tootmiskeskkonnas. See samm aitab tuvastada ja lahendada kõik probleemid, tagades, et teie rakendus töötab pärast käivitamist usaldusväärselt.