Kuidas luua lihtne rakendus Django ja Reacti abil

Kuidas luua lihtne rakendus Django ja Reacti abil

Soovid luua veebirakendust, millel on tugev backend ja dünaamiline frontend? Selle saavutamiseks on suurepärane viis ühendada Python-raamistik Django ja JavaScripti raamatukogu React. Django tegeleb backendi ülesannetega, nagu andmebaasi haldamine ja API loomine, samal ajal kui React loob reageeriva ja interaktiivse kasutajaliidese.

Peamised sammud:

1. Keskkonna seadistamine:
   • Paigalda Django jaoks Python 3.x ning Reacti jaoks Node.js.
   • Kasutage virtuaalkeskkondi Python-sõltuvuste haldamiseks.
   • Kinnitage installatsioonid käsuga python --version, node --versionja npm --version.
2. Korraldage oma projekt:
   • Loo eraldi kaustad Django backendile ja Reacti frontendile.
   • Kasutage django-admin startproject backendi seadistamiseks ja npx create-react-app esipoolse algseadistamiseks.
3. Backendi ehitamine:
   • Loo Django-rakendused, määratle mudelid ja genereeri migratsioonid.
   • Kasuta Django REST Frameworki API-liideste loomiseks.
   • Konfigureeri django-cors-headers , et võimaldada suhtlust frontendi ja backendi vahel.
4. Frontendi arendamine:
   • Kasuta Reacti komponente ülesannete ja kasutajate interaktsioonide haldamiseks.
   • Paigalda Axios API-päringute jaoks ja integreeri see Django-lõpppunktidega.
   • Kujunda rakendus CSS-iga, et saavutada puhas kasutajaliides.
5. Ühendamine ja testimine:
   • Käivita Django localhost:8000 ja Reacti localhost:3000.
   • Testi API-lõpppunkte näiteks Postmani abil või otse brauseris.
   • Veendu, et CORS-seaded on õiged, et suhtlus toimiks sujuvalt.

See seadistus võimaldab sul tõhusalt luua täisfunktsionaalset rakendust, kus backend ja frontend on selgelt eraldatud. Järgi neid samme, et luua skaleeritav ja interaktiivne veebirakendus.

Django ja Reacti projekt algajatele – täisfunktsionaalse märkmete rakenduse loomine

Seadistamisnõuded ja paigaldamine

Enne Django ja Reacti rakenduse loomise alustamist on oluline seadistada arenduskeskkond vajalike tööriistade ja sõltuvustega. See alus aitab teil edaspidi sujuvalt luua, integreerida ja testida oma Django ja Reacti komponente.

Süsteeminõuded ja tööriistad

Alustamiseks peab teie arendusarvutis olema Django jaoks Python 3.x ning Reacti jaoks Node.js. Täpsemalt öeldes nõuab Django 5.0 Python 3.x-i, samas kui React töötab Node.js-i versiooniga 12 või uuemaga.

Pythoni installimine: võid Pythoni alla laadida otse selle ametlikult veebisaidilt või kasutada oma süsteemi pakettihaldurit. MacOS-i kasutajatele teeb Homebrew selle lihtsaks brew install python. Windowsi kasutajad peaksid paigaldusprogrammi alla laadima veebilehelt python.org, samas kui Linuxi kasutajad saavad selle paigaldada käskudega nagu apt install python3 Ubuntu puhul või sarnaste käskudega teiste distributsioonide korral.

Node.js ja npm seadistamine: Node.js on komplekteeritud npm-iga (Node Package Manager). Vajate npm-i versiooni 6 või uuemat, kusjuures versioon 7.5.4 on usaldusväärne valik. Laadige Node.js alla veebisaidilt nodejs.org, mis sisaldab automaatselt ka npm-i.

Pythoni virtuaalkeskkonnad: Virtuaalkeskkonna kasutamine on võtmetähtsusega projektispetsiifiliste sõltuvuste haldamisel ilma konfliktideta. Võite kasutada sisseehitatud venv või selliseid tööriistu nagu pipenv või virtualenvwrapper , et saada juurde rohkem funktsioone. Kui kasutate Windowsit, pakub virtualenvwrapper-win pakett sarnast funktsionaalsust.

Paigalduste kontrollimiseks käivitage terminalis järgmised käsud:

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

