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ủa bạn:
   • 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 python --version, node --version và npm --version.
2. Tổ chức dự án của bạn:
   • Tạo các thư mục riêng biệt cho phần backend Django và phần frontend React.
   • Sử dụng `django-admin startproject ` để thiết lập phần 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 phần frontend:
   • Sử dụng các thành phần React để quản lý tác vụ và tương tác 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 tra 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 để giao tiếp trơn tru.

Cấu hình này cho phép bạn xây dựng một ứng dụng full-stack một cách hiệu quả với sự phân tách rõ ràng giữa backend và frontend. Thực hiện 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ự ánDjango và React 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 tra các thành phần Django và React một cách suôn sẻ 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 cần có 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 phiên bản Node.js 12 trở lên.

Cài đặt Python: Bạn có thể tải 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 lệnh `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.

Cài đặt Node.js và npm: Node.js được tích hợp sẵn với npm (Node Package Manager). Bạn cần phiên bản npm 6 trở lên, với 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: 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 xảy ra xung đột. Bạn có thể sử dụng mô-đun venv tích hợp sẵn hoặc các công cụ như pipenv hoặc virtualenvwrapper để có thêm các tính năng. Nếu bạn đang sử dụng Windows, gói virtualenvwrapper-win cung cấp chức năng tương tự.

Để xác nhận 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

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 cho backend Django và một thư mục cho frontend React. Sự 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.

Gói phần mềm nền tảng 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 API RESTful, giúp việc tạo các điểm cuối cho giao diện người dùng 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).

Thiết lập 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. Lệnh này 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

Điều này sẽ tạo một dự án React mới trong thư mục frontend, 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 và cài đặt Axios, một thư viện để 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 backend của bạn được cách ly, trong khi npm xử lý các gói JavaScript của bạn một cách riêng biệt. Bây giờ 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 với Django

Thiết lập backend Django với các mô hình cơ sở dữ liệu, đ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.

Điều hướng đế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à thư mục backend 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ụ: hệ thống quản lý tác vụ:

python manage.py startapp tasks

Điều này sẽ tạo ra một thư mục tasks với các tệp cần thiết như models.py, views.py, admin.py và một thư mục migrations. 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 ứng dụng vào danh sách INSTALLED_APPS 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 mô hình Task đơn giản cho ứng dụng quản lý tác vụ có thể được thêm vào trong 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 cho văn bản ngắn, TextField cho nội dung dài hơn, BooleanField cho các giá trị true/false và DateTimeField cho dấu thời gian. Lớp Meta 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 quá trình 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 trình tuần tự hóa Django REST Framework. Trong tệp tasks/serializers.py, định nghĩa một trình tuần tự hóa cho mô hình 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 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 đơ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 với bộ định tuyến để có cấu trúc RESTful gọn gàng.

Trong tệp 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

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

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

Thêm các URL này vào tệp backend/urls.py chính:

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ó điều này, trình duyệt sẽ chặn các yêu cầu cross-origin vì lý do bảo mật.

Cập nhật tệp backend/settings.py để bao gồ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 tra nhanh, bạn có thể sử dụng CORS_ALLOW_ALL_ORIGINS = True, nhưng việc chỉ định các nguồn gốc được phép sẽ an toàn hơn.

Kiểm tra các điểm cuối API

Trước khi tích hợp frontend React, hãy kiểm tra 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 tra các thao tác như yêu cầu GET và POST.

Hoặc, kiểm tra 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ử vào tệp 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 đã sẵn sàng 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 giao diện hấp dẫn cho 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ừ xem tác vụ đến thêm 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 để gói, Babel để biên dịch JavaScript và một máy chủ phát triển để thử nghiệm.

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

npm install axios

Axios giúp các cuộc gọi API trở nên đơn giản hơn bằng cách quản lý 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() tích hợp sẵn. 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. Giữ máy chủ này chạy trong 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 thành phần TaskList để 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 thành phần TaskForm để thêm các tác vụ mới. Thêm đoạn mã này vào tệp 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 tệp src/App.css 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 bạn dễ dàng quản lý trạng thái và tương tác với backend Django của bạn. Để tập trung các cuộc gọi API, hãy tạo 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 tệp 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 mượt mà với backend Django.

Kết nối Django và React

Giờ đây, khi 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 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 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, cho 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 dữ liệu 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 thích hợp.

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

Một trong những thách thức phổ biến nhất khi kết nối Django và React là xử lý lỗi CORS (Cross-Origin Resource Sharing). Những lỗi này phát sinh vì 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 truy cập giữa các nguồn gốc khác nhau.

Để giải quyết các vấn đề CORS, hãy đảm bảo bạn đã định 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 "Định 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 của bạn để á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 định dạng sai 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 dự án Django REST Framework và React vì trường "owner" bị thiếu trong yêu cầu. Luôn kiểm tra kỹ rằng frontend của bạn gửi đầy đủ 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, lỗi này đã được giải quyết bằng cách cập nhật chế độ xem Django từ generics.RetrieveUpdateAPIView thành generics.RetrieveUpdateDestroyAPIView để bao gồm hỗ trợ cho các yêu cầu DELETE.

Chạy và kiểm tra ứng dụng

Khi backend Django và 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 tra ứng dụng. Quá trình này bao gồm việc chạy hai máy chủ đồng thời và đảm bảo mọi thứ hoạt động trơn tru.

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 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 của bạn:

   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ở một 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ủ đã hoạt động 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 backend:

• 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 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 tra 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à 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ả frontend 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 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 tra, đâ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 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 cài đặt proxy trong tệp package.json của dự án React:

  "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.

Sự cố 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 vấn đề 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 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, như console.log() trong React hoặc các câu lệnh 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 một ứng dụng web kết hợp Django và React, giúp bạn có một nền tảng vững chắc về phát triển full-stack. Dự án này nêu bật các khái niệm cơ bản 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 cho phép tích hợp trơn tru giữa hai công cụ mạnh mẽ này.

Nâng ứng dụng của bạn lên một tầm cao mới

Có 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ể thêm xác thực JWT bằng Django REST Framework để bảo vệ dữ liệu người dùng và quyền truy cập API. Điều này cho phép bạn cung cấp các tính năng dành riêng cho 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 hiển thị 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 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 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ộ, môi trường sản xuất yêu cầu 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ì?

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 các 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 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, và 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. Cùng 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, gói django-cors-headers là một giải pháp hữu ích. Đầu tiên, cài đặt nó bằng pip. Sau đó, trong tệp settings.py, thêm 'corsheaders' vào danh sách INSTALLED_APPS. Tiếp theo, thêm 'corsheaders.middleware.CorsMiddleware' vào đầ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 việc này bằng cách đặt 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 gốc 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 cài đặt 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 của bạn trong khi vẫn tuân thủ các yêu cầu CORS.

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

Để chuẩn bị ứng dụng Django và React cho 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 đặt 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 là thiết yếu để 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 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 và nhu cầu ở cấp độ sản xuất. Đối với frontend React, hãy sử dụng các công cụ xây dựng thích 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ả frontend React và 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ỹ ứ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.