Miten rakennetaan yksinkertainen sovellus Djangon ja Reactin avulla?

Haluatko luoda verkkosovelluksen, jossa on vahva backend ja dynaaminen frontend? Python-kehyksen Djangon ja JavaScript-kirjaston Reactin yhdistäminen on hyvä tapa saavuttaa tämä. Django hoitaa backend-tehtävät, kuten tietokannan hallinnan ja API-rajapintojen luomisen, kun taas React luo responsiivisen, interaktiivisen käyttöliittymän.

Tärkeimmät vaiheet:

1. Aseta ympäristö:- Asenna Python 3.x Djangolle ja Node.js Reactille.

   • Käytä virtuaaliympäristöjä Python-riippuvuuksien hallintaan.
   • Vahvista asennukset python --version, node --version ja npm --version avulla.

2. Organisoi projektisi:- Luo erilliset kansiot Djangon backendille ja Reactin frontendille.

   • Käytä django-admin startprojectiä backendin asennukseen ja npx create-react-appia frontendin alustamiseen.

3. Rakenna backend:- Luo Django-sovellukset, määritä mallit ja luo migraatiot.

   • Käytä Django REST Frameworkia API-päätepisteiden rakentamiseen.
   • Määritä django-cors-headers, jotta frontendin ja backendin välinen kommunikointi on mahdollista.

4. Kehitä frontendiä:- Käytä React-komponentteja tehtävien ja käyttäjien vuorovaikutuksen hallintaan.

   • Asenna Axios API-pyyntöjä varten ja integroi se Django-päätteisiin.
   • Muotoile sovellus CSS:llä siistin käyttöliittymän aikaansaamiseksi.

5. Yhdistä ja testaa:- Suorita Django osoitteessa localhost:8000 ja React osoitteessa localhost:3000.

   • Testaa API-päätepisteitä Postmanin kaltaisilla työkaluilla tai suoraan selaimessa.
   • Varmista asianmukaiset CORS-asetukset sujuvan viestinnän varmistamiseksi.

Tämän kokoonpanon avulla voit rakentaa tehokkaasti täysimittaisen sovelluksen, jossa backend ja frontend on erotettu selkeästi toisistaan. Seuraa näitä vaiheita luodaksesi skaalautuvan, interaktiivisen verkkosovelluksen.

Django- ja React-projekti aloittelijoille - Rakenna FullStack Notes -sovellus.

Asennusvaatimukset ja asennus

Ennen kuin aloitat Django- ja React-sovelluksen rakentamisen, on ratkaisevan tärkeää asentaa kehitysympäristösi tarvittavine työkaluineen ja riippuvuuksineen. Tämä perusta auttaa sinua luomaan, integroimaan ja testaamaan Django- ja React-komponenttejasi sujuvasti edetessäsi.

Järjestelmävaatimukset ja työkalut

Aloittaaksesi kehityskoneesi tarvitsee Python 3.x: n Djangolle ja Node.js:n Reactille. Erityisesti Django 5.0 vaatii Python 3.x:n, kun taas React toimii Node.js:n versiolla 12 tai uudemmalla.

Pythonin asentaminen: Voit ladata Pythonin suoraan sen viralliselta verkkosivustolta tai käyttää järjestelmäsi paketinhallintaa. MacOS-käyttäjille Homebrew tekee sen helpoksi brew install python-ohjelmalla. Windows-käyttäjien kannattaa hakea asennusohjelma python.org-sivustolta, kun taas Linux-käyttäjät voivat asentaa sen komennoilla, kuten apt install python3 Ubuntussa tai vastaavilla komennoilla muissa jakeluissa.

Node.js:n ja npm:n asentaminen: Node.js:n mukana tulee npm (Node Package Manager). Tarvitset npm:n version 6 tai uudemman, ja versio 7.5.4 on luotettava valinta. Lataa Node.js osoitteesta nodejs.org, joka sisältää automaattisesti npm:n.