Projekti struktuuri loomine

Hästi organiseeritud projektistruktuur on hädavajalik, et hoida teie backend- ja frontend-kood eraldi ja hallatavana. Alustage oma projekti peakataloogi loomisest:

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

Looge selles kataloogis kaks kausta: üks Django backendile ja teine Reacti frontendile. See eraldamine võimaldab teil iga osa eraldi hooldada ja kasutusele võtta.

Seadistage oma Python-virtuaalkeskkond projekti kataloogis:

python -m venv venv

Aktiveerige virtuaalkeskkond:

• macOS/Linux: source venv/bin/activate
• Windowsis: venv\Scripts\activate

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

Vajalike paketite installimine

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

Django tagapõhja paketid: Kui teie virtuaalkeskkond on aktiivne, installige Django ja selle tugiraamatukogud pip-i abil:

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

• Django haldab serveripoolset loogikat, andmebaasi haldamist ja URL-ide suunamist.
• Django REST Framework lihtsustab RESTful-API-de loomist, muutes Reacti esipoolele lõpppunktide loomise lihtsamaks.
• Django-cors-headers võimaldab Cross-Origin Resource Sharingut (CORS), mis on hädavajalik suhtluseks teie Reacti esipool (töötab pordil 3000) ja Django tagapool (töötab pordil 8000) vahel.

Reacti kasutajaliidese seadistamine: Reacti keskkonna seadistamiseks kasutage create-react-app tööriista. See käsk algatab Reacti projekti ja installib kõik vajalikud sõltuvused:

npx create-react-app frontend

See loob uue Reacti projekti kataloogis frontend kataloogis, koos vajalike paketidega, arendustööriistadega ja ehitusskriptidega.

Täiendav esipoolne pakett: Pärast React-projekti seadistamist liikuge kataloogi frontend kataloogi ja paigalda Axios – teek, mille abil saad teha HTTP-päringuid oma Django API-le:

cd frontend
npm install axios

Nüüd on teie arenduskeskkond täielikult varustatud Python 3.x-ga, Djangoga, Node.js-ga, Reactiga ja kõigi vajalike tööriistadega. Pythoni virtuaalkeskkond tagab, et teie backend-sõltuvused on isoleeritud, samal ajal kui npm haldab teie JavaScript-pakette eraldi. Nüüd olete valmis alustama oma täisstaapli rakenduse ehitamist!

Backendi ehitamine Djangoga

Seadistage Django backend koos andmebaasimudelite, API-lõpppunktide ja Reacti frontendiga integreerimisega.

Django projekti ja rakenduse loomine

Alusta Django projekti loomisest, mis hõlmab seadeid, andmebaasi konfiguratsioone ja rakendusele omaseid valikuid. Selle projekti raames lood Django rakenduse – Python-paketi, mis on mõeldud konkreetsete ülesannete täitmiseks, nagu kasutajate andmete või sisu haldamine.

Minge oma projekti juurkataloogi (kus on seadistatud teie virtuaalkeskkond) ja looge Django-projekt:

django-admin startproject backend .

See käsk loob projektifailid otse praegusesse kataloogi, vältides täiendava kausta loomist. Märkad uusi faile, nagu manage.py (Django-käskude käivitamiseks) ja backend kataloog, mis sisaldab faile nagu settings.py, urls.py, asgi.pyja wsgi.py.

Seejärel looge rakendus konkreetse funktsionaalsuse haldamiseks. Näiteks ülesannete haldamise süsteem:

python manage.py startapp tasks

See loob kataloogi tasks kataloogi, milles on olulised failid nagu models.py, views.py, admin.pyja migrations kausta. Vältige kindlasti nimekonflikte sisseehitatud nimedega nagu „django” või „test”.

Registreerige rakendus oma projekti seadetest, lisades selle INSTALLED_APPS loendisse 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ääratlege oma andmestruktuur Django mudelite abil. Näiteks saab ülesannete haldamise rakenduse lihtsa Task ülesannete haldamise rakenduse mudel võib olla lisatud failis 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 ning DateTimeField ajamärgiste jaoks. Klass Meta klass määrab kindlaks sellised valikud nagu vaikimisi järjestus.

Rakendage mudel oma andmebaasi, käivitades migratsioonid:

