Как создать простое приложение с помощью Django и React

Как создать простое приложение с помощью Django и React

Хотите создать веб-приложение с мощным бэкендом и динамичным фронтендом? Отличный способ добиться этого — объединить Django, фреймворк на Python, с React, библиотекой на JavaScript. Django обрабатывает бэкенд-задачи, такие как управление базами данных и создание API, а React создает адаптивный и интерактивный пользовательский интерфейс.

Основные шаги:

1. Настройте среду:
   • Установите Python 3.x для Django и Node.js для React.
   • Используйте виртуальные среды для управления зависимостями Python.
   • Проверьте установку с помощью python --version, node --version, и npm --version.
2. Организуйте свой проект:
   • Создайте отдельные папки для бэкенда Django и фронтенда React.
   • Используйте django-admin startproject для настройки бэкенда и npx create-react-app для инициализации фронтенда.
3. Создание бэкенда:
   • Создайте приложения Django, определите модели и сгенерируйте миграции.
   • Используйте Django REST Framework для создания конечных точек API.
   • Настройте django-cors-headers для обеспечения взаимодействия между фронтендом и бэкендом.
4. Разработка фронтенда:
   • Используйте компоненты React для управления задачами и взаимодействиями с пользователями.
   • Установите Axios для запросов API и интегрируйте его с конечными точками Django.
   • Оформите приложение с помощью CSS, чтобы создать лаконичный пользовательский интерфейс.
5. Подключение и тестирование:
   • Запустите Django на localhost:8000 , а React — на localhost:3000.
   • Протестируйте конечные точки API с помощью таких инструментов, как Postman, или непосредственно в браузере.
   • Убедитесь, что настройки CORS заданы правильно для бесперебойного взаимодействия.

Эта конфигурация позволяет эффективно создавать полнофункциональное приложение с четким разделением бэкенда и фронтенда. Выполните следующие шаги, чтобы создать масштабируемое интерактивное веб-приложение.

Проект на Django и React для начинающих — создание полнофункционального приложения для конспектов

Требования к настройке и установке

Прежде чем приступить к разработке приложения на Django и React, крайне важно настроить среду разработки с необходимыми инструментами и зависимостями. Эта основа поможет вам без проблем создавать, интегрировать и тестировать компоненты Django и React по мере продвижения работы.

Системные требования и инструменты

Для начала на вашем компьютере для разработки должен быть установлен Python 3.x для Django и Node.js для React. В частности, Django 5.0 требует Python 3.x, а React работает с Node.js версии 12 или выше.

Установка Python: вы можете скачать Python напрямую с официального сайта или воспользоваться менеджером пакетов вашей системы. Пользователям macOS упрощает задачу Homebrew brew install python. Пользователям Windows следует скачать установщик с python.org, а пользователи Linux могут установить его с помощью команд типа apt install python3 в Ubuntu или аналогичные команды для других дистрибутивов.

Настройка Node.js и npm: Node.js поставляется в комплекте с npm (Node Package Manager). Вам понадобится npm версии 6 или выше; версия 7.5.4 является надёжным выбором. Загрузите Node.js с сайта nodejs.org — в него автоматически будет включен npm.

Виртуальные среды Python: Использование виртуальных сред является ключом к управлению зависимостями конкретных проектов без конфликтов. Вы можете использовать встроенный venv модуль или такие инструменты, как pipenv или virtualenvwrapper для расширенных возможностей. Если вы работаете в Windows, пакет virtualenvwrapper-win пакет предоставляет аналогичную функциональность.

Чтобы проверить правильность установки, выполните в терминале следующие команды:

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

Создание структуры проекта

Хорошо организованная структура проекта необходима для разделения кода бэкенда и фронтенда и облегчения управления ими. Начните с создания главного каталога для вашего проекта:

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

Внутри этого каталога создайте две папки: одну для бэкенда на Django, а другую — для фронтенда на React. Такое разделение позволит вам поддерживать и развертывать каждую часть независимо друг от друга.

