Cách xây dựng ứng dụng CRUD React với Supabase Cloud Storage

Triển khai hoạt động CRUD

Bây giờ bạn đã thiết lập thành công bộ lưu trữ đám mây của Supabase và dự án React của mình, hãy triển khai các thao tác CRUD trong ứng dụng React của bạn.

1. Thêm dữ liệu vào cơ sở dữ liệu

Mở src/App.js tệp, xóa mã React soạn sẵn và thêm vào như sau:

 import { useState, useEffect } from 'react';
import ProductCard from './components/ProductCard';
import { supabase } from './utils/SupabaseClient';
import './App.css';
export default function App() {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  async function addProduct() {
    try {
      const { data, error } = await supabase
        .from('products')
        .insert({
          name: name,
          description: description
        })
        .single();
      if (error) throw error;
      window.location.reload();
    } catch (error) {
      alert(error.message);
    }
  } 

Mã này định nghĩa một Thêm sản phẩm chức năng xử lý chèn không đồng bộ một bản ghi mới vào các sản phẩm bảng trong cơ sở dữ liệu đám mây. Nếu thao tác chèn thành công, trang sẽ tải lại để phản ánh danh sách sản phẩm được cập nhật.

2. Đọc dữ liệu từ cơ sở dữ liệu đám mây

Xác định hàm xử lý để lấy dữ liệu được lưu trữ từ cơ sở dữ liệu.

   const [products, setProducts] = useState([]);
  async function getProducts() {
    try {
      const { data, error } = await supabase
        .from('products')
        .select('*')
        .limit(10);
      if (error) throw error;
      if (data != null) {
        setProducts(data);
      }
    } catch (error) {
      alert(error.message);
    }
  }
  useEffect(() => {
    getProducts();
  }, []); 

Mã này lấy dữ liệu từ cơ sở dữ liệu một cách không đồng bộ. Truy vấn tìm nạp truy xuất tất cả dữ liệu từ bảng sản phẩm, giới hạn kết quả ở mức tối đa 10 bản ghi và cập nhật các sản phẩm’ trạng thái với dữ liệu đã truy xuất.

Các sử dụnghiệu ứng Móc phản ứng chạy getSản phẩm chức năng khi thành phần gắn kết. Điều này đảm bảo rằng dữ liệu của sản phẩm được tìm nạp và hiển thị khi thành phần được hiển thị lần đầu. Cuối cùng, thêm mã hiển thị các phần tử JSX đầu vào trên trình duyệt để cho phép người dùng thêm sản phẩm vào cơ sở dữ liệu Supabase và hiển thị các sản phẩm hiện có được tìm nạp từ cơ sở dữ liệu.

   return (
    <>
      <header>
        <div className="header-container">
          <h3>Store Products</h3>
        </div>
      </header>
      <h3>Add products Data to the Supabase Database</h3>
      <div className="create-product-container">
        <div>
          <label>Product Name</label>
          <input
            type="text"
            id="name"
            onChange={(e) => setName(e.target.value)}
          />
          <label>Product Description</label>
          <input
            type="text"
            id="description"
            onChange={(e) => setDescription(e.target.value)}
          />
          <br />
          <button onClick={() => addProduct()}>
            Add Product
          </button>
        </div>
      </div>
      <hr />
      <h3>Current Products in the Database</h3>
      <div className="product-list-container">
        {products.map((product) => (
          <div key={product.id}>
            <ProductCard product={product} />
          </div>
        ))}
      </div>
    </>
  );
} 

Dữ liệu được tìm nạp trong mảng sản phẩm được truyền dưới dạng đạo cụ và được hiển thị động trong Sản phẩmThẻ thành phần sử dụng bản đồ chức năng.

3. Cập nhật và xóa dữ liệu hiện có trong cơ sở dữ liệu

Tạo một cái mới thành phần/ProductCard.js tập tin trong /src danh mục. Trước khi xác định các hàm xử lý, hãy xem các trạng thái và phần tử JSX mà bạn sẽ triển khai trong thành phần này.

 import { useState } from 'react';