python manage.py makemigrations tasks
python manage.py migrate

Mudeli andmete teisendamiseks JSON-iks kasuta Django REST Frameworki serialisaatoreid. tasks/serializers.pymäärake serialisaator Task :

from rest_framework import serializers
from .models import Task

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

Django ModelSerializer genereerib automaatselt väljad ja meetodid mudeli põhjal. Väljade selgesõnaline loetlemine tagab, et te ei avalikusta tahtmatult tundlikke andmeid.

API-lõpppunktide loomine

Django REST Framework lihtsustab API loomist. Standardseid CRUD-operatsioone jaoks kasutage ViewSets koos ruuteritega, et saavutada selge ja REST-põhine struktuur.

Looge tasks/views.py, looge API-vaated:

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

See ModelViewSet käsitleb automaatselt ülesannete loetlemist, loomist, otsimist, uuendamist ja kustutamist.

Seadista URL-suunamine 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)),
]

Lisage need URL-id peamisse backend/urls.py faili:

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

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

CORS-pealkirjade konfigureerimine

Et võimaldada teie Reacti esipoolel (töötab pordil 3000) suhelda Django tagapoolel (pordil 8000), seadistage Cross-Origin Resource Sharing (CORS). Ilma selleta blokeerivad brauserid turvalisuse põhjustel päritolupiire ületavaid päringuid.

Uuendage backend/settings.py nii, et see sisaldaks CORS-i konfiguratsiooni:

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õid kasutada CORS_ALLOW_ALL_ORIGINS = True, kuid lubatud päritolude määramine on turvalisem.

API-lõpppunktide testimine

Enne Reacti kasutajaliidese integreerimist testige API-liideseid, et veenduda, et need töötavad ootuspäraselt. Käivitage Django arendusserver:

python manage.py runserver

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

Alternatiivina võid testida cURL-i või Postmani abil:

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

Automatiseeritud 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, oled valmis seda Reacti kasutajaliidesega ühendama.

Frontendi loomine Reactiga

Et luua oma Django backendile kaasahaarav kasutajaliides, kasutate Reacti kasutajate interaktsioonide haldamiseks – alates ülesannete vaatamisest kuni uute lisamiseni.

Reacti projekti seadistamine

Alustage Reacti kasutajaliidese seadistamisest, kasutades Create React Appi. Navigeerige oma projekti juurkataloogi (kus asub teie Django backend) ja käivitage:

npx create-react-app frontend
cd frontend

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

Seejärel paigalda Axios, et töödelda HTTP-päringuid su Django API-le:

npm install axios

Axios lihtsustab API-kutsete tegemist, haldades JSON-i parsimist ja pakkudes paremat veatöötlust kui sisseehitatud fetch() funktsioon. Samuti toetab see selliseid funktsioone nagu päringute ja vastuste vaheltlõikajad.

Teie kaustastruktuur peaks nüüd välja nägema järgmine:

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

Et veenduda, et kõik töötab, käivita Reacti arendusserver:

npm start

See käivitab rakenduse aadressil http://localhost:3000, kuvades Reacti vaikimisi tervituslehe. Hoia seda serverit arendamise ajal töös – see laadib lehe automaatselt uuesti, kui teed muudatusi.

Reacti komponentide loomine

Loome TaskList komponent, mis kuvab sinu Django API-st laaditud ülesandeid. Lisa järgmine kood faili 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;

Seejärel looge TaskForm komponent uute ülesannete lisamiseks. Lisa see 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õhistiili loomiseks looge src/App.css fail ja lisage sinna:

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

Seisundi haldamine ja API-integratsioon

Reacti hookid nagu useState ja useEffect muudavad seisundi haldamise ja suhtlemise Django-tagapõhjaga 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 seadistusega on teie Reacti esipool valmis ülesandeid interaktiivselt täitma, suheldes samal ajal sujuvalt teie Django tagapooliga.

Django ja Reacti ühendamine

Nüüd, kui teie backend ja frontend on töövalmis, on järgmine samm tagada nende vaheline sujuv suhtlus. See hõlmab API-lõpppunktide seadistamist, päringute haldamist ja integratsiooniga seotud probleemide lahendamist.

API-URL-ide seadistamine Reactis

