Cách xây dựng một ứng dụng đơn giản với Django và React

Cách xây dựng một ứng dụng đơn giản với Django và React

Bạn đang muốn tạo một ứng dụng web với backend mạnh mẽ và frontend động? Kết hợp Django, một framework Python, với React, một thư viện JavaScript, là một cách tuyệt vời để đạt được điều này. Django xử lý các tác vụ backend như quản lý cơ sở dữ liệu và tạo API, trong khi React tạo ra giao diện người dùng tương tác và nhạy bén.

Các bước chính:

1. Thiết lập môi trường:
   • Cài đặt Python 3.x cho Django và Node.js cho React.
   • Sử dụng môi trường ảo để quản lý các phụ thuộc của Python.
   • Xác nhận cài đặt bằng lệnh python --version, node --version, và npm --version.
2. Sắp xếp dự án của bạn:
   • Tạo các thư mục riêng biệt cho phần backend của Django và phần frontend của React.
   • Sử dụng django-admin startproject để thiết lập backend và npx create-react-app để khởi tạo phần frontend.
3. Xây dựng phần backend:
   • Tạo các ứng dụng Django, định nghĩa các mô hình và tạo các bản di chuyển.
   • Sử dụng Django REST Framework để xây dựng các điểm cuối API.
   • Cấu hình django-cors-headers để cho phép giao tiếp giữa frontend và backend.
4. Phát triển Frontend:
   • Sử dụng các thành phần React để quản lý tác vụ và tương tác của người dùng.
   • Cài đặt Axios để thực hiện các yêu cầu API và tích hợp nó với các điểm cuối Django.
   • Tạo kiểu cho ứng dụng bằng CSS để có giao diện người dùng gọn gàng.
5. Kết nối và kiểm thử:
   • Chạy Django trên localhost:8000 và React trên localhost:3000.
   • Kiểm thử các điểm cuối API bằng các công cụ như Postman hoặc trực tiếp trong trình duyệt.
   • Đảm bảo cài đặt CORS đúng cách để đảm bảo giao tiếp suôn sẻ.

Cấu hình này cho phép bạn xây dựng hiệu quả một ứng dụng full-stack với sự phân tách rõ ràng giữa backend và frontend. Thực hiện theo các bước sau để tạo ra một ứng dụng web tương tác và có khả năng mở rộng.

Dự án Django và React dành cho người mới bắt đầu - Xây dựng ứng dụng ghi chú FullStack

Yêu cầu thiết lập và cài đặt

Trước khi bắt đầu xây dựng ứng dụng Django và React, điều quan trọng là phải thiết lập môi trường phát triển với các công cụ và phụ thuộc cần thiết. Nền tảng này sẽ giúp bạn tạo, tích hợp và kiểm thử các thành phần Django và React một cách trơn tru trong quá trình thực hiện.

Yêu cầu hệ thống và công cụ

Để bắt đầu, máy phát triển của bạn sẽ cần Python 3.x cho Django và Node.js cho React. Cụ thể, Django 5.0 yêu cầu Python 3.x, trong khi React hoạt động với Node.js phiên bản 12 trở lên.

Cài đặt Python: Bạn có thể tải xuống Python trực tiếp từ trang web chính thức hoặc sử dụng trình quản lý gói của hệ thống. Đối với người dùng macOS, Homebrew giúp việc này trở nên đơn giản với brew install python. Người dùng Windows nên tải trình cài đặt từ python.org, trong khi người dùng Linux có thể cài đặt bằng các lệnh như apt install python3 trên Ubuntu hoặc các lệnh tương tự cho các bản phân phối khác.

Thiết lập Node.js và npm: Node.js được tích hợp sẵn với npm (Node Package Manager). Bạn sẽ cần npm phiên bản 6 trở lên, trong đó phiên bản 7.5.4 là lựa chọn đáng tin cậy. Tải xuống Node.js từ nodejs.org, gói này sẽ tự động bao gồm npm.

Môi trường ảo Python: Việc sử dụng môi trường ảo là chìa khóa để quản lý các phụ thuộc cụ thể của dự án mà không gây xung đột. Bạn có thể sử dụng mô-đun venv hoặc các công cụ như pipenv hoặc virtualenvwrapper để có thêm tính năng. Nếu bạn đang sử dụng Windows, gói virtualenvwrapper-win gói này cung cấp chức năng tương tự.

