跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptNode.jsAI大前端

不会代码的 DBA 使用 Supabase 构建简单前端系统

介绍如何利用 Supabase 开发平台结合 React 和 AI 编程工具 Qoder,让不具备代码经验的 DBA 快速构建一个简单的仓储管理系统。内容包括 Supabase 注册建表、React 项目初始化、连接数据库及实现数据增删改查功能验证。

随缘发布于 2026/4/5更新于 2026/5/2129 浏览
不会代码的 DBA 使用 Supabase 构建简单前端系统

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

在今年的 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 的 React(完全没接触过)前端项目,主要计划是构建一个简单的仓储系统。 前期准备还需要安装 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 创建 React 项目

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

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

image.png

然后可以看到预览页面:

image.png

3.2 连接 Supabase

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

image.png

以对话方式让 React 项目连接至 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

功能正常。

总结

本期总监使用 Qoder 连接 Supabase 完成了一个简单的仓储管理系统。

目录

  1. 数据库管理 - 第 402 期 2026-01-22
  2. 1 进入 Supabase
  3. 2 准备环境
  4. 建表
  5. 3 项目实战
  6. 3.1 创建 React 项目
  7. 3.2 连接 Supabase
  8. 3.3 调整页面
  9. 3.4 功能验证
  10. 3.5 增加功能
  11. 总结
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • Hunyuan-MT-7B-WEBUI 部署指南与常见问题排查
  • 飞算 JavaAI 智能问答实战:从代码解释到单元测试生成
  • 算法优选:位运算技巧实战解析
  • C 语言快速排序详解与优化实践
  • VSCode 中配置 Copilot MCP 快速上手指南
  • 吴恩达与 OpenAI 大模型开发指南:从提示词工程到 LangChain 应用
  • artTemplate 模板语法中多余空格导致渲染为空的问题分析
  • LangChain Agent 实战:使用框架构建数学计算助手
  • 机器人操作 VLA 模型的强化学习综述
  • 基于Python+OpenCV实现自动扫雷
  • Python 爬虫实战:汽车之家各车系月销量榜数据采集
  • C++ 继承:语法、访问权限与虚继承详解
  • 大模型提示词注入攻击:分类、原理与技术解析
  • WebToEpub 浏览器扩展实现网页转 EPUB 电子书
  • Llama-Factory 训练时如何平衡计算与 IO 开销
  • Gitea 安装配置及常用 Git 命令指南
  • CS61B 课程笔记:图结构基础与深度优先遍历
  • Android 开发春招面试准备指南与核心考点汇总
  • AI 智能体多 Agent 分工与协作的三步实战方法
  • AIGCJson 库源码解析:宏与模板实现的 JSON 序列化

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

  • 随机西班牙地址生成器

    随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online