Python-virtuaaliympäristöt: Virtuaaliympäristöjen käyttö on avainasemassa, kun haluat hallita projektikohtaisia riippuvuuksia ilman ristiriitoja. Voit käyttää sisäänrakennettua venv-moduulia tai työkaluja, kuten pipenv tai virtualenvwrapper, joilla on enemmän ominaisuuksia. Jos käytät Windowsia, virtualenvwrapper-win-paketti tarjoaa samanlaisen toiminnallisuuden.

Voit vahvistaa asennukset suorittamalla nämä komennot terminaalissa:

Python --version node --version npm --version.

Projektirakenteen luominen

Hyvin organisoitu projektirakenne on välttämätön, jotta backend- ja frontend-koodisi pysyvät erillään ja hallittavissa. Aloita luomalla projektillesi päähakemisto:

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

Luo tämän hakemiston sisälle kaksi kansiota: toinen Django-backendiäsi ja toinen React frontendiäsi varten. Tämän erottelun ansiosta voit ylläpitää ja ottaa käyttöön kummankin osan itsenäisesti.

Aseta Python-virtuaaliympäristösi projektin hakemistoon:

python -m venv venv

Aktivoi virtuaaliympäristö:

• MacOS/Linux: source venv/bin/activate.
• Windowsissa: venv\Scripts\activate.

Tämä vaihe varmistaa, että kaikki projektisi Python-riippuvuudet on eristetty.

Tarvittavien pakettien asentaminen

Kun ympäristösi on valmis, on aika asentaa tarvittavat paketit sekä Djangolle että Reactille.

Djangon backend-paketit: Kun virtuaaliympäristösi on aktiivinen, asenna Django ja sitä tukevat kirjastot pipin avulla:

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

• Django huolehtii palvelinpuolen logiikasta, tietokannan hallinnasta ja URL-reitityksestä.
• Django REST Framework yksinkertaistaa RESTful API:iden rakentamista, mikä helpottaa päätepisteiden luomista React frontendiäsi varten.
• Django-cors-headers mahdollistaa CORS:n (Cross-Origin Resource Sharing), joka on välttämätön React frontendin (joka toimii portissa 3000) ja Django-backendin (joka toimii portissa 8000) välisessä viestinnässä.

React Frontend -asennus: Käytä create-react-app-työkalua React-ympäristön määrittämiseen. Tämä komento alustaa React-projektin ja asentaa kaikki tarvittavat riippuvuudet:

npx create-react-app frontend

Tämä luo uuden React-projektin frontend-hakemistoon, jossa on kaikki olennaiset paketit, kehitystyökalut ja rakennusskriptit.

Lisää Frontend-paketti: Axios on kirjasto HTTP-pyyntöjen tekemiseen Django API:lle:

cd frontend npm install axios

Tässä vaiheessa kehitysympäristösi on täysin varustettu Python 3.x:llä, Djangolla, Node.js:llä, Reactilla ja kaikilla tarvittavilla työkaluilla. Python-virtuaaliympäristö varmistaa, että backend-riippuvuutesi ovat eristettyjä, kun taas npm käsittelee JavaScript-paketit erikseen. Nyt olet valmis aloittamaan full-stack-sovelluksesi rakentamisen!

Backendin rakentaminen Djangolla

Määritä Django-backend, jossa on tietokantamallit, API-päätepisteet ja integraatio React- frontendiä varten.

Django-projektin ja -sovelluksen luominen

Aloita luomalla Django-projekti, joka sisältää asetukset, tietokantamääritykset ja sovelluskohtaiset asetukset. Tämän projektin sisällä rakennat Django-appsin - Python-paketin, joka on suunniteltu tiettyihin tehtäviin, kuten käyttäjätietojen tai sisällön hallintaan.

Siirry projektisi juurihakemistoon (johon virtuaalinen ympäristösi on asetettu) ja luo Django-projekti:

django-admin startproject backend .

Tämä komento luo projektitiedostot suoraan nykyiseen hakemistoon, jolloin vältytään ylimääräiseltä kansiolta. Huomaat uusia tiedostoja, kuten manage.py (Djangon komentojen suorittamiseen) ja backend-hakemiston, joka sisältää tiedostoja, kuten settings.py, urls.py, asgi.py ja wsgi.py.

