Next.js & Node.js (Phần 6): Hoàn Thiện CRUD Với Chức Năng Sửa, Xóa Và React Hook Form

Chào mừng các bạn đã quay trở lại! Ở bài trước chúng ta đã biết cách thêm sản phẩm. Hôm nay, chúng ta sẽ hoàn tất vòng đời CRUD bằng cách hiện thực hóa chức năng Sửa và Xóa. Đặc biệt, mình sẽ giới thiệu cách dùng React Hook Form để xử lý các form phức tạp một cách chuyên nghiệp.

Câu 1: Xây Dựng API Sửa Và Xóa (Backend)

Phía Server, chúng ta cần bổ sung hai phương thức HTTP quan trọng: DELETE để xóa và PUT để cập nhật.

DELETE: Sử dụng deleteOne với _id được truyền qua tham số URL.

PUT: Kết hợp với multer để xử lý trường hợp người dùng muốn thay đổi cả hình ảnh sản phẩm. Chúng ta kiểm tra nếu có req.file thì mới cập nhật lại tên ảnh mới.

Câu 2: Hiện Thực Chức Năng Xóa Sản Phẩm

Tại trang danh sách sản phẩm, chúng ta thêm một nút "Xóa" kèm theo một hàm xử lý sự kiện.

Kỹ thuật lưu ý:

Xác nhận người dùng: Luôn sử dụng confirm() trước khi thực hiện hành động xóa để tránh nhầm lẫn.

Cập nhật giao diện: Sau khi API trả về kết quả thành công, hãy gọi lại hàm fetchProducts() để làm mới danh sách mà không cần tải lại toàn bộ trang.

const deleteProduct = async (id) => {
  if (confirm('Bạn có chắc chắn muốn xóa không?')) {
    const res = await fetch(`http://localhost:3000/deleteproduct/${id}`, { method: 'DELETE' });
    if (res.ok) fetchProducts(); 
  }
};

Câu 3: Chỉnh Sửa Sản Phẩm Với React Hook Form

Tại sao lại dùng React Hook Form? Vì nó giúp chúng ta giảm thiểu số lần re-render, dễ dàng validation và quản lý giá trị mặc định (default values) rất tốt.

1. Cơ chế hoạt động

Khi vào trang sửa, chúng ta cần:

Fetch dữ liệu chi tiết của sản phẩm đó dựa trên id từ URL.

Sử dụng hàm setValue của React Hook Form để đổ dữ liệu cũ vào các ô Input.

2. Xử lý Validation

Thay vì viết các hàm kiểm tra thủ công, chúng ta khai báo ngay trong hàm register:

<input {...register('name', { required: 'Tên sản phẩm là bắt buộc' })} />

3. Gửi dữ liệu (Submit)

Chúng ta thu thập dữ liệu từ form, đưa vào FormData (để xử lý cả file ảnh nếu có) và gửi yêu cầu PUT đến backend.

Câu 4: Thử Thách Cuối Cùng – Quản Lý Danh Mục (Dành cho điểm 10)

Để chứng minh bạn đã hoàn toàn làm chủ kiến thức, hãy tự mình xây dựng bộ chức năng CRUD cho Danh mục (Categories).

Gợi ý: Cấu trúc cũng tương tự như Sản phẩm nhưng đơn giản hơn vì thường không cần xử lý nhiều hình ảnh. Đây là cơ hội tốt để bạn thực hành lại từ đầu các bước thiết lập API và UI.

Tổng Kết Chuỗi Bài Lab FE2

Vậy là chúng ta đã cùng nhau đi qua một hành trình dài từ những dòng code Node.js đầu tiên cho đến khi hoàn thiện một hệ thống Admin Dashboard chuyên nghiệp bằng Next.js.

Những gì bạn đã đạt được:

Hiểu cơ chế hoạt động của mô hình Client-Server.

Thao tác thành thạo với MongoDB.

Quản lý State toàn cục với Redux Toolkit.

Xử lý Form và File Upload chuyên nghiệp.

Xây dựng giao diện Responsive với Bootstrap.

Cảm ơn các bạn đã theo dõi chuỗi bài viết này. Chúc các bạn có một buổi bảo vệ đồ án/Lab thật thành công và tự tin trả lời mọi câu hỏi của giảng viên!