🔗 Tích Hợp Backend/API Để Hiển Thị Dữ Liệu Trong Website Tailwind CSS

Tuyệt vời! Sau khi đã xây dựng giao diện website thương mại điện tử với Tailwind CSS, bước tiếp theo để nâng cấp thành một ứng dụng hoàn chỉnh là tích hợp Backend hoặc API để hiển thị dữ liệu động như danh sách sản phẩm, giỏ hàng, thông tin người dùng…

NỘI DUNG

🎯 Mục tiêu

Fetch dữ liệu từ REST API hoặc Backend (Node.js, Laravel, Django,…)
Hiển thị động danh sách sản phẩm, chi tiết sản phẩm
Quản lý trạng thái giao diện khi chờ tải (loading), lỗi (error)
Thực hiện các thao tác: thêm giỏ hàng, lọc sản phẩm, phân trang,…

🧱 1. Chuẩn bị giao diện hiển thị dữ liệu

Dùng Tailwind để dựng sẵn khung hiển thị sản phẩm hoặc danh sách:

<div id="product-list" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
  <!-- Các sản phẩm sẽ được render ở đây -->
</div>

🔌 2. Dữ liệu mẫu từ API

🔹 Sử dụng FakeStoreAPI – miễn phí & nhanh

Lấy danh sách sản phẩm:
👉 https://fakestoreapi.com/products
Lấy chi tiết sản phẩm theo ID:
👉 https://fakestoreapi.com/products/1

⚙️ 3. Kết nối API bằng JavaScript

Nếu dùng HTML + JS thuần:

<script>
async function loadProducts() {
  const container = document.getElementById('product-list');
  container.innerHTML = 'Đang tải...';

  try {
    const res = await fetch('https://fakestoreapi.com/products');
    const data = await res.json();

    container.innerHTML = data.map(product => `
      <div class="bg-white p-4 rounded shadow hover:shadow-lg transition">
        <img src="${product.image}" class="w-full h-40 object-contain mb-4" />
        <h3 class="font-semibold text-lg">${product.title}</h3>
        <p class="text-blue-600 font-bold mt-1">$${product.price}</p>
        <button class="mt-3 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">Thêm giỏ hàng</button>
      </div>
    `).join('');
  } catch (err) {
    container.innerHTML = '<p class="text-red-600">Lỗi tải dữ liệu</p>';
  }
}

window.onload = loadProducts;
</script>

Nếu dùng React + Tailwind:

import { useEffect, useState } from 'react';

export default function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://fakestoreapi.com/products')
      .then(res => res.json())
      .then(data => {
        setProducts(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Đang tải dữ liệu...</p>;

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
      {products.map(product => (
        <div key={product.id} className="bg-white p-4 rounded shadow hover:shadow-md">
          <img src={product.image} alt={product.title} className="h-40 object-contain w-full mb-4" />
          <h3 className="text-sm font-semibold">{product.title}</h3>
          <p className="text-blue-600 font-bold">${product.price}</p>
        </div>
      ))}
    </div>
  );
}

🛠️ 4. Xử lý tương tác và thao tác với API

Thêm giỏ hàng: Lưu sản phẩm vào localStorage hoặc state
Phân trang: Sử dụng API có hỗ trợ ?limit=8&page=2 hoặc tự cắt mảng
Tìm kiếm, lọc: Dùng JS để lọc kết quả theo tên, giá, loại
Chi tiết sản phẩm: Khi click vào sản phẩm → load /products/:id

📡 5. Kết nối Backend riêng (Node.js, Laravel, Django…)

Nếu bạn có API riêng ở https://myshop-api.com/api/products, cách fetch tương tự:

fetch('https://myshop-api.com/api/products')

Lưu ý cấu hình CORS nếu gọi từ frontend độc lập.

🧪 Gợi ý kiểm thử

Tình huống cần kiểm tra	Cách xử lý
Kết nối mạng chậm	Hiện loading skeleton UI
API lỗi hoặc trả về lỗi	Hiện thông báo lỗi đẹp
Danh sách trống	Thông báo “không có sản phẩm”
Quá nhiều sản phẩm	Dùng lazy load / phân trang

✅ Kết luận

Việc tích hợp Backend hoặc API vào giao diện Tailwind CSS giúp bạn:

Biến website tĩnh thành ứng dụng động, thực tế
Học cách làm việc với dữ liệu từ server (RESTful)
Nâng cao tư duy xử lý trạng thái giao diện (loading, error, empty)
Là bước đệm trước khi tích hợp quản lý state phức tạp hoặc CMS

HTML, CSS