Luo seuraavaksi sovellus, joka käsittelee tiettyjä toimintoja. Esimerkiksi tehtävien hallintajärjestelmä:

python manage.py startapp tasks

Tämä luo tasks-hakemiston, jossa on keskeisiä tiedostoja, kuten models.py, views.py, admin.py, ja migrations-kansio. Muista välttää nimiristiriitoja sisäänrakennettujen nimien kuten "django" tai "test" kanssa.

Rekisteröi sovellus projektisi asetuksiin lisäämällä se backend/settings.py:n INSTALLED_APPS-luetteloon:

INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', 'corsheaders', 'tasks', # Rekisteröi sovellus ]

Mallien ja serialisaattoreiden asettaminen

Määrittele tietorakenteesi Djangon malleilla. Esimerkiksi yksinkertainen Task-malli tehtävienhallintasovellusta varten voidaan lisätä tasks/models.py-tiedostoon:

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

Tämä malli sisältää kenttiä, kuten CharField lyhyelle tekstille, TextField pidemmälle sisällölle, BooleanField tosi/väärille arvoille ja DateTimeField aikaleimoille. Meta-luokka määrittää asetukset, kuten oletusjärjestyksen.

Sovita malli tietokantaan suorittamalla migraatioita:

python manage.py makemigrations tasks python manage.py migrate

Jos haluat muuntaa mallin tiedot JSON-muotoon, käytä Django REST Frameworkin serialisaattoreita. Määrittele tasks/serializers.py-tiedostossa serializer Tehtävä-mallille:

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 luo automaattisesti kentät ja metodit mallin perusteella. Kenttien eksplisiittinen listaaminen varmistaa, ettet tahattomasti paljasta arkaluonteisia tietoja.

API-päätepisteiden rakentaminen

Django REST Framework yksinkertaistaa API-päätteiden luomista. Käytä tavallisiin CRUD-operaatioihin ViewSetejä reitittimillä, jotta saat siistin, RESTful-rakenteen.

Luo API-näkymät tasks/views.py-tiedostossa:

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] # Vain kehityskäyttöön.

ModelViewSet käsittelee automaattisesti tehtävien listaamisen, luomisen, hakemisen, päivittämisen ja poistamisen.

Määritä URL-reititys tasks/urls.py-tiedostossa:

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)), ]

Sisällytä nämä URL-osoitteet backend/urls.py-päätiedostoon:

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

CORS-otsakkeiden määrittäminen

Jotta React-etupääte (joka toimii portissa 3000) voi kommunikoida Django-backendin (portissa 8000) kanssa, määritä CORS (Cross-Origin Resource Sharing). Ilman tätä selaimet estävät ristikkäiset pyynnöt turvallisuussyistä.

Päivitä backend/settings.py sisältämään CORS-konfiguraatio:

MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # Lisää tämä alkuun '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-asetukset kehitystä varten CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", # React-kehityspalvelin "http://127.0.0.1:3000", ] CORS_ALLOW_CREDENTIALS = True

Nopeaa testausta varten voit käyttää CORS_ALLOW_ALL_ORIGINS = True, mutta sallittujen alkuperien määrittäminen on turvallisempaa.

API-päätepisteiden testaaminen

Testaa API-päätepisteet ennen React-etuliitteen integrointia varmistaaksesi, että ne toimivat odotetulla tavalla. Käynnistä Djangon kehityspalvelin:

Python manage.py runserver

Ota API käyttöön osoitteessa http://127.0.0.1:8000/api/tasks/. Käytä selattavaa API:ta testataksesi toimintoja, kuten GET- ja POST-pyyntöjä.

Vaihtoehtoisesti voit testata cURL:llä tai Postmanilla:

# Testaa GET-pyyntö tehtävien listaamiseksi curl -X GET http://127.0.0.1:8000/api/tasks/ # Testaa POST-pyyntö tehtävän luomiseksi curl -X POST http://127.0.0.1:8000/api/tasks/ \ -H "Content-Type: application/json" \ -d '{"title": "Test Task", "description": "Tämä on testitehtävä"}