Để xác nhận các cài đặt của bạn, hãy chạy các lệnh sau trong terminal:

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

Tạo cấu trúc dự án

Một cấu trúc dự án được tổ chức tốt là điều cần thiết để giữ cho mã backend và frontend của bạn tách biệt và dễ quản lý. Bắt đầu bằng cách tạo một thư mục chính cho dự án của bạn:

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

Trong thư mục này, hãy tạo hai thư mục: một thư mục dành cho backend Django và một thư mục dành cho frontend React. Việc tách biệt này cho phép bạn duy trì và triển khai từng phần một cách độc lập.

Thiết lập môi trường ảo Python trong thư mục dự án:

python -m venv venv

Kích hoạt môi trường ảo:

• Trên macOS/Linux: source venv/bin/activate
• Trên Windows: venv\Scripts\activate

Bước này đảm bảo rằng tất cả các phụ thuộc Python cho dự án của bạn được cách ly.

Cài đặt các gói cần thiết

Khi môi trường đã sẵn sàng, đã đến lúc cài đặt các gói cần thiết cho cả Django và React.

Các gói phần mềm phía máy chủ của Django: Trong khi môi trường ảo của bạn đang hoạt động, hãy cài đặt Django và các thư viện hỗ trợ của nó bằng pip:

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

• Django xử lý logic phía máy chủ, quản lý cơ sở dữ liệu và định tuyến URL.
• Django REST Framework đơn giản hóa quá trình xây dựng các API RESTful, giúp việc tạo các điểm cuối cho frontend React của bạn trở nên dễ dàng hơn.
• Django-cors-headers kích hoạt Cross-Origin Resource Sharing (CORS), điều này rất cần thiết cho việc giao tiếp giữa frontend React (chạy trên cổng 3000) và backend Django (chạy trên cổng 8000).

Cài đặt giao diện người dùng React: Để thiết lập môi trường React, hãy sử dụng công cụ create-react-app công cụ này. Lệnh này sẽ khởi tạo một dự án React và cài đặt tất cả các phụ thuộc cần thiết:

npx create-react-app frontend

Lệnh này sẽ tạo một dự án React mới trong thư mục frontend thư mục, kèm theo các gói thiết yếu, công cụ phát triển và tập lệnh xây dựng.

Gói frontend bổ sung: Sau khi thiết lập dự án React, hãy chuyển đến thư mục frontend thư mục và cài đặt Axios, một thư viện dùng để thực hiện các yêu cầu HTTP tới API Django của bạn:

cd frontend
npm install axios

Tại thời điểm này, môi trường phát triển của bạn đã được trang bị đầy đủ với Python 3.x, Django, Node.js, React và tất cả các công cụ cần thiết. Môi trường ảo Python đảm bảo các phụ thuộc phía server được cách ly, trong khi npm quản lý các gói JavaScript của bạn một cách riêng biệt. Giờ đây, bạn đã sẵn sàng bắt đầu xây dựng ứng dụng full-stack của mình!

Xây dựng phần backend bằng Django

Thiết lập backend Django với các mô hình cơ sở dữ liệu, các điểm cuối API và tích hợp cho frontend React.

Tạo dự án và ứng dụng Django

Bắt đầu bằng cách tạo một dự án Django, bao gồm cài đặt, cấu hình cơ sở dữ liệu và các tùy chọn dành riêng cho ứng dụng. Trong dự án này, bạn sẽ xây dựng một ứng dụng Django - một gói Python được thiết kế cho các tác vụ cụ thể như quản lý dữ liệu người dùng hoặc nội dung.

Chuyển đến thư mục gốc của dự án (nơi môi trường ảo của bạn được thiết lập) và tạo dự án Django:

django-admin startproject backend .

Lệnh này tạo các tệp dự án trực tiếp trong thư mục hiện tại, tránh phải tạo thêm thư mục. Bạn sẽ thấy các tệp mới như manage.py (để chạy các lệnh Django) và một backend thư mục chứa các tệp như settings.py, urls.py, asgi.py, và wsgi.py.

Tiếp theo, tạo một ứng dụng để xử lý các chức năng cụ thể. Ví dụ: một hệ thống quản lý tác vụ:

python manage.py startapp tasks

