如何使用 Reactjs 和 Supabase 创建新闻通讯订阅

介绍

订阅新闻通讯页面允许用户输入他们的电子邮件，以便从他们最喜欢的网站获取新闻通讯。对于这个项目，我们将使用 Reactjs 和 Supabase 来实现此功能。Supabase 是一个开源工具，可以替代 Firebase，它用于数据库管理、身份验证和实时更新，因为它提供托管的 PostgreSQL 数据库，还允许轻松验证电子邮件。

设置项目

1. Node.js 安装

通过运行以下命令检查我们的项目中是否安装了 Node.js。

node -v

**或者**

npm -v

此命令将输出已安装的版本，如果没有，请前往 Node.js 网站下载并安装 Node.js。安装包附带 Node 包管理器 (NPM)。

2.初始化Reactjs项目

在终端上使用此命令，使用 Vite 安装 Reactjs

npm create vite@latest

将会弹出以下提示并回答问题。

√ Project name: ... newsletter-app
√ Select a framework: » React
√ Select a variant: » JavaScript + SWC

按照以下说明操作

cd newsletter-app
npm install

3. 设置 Supabase

首先，如果你没有 supabase 账户，请注册一个，然后创建一个新项目。运行以下命令在 React 项目上安装 supabase 客户端。

npm install @supabase/supabase-js

安装完成后，检查package.json是否安装正确。

在 Supabase 中配置新闻通讯订阅表

创建项目后，导航到 Supabase 仪表板，转到表编辑器来创建新表。

将表命名为 newsletter，并添加以下列 1. id：主键，UUID，默认为 uuid_generate_v4()。 2. email：文本，唯一，必填。 3. created_at：时间戳，默认为 now()。

允许 Supabase 配置公共访问这可以在配置下的策略页面中进行设置，搜索表格新闻稿并创建策略。

构建 React 组件

在根文件夹中创建一个名为components的文件夹，并在components中设置NewsletterForm.jsx文件。

// src/components/NewsletterForm.jsx,  
import React, {useState} from 'react';  

const NewsletterForm = () => { 
const [email, setEmail] = useState(""); 
  const handleSubmit = async (e) => {  
    e.preventDefault(); 
  };  

  return (  
      
       Join our Newsletter
       Enter your email to receive latest news.       
         {error && {error}}
         {success && {success}}
       
        setEmail(e.target.value)}  
        placeholder="Your email"  
        required  
      />  
        
      
  );  
};  

export default NewsletterForm;

删除 App.jsx 中所有不必要的代码并导入 NewsletterForm.jsx。

import './App.css';
import NewsletterForm from './NewsletterForm';

function App() {
  return (
    
         
    
  );
}

export default App;

通过在 index.css 文件中创建样式来设置组件的样式

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #030303;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: system-ui, "Open Sans", "Helvetica Neue", sans-serif;
}
form {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 1.5rem;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}
h1 {
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
  color: #111331;
}
h2 {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 1rem;
  text-align: center;
}

input[type="email"] {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  transition: border 0.3s ease;
}

input[type="email"]:focus {
  border-color: #007bff;
  outline: none;
}

button {
  background-color: #007bff;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}
button:focus {
  border-radius: 20px;
  transition: border-radius 0.5s ease;
}
p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

p[style*="color: red"] {
  font-weight: bold;
}

p[style*="color: green"] {
  font-weight: bold;
}

输出如下

将 React 项目连接到 Supabase

通过设置 supabaseClient.js 文件来添加 Supabase 客户端，以添加 SUPABASE_URL 和 SUPABASE_ANON_KEY。

import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = "https://esqaciqvjfarmopjzomj.supabase.co";
const SUPABASE_ANON_KEY ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImVzcWFjaXF2amZhcm1vcGp6b21qIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzQzNjA4NDksImV4cCI6MjA0OTkzNjg0OX0.Q2A5fbvdebid_Wsbm5r58Ej7xrLKCL4_4ULuu-kA6Ro";

export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

更新 NewsletterForm.jsx 以将电子邮件存储在数据库中。

// src/NewsletterForm.js
import { useState} from "react";  
import { supabase } from "../supabaseClient";

const NewsletterForm = () => {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");
  const [success, setSuccess] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");
    setSuccess("");

    // Check if email is valid
    if (!/\S+@\S+\.\S+/.test(email)) {
      setError("Please enter a valid email");
      return;
    }

    // Insert email into Supabase
    const { error: insertError } = await supabase
      .from("newsletters")
      .insert([{ email }]);

    if (insertError) {
      setError("Error subscribing to newsletter: " + insertError.message);
    } else {
      setSuccess("Thank you for subscribing!");
      setEmail(""); // Clear the input field
    }

    // Clear messages after 3 seconds  
    setTimeout(() => {  
      setError("");  
      setSuccess("");  
    }, 3000);
  };

  return (
    
      Join our Newsletter
      Enter your email to receive latest news. 
      {error && {error}}
      {success && {success}}
       setEmail(e.target.value)}
        placeholder="Your email"
        required
      />
      
    
  );
};

export default NewsletterForm;

查看下面的链接查看演示

演示

结论

通过本指南，您可以使用 Supabase 创建订阅新闻通讯，将订阅的电子邮件存储在数据库中以供以后使用。

CLIS.CC