Automaattista testausta varten lisää testitapauksia tasks/tests.py-tiedostoon:

from rest_framework.test import APITestCase from rest_framework import status from .models import Task class TaskAPITestCase(APITestCase): def test_create_task(self): # Lisää väitteet ja testilogiikka tähän pass

Kun backend on valmis, voit liittää sen Reactin frontendiin.

Frontendin rakentaminen Reactilla

Luodaksesi Django-backendille mukaansatempaavan käyttöliittymän käytät Reactia käyttäjien vuorovaikutuksen hallintaan - kaikkeen tehtävien katselusta uusien tehtävien lisäämiseen.

React-projektin perustaminen

Aloita asettamalla React-etupääte käyttämällä Create React App-ohjelmaa. Siirry projektisi juurihakemistoon (jossa Django-backendisi sijaitsee) ja suorita:

npx create-react-app frontend cd frontend

Tämä komento perustaa React-sovelluksen, jossa on keskeiset tiedostot, kuten package.json, src/App.js ja public/index.html. Se sisältää myös työkalut, kuten webpackin niputtamista varten, Babelin JavaScript-kääntämistä varten ja kehityspalvelimen testausta varten.

Asenna seuraavaksi Axios käsittelemään HTTP-pyyntöjä Django API:lle:

npm install axios

Axios tekee API-pyynnöistä yksinkertaisempia hoitamalla JSON-parsingin ja tarjoamalla paremman virheenkäsittelyn kuin sisäänrakennettu fetch()- funktio. Se tukee myös ominaisuuksia, kuten pyynnön ja vastauksen sieppaajia.

Kansiorakenteesi pitäisi nyt näyttää tältä:

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

Varmistaaksesi, että kaikki toimii, käynnistä React-kehityspalvelin:

npm start

Tämä käynnistää sovelluksen osoitteessa http://localhost:3000 ja näyttää oletusarvoisen Reactin tervetulosivun. Pidä tämä palvelin käynnissä kehityksen aikana - se latautuu automaattisesti uudelleen, kun teet muutoksia.

React-komponenttien luominen

Luodaan TaskList-komponentti, jolla näytetään Djangon API:sta haetut tehtävät. Lisää seuraava src/components/TaskList.js-tiedostoon:

import React from 'react'; const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => { return ( <div className="task-list"> <h2>Your Tasks</h2> {tasks.length === 0 ? ( <p>Ei tehtäviä saatavilla. Luo ensimmäinen tehtäväsi!</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;

Luo seuraavaksi TaskForm-komponentti uusien tehtävien lisäämistä varten. Lisää tämä tiedostoon 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('Virhe tehtävän lisäämisessä:', virhe); } finally { setIsSubmitting(false); } }; return ( <form onSubmit={handleSubmit} className="task-form"> <h2>Lisää uusi tehtävä</h2> <div className="form-group"> <input type="text" placeholder="Tehtävän otsikko" value={title} onChange={(e) => setTitle(e.target.value)} disabled={isSubmitting} required /> </div> <div className="form-group"> <textarea placeholder="Tehtävän kuvaus (vapaaehtoinen)" 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;

Perusmuotoilua varten luo src/App.css-tiedosto ja lisää:

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

Tilan hallinta ja API-integraatio

React-koukut, kuten useState ja useEffect, helpottavat tilan hallintaa ja vuorovaikutusta Django-backendin kanssa. Voit keskittää API-kutsut luomalla palvelutiedoston 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;

Lopuksi integroi kaikki src/App.js:ään:

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); } }; // Tehtävien lisäämiseen, päivittämiseen ja poistamiseen tarkoitetut lisämetodit menisivät tähän }

Tällä kokoonpanolla React-esiintymisesi on valmis käsittelemään tehtäviä vuorovaikutteisesti ja kommunikoimaan saumattomasti Django-backendin kanssa.

Djangon ja Reactin yhdistäminen