Teie Reacti rakendus peab teadma, kust leida Django API-lõpppunkte. Selleks uuendage src/services/api.js faili keskkonnaspetsiifiliste 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;

Tootmiskeskkonnas lisage .env faili järgmise sisuga:

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

See seadistus tagab, et teie React-rakendus suudab sujuvalt suhelda teie Django-tagapõhjaga, olenemata sellest, kas olete kohalikus arenduskeskkonnas või rakendate seda tootmiskeskkonnas. Kui API-lõpppunktid on konfigureeritud, olete valmis tagapõhja andmeid hankima ja töötlema.

Andmete hankimine backendist

Kui API konfiguratsioon on paigas, saate teha CRUD-operatsioone, et hallata andmeid Reacti ja Django vahel. Uuendage src/App.js nende operatsioonide haldamiseks järgmiselt:

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 haldab ülesannete loomist, uuendamist, kustutamist ja veahaldust. Kasutajaliides uueneb kohe, tagades sujuva kasutajakogemuse, ning vead lahendatakse sujuvalt, tühistades muudatused või kuvades asjakohaseid teateid.

Ühenduse testimine ja veaparandus

Üks levinumaid takistusi Django ja Reacti ühendamisel on CORS-vead (Cross-Origin Resource Sharing). Need tekivad seetõttu, et brauserid blokeerivad turvalisuse kaalutlustel erinevatest päritoludest pärinevaid päringuid. Arenduse käigus töötab React tavaliselt localhost:3000, samas kui Django töötab localhost:8000, mis loob päritoludevahelise olukorra.

CORS-probleemide lahendamiseks veenduge, et olete konfigureerinud CORS-pealkirjad oma Django seadetes vastavalt jaotisele „CORS-pealkirjade konfigureerimine”. Pärast muudatuste tegemist taaskäivitage oma Django-server, et need jõustuksid.

Siin on mõned levinumad API-päringuvigad ja nende lahendused:

• HTTP 400 (Bad Request): See tähendab tavaliselt, et päringu andmepaketist puuduvad mõned nõutavad andmed või need on valesti vormindatud. Näiteks 2023. aasta novembris tekkis FintanMi-l 400-viga, kui ta lõi kogukonda Django REST Frameworki ja Reacti projektis, sest owner päringust puudus üks väli. Kontrollige alati hoolikalt, et teie kasutajaliides saadaks kõik Django mudelite poolt oodatavad kohustuslikud väljad.
• HTTP 405 (meetod ei ole lubatud): See tekib siis, kui API-lõpppunkt ei toeta kasutatavat HTTP-meetodit. Näiteks teatas FintanMi 405-veast, kui üritas postitust kustutada; probleem lahendati, uuendades Django vaadet generics.RetrieveUpdateAPIView kujule generics.RetrieveUpdateDestroyAPIView nii, et see toetaks DELETE päringutele.

Rakenduse käivitamine ja testimine

Kui Django-tagapõhi ja React-esipõhi on ühendatud, on aeg käivitada mõlemad arendusserverid ja rakendust testida. See hõlmab kahe serveri samaaegset käitamist ja veendumist, et kõik toimib sujuvalt koos.

Arendusserverite käivitamine

Django-React-rakenduse käivitamiseks on vaja kahte terminaliakent – üks iga serveri jaoks. Selline seadistus võimaldab backendil ja frontendil töötada iseseisvalt, suheldes omavahel API-kutsete kaudu.

Django backend-serveri käivitamine:

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

2. Aktiveerige oma Python-i virtuaalkeskkond:

   source venv/bin/activate
   

3. Käivita Django arendusserver:

   python manage.py runserver
   

   Server on kättesaadav aadressil http://127.0.0.1:8000/.

Reacti esipoolse serveri käivitamine:

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

   cd frontend
   

2. Käivita Reacti arendusserver:

   npm start
   

   See avab automaatselt brauseriakna aadressil http://localhost:3000/.

Kui mõlemad serverid töötavad, võite alustada oma rakenduse funktsionaalsuse testimist.

Rakenduse täieliku funktsionaalsuse testimine

Kui serverid töötavad ning CORS ja API-lõpppunktid on õigesti konfigureeritud, on aeg kontrollida andmevoogu frontendi ja backendi vahel.

