免费开源的后端API服务-supabase安装和使用-简直是前端学习者福音

6 篇文章 1 订阅
4 篇文章 0 订阅

它是什么

一个开源免费的后端框架,firebase的替代品。可以简单理解类似于headless cms,但是不仅仅只提供内容,它还集成了服务订阅、即时API,用户身份认证(包括第三方身份认证,比如使用githubGoogle等账号实现快速登录和注册)、边缘函数、文件存储等功能。

Supabase is an open source Firebase alternative.

Start your project with a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, Storage, and Vector embeddings.

截止到2024-7-1的github start数:68.2K

安装和部署

关于安装

首先,它是基于SaaS云服务的。意味着,你可以部署到自有服务器,也可以免费注册一个它的账户,然后直接创建一个组织和项目来享受免费的在线的 API后端服务。

因为只是试用,所以我并没有打算部署到自有服务器中。

那就先薅一下羊毛吧。

免费用户也拥有蛮不错的配置:

订阅服务

免费用户能享受到的配置包括:

  • 无限的接口请求
  • 5w个月活用户
  • 500M数据库存储空间
  • 5GB宽度
  • 1GB文件存储(存储图片、文件、音视频等)

这个配置如果是自己在国内云厂商买的,即使是新用户,起码也值99元首年了。

关于部署

可以部署到自有服务器,后续将更新教程。

这里我们是直接在它的官网上创建一个新的项目就可以使用它的API。

所以这里的部署指的是如何注册用户、创建组织和项目等。

1、注册用户

首先的好消息是,国内可用,不需要翻墙,而且速度有保障。

注册只需要一个email即可,然后到email接收一个验证码进行认证即可。不需要填写手机号、身份认证等。

免费注册用户

2、创建组织

创建组织,并不代表要公司名义,可以是个人。

组织名称可以在后续修改。

另外虽然我们用的是免费计划,但是可以创建多个组织和项目。

创建组织

3、创建项目

创建项目,相当于是在安装一个backend了,即后端服务。

它会帮我们创建一个PostgreSQL的数据库。

在这一步,我们只需要输入项目名称,数据库密码,然后选择区域即可。

国内建议选择新加坡。

区域选择

一切就绪,现在你就有了一个没有任何内容的后台了。

dashboard

它会给你生成一个项目的后端地址,在该地址中可以看到访问key,管理项目,对项目数据进行增删改查等。

但是它提供的supabase创建的是纯后台,只提供了一个简单的后台管理UI能对数据进行CRUD操作,所以更多时候我们需要通过前端框架,比如vuenuxtjs等进行开发来实现你的后台管理或前端页面。

这也意味着它是一个绝佳的纯API接口服务,能让我们随心制造自己想要的数据并通过接口来访问。

接下来,我们可以在该后台添加一张数据库表,以便使用postmanAPI调试工具来调试接口,为后续的API开发做准备。

创建数据库表(填充内容)

创建数据库表有2种方式,一种是可视化的table editor,另外一种是SQL editor

接下来我将使用第二种方式来运行SQL创建一张Users表。

点击SQL editor,在textarea中输入如下SQL代码:

-- Step 1: Create the trigger function
CREATE OR REPLACE FUNCTION trigger_set_timestamp()
RETURNS TRIGGER AS $$
BEGIN
   NEW.updated_at = NOW();
   RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Step 2: Create the users table
CREATE TABLE users (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password_hash TEXT NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Step 3: Create the trigger to update the updated_at column
CREATE TRIGGER update_timestamp
BEFORE UPDATE ON users
FOR EACH ROW
EXECUTE FUNCTION trigger_set_timestamp();

在以上SQL中,我创建了一个触发器,为什么创建一个trigger,是因为:为了确保 updated_at 字段能够在当前行被修改后自动更新。

To ensure the updated_at column is automatically updated whenever a row is modified.

这一步还只是创建了一个包含了指定字段的空白的数据库表

填充数据库表

我们可以手动插入一条数据

插入一条数据

点击insert,这样就用可视化的方式插入了一条数据记录。

现在这个项目就已经成型了。

但是在我们使用前端创建UI界面前,我们啥都看不到。

使用postman联调API

下一篇文章,我将使用postman来联调API,为接下来的UI开发做准备。

如果你在web前端开发、面试、前端学习路线有困难可以在下方加我名片,免费答疑,行业深潜多年的技术牛人帮你解决bug。

我可提供web前端开发,网站开发、技术咨询、答疑、直播讲座等服务

祝你能成为一名优秀的WEB前端开发工程师!

  • 15
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值