Настройте виртуальную среду Python в каталоге проекта:

python -m venv venv

Активируйте виртуальную среду:

• В macOS/Linux: source venv/bin/activate
• В Windows: venv\Scripts\activate

Этот шаг гарантирует, что все зависимости Python для вашего проекта будут изолированы.

Установка необходимых пакетов

Теперь, когда среда готова, пора установить необходимые пакеты как для Django, так и для React.

Пакеты бэкэнда Django: Пока ваша виртуальная среда активна, установите Django и его вспомогательные библиотеки с помощью pip:

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

• Django отвечает за серверную логику, управление базой данных и маршрутизацию URL-адресов.
• Django REST Framework упрощает процесс создания RESTful API, облегчая создание конечных точек для вашего React-фронтенда.
• Django-cors-headers включает поддержку Cross-Origin Resource Sharing (CORS), что необходимо для взаимодействия между вашим React-фронтендом (работающим на порту 3000) и Django-бэкендом (работающим на порту 8000).

Настройка React-фронтенда: для настройки среды React используйте инструмент create-react-app инструмент. Эта команда инициализирует проект React и устанавливает все необходимые зависимости:

npx create-react-app frontend

В результате будет создан новый проект React в каталоге frontend каталоге, укомплектованный необходимыми пакетами, инструментами разработки и скриптами сборки.

Дополнительный пакет для фронтенда: После настройки проекта React перейдите в каталог frontend каталог и установите Axios — библиотеку для отправки HTTP-запросов к вашему API на Django:

cd frontend
npm install axios

На этом этапе ваша среда разработки полностью укомплектована Python 3.x, Django, Node.js, React и всеми необходимыми инструментами. Виртуальная среда Python обеспечивает изоляцию ваших бэкенд-зависимостей, а npm отдельно управляет вашими пакетами JavaScript. Теперь вы готовы приступить к созданию полнофункционального приложения!

Создание бэкенда с помощью Django

Настройте бэкенд на Django с моделями базы данных, конечными точками API и интеграцией с фронтендом на React.

Создание проекта и приложения Django

Начните с создания проекта Django, который включает настройки, конфигурации базы данных и параметры, специфичные для приложения. В рамках этого проекта вы создадите приложение Django — пакет на языке Python, предназначенный для выполнения конкретных задач, таких как управление данными пользователей или контентом.

Перейдите в корневой каталог вашего проекта (где настроена ваша виртуальная среда) и создайте проект Django:

django-admin startproject backend .

Эта команда генерирует файлы проекта непосредственно в текущем каталоге, что позволяет избежать создания дополнительной папки. Вы заметите появление новых файлов, таких как manage.py (для запуска команд Django) и каталог backend каталог, содержащий такие файлы, как settings.py, urls.py, asgi.py, и wsgi.py.

Далее создайте приложение для реализации конкретной функциональности. Например, систему управления задачами:

python manage.py startapp tasks

В результате создаётся tasks каталог с необходимыми файлами, такими как models.py, views.py, admin.py, и папку migrations папку. Обязательно избегайте конфликтов имен со встроенными именами, такими как «django» или «test».

Зарегистрируйте приложение в настройках проекта, добавив его в INSTALLED_APPS список в 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
]

Настройка моделей и сериализаторов

Определите структуру данных с помощью моделей Django. Например, простую Task модель для приложения управления задачами можно добавить в 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

Эта модель включает такие поля, как CharField для короткого текста, TextField для более длинного контента, BooleanField для значений «true/false» и DateTimeField для временных меток. Класс Meta класс определяет такие параметры, как порядок сортировки по умолчанию.

Примените модель к вашей базе данных, запустив миграции:

python manage.py makemigrations tasks
python manage.py migrate

Для преобразования данных модели в JSON используйте сериализаторы Django REST Framework. В tasks/serializers.py, определите сериализатор для 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']