Nyt kun backend ja frontend ovat valmiina, seuraava askel on varmistaa niiden välinen sujuva kommunikointi. Tähän kuuluu API-päätepisteiden määrittäminen, pyyntöjen hallinta ja mahdollisten integrointiongelmien ratkaiseminen.

API-URL-osoitteiden määrittäminen Reactissa

React-sovelluksesi on tiedettävä, mistä Djangon API-päätepisteet löytyvät. Tätä varten päivitä src/services/api.js-tiedosto ympäristökohtaisilla määrityksillä:

import axios from 'axios'; // Määritä API-perusURL ympäristön perusteella 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 sekunnin aikakatkaisu }); 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;

Tuotantoa varten lisää React-projektisi juuriin .env-tiedosto, jonka sisältö on seuraava:

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

Tämä asetus varmistaa, että React-sovelluksesi voi olla saumattomasti vuorovaikutuksessa Django-backendisi kanssa, olitpa sitten paikallisessa kehitysympäristössä tai tuotantoon käyttöönotossa. Kun API-päätepisteet on määritetty, olet valmis hakemaan ja käsittelemään backendin tietoja.

Tietojen noutaminen backendistä

Kun API-konfiguraatio on määritetty, voit suorittaa CRUD-operaatioita tietojen hallitsemiseksi Reactin ja Djangon välillä. Päivitä src/App.js käsittelemään näitä operaatioita:

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('Tehtävien haku epäonnistui. Tarkista yhteys.'); console.error('Tehtävien hakuvirhe:', err); } finally { setLoading(false); } }; const handleAddTask = async (taskData) => { try { const response = await taskAPI.createTask(taskData); setTasks(prevTasks => [...prevTasks, response.data]); } catch (err) { console.error('Virhe tehtävän lisäämisessä:', err); throw err; // Re-throw, jotta TaskForm voi käsitellä virheen } } }; 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('Tehtävän päivitysvirhe:', err); } }; const handleDeleteTask = async (taskId) => { if (!window.confirm('Haluatko varmasti poistaa tämän tehtävän?')) { return; } try { await taskAPI.deleteTask(taskId); setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId)); } catch (err) { console.error('Virhe tehtävän poistamisessa:', err); } }; if (loading) { return <div className="loading">Tehtävien lataaminen...</div>; } return ( <div className="App"> <header className="App-header"> <h1>Tehtävienhallinta</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;

Tämä koodi käsittelee tehtävien luomista, päivittämistä, poistamista ja virheiden hallintaa. Käyttöliittymä päivittyy välittömästi sujuvan käyttökokemuksen varmistamiseksi, ja virheet hallitaan hienovaraisesti peruuttamalla muutokset tai näyttämällä asianmukaiset viestit.

Yhteyden testaus ja virheenkorjaus

Yksi yleisimmistä Djangon ja Reactin yhdistämisen esteistä on CORS (Cross-Origin Resource Sharing) -virheiden käsittely. Nämä johtuvat siitä, että selaimet estävät eri alkuperien väliset pyynnöt turvallisuussyistä. Kehityksen aikana React toimii tyypillisesti osoitteessa localhost:3000, kun taas Django toimii osoitteessa localhost:8000, jolloin syntyy cross-origin -skenaario.

CORS-ongelmien ratkaisemiseksi varmista, että olet määrittänyt CORS-otsikot Djangon asetuksissa kohdassa "CORS-otsikoiden määrittäminen" kuvatulla tavalla. Kun olet tehnyt muutokset, käynnistä Django-palvelimesi uudelleen niiden soveltamiseksi.

Seuraavassa on muutamia yleisiä API-pyyntöjen virheitä ja niiden ratkaisuja:

• HTTP 400 (Bad Request): Tämä tarkoittaa yleensä sitä, että pyyntöjen hyötykuormasta puuttuu joitakin vaadittuja tietoja tai se on epämuodostunut. Esimerkiksi marraskuussa 2023 FintanMi kohtasi 400-virheen luodessaan yhteisöä Django REST Framework- ja React-projektissa, koska owner-kenttä puuttui pyynnöstä. Tarkista aina kahdesti, että frontendisi lähettää kaikki vaaditut kentät, joita Djangon mallit odottavat.
• HTTP 405 (menetelmä ei sallittu): Tämä tapahtuu, kun API-päätepiste ei tue käytössä olevaa HTTP-menetelmää. Esimerkiksi FintanMi raportoi 405-virheestä, kun hän yritti poistaa viestin, mikä ratkaistiin päivittämällä Django-näkymä generics.RetrieveUpdateAPIView:stä generics.RetrieveUpdateDestroyAPIView:ksi, jotta se tukee DELETE-pyyntöjä.

Sovelluksen käyttäminen ja testaaminen

Kun Django-backend ja React frontend on yhdistetty, on aika käynnistää molemmat kehityspalvelimet ja testata sovellusta. Tämä tarkoittaa kahden palvelimen yhtäaikaista ajamista ja sen varmistamista, että kaikki toimii sujuvasti yhdessä.

Kehityspalvelimien käynnistäminen

Django-React-sovelluksen ajamista varten tarvitset kaksi terminaali-ikkunaa - yhden kummallekin palvelimelle. Tämän asetelman ansiosta backend ja frontend toimivat itsenäisesti ja kommunikoivat API-kutsujen kautta.

Django-backend-palvelimen käynnistäminen:

1. Avaa ensimmäinen terminaali-ikkuna ja siirry Django-projektisi juurihakemistoon.

2. Aktivoi Python-virtuaaliympäristösi:

   source venv/bin/activate
   

3. Käynnistä Djangon kehityspalvelin:

   python manage.py runserver
   

   Palvelin on käytettävissä osoitteessa http://127.0.0.1:8000/.

React Frontend -palvelimen käynnistäminen:

1. Avaa toinen terminaali-ikkuna ja siirry React-projektisi hakemistoon:

   cd frontend
   

2. Käynnistä React-kehityspalvelin:

   npm start
   

   Tämä avaa automaattisesti selainikkunan osoitteessa http://localhost:3000/.

Kun molemmat palvelimet ovat käynnissä, voit aloittaa sovelluksesi toimivuuden testaamisen.

Sovelluksen koko toiminnallisuuden testaaminen

Kun palvelimet ovat käynnissä ja CORS- ja API-päätepisteet on määritetty oikein, on aika validoida etu- ja takapään välinen tiedonkulku.

Backend API:n todentaminen:

• Testaa Djangon API-päätepisteet suoraan käymällä osoitteessa:

  http://localhost:8000/api/tasks
  

  Tämän pitäisi näyttää Django REST Frameworkin selattavissa oleva API-rajapinta, jossa voit suorittaa CREATE- ja READ-toimintoja.

• Pääset Djangon hallintakäyttöliittymään osoitteessa:

  http://localhost:8000/admin
  

  Kirjaudu sisään superuser-tunnuksillasi luodaksesi, muokataksesi tai poistaaksesi tehtäviä. Voit myös testata UPDATE- ja DELETE-operaatioita käymällä osoitteessa:

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

Frontend-Backend-integraatiotestaus:

• Avaa React-sovelluksesi osoitteessa http://localhost:3000 ja varmista, että se latautuu oikein ja näyttää tehtävät Djangon backendistä.
• Testaa jokainen CRUD-operaatio React-käyttöliittymän kautta:- Lisää uusi tehtävä ja tarkista, että se näkyy sekä React-käyttöliittymässä että backendissä.
  • Muokkaa olemassa olevaa tehtävää ja varmista, että muutokset on tallennettu.
  • Poista tehtävä ja tarkista, että se on poistettu sekä frontendistä että tietokannasta.

Jos sovelluksesi sisältää suodattimia tai muita ominaisuuksia, testaa ne perusteellisesti varmistaaksesi, että tehtävät näkyvät odotetulla tavalla.

Yleisten ongelmien korjaaminen

Jos kohtaat ongelmia testauksen aikana, tässä on joitakin yleisiä korjauksia, joita voit kokeilla.

API-yhteysvirheet:

• Varmista, että molemmat palvelimet toimivat omissa porteissaan: Django osoitteessa http://localhost:8000 ja React osoitteessa http://localhost:3000.

• Käytä selaimen kehittäjätyökaluja (verkko-välilehti) tunnistamaan HTTP-tilakoodit, kuten 404 tai 500.

• Tarkista välityspalvelinasetus React-projektin package.json-tiedostosta:

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

  Jos teet muutoksia, käynnistä React-palvelin uudelleen.

Palvelimen käynnistysongelmat:

• Jos Django-palvelin ei käynnisty, tarkista puuttuvat migraatiot:

  python manage.py makemigrations python manage.py migrate
  

• React-palvelimen ongelmissa kokeile asentaa riippuvuudet uudelleen:

  npm install
  

Tiedonkulkuongelmat:

• Käytä selaimen kehittäjätyökaluja verkkopyyntöjen ja konsolivirheiden tarkastamiseen.
• Lisää virheenkorjauslauseita, kuten console.log() Reactissa tai print-lauseita Djangon näkymissä, jäljittääksesi tietovirran.
• Tarkista kahdesti, että React-sovelluksen API-URL-osoitteet vastaavat täsmälleen Djangon URL-malleja, mukaan lukien perässä olevat vinoviivat (esim. /api/tasks/).

Yhteenveto ja seuraavat vaiheet

Olet luonut verkkosovelluksen, jossa yhdistyvät Django ja React, ja saanut näin vankan johdatuksen täysimittaiseen kehitykseen. Tässä projektissa korostuvat keskeiset käsitteet, kuten backendin erottaminen frontendistä, CRUD-operaatioiden suorittaminen ja ristikkäisten pyyntöjen hallinta CORS-asetusten avulla. Matkan varrella olet työskennellyt Djangon REST-kehyksen kanssa API:iden rakentamiseksi ja käyttänyt Reactin koukkuja tilanhallintaan - taitoja, jotka mahdollistavat näiden kahden tehokkaan työkalun sujuvan integroinnin.

Sovelluksen vieminen seuraavalle tasolle

Sovelluksesi toiminnallisuutta on mahdollista laajentaa. Voit esimerkiksi lisätä JWT-todennuksen Django REST Frameworkin avulla käyttäjätietojen ja API-käytön suojaamiseksi. Näin voisit tarjota käyttäjäkohtaisia ominaisuuksia ja yksilöllisiä kokemuksia.

Jos sovelluksesi tarvitsee reaaliaikaisia päivityksiä, harkitse Django Channelsin käyttämistä WebSocket-tuen mahdollistamiseksi. Tämä sopii erinomaisesti ominaisuuksiin, kuten live-kojelautoihin, chat-järjestelmiin tai ilmoituksiin, ja tekee sovelluksestasi dynaamisemman ja vuorovaikutteisemman alustan.

Sovelluksesi kasvaessa kehittyneestä datan visualisoinnista tulee tärkeää. Yhdistämällä Reactin renderöintiominaisuudet tehokkaaseen backend-tiedonhakuun pystyt käsittelemään ja näyttämään monimutkaisia tietokokonaisuuksia tehokkaasti.

Valmistautuminen tuotantoon

Kun valmistelet sovellustasi tuotantoon, keskity käyttöönottoon, tietoturvaan ja suorituskykyyn. Vaikka nykyinen asetus sopii hyvin paikalliseen kehitykseen, tuotantoympäristöt vaativat ylimääräisiä vaiheita. Näitä ovat esimerkiksi ympäristömuuttujien asettaminen, tietokannan optimointi ja vahvojen virheenkäsittelymekanismien käyttöönotto.

Nämä parannukset perustuvat jo kehittämiisi taitoihin - kuten API-suunnitteluun, komponenttipohjaiseen arkkitehtuuriin ja täysimittaiseen integrointiin. Kun hallitset nämä kehittyneet tekniikat, sinulla on hyvät valmiudet tarttua yritystason projekteihin ja jatkaa kasvuasi web-kehittäjänä.

Usein kysytyt kysymykset

Mitä etuja Djangon käyttämisestä backendiin ja Reactin käyttämisestä frontendiin on verkkosovelluksen rakentamisessa?

Djangon käyttäminen backendissä ja Reactin käyttäminen frontendissä luo vahvan yhdistelmän modernien verkkosovellusten kehittämiseen. Django tarjoaa vankan kehyksen, joka on täynnä työkaluja, jotka tehostavat backend-kehitystä, kun taas React loistaa dynaamisten ja interaktiivisten käyttöliittymien rakentamisessa.

Tämä yhdistelmä edistää vastuualueiden selkeää erottelua, mikä auttaa pitämään koodikannan järjestyksessä ja helpottamaan sen laajentamista ajan myötä. Reactin komponenttipohjainen rakenne kannustaa käyttöliittymäelementtien uudelleenkäyttöön, ja Djangon REST-kehys yksinkertaistaa API:iden rakentamista ja varmistaa sujuvan kommunikoinnin frontendin ja backendin välillä. Yhdessä ne tarjoavat nopean, tehokkaan ja käyttäjäkeskeisen lähestymistavan sovelluskehitykseen.

Miten ratkaisen CORS-ongelmat, kun yhdistän React-frontendin Django-backendiin?

React-frontendin ja Django-backendin välisten CORS-ongelmien ratkaisemiseksi django-cors-headers-paketti on kätevä ratkaisu. Asenna se ensin pipin avulla. Lisää sitten settings.py-tiedostossasi 'corsheaders' INSTALLED_APPS-luetteloon. Lisää sen jälkeen 'corsheaders.middleware.CorsMiddleware ' MIDDLEWARE-luettelon aivan alkuun, jotta varmistetaan oikea väliohjelmiston suoritusjärjestys.

Kehityksen aikana voit yksinkertaistaa asioita asettamalla settings.py-tiedostossa CORS_ORIGIN_ALLOW_ALL = True. Tämä sallii pyynnöt mistä tahansa alkuperästä. Tuotantoympäristössä on kuitenkin paljon turvallisempaa määritellä tietyt luotetut verkkotunnukset käyttämällä CORS_ALLOWED_ORIGINS-asetusta. Tämä lähestymistapa auttaa ylläpitämään tiukempaa turvallisuutta.

Tämän määrityksen avulla React-sovelluksesi voi toimia sujuvasti vuorovaikutuksessa Djangon API-rajapintojesi kanssa ja pysyä samalla CORS-vaatimusten mukaisena.

Miten voin valmistella Django- ja React-sovellukseni tuotantokäyttöön?

Jos haluat valmistella Django- ja React-sovelluksesi tuotantokäyttöön, aloita säätämällä Django-asetukset turvallista asennusta varten. Tähän kuuluu DEBUGin asettaminen Falseen ja ALLOWED_HOSTSin määrittäminen, jotta voit hallita, mitkä verkkotunnukset voivat käyttää sovellustasi. Nämä muutokset ovat välttämättömiä sovelluksesi suojaamiseksi live-ympäristössä.

Valitse seuraavaksi luotettava hosting-alusta Django-backendiäsi ja staattisia tiedostoja varten. Varmista, että infrastruktuurisi on rakennettu käsittelemään tuotantotason liikennettä ja vaatimuksia. Käytä React-etupäätettä varten sopivia rakennustyökaluja optimoidun tuotantokehityksen luomiseen.

Kun React-sovelluksesi on valmis, määritä verkkopalvelin, kuten Nginx, palvelemaan sekä React frontendiä että Django backendiä. Oikea palvelinkonfiguraatio varmistaa, että sovelluksesi toimii tehokkaasti ja tarjoaa käyttäjille saumattoman käyttökokemuksen.

Testaa sovelluksesi perusteellisesti tuotantoympäristössä ennen käyttöönottoa. Tämä vaihe auttaa tunnistamaan ja ratkaisemaan mahdolliset ongelmat ja varmistaa, että sovelluksesi toimii luotettavasti, kun se on käynnistetty.