# v0 浏览器 SQL 练习器：用 PGlite 真执行查询，出错后回滚练习数据

PGlite PostgreSQL WASM在浏览器执行JOIN聚合和真实失败事务，回读库存仍为20；未接云数据库。

## 环境

- Node.js 24+；进入 reference 后 npm install。依赖为锁定的直接版本，首次安装需要网络。
- npm run build 后再启动HTTP服务。编译bundle与WASM运行时不随包分发，build.mjs从本地npm依赖准备。

## 启动

~~~sh
cd reference
npm install
npm run build
python3 -m http.server 8787
~~~

## 七步操作

1. 加载浏览器引擎

在浏览器加载PGlite WebAssembly，数据库使用memory://。它运行真实PostgreSQL，不把固定JSON表格当作SQL查询结果。

2. 创建两张练习表

初始化products和orders两张原创表：笔记本库存20、贴纸库存50，订单数量分别可聚合。源码和建表SQL随练习包提供。

3. 运行真实关联SQL

点击执行SQL，按产品关联订单并求SUM。你可以修改textarea中的SQL；返回值必须由引擎执行产生，而非根据按钮编号切换预设结果。

4. 读取计算结果

原生结果中笔记本订单合计5，贴纸为7。对照三条订单逐行计算，先核对业务结果再继续事务实验。

5. 注入失败事务

运行失败事务，先把笔记本库存设为0，再插入不存在的表。错误必须来自真实SQL引擎，并触发事务回滚。

6. 确认库存回滚

错误后重新SELECT products，笔记本库存仍为20。只有页面恢复原表格而数据库仍为0，不算完成回滚。

7. 重置练习数据

点击重置重建两张表，再执行查询与失败事务。下载包只分发源码和build步骤，WASM依赖由本地构建准备；v0账号与云端数据库未运行。

## 目录身份

- starter：待完成的任务接口与原创输入，TODO不是已完成实现。
- reference：作者原生完成参考和实际产物。records.json/browser-result.json为本地实测记录，不是AI助手回复。
- TASK.md：可交给相应AI助手的原始任务合同。该助手账号生成会话未运行。

## 依赖与许可

原创教学代码以MIT许可提供。第三方项目、模型及浏览器遵循其自身许可。第三方依赖由本地安装获取，不包含node_modules、模型权重、WASM运行时、数据库、缓存或凭据。

## 官方依据

- https://pglite.dev/docs/