Файл ModelSerializer автоматически генерирует поля и методы на основе модели. Явное перечисление полей гарантирует, что вы не раскроете конфиденциальные данные непреднамеренно.

Создание конечных точек API

Django REST Framework упрощает создание API. Для стандартных операций CRUD используйте ViewSets с маршрутизаторами для получения лаконичной REST-структуры.

В tasks/views.pyсоздайте представления API:

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 автоматически обрабатывает вывод списка, создание, получение, обновление и удаление задач.

Настройте маршрутизацию URL-адресов в 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)),
]

Включите эти URL-адреса в главный 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

Чтобы ваш React-фронтенд (работающий на порту 3000) мог взаимодействовать с Django-бэкендом (на порту 8000), настройте Cross-Origin Resource Sharing (CORS). Без этого браузеры блокируют междоменные запросы по соображениям безопасности.

Обновите backend/settings.py , чтобы добавить настройки CORS:

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

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

CORS_ALLOW_CREDENTIALS = True

Для быстрого тестирования можно использовать CORS_ALLOW_ALL_ORIGINS = True, но указание разрешенных источников является более безопасным.

Тестирование конечных точек API

Перед интеграцией React-интерфейса протестируйте конечные точки API, чтобы убедиться, что они работают как положено. Запустите сервер разработки Django:

python manage.py runserver

Перейдите к API по адресу http://127.0.0.1:8000/api/tasks/. Воспользуйтесь API с возможностью просмотра, чтобы протестировать такие операции, как запросы GET и POST.

В качестве альтернативы можно провести тестирование с помощью cURL или Postman:

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

Для автоматизированного тестирования добавьте тестовые случаи в 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

Теперь, когда бэкенд готов, вы можете подключить его к React-фронтенду.

Создание интерфейса с помощью React

Чтобы создать привлекательный интерфейс для вашего бэкенда на Django, вы будете использовать React для управления взаимодействиями с пользователями — от просмотра задач до добавления новых.

Настройка проекта React

Начните с настройки фронтенда React с помощью Create React App. Перейдите в корневой каталог вашего проекта (где находится ваш бэкенд на Django) и выполните:

npx create-react-app frontend
cd frontend

Эта команда создает приложение React с такими необходимыми файлами, как package.json, src/App.js, и public/index.html. Она также включает такие инструменты, как webpack для объединения файлов в один пакет, Babel для компиляции JavaScript и сервер разработки для тестирования.

Затем установите Axios для обработки HTTP-запросов к вашему API на Django:

npm install axios

Axios упрощает вызов API, управляя разбором JSON и предлагая более эффективную обработку ошибок, чем встроенная fetch() . Кроме того, он поддерживает такие функции, как перехватчики запросов и ответов.

Теперь структура ваших папок должна выглядеть следующим образом:

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

Чтобы убедиться, что всё работает, запустите сервер разработки React:

npm start

При этом приложение запустится по адресу http://localhost:3000, отображая стандартную страницу приветствия React. Оставьте этот сервер запущенным на время разработки — он автоматически перезагружается при внесении изменений.

Создание компонентов React

Давайте создадим TaskList компонент для отображения задач, полученных из вашего API Django. Добавьте следующий код в файл 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;

Далее создайте TaskForm компонент для добавления новых задач. Добавьте следующий код в 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;

Для базового стилевого оформления создайте файл src/App.css файл и добавьте:

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

Управление состоянием и интеграция с API

Хуки React, такие как useState и useEffect упрощают управление состоянием и взаимодействие с бэкендом Django. Чтобы централизовать вызовы API, создайте файл сервиса 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;

Наконец, интегрируйте всё в 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
}

С такой настройкой ваш React-фронтенд готов интерактивно обрабатывать задачи, при этом беспрепятственно взаимодействуя с вашим Django-бэкендом.

Интеграция Django и React