Điều này sẽ tạo ra một tasks thư mục với các tệp cần thiết như models.py, views.py, admin.py, và một migrations thư mục. Hãy đảm bảo tránh xung đột tên với các tên có sẵn như "django" hoặc "test."

Đăng ký ứng dụng trong cài đặt dự án của bạn bằng cách thêm nó vào INSTALLED_APPS danh sách trong 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
]

Thiết lập Mô hình và Trình tuần tự hóa

Xác định cấu trúc dữ liệu của bạn bằng các mô hình Django. Ví dụ, một Task cho ứng dụng quản lý tác vụ có thể được thêm vào 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

Mô hình này bao gồm các trường như CharField dành cho văn bản ngắn, TextField cho nội dung dài hơn, BooleanField cho các giá trị đúng/sai, và DateTimeField dành cho dấu thời gian. Lớp Meta lớp này chỉ định các tùy chọn như thứ tự mặc định.

Áp dụng mô hình vào cơ sở dữ liệu của bạn bằng cách chạy các bản di chuyển:

python manage.py makemigrations tasks
python manage.py migrate

Để chuyển đổi dữ liệu mô hình sang JSON, hãy sử dụng các trình tuần tự hóa của Django REST Framework. Trong tasks/serializers.py, hãy định nghĩa một trình chuyển đổi cho Task mô hình:

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 tự động tạo các trường và phương thức dựa trên mô hình. Việc liệt kê các trường một cách rõ ràng đảm bảo bạn không vô tình tiết lộ dữ liệu nhạy cảm.

Xây dựng các điểm cuối API

Django REST Framework giúp đơn giản hóa việc tạo API. Đối với các thao tác CRUD tiêu chuẩn, hãy sử dụng ViewSets cùng với các bộ định tuyến để có cấu trúc RESTful gọn gàng.

Trong tasks/views.py, tạo các view 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

Hệ thống ModelViewSet tự động xử lý các tác vụ liệt kê, tạo, truy xuất, cập nhật và xóa.

Thiết lập định tuyến URL trong 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)),
]

Bao gồm các URL này trong tệp backend/urls.py :

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

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

Cấu hình tiêu đề CORS

Để cho phép frontend React của bạn (chạy trên cổng 3000) giao tiếp với backend Django (trên cổng 8000), hãy cấu hình Cross-Origin Resource Sharing (CORS). Nếu không có thiết lập này, trình duyệt sẽ chặn các yêu cầu liên nguồn vì lý do bảo mật.

Cập nhật backend/settings.py để thêm cấu hình 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

Để kiểm thử nhanh, bạn có thể sử dụng CORS_ALLOW_ALL_ORIGINS = True, nhưng việc chỉ định các nguồn được phép sẽ an toàn hơn.

Kiểm thử các điểm cuối API

Trước khi tích hợp giao diện người dùng React, hãy kiểm thử các điểm cuối API để đảm bảo chúng hoạt động như mong đợi. Khởi động máy chủ phát triển Django:

python manage.py runserver

Truy cập API tại http://127.0.0.1:8000/api/tasks/. Sử dụng API có thể duyệt để kiểm thử các thao tác như yêu cầu GET và POST.

Ngoài ra, bạn có thể kiểm thử bằng cURL hoặc 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"}'

Để kiểm thử tự động, hãy thêm các trường hợp kiểm thử trong 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

Khi phần backend đã sẵn sàng, bạn đã có thể kết nối nó với phần frontend React.

Xây dựng giao diện người dùng với React

Để tạo ra một giao diện hấp dẫn cho phần backend Django của bạn, bạn sẽ sử dụng React để quản lý các tương tác của người dùng - từ việc xem các tác vụ đến việc thêm các tác vụ mới.

Thiết lập dự án React

Bắt đầu bằng cách thiết lập frontend React của bạn bằng Create React App. Điều hướng đến thư mục gốc của dự án (nơi chứa backend Django của bạn) và chạy:

npx create-react-app frontend
cd frontend

Lệnh này sẽ thiết lập một ứng dụng React với các tệp cần thiết như package.json, src/App.js, và public/index.html. Nó cũng bao gồm các công cụ như webpack để đóng gói, Babel để biên dịch JavaScript và một máy chủ phát triển để kiểm thử.

Tiếp theo, hãy cài đặt Axios để xử lý các yêu cầu HTTP đến API Django của bạn:

npm install axios

