夜雨聆风我用 Codex 从 0 到 1 开发了一套 Excel 出入库 Web 系统：小白也能照着走的完整流程
这篇文章不是炫技复盘，而是一份“小白可复制”的实战教程。我会用一个真实案例，讲清楚：如何把一句需求拆成系统功能，如何确定技术方案，如何让 Codex 写代码，如何反馈 Bug，最后如何打包成 Windows 可部署系统。
一、项目背景：我们到底要做什么？
这次要开发的是一套“出入库表 Web 系统”。
可以通过：http://heibei-ai.cn:3107/ 访问到
用户手里原本有一个 Excel 文件：
1000年7月出入库表.xlsx
核心诉求是：
网页上复刻 Excel 的格式、数据、背景色和公式 用户可以切换年份、月份 每个月都有一张出入库表 每天有入库、出库两列 H、I、J、K 列自动计算 修改数据后自动保存到 MySQL 新增物料后，所有月份都能看到这个物料 Windows 10 上可以一键部署，重启电脑后自动启动系统
最终做出来的是一个完整 Web 系统：
后端： Node.js + Koa + MySQL前端： Vite + Vue 3 + Element Plus + UniverJS数据库： MySQL部署：Windows 一键安装脚本 + 自动启动任务
1：系统首页这是一张网页打开后的总览图，展示年份、月份选择器和出入库表。
二、第一步：不要急着写代码，先拆需求
很多小白用 AI 写系统时，第一句话就是：
帮我做一个出入库系统。
这太宽泛了，AI 很容易写偏。
更好的做法是先把需求拆成几类。
1. 页面功能
页面上要有什么？
第一行左侧：年份选择、月份选择 第一行右侧：标题，例如 2026年7月份 出入库表第二行：一个类似 Excel 的表格 表格要占满屏幕剩余区域
这类需求决定前端布局。
2. 表格规则
表格本身有什么规则？
A-K 是固定列 L 列开始是每日入库、出库 每个月天数不同：28、29、30、31 天 第 1 行显示日期 第 2 行显示星期 第 3 行是可修改标题 第 4 行以后是物料数据 H-K 是公式列，不让用户直接改
这类需求决定表格生成逻辑。
3. 数据保存规则
哪些数据保存在哪里？
第 3 行标题：按年月保存 A-F 物料基础信息：全局保存，所有月份共用 G 上月结余：按月份保存 H/I/J/K 计算结果：按月份保存 L 以后每日入库/出库：按月份保存
这类需求决定数据库设计。
4. 跨月份规则
跨月规则很重要，不能只说“自动带入”。
我们明确为：
当前月 J 列库存总量 自动带入下个月 G 列上月结余 根据 A 列物料编号匹配
例如：
2026年7月 J列库存总量 = 4502026年8月 同一物料 G列上月结余 = 450
5. 部署规则
最后要怎么运行？
目标机器是 Windows 10 默认已安装 Node.js 和 MySQL MySQL 用户名密码都是 root数据库名叫 excel_web一键安装 重启后自动启动
这类需求决定脚本和部署方案。
三、第二步：把需求变成技术方案
功能拆完以后，就可以定技术方案。
这一步不要让 Codex 直接“随便选”。你应该明确告诉它技术栈。
本项目选择：
为什么这样选？
Koa：轻量，适合 API 服务 MySQL：适合结构化业务数据 Vue 3：开发后台工具很顺手 Element Plus：快速做选择器、按钮、弹窗 UniverJS：能在网页中做类 Excel 表格 ExcelJS：能读取 Excel 样式、数据、列宽、行高
四、第三步：让 Codex 先读模板文件
这类项目有一个关键点：不是凭空做表，而是要复刻已有 Excel。
所以第一步不是写页面，而是让 Codex 先分析 Excel。
可以这样跟 Codex 说：
请先扫描目录下的 “1000年7月出入库表.xlsx” 中的 Sheet1，熟悉它的结构、数据和公式，再开始设计系统。
为什么要这么说？
因为 Excel 里藏着很多规则：
哪些列是固定列 哪些列是每日入库/出库 哪些单元格有背景色 哪些行是标题 哪些列有公式 预置数据有多少行
如果不先读模板，AI 很可能自己造一套表格，结果和原 Excel 对不上。
Excel 模板放一张原始 Excel 的局部截图，标出 A-K 固定列和 L 以后每日列。
五、第四步：设计数据库，不要把所有东西塞一张表
这是小白最容易踩坑的地方。
一开始很多人会想：
每个月一张表，或者所有单元格都存成 Excel 坐标。
这两种都不太好。
更好的做法是按业务拆表。
本项目最终拆成：
1. 月份表：periods
记录有哪些年月。
yearmonth
比如：
2026 / 72026 / 8
2. 全局物料表：inventory_items
保存 A-F 基础信息。
这个表非常关键。
因为后来我们发现一个 Bug：
用户在 6 月新增物料，切到 7 月看不到。
原因就是新增物料只保存在某个月的 inventory_rows，没有进入全局物料表。
最终修正为：
任意月份新增物料，都写入 inventory_items打开任何月份时，都从 inventory_items补齐物料行A-F 修改后同步到所有月份
3. 月份行表：inventory_rows
保存某个月的行数据。
它保存：
G 上月结余 H 入库总量 I 出库总量 J 库存总量 K 状态
这些是按月份变化的，不能放到全局物料表。
4. 每日入出库表：inventory_day_entries
保存 L 列以后的每日数据：
day_noin_qtyout_qty
这样 31 天也好，28 天也好，都能统一处理。
5. 标题表：period_headers
保存第 3 行用户可修改标题。
六、第五步：先做能跑通的版本，再逐步修正
开发不要想着一步到位。
推荐顺序是：
后端能连接 MySQL 能自动创建数据库和表 能读取 Excel 模板 能生成某个月的表格数据 前端能显示 UniverJS 表格 修改单元格能保存 公式列能重算 切换年月能回显 新增/删除行能保存 最后做部署脚本
这个顺序很重要。
如果一开始就追求“完美 UI + 全部功能”，问题会混在一起，很难排查。
七、第六步：和 Codex 沟通 Bug，要给“现象 + 期望 + 例子”
这次项目里，Bug 修正非常典型。
下面几个例子，小白可以直接照着学。
Bug 1：J 列公式算错
错误反馈不要只说：
公式错了。应该这样说：
J列公式计算结果出错。第4行 G4 为 50，H4 为 1000，I4 为 600。J列公式 =G4+H4-I4，正确结果应该是 450，但当前显示为 -450。另外，在 L 列及其以后的出库单元格填写数据后，不会触发公式重新执行。
这样 Codex 能立刻知道：
哪个单元格错 输入值是什么 正确结果是什么 当前错误结果是什么 还有哪个触发条件没生效
Bug 2：新增行刷新后丢失
好的反馈：
新增一行后，填写的内容没有保存到数据库中。刷新浏览器后数据丢失。
这个反馈会引导 Codex 检查：
新增行有没有 rowId 前端新增行后本地映射是否更新 保存接口是否能找到对应数据库行
Bug 3：新增物料没有同步到其他月份
好的反馈：
在任何月份新增的新数据，都要同步到其他所有月份。用户选择任何一个年月都应该看到这个新增物料。现在我在 6 月新增，其他月份看不到。
这会引导 Codex 重新设计数据归属：
A-F 不是月份数据 A-F 应该进入全局物料表 每个月打开时从全局物料补齐
Bug 4：保存时整页刷新，体验差
好的反馈：
每修改一个数据浏览器总是全部刷新一次，用户体验不好。请改成 AJAX 刷新方式。
最终修正方向：
普通单元格修改走 PATCH /cells后端返回受影响行的 H/I/J/K 前端只局部更新公式列 不重新加载整个 workbook
八、第七步：让 Codex 每次都验证
不要只让 Codex 写代码。
每次改完都应该让它验证：
请修改后运行构建和必要的脚本测试，确认功能正常。本项目常用验证包括：
npm run check --workspace servernpm run build --workspace client脚本模拟新增物料 脚本检查 MySQL 数据 脚本检查跨月结余 浏览器打开本地页面测试
尤其是数据库逻辑，最好用脚本验证。
例如验证：
2026年6月新增物料填写 A-F检查 inventory_items 是否有记录打开 2026年7月检查同一物料是否出现
这比只看页面更可靠。
九、第八步：部署前要把开发模式变成生产模式
开发时通常是两个服务：
前端 Vite: http://127.0.0.1:5180后端 Koa: http://127.0.0.1:3107
但是部署给普通用户时，不建议让用户启动两个服务。
最终方案是：
前端先构建成 client/dist后端 Koa 托管前端静态文件 生产只启动一个端口： 3107
访问：
http://127.0.0.1:3107这样部署简单很多。
十、第九步：Windows 一键安装和自动启动
用户最终要求是：
Node 和 MySQL 已安装好，只需要打包系统，一键安装和启动，重启后自动启动。
所以最终做了这些脚本：
deploy.cmd 一键安装start-system.cmd 手动启动stop-system.cmd 停止系统make-package.cmd 生成部署包
安装脚本做的事：
检查 Node.js/npm 是否可用 检查 MySQL 是否运行在 127.0.0.1:3306写入数据库配置 安装缺失依赖 构建前端 创建数据库 excel_web创建业务表 初始化当前年月的模板数据 注册 Windows 计划任务 启动系统
自动启动使用 Windows 计划任务：
ExcelWebAutoStart电脑重启后，系统会自动启动。
建议截图 3：部署包文件展示 deploy.cmd、start-system.cmd、WINDOWS_DEPLOY.md 等文件。
建议截图 4：Windows 计划任务展示 ExcelWebAutoStart 自动启动任务。
十一、小白可直接复制的 Codex 提示词模板
1. 初始开发提示词
请使用 Node + Koa + MySQL 完成后端，使用 Vite + Vue3 + Element Plus 开发前端。请先扫描目录下的 Excel 模板文件，熟悉 Sheet1 的结构、数据、公式、背景色。然后完成：1. 年月选择2. 表格复刻显示3. 数据保存到 MySQL4. H-K 公式计算5. 切换年月回显6. 新增、删除行7. 跨月结余8. Windows 一键部署
2. 技术方案确认提示词
请先给出实施计划，包括：- 前端结构- 后端 API- 数据库表设计- Excel 模板解析方式- 公式计算方式- 测试计划确认后再开始实现。
3. Bug 修正提示词
这个版本有 Bug：1. 现象是……2. 我输入的数据是……3. 正确结果应该是……4. 当前错误结果是……5. 请修改代码并运行测试验证。
4. 部署提示词
目标电脑是 Windows 10。Node 和 MySQL 已经安装好。MySQL 用户名和密码都是 root。请把系统打包成一键安装和启动命令。安装时创建数据库、创建表、初始化数据。系统重启后自动启动。
十二、这次项目最大的经验
经验 1：AI 不是读心术，需求越具体越好
不要说“做一个系统”。
要说：
页面长什么样 数据怎么保存 哪些字段跨月共享 哪些字段按月份独立 哪些列有公式 错误时正确结果是什么
经验 2：先定数据归属，再写页面
这个项目最关键的转折点是：
A-F 是全局物料信息，不是某个月的数据。
一旦这个数据归属定对了，跨月同步问题就解决了。
经验 3：Bug 反馈要带例子
最好的 Bug 描述格式是：
输入是什么期望是什么实际是什么在哪个位置发生如何复现
经验 4：部署要按用户电脑环境来设计
开发环境能跑，不等于用户会部署。
普通用户需要的是：
一个 zip 包 一个安装命令 一个启动命令 重启自动恢复
十三、完整开发流程清单
如果你也想用 Codex 做一套 Web 系统，可以照这个清单走：
1. 准备原始资料：Excel、截图、业务说明2. 让 Codex 先读资料，不急着写代码3. 拆功能：页面、数据、公式、权限、部署4. 定技术栈5. 定数据库表6. 定 API7. 先做最小可运行版本8. 再补公式、样式、保存、回显9. 用真实数据测试10. 把 Bug 描述清楚，逐个修11. 做生产部署方式12. 写一键安装脚本13. 注册自动启动14. 交付部署包和说明文档
结语
用 Codex 开发系统，最重要的不是“让 AI 一次写完所有代码”，而是学会像产品经理和工程师一样拆问题。
你要做的是：
把业务说清楚 把规则拆明白 把数据归属定准确 把 Bug 用例描述具体 让 Codex 修改后验证
当你掌握这个流程后，即使你是小白，也能一步一步把一个真实业务需求做成可运行、可部署、可维护的 Web 系统。