import { supabase } from '../utils/SupabaseClient';
import './productcard.styles.css';
export default function ProductCard(props) {
  const product = props.product;
  const [editing, setEditing] = useState(false);
  const [name, setName] = useState(product.name);
  const [description, setDescription] = useState(product.description);
  return (
    <div className="product-card">
      <div>
        {editing === false ? (
          <div>
            <h5>{product.name}</h5>
            <p>{product.description}</p>
            <button className="delete-button" onClick={() => deleteProduct()}>Delete Product</button>
            <button className="edit-button" onClick={() => setEditing(true)}>Edit Product</button>
          </div>
        ) : (
          <div>
            <h4>Editing Product</h4>
            <button className="go-back-button" onClick={() => setEditing(false)}>Go Back</button>
            <br />
            <label htmlFor="name">Product Name</label>
            <input
              type="text"
              id="name"
              defaultValue={product.name}
              onChange={(e) => setName(e.target.value)}/>
            <label htmlFor="description">Product Description</label>
            <input
              type="text"
              id="description"
              defaultValue={product.description}
              onChange={(e) => setDescription(e.target.value)}/>
            <br />
            <button className="update-button" onClick={() => updateProduct()}>Update Product in Supabase DB</button>
          </div>)}
      </div>
    </div>
 );
} 

Mã này tạo ra một tái sử dụng Sản phẩmThẻ thành phần hiển thị thông tin sản phẩm và cho phép chỉnh sửa và cập nhật chi tiết sản phẩm trong cơ sở dữ liệu Supabase.

Thành phần nhận được một sản phẩm đối tượng làm chỗ dựa, chứa thông tin về sản phẩm sẽ được hiển thị và hiển thị thẻ div với nội dung khác nhau dựa trên trạng thái chỉnh sửa.

Ban đầu, kể từ khi chỉnh sửa trạng thái được đặt thành SAI, nó sẽ hiển thị tên, mô tả của sản phẩm và các nút để xóa hoặc chỉnh sửa sản phẩm. Tuy nhiên, khi người dùng nhấp vào biên tập nút chỉnh sửa trạng thái được đặt thành ĐÚNG VẬY, thao tác này sẽ hiển thị các trường nhập với các giá trị hiện tại được điền sẵn, cho phép người dùng chỉnh sửa và cập nhật tên cũng như mô tả của sản phẩm trong cơ sở dữ liệu. Bây giờ, xác định cập nhật chức năng xử lý. Thêm mã này bên dưới tuyên bố của các tiểu bang trong thành phần/ProductCard.js tài liệu.

 async function updateProduct() {
  try {
    const { data, error } = await supabase
      .from('products')
      .update({
        name: name,
        description: description
      })
      .eq('id', product.id);
    if (error) throw error;
    window.location.reload();
  } catch (error) {
    alert(error.message);
  }
} 

Mã này xác định chức năng xử lý không đồng bộ cập nhật dữ liệu của sản phẩm trong cơ sở dữ liệu Supabase. Nó sử dụng cơ sở để thực hiện thao tác cập nhật bằng cách chỉ định bảng, giá trị mới và điều kiện dựa trên ID của sản phẩm và tải lại cửa sổ sau khi cập nhật thành công. Cuối cùng, xác định các Xóa bỏ chức năng xử lý.

 async function deleteProduct() {
  try {
    const { data, error } = await supabase
      .from('products')
      .delete()
      .eq('id', product.id);
    if (error) throw error;
    window.location.reload();
  } catch (error) {
    alert(error.message);
  }
} 

Sử dụng Supabase cho các dịch vụ phụ trợ được sắp xếp hợp lý

Supabase cung cấp một cách thuận tiện để hợp lý hóa các dịch vụ phụ trợ trực tiếp từ phía máy khách, loại bỏ nhu cầu viết mã phụ trợ phức tạp. Ngoài việc quản lý dữ liệu, nó còn cung cấp hỗ trợ cho các dịch vụ phụ trợ khác nhau như hệ thống xác thực an toàn.

Bây giờ bạn đã tìm hiểu về sự tích hợp của Supabase với React, hãy tiếp tục và khám phá cách bạn có thể tích hợp nó với các framework phía máy khách khác và khám phá cách nó có thể nâng cao trải nghiệm phát triển của bạn trên nhiều nền tảng khác nhau.