Backendi API kontrollimine:

• Testige oma Django API-lõpppunkte otse, külastades aadressi:

  http://localhost:8000/api/tasks
  

  See peaks kuvama Django REST Frameworki sirvitavat API-liidest, kus saate teha CREATE- ja READ-operatsioone.

• Juurdepääs Django haldusliidesele aadressil:

  http://localhost:8000/admin
  

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

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

Frontend-backend-integratsiooni testimine:

• Avage oma React-rakendus aadressil http://localhost:3000 ja veenduge, et see laadub korrektselt ning kuvab Django backendi ülesandeid.
• Testige iga CRUD-operatsiooni Reacti kasutajaliidese kaudu:
  • Lisage uus ülesanne ja kontrollige, et see kuvatakse nii Reacti kasutajaliideses kui ka backendis.
  • Muuda olemasolevat ülesannet ja veendu, et muudatused salvestatakse.
  • Kustutage ülesanne ja veenduge, et see on eemaldatud nii kasutajaliidesest 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 testimise käigus tekib probleeme, siin on mõned levinumad lahendused, mida proovida.

API-ühendusvead:

• Veendu, et mõlemad serverid töötavad oma vastavatel portidel: Django aadressil http://localhost:8000 ja React http://localhost:3000.
• Kasutage brauseri arendaja tööriistu (võrgu vahekaart), et tuvastada HTTP-staatuskoode, nagu 404 või 500.

• Kontrollige proxy seadet oma React-projekti package.json failis:

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

  Kui teete muudatusi, taaskäivitage Reacti server.

Serveri käivitamisprobleemid:

• Kui Django server ei käivitu, kontrollige, kas puuduvad migratsioonid:

  python manage.py makemigrations
  python manage.py migrate
  

• Reacti serveri probleemide korral proovi sõltuvusi uuesti installida:

  npm install
  

Andmevoo probleemid:

• Kasutage brauseri arendaja tööriistu, et kontrollida võrgupäringuid ja konsooli vigu.
• Lisage silumiskood, näiteks console.log() Reactis või print avaldusi Django vaadetes, et jälgida andmevoogu.
• Veenduge veel kord, et teie React-rakenduse API-URL-id vastaksid täpselt Django URL-mustritele, sealhulgas lõpus olevad kaldkriipsud (nt /api/tasks/).

Kokkuvõte ja järgmised sammud

Olete loonud veebirakenduse, mis ühendab Django ja Reacti, andes teile põhjaliku sissejuhatuse täisstaapli arendusse. See projekt toob esile olulised kontseptsioonid, nagu backendi eraldamine frontendist, CRUD-operatsioonide sooritamine ja päritolupiirideüleste päringute haldamine CORS-seadete abil. Projekti käigus oled kasutanud Django REST Frameworki API-de loomiseks ja Reacti hooke seisundi haldamiseks – need oskused võimaldavad nende kahe võimsa tööriista sujuvat integreerimist.

Rakenduse viimine järgmisele tasemele

Rakenduse funktsionaalsust on võimalik veelgi laiendada. Näiteks võite lisada JWT-autentimise, kasutades Django REST Frameworki, et tagada kasutajate andmete ja API-juurdepääsu turvalisus. See võimaldaks teil pakkuda kasutajapõhiseid funktsioone ja isikupärastatud kasutuskogemusi.

Kui teie rakendus vajab reaalajas uuendusi, kaaluge Django Channelsi kasutamist, et võimaldada WebSocketi toetust. See sobib ideaalselt selliste funktsioonide jaoks nagu reaalajas töötavad juhtpaneelid, vestlussüsteemid või teavitused, muutes teie rakenduse dünaamilisemaks ja interaktiivsemaks platvormiks.

Rakenduse kasvades muutub tähtsaks andmete täiustatud visualiseerimine. Kombineerides Reacti renderdamisvõimalusi tõhusa tagapõhja andmete hankimisega, suudate keerukaid andmekogumeid tõhusalt töödelda ja kuvada.

Tootmiseks ettevalmistamine