Теперь, когда ваш бэкенд и фронтенд запущены и работают, следующим шагом будет обеспечение бесперебойной связи между ними. Это включает настройку конечных точек API, управление запросами и устранение любых проблем при интеграции.

Настройка URL-адресов API в React

Вашему приложению React необходимо знать, где находятся конечные точки API Django. Для этого обновите файл src/services/api.js файл, указав настройки, соответствующие вашей среде:

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;

Для производственной среды добавьте файл .env в корневой каталог вашего проекта React со следующим содержанием:

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

Такая настройка гарантирует, что ваше приложение React сможет беспрепятственно взаимодействовать с бэкендом Django, независимо от того, находитесь ли вы в локальной среде разработки или развертываете приложение в производственной среде. После настройки конечных точек API вы готовы к получению и обработке данных бэкенда.

Получение данных из бэкенда

После настройки API вы можете выполнять операции CRUD для управления данными между React и Django. Обновите 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);
      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;

Этот код обрабатывает создание, обновление и удаление задач, а также управление ошибками. Пользовательский интерфейс обновляется мгновенно, обеспечивая плавный пользовательский опыт, а ошибки корректно обрабатываются путем отмены изменений или отображения соответствующих сообщений.

Тестирование и отладка соединения

Одним из самых распространённых препятствий при интеграции Django и React является устранение ошибок CORS (Cross-Origin Resource Sharing). Они возникают из-за того, что браузеры из соображений безопасности блокируют запросы между разными источниками. В процессе разработки React обычно работает на localhost:3000, а Django — на localhost:8000, что приводит к междоменной ситуации.

Чтобы устранить проблемы с CORS, убедитесь, что вы настроили заголовки CORS в настройках Django, как описано в разделе «Настройка заголовков CORS». После внесения изменений перезапустите сервер Django, чтобы они вступили в силу.

Ниже приведены несколько распространённых ошибок API-запросов и способы их устранения:

• HTTP 400 (Неверный запрос): как правило, это означает, что в теле запроса отсутствуют некоторые обязательные данные или они имеют неверный формат. Например, в ноябре 2023 года в проекте FintanMi, реализованном на Django REST Framework и React, при создании сообщества возникала ошибка 400 из-за того, что в запросе отсутствовало поле owner в запросе отсутствовало поле. Всегда тщательно проверяйте, что ваш фронтенд отправляет все обязательные поля, ожидаемые моделями Django.
• HTTP 405 (Method Not Allowed): эта ошибка возникает, когда конечная точка API не поддерживает используемый HTTP-метод. Например, FintanMi сообщила об ошибке 405 при попытке удалить пост; проблема была решена путём обновления представления Django с generics.RetrieveUpdateAPIView на generics.RetrieveUpdateDestroyAPIView , чтобы добавить поддержку DELETE запросов.

Запуск и тестирование приложения

После подключения бэкенда на Django и фронтенда на React пришло время запустить оба сервера разработки и протестировать приложение. Для этого необходимо одновременно запустить два сервера и убедиться, что все работает слаженно.

Запуск серверов разработки

Для запуска приложения Django-React вам понадобятся два окна терминала — по одному для каждого сервера. Такая конфигурация позволяет бэкенду и фронтенду работать независимо друг от друга, обмениваясь данными посредством вызовов API.

Запуск сервера бэкэнда Django:

1. Откройте первое окно терминала и перейдите в корневой каталог вашего проекта Django.

2. Активируйте виртуальную среду Python:

   source venv/bin/activate
   

3. Запустите сервер разработки Django:

   python manage.py runserver
   

   Сервер будет доступен по адресу http://127.0.0.1:8000/.

Запуск фронтенд-сервера React:

1. Откройте второе окно терминала и перейдите в каталог вашего проекта React:

   cd frontend
   

2. Запустите сервер разработки React:

   npm start
   

   При этом автоматически откроется окно браузера по адресу http://localhost:3000/.