Axios giúp việc gọi API trở nên đơn giản hơn bằng cách quản lý việc phân tích cú pháp JSON và cung cấp khả năng xử lý lỗi tốt hơn so với hàm fetch() . Nó cũng hỗ trợ các tính năng như bộ chặn yêu cầu và phản hồi.

Cấu trúc thư mục của bạn hiện sẽ trông như sau:

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

Để xác nhận mọi thứ đang hoạt động, hãy khởi động máy chủ phát triển React:

npm start

Điều này sẽ khởi chạy ứng dụng tại http://localhost:3000, hiển thị trang chào mừng mặc định của React. Hãy giữ máy chủ này chạy trong suốt quá trình phát triển — nó sẽ tự động tải lại khi bạn thực hiện thay đổi.

Tạo các thành phần React

Hãy tạo một TaskList thành phần để hiển thị các tác vụ được lấy từ API Django của bạn. Thêm đoạn mã sau vào 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;

Tiếp theo, hãy tạo một TaskForm thành phần để thêm tác vụ mới. Thêm đoạn mã này vào 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;

Để thực hiện một số định dạng cơ bản, hãy tạo một src/App.css tệp và thêm:

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

Quản lý trạng thái và tích hợp API

Các hook React như useState và useEffect giúp việc quản lý trạng thái và tương tác với backend Django của bạn trở nên dễ dàng. Để tập trung các cuộc gọi API, hãy tạo một tệp dịch vụ 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;

Cuối cùng, tích hợp mọi thứ vào 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
}

Với cấu hình này, frontend React của bạn đã sẵn sàng xử lý các tác vụ một cách tương tác đồng thời giao tiếp liền mạch với backend Django của bạn.

Kết nối Django và React

Giờ đây, khi phần backend và frontend của bạn đã hoạt động, bước tiếp theo là đảm bảo sự liên lạc trơn tru giữa chúng. Điều này bao gồm việc thiết lập các điểm cuối API, quản lý các yêu cầu và giải quyết mọi trục trặc trong quá trình tích hợp.

Thiết lập URL API trong React

Ứng dụng React của bạn cần biết vị trí của các điểm cuối API Django. Để thực hiện điều này, hãy cập nhật tệp src/services/api.js tệp này với các cấu hình cụ thể cho môi trường:

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;

Đối với môi trường sản xuất, hãy thêm tệp .env vào thư mục gốc của dự án React với nội dung sau:

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

Cài đặt này đảm bảo ứng dụng React của bạn có thể tương tác liền mạch với backend Django, dù bạn đang ở trong môi trường phát triển cục bộ hay triển khai lên môi trường sản xuất. Sau khi các điểm cuối API đã được cấu hình, bạn đã sẵn sàng để lấy và thao tác với dữ liệu từ backend.

Lấy dữ liệu từ backend

Sau khi cấu hình API được thiết lập, bạn có thể thực hiện các thao tác CRUD để quản lý dữ liệu giữa React và Django. Cập nhật src/App.js để xử lý các thao tác này:

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;

Mã này xử lý việc tạo, cập nhật, xóa tác vụ và quản lý lỗi. Giao diện người dùng được cập nhật ngay lập tức để mang lại trải nghiệm người dùng mượt mà, và các lỗi được xử lý một cách nhẹ nhàng bằng cách hoàn nguyên các thay đổi hoặc hiển thị các thông báo phù hợp.

Kiểm thử và gỡ lỗi kết nối

Một trong những trở ngại phổ biến nhất khi kết nối Django và React là xử lý các lỗi CORS (Chia sẻ tài nguyên giữa các nguồn gốc). Những lỗi này phát sinh do trình duyệt chặn các yêu cầu giữa các nguồn gốc khác nhau vì lý do bảo mật. Trong quá trình phát triển, React thường chạy trên localhost:3000, trong khi Django hoạt động trên localhost:8000, tạo ra tình huống liên nguồn.

Để giải quyết các vấn đề CORS, hãy đảm bảo bạn đã cấu hình các tiêu đề CORS trong cài đặt Django của mình như được nêu trong phần "Cấu hình tiêu đề CORS". Sau khi thực hiện các thay đổi, hãy khởi động lại máy chủ Django để áp dụng chúng.

Dưới đây là một số lỗi yêu cầu API phổ biến và cách khắc phục:

