news 2026/4/18 5:42:43

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
数据库管理-第402期 不会代码的DBA做一个简单的前端系统(20260122)

数据库管理402期 2026-01-22

  • 数据库管理-第402期 不会代码的DBA做一个简单的前端系统(20260122)
    • 1 进入Supabase
    • 2 准备环境
      • 建表
    • 3 项目实战
      • 3.1 创建Recat项目
      • 3.2 连接Supabase
      • 3.3 调整页面
      • 3.4 功能验证
      • 3.5 增加功能
    • 插曲
    • 总结

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

作者:胖头鱼的鱼缸(尹海文) Oracle ACE Pro: Database PostgreSQL ACE 10年数据库行业经验 拥有OCM 11g/12c/19c、MySQL 8.0 OCP、Exadata、CDP等认证 墨天轮MVP,ITPUB认证专家 圈内拥有“总监”称号,非著名社恐(社交恐怖分子) 公众号:胖头鱼的鱼缸 CSDN:胖头鱼的鱼缸(尹海文) 墨天轮:胖头鱼的鱼缸 ITPUB:yhw1809 IFClub:胖头鱼的鱼缸 除授权转载并标明出处外,均为“非法”抄袭


在今年的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/

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

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

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

2 准备环境

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

建表

在Supabase的Dashboard界面点击"Table Editor"(表编辑)按钮:

然后点击"Create a table"(创建表):

按照下面创建一个简单的表(其中id和created_at为默认字段,不作调整):

插入少量数据:




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

3 项目实战

3.1 创建Recat项目

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

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

然后可以看到预览页面:

3.2 连接Supabase

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

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


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

3.3 调整页面

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

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

现在可以正常看到数据:

3.4 功能验证

尝试插入商品:



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

3.5 增加功能

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

尝试修改商品数量:




功能正常。

插曲

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

这算不算是国内开源生态的悲哀呢?!

总结

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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/15 19:23:16

手把手教你学Simulink——电机电磁兼容与可靠性场景示例:基于Simulink的电机噪声抑制控制仿真

目录 手把手教你学Simulink 一、引言:为什么“电机像拖拉机”?——噪声是用户体验的致命伤! 二、电机噪声机理:从电流到声音的传递链 关键公式: 三、应用场景:电动汽车驱动电机的静音优化 设计挑战 四、建模与实现步骤(Simulink + Simscape Electrical) 第一步…

作者头像 李华
网站建设 2026/4/17 19:47:29

收藏!AI Agent 实战指南:从0到1搞懂大模型落地核心能力

做 AI 开发、入门大模型的程序员或小白,是不是都遇过这样的瓶颈:用大模型写接口、解算法题信手拈来,可一旦碰到“批量爬取竞品数据并生成可视化分析报告”“自动化完成接口全流程测试输出可复用测试用例”这类实战场景,就瞬间卡壳…

作者头像 李华
网站建设 2026/4/12 22:44:39

8个降aigc工具推荐!继续教育学员必看的高效降AI率方案

8个降aigc工具推荐!继续教育学员必看的高效降AI率方案 AI降重工具:让论文更自然,让学术更安心 在当前的学术环境中,AI生成内容(AIGC)已被广泛应用于论文写作中,但随之而来的高AI痕迹和查重率问题…

作者头像 李华
网站建设 2026/4/18 4:29:58

如何搭建自动化测试框架?

🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 最近好多小伙伴都在说接口自动化测试,那么究竟什么是接口自动化测试呢?让我们一起往下看就知道了,首先我们得先弄清楚下面这…

作者头像 李华
网站建设 2026/4/8 9:02:33

java_ssm120选课成绩教案管理系统_idea项目源码

目录 具体实现截图项目概述技术架构核心功能数据库设计项目亮点部署说明 系统所用技术介绍写作提纲源码文档获取/同行可拿货,招校园代理 :文章底部获取博主联系方式! 具体实现截图 项目概述 Java SSM120选课成绩教案管理系统是基于SSM(Spri…

作者头像 李华
网站建设 2026/4/2 12:52:27

【2026年最新整理】网络安全系统教程+渗透测试+学习路线

一、什么是网络安全 网络安全可以基于攻击和防御视角来分类,我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术,而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域,都有攻与防两面…

作者头像 李华