Как только оба сервера запустятся, вы сможете приступить к тестированию функциональности вашего приложения.

Тестирование полной функциональности приложения

После запуска серверов и правильной настройки CORS и конечных точек API пришло время проверить обмен данными между фронтендом и бэкендом.

Проверка бэкенд-API:

• Протестируйте конечные точки API Django напрямую, перейдя по адресу:

  http://localhost:8000/api/tasks
  

  На этой странице должен отобразиться интерфейс API Django REST Framework, доступный для просмотра, где вы можете выполнять операции CREATE и READ.

• Перейдите в административный интерфейс Django по адресу:

  http://localhost:8000/admin
  

  Войдите в систему с учетными данными суперпользователя, чтобы создавать, редактировать или удалять задачи. Вы также можете протестировать операции UPDATE и DELETE, перейдя по адресу:

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

Тестирование интеграции фронтенда и бэкенда:

• Откройте приложение React по адресу http://localhost:3000 и убедитесь, что оно загружается правильно, отображая задачи из бэкенда Django.
• Протестируйте каждую операцию CRUD через интерфейс React:
  • Добавьте новую задачу и убедитесь, что она отображается как в пользовательском интерфейсе React, так и в бэкенде.
  • Отредактируйте существующую задачу и убедитесь, что изменения сохранены.
  • Удалите задачу и убедитесь, что она удалена как из интерфейса, так и из базы данных.

Если ваше приложение содержит фильтры или другие функции, тщательно протестируйте их, чтобы убедиться, что задачи отображаются так, как ожидается.

Устранение типичных проблем

Если во время тестирования у вас возникнут какие-либо проблемы, попробуйте воспользоваться следующими распространенными способами их устранения.

Ошибки подключения к API:

• Убедитесь, что оба сервера работают на соответствующих портах: Django на http://localhost:8000 , а React — на http://localhost:3000.
• Воспользуйтесь инструментами разработчика в браузере (вкладка «Сеть»), чтобы определить коды статуса HTTP, такие как 404 или 500.

• Проверьте настройку proxy настройку в файле package.json файле:

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

  Если вы внесли изменения, перезапустите сервер React.

Проблемы с запуском сервера:

• Если сервер Django не запускается, проверьте, не отсутствуют ли миграции:

  python manage.py makemigrations
  python manage.py migrate
  

• При проблемах с сервером React попробуйте переустановить зависимости:

  npm install
  

Проблемы с потоком данных:

• Используйте инструменты разработчика в браузере для проверки сетевых запросов и ошибок в консоли.
• Добавьте отладочные операторы, например console.log() в React или print в представлениях Django, чтобы отследить поток данных.
• Ещё раз проверьте, точно ли URL-адреса API в вашем приложении React соответствуют шаблонам URL-адресов Django, включая конечные косые черты (например, /api/tasks/).

Резюме и дальнейшие шаги

Вы создали веб-приложение, сочетающее Django и React, что дало вам основательное представление о полнофункциональной разработке. Этот проект освещает такие важные концепции, как разделение бэкенда и фронтенда, выполнение операций CRUD и управление междоменными запросами с помощью настроек CORS. В процессе работы вы использовали Django REST Framework для создания API и React-хуки для управления состоянием — навыки, которые позволяют обеспечить плавную интеграцию между этими двумя мощными инструментами.

Вывод приложения на новый уровень

Есть много возможностей для расширения функциональности вашего приложения. Например, вы можете добавить аутентификацию JWT с помощью Django REST Framework для защиты пользовательских данных и доступа к API. Это позволит вам предлагать функции, адаптированные под конкретных пользователей, и персонализированный интерфейс.

Если вашему приложению требуются обновления в реальном времени, рассмотрите возможность использования Django Channels для поддержки WebSocket. Это идеально подходит для таких функций, как интерактивные дашборды, системы чата или уведомления, превращая ваше приложение в более динамичную и интерактивную платформу.