• HTTP 400 (Yêu cầu không hợp lệ): Điều này thường có nghĩa là một số dữ liệu bắt buộc bị thiếu hoặc bị lỗi trong nội dung yêu cầu. Ví dụ, vào tháng 11 năm 2023, FintanMi đã gặp lỗi 400 khi tạo một cộng đồng trong một dự án Django REST Framework và React vì trường owner trường này bị thiếu trong yêu cầu. Luôn kiểm tra kỹ để đảm bảo rằng frontend của bạn gửi đầy đủ tất cả các trường bắt buộc mà các mô hình Django yêu cầu.
• HTTP 405 (Method Not Allowed): Lỗi này xảy ra khi điểm cuối API không hỗ trợ phương thức HTTP đang được sử dụng. Ví dụ, FintanMi đã báo cáo lỗi 405 khi cố gắng xóa một bài đăng, và lỗi này đã được khắc phục bằng cách cập nhật view Django từ generics.RetrieveUpdateAPIView thành generics.RetrieveUpdateDestroyAPIView để hỗ trợ DELETE các yêu cầu.

Chạy và Kiểm thử Ứng dụng

Khi phần backend Django và phần frontend React đã được kết nối, đã đến lúc khởi chạy cả hai máy chủ phát triển và kiểm thử ứng dụng. Quá trình này bao gồm việc chạy hai máy chủ cùng lúc và đảm bảo mọi thứ hoạt động trơn tru với nhau.

Khởi động các máy chủ phát triển

Để chạy ứng dụng Django-React, bạn sẽ cần hai cửa sổ terminal - mỗi máy chủ một cửa sổ. Cài đặt này cho phép phần backend và frontend hoạt động độc lập trong khi giao tiếp thông qua các lệnh gọi API.

Khởi động máy chủ backend Django:

1. Mở cửa sổ terminal đầu tiên và điều hướng đến thư mục gốc của dự án Django.

2. Kích hoạt môi trường ảo Python:

   source venv/bin/activate
   

3. Khởi động máy chủ phát triển Django:

   python manage.py runserver
   

   Máy chủ sẽ có sẵn tại http://127.0.0.1:8000/.

Khởi động máy chủ frontend React:

1. Mở cửa sổ terminal thứ hai và điều hướng đến thư mục dự án React của bạn:

   cd frontend
   

2. Khởi động máy chủ phát triển React:

   npm start
   

   Điều này sẽ tự động mở một cửa sổ trình duyệt tại http://localhost:3000/.

Khi cả hai máy chủ đều đang chạy, bạn có thể bắt đầu kiểm tra chức năng của ứng dụng.

Kiểm tra toàn bộ chức năng của ứng dụng

Khi các máy chủ đã được khởi chạy và CORS cùng các điểm cuối API đã được cấu hình đúng cách, đã đến lúc xác thực luồng dữ liệu giữa frontend và backend.

Xác minh API phía máy chủ:

• Kiểm tra các điểm cuối API Django của bạn trực tiếp bằng cách truy cập:

  http://localhost:8000/api/tasks
  

  Điều này sẽ hiển thị giao diện API có thể duyệt của Django REST Framework, nơi bạn có thể thực hiện các thao tác CREATE và READ.

• Truy cập giao diện quản trị Django tại:

  http://localhost:8000/admin
  

  Đăng nhập bằng thông tin đăng nhập của người dùng siêu quyền để tạo, chỉnh sửa hoặc xóa các tác vụ. Bạn cũng có thể kiểm tra các thao tác UPDATE và DELETE bằng cách truy cập:

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

Kiểm thử tích hợp Frontend-Backend:

• Mở ứng dụng React của bạn tại http://localhost:3000 và xác nhận rằng ứng dụng tải đúng cách, hiển thị các tác vụ từ backend Django.
• Kiểm thử từng thao tác CRUD thông qua giao diện React:
  • Thêm một tác vụ mới và kiểm tra xem nó có xuất hiện cả trên giao diện người dùng React và phần backend hay không.
  • Chỉnh sửa một tác vụ hiện có và đảm bảo các thay đổi được lưu lại.
  • Xóa một tác vụ và xác minh rằng nó đã bị xóa khỏi cả giao diện người dùng và cơ sở dữ liệu.

Nếu ứng dụng của bạn có các bộ lọc hoặc các tính năng khác, hãy kiểm tra chúng kỹ lưỡng để xác nhận các tác vụ được hiển thị như mong đợi.

