架构全景拆解：PostgreSQL Playground 技术栈深度解析（React 18 + Vite + PGLite + Zustand）

架构全景拆解PostgreSQL Playground 技术栈深度解析React 18 Vite PGLite Zustand【免费下载链接】pgIn Browser PostgreSQL Playground, no server, just client and pglite (postgresql wasm)项目地址: https://gitcode.com/gh_mirrors/pg2/pgPostgreSQL Playground 是一个完全运行在浏览器里的 PostgreSQL 查询工作台没有服务器、不需要登录、不用安装数据库打开页面就能建库、写 SQL、看结果。它的核心是把 PostgreSQL 编译成 WASM即 PGLite让整个数据库住进浏览器数据则持久化在 IndexedDB 中隐私完全由用户自己掌控。本文带你拆解它的完整技术栈React 18 Vite PGLite Zustand 是如何协作的。 一分钟看懂整体架构这是一个纯前端项目no server所有数据库操作都发生在浏览器进程内层级技术职责运行时数据库PGLitePostgreSQL WASM在浏览器里执行真实 SQL数据持久化IndexedDBidb://连接串数据库文件与状态跨会话保存UI 框架React 18 TypeScript 5.7组件化界面状态管理Zustand 5 Immer全局数据库状态与执行逻辑构建工具Vite 6 Tailwind CSS 3开发/构建与样式SQL 编辑器MonacoVS Code 同款语法高亮、编辑体验结果表格Glide Data Grid高性能数据网格ERD 图Mermaid把表结构渲染成实体关系图一条关键链路UI 组件 → Zustand Store → PGLite 实例 → IndexedDB。理解这条链路整个项目就通了。️ PGLite把 PostgreSQL 装进浏览器的关键PGLiteelectric-sql/pglite是 PostgreSQL 的 WASM 移植版API 与 Node 端驱动几乎一致。项目里它的用法极简建库new PGlite(idb://你的库名)连接串以idb://开头PGLite 会自动把数据库文件写进 IndexedDB执行 SQLawait postgres.exec(sql)支持多语句批处理删除库indexedDB.deleteDatabase(...)直接删掉。这些封装集中在 src/utils/idb.ts 和 src/stores.ts 中其中数据库在 IndexedDB 中的存储键为/pglite/{库名}实现了多数据库并存 刷新页面不丢数据。 Zustand Immer IndexedDB状态层设计全局状态只有一个 Store——useDBStore见 src/stores.ts它由三层中间件组合而成immer以可变语法修改嵌套状态如state.databases[name].history.push(...)代码更直观persist把状态自动持久化到 IndexedDB通过 src/utils/idb.ts 中的zustandIDBStorage适配idb-keyvalpartialize只持久化databases元数据历史、Schema、查询文本等而不持久化active里的 PGLite 实例——因为 WASM 实例无法序列化刷新页面后用connect()通过idb://连接串重新打开即可。Store 暴露的动作覆盖了完整生命周期create建库、import导入示例数据、connect重连、execute执行 SQL 并计时、写历史、reload重建 Schema 与 ERD。 数据流一条 SQL 从输入到表格以查询工作区 src/components/interfaces/query-playground/index.tsx 为例用户在Monaco 编辑器中写 SQL文本实时写入 Store 的query字段点击 Run 后调用execute(query)记录performance.now()起点交给postgres.exec()执行执行结果经 src/utils/postgres.ts 的postgresTransformer转换——把 PGLite 的字段类型映射成网格列类型把数组/对象JSON.stringify转换后的数据写入 Store 的datagridGlide Data Grid响应式渲染结果表同时历史面板自动追加一条带耗时的记录。整个过程没有任何网络请求——SQL 的提交就是本地函数调用。 页面骨架组件分层与三大功能页入口在 src/main.tsx → src/app.tsx用 Radix Tabs 组织三个核心页面Playground左侧 Schema 树schema-tree.tsx 中间 SQL 编辑器 下方结果表格用react-resizable-panels实现可拖拽分栏Query History查询历史与耗时回放ERDSchema 实体关系图。其中 ERD 的生成很巧妙src/postgres/setup.ts 里有一条纯 SQL直接查询pg_class、pg_constraint等系统表在数据库内部拼出 Mermaid 的erDiagram语法再由前端渲染成图。组件按职责分为三层layouts/页头、导航、interfaces/业务组件、ui/基于 Radix 的无样式原子组件。⚙️ Vite 工程细节WASM 项目要注意什么vite.config.ts 里有几处为 PGLite 而生的配置optimizeDeps.exclude: [electric-sql/pglite]WASM 包体积大且不适合预打包排除掉避免 dev 服务器卡顿assetsInclude: [**/*.sql]让示例 SQL 文件参与资源处理示例数据订单库、学校库放在 src/postgres/sample-data/index.tsx通过?raw懒加载SQL 文本用到哪个库才加载哪个减小首屏体积。另外项目用Biome统一做 lint 与格式化biome.json比 ESLint Prettier 组合更轻量快速。 新手最快跑起来git clone https://gitcode.com/gh_mirrors/pg2/pg cd pg pnpm install pnpm dev打开本地地址点击 Database 按钮即可创建空库或一键导入内置示例库开始练习 SQL。完整依赖版本可参考 package.json项目说明见 README.md。小结PostgreSQL Playground 证明了零后端的可行性PGLite 提供真·PostgreSQL 语义IndexedDB 负责持久化Zustand 把数据库生命周期状态化React Monaco Glide Data Grid 负责体验。它既是免安装的练 SQL 工具也是一个干净的小型 WASM 应用架构参考样板。【免费下载链接】pgIn Browser PostgreSQL Playground, no server, just client and pglite (postgresql wasm)项目地址: https://gitcode.com/gh_mirrors/pg2/pg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考