不会代码的DBA做一个简单的前端系统

数据库管理-第402期 不会代码的DBA做一个简单的前端系统（20260122）

914fcc7ad57defa7868c3be1ca7fb4f5.jpg

在今年的PolarDB开发者大会上，除了PolarDB本身以外，另一个让我感兴趣的技术（或者说叫产品）则是Supabase，这是一个基于PostgreSQL的开发平台，截止今天在Github上已经有96.5k的⭐了。据说使用Supabase可以用非常简单的方式创建一个前端系统。那么本期跟随不会开发的总监，一起来探索一下Supabase的魅力。

1 进入Supabase

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

Supabase 是一款基于 PostgreSQL 的开发平台。 你可依托 PostgreSQL 数据库、身份验证、即时 API、边缘函数、实时订阅、存储及向量嵌入功能，快速启动项目开发。 Supabase官网地址为：https://supabase.com/

image.png

可以使用Github登录，也可以通过邮箱注册账号。这里我使用个人Github账号登录，登录后需要创建组织（使用免费计划）:

image.png

然后创建项目，需要设置数据库密码和区域：

image.png

然后就可以进入项目页面了：

image.png

2 准备环境

本期总监计划完成一个简单连接到Supabase的Recat（完全没接触过）前端项目，主要计划是构建一个简单的仓储系统。 前期准备还需要安装Node.js，使用Qoder进行辅助编程。

image.png

建表

在Supabase的Dashboard界面点击"Table Editor"（表编辑）按钮：

image.png

然后点击"Create a table"（创建表）：

image.png

按照下面创建一个简单的表（其中id和created_at为默认字段，不作调整）：

image.png

插入少量数据：

image.png

image.png

image.png

image.png

在这里也禁用表的RLS策略：

image.png

3 项目实战

3.1 创建Recat项目

我在本地路径E盘下创建Supabase文件夹， 我使用Qoder打开文件夹：

image.png

通过对话方式创建空的Recat项目：

image.png

然后可以看到预览页面：

image.png

3.2 连接Supabase

在Supabase主页页面下滑，"Connect to your project"部分可以看到连接Supabase的信息，包含URL和API Key：

image.png

以对话方式让Recat项目连接至Supabase：

image.png

image.png

这里页面可以正常获取表信息（忘记截图了，就是原表直接显示）。

3.3 调整页面

接下来调整一下页面信息并增加功能：

image.png

这时候正常的输出内容没有了，继续修正：

image.png

现在可以正常看到数据：

image.png

3.4 功能验证

尝试插入商品：

image.png

image.png

image.png

这里可以看到可以正常插入商品，插入后直接刷新了仓储信息，后台数据库也更新了。

3.5 增加功能

接下来我们尝试添加一个修改功能：

image.png

尝试修改商品数量：

image.png

image.png

image.png

image.png

功能正常。

插曲

在我查询Supabase相关信息的时候，看到了这个推荐查询：

3540d9aa7b168e892caefcf17c6d3b12.jpg

这算不算是国内开源生态的悲哀呢？！

总结

本期总监使用Qoder连接Supabase完成了一个简单的仓储管理系统。 老规矩，知道写了些啥。