Khắc phục các sự cố thường gặp

Nếu bạn gặp bất kỳ sự cố nào trong quá trình kiểm thử, đây là một số cách khắc phục phổ biến mà bạn có thể thử.

Lỗi kết nối API:

• Đảm bảo cả hai máy chủ đều đang chạy trên các cổng tương ứng: Django tại http://localhost:8000 và React tại http://localhost:3000.
• Sử dụng công cụ phát triển của trình duyệt (tab Mạng) để xác định các mã trạng thái HTTP như 404 hoặc 500.

• Kiểm tra proxy cài đặt trong tệp package.json :

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

  Nếu bạn thực hiện thay đổi, hãy khởi động lại máy chủ React.

Các vấn đề khi khởi động máy chủ:

• Nếu máy chủ Django không khởi động, hãy kiểm tra xem có thiếu các bản di chuyển (migration) không:

  python manage.py makemigrations
  python manage.py migrate
  

• Đối với các sự cố liên quan đến máy chủ React, hãy thử cài đặt lại các phụ thuộc:

  npm install
  

Vấn đề về luồng dữ liệu:

• Sử dụng công cụ phát triển của trình duyệt để kiểm tra các yêu cầu mạng và lỗi trên bảng điều khiển.
• Thêm các câu lệnh gỡ lỗi, chẳng hạn như console.log() trong React hoặc print trong các view của Django, để theo dõi luồng dữ liệu.
• Kiểm tra kỹ xem các URL API trong ứng dụng React của bạn có khớp chính xác với các mẫu URL của Django hay không, bao gồm cả dấu gạch chéo ở cuối (ví dụ: /api/tasks/).

Tóm tắt và các bước tiếp theo

Bạn đã tạo ra một ứng dụng web kết hợp Django và React, giúp bạn có được những kiến thức cơ bản vững chắc về phát triển full-stack. Dự án này nhấn mạnh các khái niệm thiết yếu như tách biệt backend khỏi frontend, thực hiện các thao tác CRUD và quản lý các yêu cầu cross-origin bằng cài đặt CORS. Trong quá trình này, bạn đã làm việc với Django REST Framework để xây dựng API và sử dụng React hooks để quản lý trạng thái — những kỹ năng giúp tích hợp mượt mà giữa hai công cụ mạnh mẽ này.

Nâng tầm ứng dụng của bạn

Vẫn còn rất nhiều tiềm năng để mở rộng chức năng của ứng dụng. Ví dụ, bạn có thể tích hợp xác thực JWT thông qua Django REST Framework để bảo vệ dữ liệu người dùng và quyền truy cập API. Điều này sẽ giúp bạn cung cấp các tính năng tùy chỉnh cho từng người dùng và trải nghiệm cá nhân hóa.

Nếu ứng dụng của bạn cần cập nhật theo thời gian thực, hãy cân nhắc sử dụng Django Channels để kích hoạt hỗ trợ WebSocket. Điều này rất phù hợp cho các tính năng như bảng điều khiển trực tiếp, hệ thống trò chuyện hoặc thông báo, biến ứng dụng của bạn thành một nền tảng năng động và tương tác hơn.

Khi ứng dụng của bạn phát triển, việc trực quan hóa dữ liệu nâng cao trở nên quan trọng. Bằng cách kết hợp khả năng hiển thị của React với việc lấy dữ liệu backend hiệu quả, bạn sẽ có thể xử lý và hiển thị các tập dữ liệu phức tạp một cách hiệu quả.

Chuẩn bị cho môi trường sản xuất

Khi chuẩn bị ứng dụng cho môi trường sản xuất, hãy tập trung vào việc triển khai, bảo mật và hiệu suất. Mặc dù cấu hình hiện tại rất phù hợp cho phát triển cục bộ, nhưng môi trường sản xuất đòi hỏi các bước bổ sung. Điều này bao gồm thiết lập biến môi trường, tối ưu hóa cơ sở dữ liệu và triển khai các cơ chế xử lý lỗi mạnh mẽ.

Những cải tiến này dựa trên các kỹ năng bạn đã phát triển - như thiết kế API, kiến trúc dựa trên thành phần và tích hợp toàn bộ hệ thống. Bằng cách nắm vững các kỹ thuật nâng cao này, bạn sẽ được trang bị đầy đủ để giải quyết các dự án cấp doanh nghiệp và tiếp tục phát triển với tư cách là một nhà phát triển web.