Rakenduse tootmiskeskkonnaks ettevalmistamisel keskenduge kasutuselevõtule, turvalisusele ja jõudlusele. Kuigi praegune seadistus sobib suurepäraselt kohalikuks arendamiseks, nõuavad tootmiskeskkonnad täiendavaid samme. Nende hulka kuuluvad keskkonnamuutujate seadistamine, andmebaasi optimeerimine ja tugevate veatöötlusmehhanismide rakendamine.

Need täiustused tuginevad oskustele, mida olete juba omandanud – nagu API-disain, komponentidel põhinev arhitektuur ja täielik integratsioon. Neid arenenud tehnikaid omandades olete hästi varustatud ettevõtte tasandi projektidega tegelemiseks ja veebiarendajana edasi arenemiseks.

Korduma kippuvad küsimused

Millised on eelised, kui veebirakenduse loomisel kasutatakse backendiks Djangot ja frontendiks Reacti?

Django kasutamine backendis ja Reacti kasutamine frontendis loob tugeva kombinatsiooni kaasaegsete veebirakenduste arendamiseks. Django pakub tugevat raamistikku, mis on täis tööriistu, mis lihtsustavad backendi arendamist, samal ajal kui React paistab silma dünaamiliste ja interaktiivsete kasutajaliideste loomisel.

See kombinatsioon soodustab ülesannete selget eraldamist, mis aitab hoida koodibaasi korras ja muudab selle aja jooksul laiendamise lihtsamaks. Reacti komponentidel põhinev struktuur soodustab kasutajaliidese elementide taaskasutamist ning Django REST Framework lihtsustab API-de loomist, tagades sujuva suhtluse esiosa ja tagapõhja vahel. Koos pakuvad need kiiret, tõhusat ja kasutajakeskset lähenemist rakenduste arendamisele.

Kuidas lahendada CORS-probleeme, kui ühendatakse Reacti esipool Django tagapooliga?

Reacti esipoolse ja Django tagapoolse vaheliste CORS-probleemide lahendamiseks on django-cors-headers on mugav lahendus. Esmalt tuleb see paigaldada pipi abil. Seejärel tuleb faili settings.py faili 'corsheaders' loendisse INSTALLED_APPS loendisse. Seejärel lisage 'corsheaders.middleware.CorsMiddleware' nimekirja kõige ülaossa MIDDLEWARE nimekirja, et tagada vahevara õige täitmise järjekord.

Arendamise ajal saate asju lihtsustada, määrates CORS_ORIGIN_ALLOW_ALL = True oma settings.py. See lubab päringuid mis tahes päritolust. Tootmiskeskkonnas on aga palju turvalisem määratleda konkreetsed usaldusväärsed domeenid, kasutades CORS_ALLOWED_ORIGINS . See lähenemine aitab tagada parema turvalisuse.

Sellise konfiguratsiooniga saab teie React-rakendus sujuvalt suhelda teie Django API-dega, jäädes samal ajal CORS-nõuetele vastavaks.

Kuidas saan oma Django ja Reacti rakenduse tootmiskeskkonda kasutusele võtmiseks ette valmistada?

Django ja Reacti rakenduse tootmiskeskkonnaks ettevalmistamiseks alustage Django seadete kohandamisest turvalise seadistuse saavutamiseks. See hõlmab seadistuse DEBUG väärtuseks False ja määrake ALLOWED_HOSTS , et määrata, millistel domeenidel on juurdepääs teie rakendusele. Need muudatused on hädavajalikud teie rakenduse kaitsmiseks tootmiskeskkonnas.

Seejärel vali oma Django-tagapõhja ja staatiliste failide jaoks usaldusväärne hosting-platvorm. Veendu, et su infrastruktuur on ehitatud tootmistaseme liiklust ja nõudmisi taluma. Reacti esipõhja jaoks kasuta sobivaid ehitustööriistu, et luua optimeeritud tootmisversioon.

Kui teie React-rakendus on valmis, seadistage veebiserver, näiteks Nginx, et teenindada nii React-esiliidest kui ka Django-tagaliidest. Õige serverikonfiguratsioon tagab, et teie rakendus töötab tõhusalt ja pakub kasutajatele sujuvat kasutuskogemust.

Enne rakenduse käivitamist testige seda põhjalikult tootmiskeskkonnas. See samm aitab tuvastada ja lahendada võimalikke probleeme, tagades, et teie rakendus töötab pärast käivitamist usaldusväärselt.