5分钟快速上手 PostgreSQL Playground从克隆项目到第一条 SQL 的完整入门教程【免费下载链接】pgIn Browser PostgreSQL Playground, no server, just client and pglite (postgresql wasm)项目地址: https://gitcode.com/gh_mirrors/pg2/pgPostgreSQL Playground 是一个完全运行在浏览器里的 PostgreSQL 在线实验场——无需安装服务器、无需注册登录。它基于 PGLitePostgreSQL 的 WASM 版本所有查询都在你的浏览器中执行数据持久化保存在 IndexedDB隐私完全由你掌控。对新手来说这是零成本练习 SQL、体验建库建表、查看 ERD 图的绝佳 PostgreSQL 学习工具。一、为什么值得玩核心特性速览在动手之前先花 30 秒了解它能帮你做什么特性说明 Query Playground带语法高亮的 SQL 编辑器支持运行全部或选中片段️ ERD Schema 生成器一键把表结构渲染成 Mermaid ER 图直观看清外键关系 Query History自动记录查询历史随时回溯 Persistent Data数据存在 IndexedDB刷新页面不丢失 结果导出查询结果支持导出方便分享 移动端适配手机也能顺畅操作整个应用是纯客户端架构源码入口可以看看 app.tsx三大功能区Playground / History / ERD就在页面左侧导航切换。二、克隆项目一条命令搞定确保本地已安装 Node.js 和 pnpm仓库使用 pnpm 管理依赖锁文件为pnpm-lock.yaml然后克隆仓库git clone https://gitcode.com/gh_mirrors/pg2/pg cd pg三、最快启动方式3 条命令进入 Playground依赖安装完成后直接起开发服务器即可技术栈为 Vite Reactpnpm install pnpm dev终端会输出一个本地地址默认http://localhost:5173浏览器打开就能看到 PostgreSQL Playground 的界面。核心依赖在 package.json 中一目了然数据库能力来自electric-sql/pglite这个 WASM 移植版 PostgreSQL。四、创建第一个数据库页面初次打开会提示 No database点击右上角的Database按钮选择新建数据库填写名字必填、需唯一和描述点击Create浏览器中的 PGLite 实例即刻就绪也可以一键加载内置样例库——Order Database含 users、orders、products、order_items 四张表或Schools Databaseteachers 和 students 数据。样例 SQL 分别存放在src/postgres/sample-data/orders-database.sql和src/postgres/sample-data/schools-database.sql加载后所有示例数据会自动灌入。五、5 分钟写出第一条 SQL进入 Playground 标签页左侧是表结构树右侧是带智能提示的 Monaco 编辑器。跟着下面三步走看结构在左侧树中展开public模式能直接看到users表的字段name、age、email……写查询在编辑器中输入——SELECT name, age, city FROM users WHERE age 30;点 Play 运行结果会以数据表格形式展示在下方面板支持滚动、排序浏览。小技巧选中编辑器中某一段再点运行只会执行选中的语句不选中则执行整个文件。执行逻辑见src/components/interfaces/query-playground/index.tsx数据表格渲染由src/utils/postgres.ts中的类型转换完成。六、进阶两招ERD 图与查询历史ERD 视图切换到 ERD 标签系统用一段 SQL 扫描pg_class、pg_constraint等系统表见src/postgres/setup.ts自动生成带外键连线的 Mermaid ER 图——看表关系再也不用对着文档脑补。Query History每次执行的语句都会进入历史面板误删操作也有据可查。七、新手常见问题Q数据存在哪里安全吗A全部保存在你浏览器的 IndexedDB 中不经过任何远程服务器刷新不丢、关页可清清除站点数据即可重置。Q和真实 PostgreSQL 兼容性如何APGLite 是 PostgreSQL 的 WASM 移植常用 SQL建表、索引、视图、外键均可直接执行非常适合学习和原型验证。Q能离线使用吗A可以它本质是一个纯前端项目启动后不依赖后端接口。从克隆到跑通第一条SELECT全程不超过 5 分钟。现在打开浏览器开始你的 PostgreSQL Playground 之旅吧 【免费下载链接】pgIn Browser PostgreSQL Playground, no server, just client and pglite (postgresql wasm)项目地址: https://gitcode.com/gh_mirrors/pg2/pg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考