По мере роста вашего приложения всё большее значение приобретает расширенная визуализация данных. Сочетая возможности рендеринга React с эффективным извлечением данных из бэкенда, вы сможете эффективно обрабатывать и отображать сложные наборы данных.

Подготовка к запуску в производственную среду

При подготовке приложения к производственной эксплуатации сосредоточьтесь на развертывании, безопасности и производительности. Хотя текущая конфигурация отлично подходит для локальной разработки, производственные среды требуют дополнительных шагов. К ним относятся настройка переменных среды, оптимизация базы данных и реализация надежных механизмов обработки ошибок.

Эти усовершенствования основываются на навыках, которые вы уже приобрели, — таких как проектирование API, компонентная архитектура и полнофункциональная интеграция. Освоив эти продвинутые техники, вы будете хорошо подготовлены для работы над проектами корпоративного уровня и сможете продолжать развиваться как веб-разработчик.

Часто задаваемые вопросы

В чём преимущества использования Django для бэкенда и React для фронтенда при разработке веб-приложения?

Использование Django для бэкенда и React для фронтенда создает мощное сочетание для разработки современных веб-приложений. Django предоставляет надежный фреймворк, наполненный инструментами, которые оптимизируют разработку бэкенда, в то время как React отлично подходит для создания динамичных и интерактивных пользовательских интерфейсов.

Такое сочетание способствует четкому разделению обязанностей, что помогает поддерживать организованность кодовой базы и облегчает её расширение со временем. Компонентная структура React способствует повторному использованию элементов пользовательского интерфейса, а REST Framework от Django упрощает процесс создания API, обеспечивая бесперебойную связь между фронтендом и бэкендом. Вместе они предлагают быстрый, эффективный и ориентированный на пользователя подход к разработке приложений.

Как устранить проблемы с CORS при подключении фронтенда React к бэкенду Django?

Для устранения проблем с CORS между фронтендом React и бэкендом Django django-cors-headers пакет — удобное решение. Сначала установите его с помощью pip. Затем в файле settings.py файле добавьте 'corsheaders' в список INSTALLED_APPS список. После этого добавьте 'corsheaders.middleware.CorsMiddleware' в самом начале списка MIDDLEWARE списка, чтобы обеспечить правильный порядок выполнения промежуточного программного обеспечения.

На этапе разработки вы можете упростить задачу, установив CORS_ORIGIN_ALLOW_ALL = True в файле settings.py. Это разрешает запросы из любого источника. Однако в производственной среде гораздо безопаснее определить конкретные доверенные домены с помощью параметра CORS_ALLOWED_ORIGINS . Такой подход помогает обеспечить более высокий уровень безопасности.

С такой конфигурацией ваше приложение React сможет беспрепятственно взаимодействовать с вашими API Django, при этом соблюдая требования CORS.

Как подготовить приложения Django и React к развёртыванию в производственной среде?

Чтобы подготовить приложения Django и React к производственной среде, для начала настройте параметры Django для обеспечения безопасности. Сюда входит настройка DEBUG на False и указание параметра ALLOWED_HOSTS для управления доступами к приложению с определённых доменов. Эти изменения необходимы для защиты вашего приложения в производственной среде.

Затем выберите надёжную хостинговую платформу для бэкенда на Django и статических файлов. Убедитесь, что ваша инфраструктура рассчитана на обработку трафика и нагрузок производственного уровня. Для фронтенда на React используйте подходящие инструменты сборки, чтобы сгенерировать оптимизированную производственную сборку.

Как только ваше приложение React будет готово, настройте веб-сервер, например Nginx, для обслуживания как React-фронтенда, так и Django-бэкенда. Правильная настройка сервера гарантирует эффективную работу вашего приложения и обеспечивает бесперебойный пользовательский опыт.

Перед запуском тщательно протестируйте приложение в производственной среде. Этот шаг поможет выявить и устранить любые проблемы, обеспечив надёжную работу приложения после запуска.