Câu hỏi thường gặp

Những lợi ích của việc sử dụng Django cho phần backend và React cho phần frontend khi phát triển ứng dụng web là gì?

Việc sử dụng Django cho phần backend và React cho phần frontend tạo ra sự kết hợp mạnh mẽ để phát triển các ứng dụng web hiện đại. Django cung cấp một framework vững chắc với nhiều công cụ giúp hợp lý hóa quá trình phát triển backend, trong khi React tỏa sáng trong việc xây dựng các giao diện người dùng động và tương tác.

Sự kết hợp này thúc đẩy sự phân chia trách nhiệm rõ ràng, giúp giữ cho cơ sở mã được tổ chức tốt và dễ dàng mở rộng theo thời gian. Cấu trúc dựa trên thành phần của React khuyến khích việc tái sử dụng các yếu tố giao diện người dùng, còn REST Framework của Django đơn giản hóa quá trình xây dựng API, đảm bảo giao tiếp trơn tru giữa frontend và backend. Khi kết hợp với nhau, chúng mang lại một phương pháp phát triển ứng dụng nhanh chóng, hiệu quả và lấy người dùng làm trung tâm.

Làm thế nào để giải quyết các vấn đề CORS khi kết nối frontend React với backend Django?

Để giải quyết các vấn đề CORS giữa frontend React và backend Django, django-cors-headers gói này là một giải pháp hữu ích. Đầu tiên, hãy cài đặt nó bằng pip. Sau đó, trong tệp settings.py , thêm 'corsheaders' vào INSTALLED_APPS . Sau đó, thêm 'corsheaders.middleware.CorsMiddleware' vào ngay đầu danh sách MIDDLEWARE để đảm bảo thứ tự thực thi middleware đúng.

Trong quá trình phát triển, bạn có thể đơn giản hóa quy trình bằng cách thiết lập CORS_ORIGIN_ALLOW_ALL = True trong tệp settings.py. Điều này cho phép các yêu cầu từ bất kỳ nguồn nào. Tuy nhiên, trong môi trường sản xuất, sẽ an toàn hơn nhiều nếu định nghĩa các miền đáng tin cậy cụ thể bằng cách sử dụng thiết lập CORS_ALLOWED_ORIGINS . Cách tiếp cận này giúp duy trì mức độ bảo mật cao hơn.

Với cấu hình này, ứng dụng React của bạn có thể tương tác trơn tru với các API Django đồng thời vẫn tuân thủ các yêu cầu của CORS.

Làm thế nào để chuẩn bị ứng dụng Django và React cho việc triển khai vào môi trường sản xuất?

Để chuẩn bị ứng dụng Django và React cho môi trường sản xuất, hãy bắt đầu bằng cách điều chỉnh cài đặt Django để có một cấu hình an toàn. Điều này bao gồm việc thiết lập DEBUG thành False và chỉ định ALLOWED_HOSTS để kiểm soát các miền nào có thể truy cập ứng dụng của bạn. Những thay đổi này rất cần thiết để bảo vệ ứng dụng của bạn trong môi trường trực tiếp.

Tiếp theo, hãy chọn một nền tảng lưu trữ đáng tin cậy cho phần backend Django và các tệp tĩnh của bạn. Đảm bảo cơ sở hạ tầng của bạn được xây dựng để xử lý lưu lượng truy cập và nhu cầu ở mức sản xuất. Đối với phần frontend React, hãy sử dụng các công cụ xây dựng phù hợp để tạo ra một bản dựng sản xuất được tối ưu hóa.

Khi ứng dụng React của bạn đã sẵn sàng, hãy thiết lập một máy chủ web như Nginx để phục vụ cả phần frontend React và phần backend Django. Cấu hình máy chủ phù hợp đảm bảo ứng dụng của bạn chạy hiệu quả và mang lại trải nghiệm mượt mà cho người dùng.

Trước khi đưa vào hoạt động, hãy kiểm tra kỹ lưỡng ứng dụng của bạn trong môi trường sản xuất. Bước này giúp xác định và giải quyết mọi vấn đề, đảm bảo ứng dụng của bạn hoạt động ổn định sau khi ra mắt.