您可以使用 ReactJS 在没有服务器的情况下将数据添加到数据库（supabase）吗

Question

我在编程方面有点新，我正在学习网络是如何工作的，我正在使用 Supabase PostgreeSQL 和 Api 处理这个项目，所以我想做的是写（发送数据到db)，我想只使用 ReactJS 来做，但我不知道这是否可能，我已经做了一些只能与 JS 和来自 SUPABASE 的 API keyes 一起工作的东西，但我不知道是否这是正确的做法

import {useState} from 'react'
import {supabase} from '../db/supabase';
import Helmet from "helmet";
import {Link} from 'react-router-dom'
import styled from "styled-components";

const Container = styled.div``
const LeftContainer = styled.div``
const RightContainer = styled.div``
const Input = styled.input``
const BtnButBlack = styled.button``
const BtnButGreen = styled.button``
const Form = styled.form``

export default function Signup() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [name, setName] = useState('');
    const [username, setUsername] = useState('');

    const handleSubmit = (event) => {
        new_account({email: email, password: password}, name, username)
        event.preventDefault();
    };

    const handleEmail = (event) => {
        event.preventDefault();
        setEmail(event.target.value)
    };

    const handlePassword = (event) => {
        event.preventDefault();
        setPassword(event.target.value)
    }
    const handleName = (event) => {
        event.preventDefault();
        setName(event.target.value)
    }
    const handleUsername = (event) => {
        event.preventDefault();
        setUsername(event.target.value)
    }

    const new_account = async ({email, password}) => {
        const {user, session, error} = await supabase.auth.signUp({
            email: email,
            password: password,
        })
        if (error) {
            console.error(error)
            return
        }
        console.log(user);
        await supabase
            .from('Users')
            .insert([
                {username: username, name: name, email: email, password: password}
            ])
    };

    return (
        <Container>
            <LeftContainer>
                Signup
            </LeftContainer>
            <RightContainer>
                <Form onSubmit={handleSubmit}>
                    <Input onChange={handleUsername} type="text" value={username} placeholder="Username" autoComplete="false" /><br></br>
                    <Input onChange={handleName} type="text" value={name} placeholder="Name" autoComplete="false" /><br></br>
                    <Input onChange={handleEmail} type="text" value={email} placeholder="Email" autoComplete="false" /><br></br>
                    <Input onChange={handlePassword} type="password" value={password} placeholder="Password" autoComplete="false" /><br />
                    <BtnButGreen>Sign Up</BtnButGreen>
                </Form>
            </RightContainer>
        </Container>
    )
}

这是您可以导入并在 jsx 文件中使用它的 supabase 模块：

import {createClient} from '@supabase/supabase-js'
const supabaseUrl = process.env.REACT_APP_SUPABASE_URL
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY
export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Answer 1

你的代码看起来很棒！使用 Supabase，你只暴露匿名密钥和 supabase URL，它们应该是 public.

您使用行级安全和 Supabase Auth 来防止恶意攻击者入侵您的数据库。您可以在此处阅读有关行级安全性的更多信息： https://supabase.io/docs/learn/auth-deep-dive/auth-row-level-security

如果您有任何问题，请随时提问！

您可以使用 ReactJS 在没有服务器的情况下将数据添加到数据库（supabase）吗

Can You Add Data to Database (supabase) without an Server using ReactJS

javascript

reactjs

supabase