网站库存自动同步：从硬编码到自动化流水线
摘要
将库存数据硬编码在网页源代码中的手工流程，改造为数据自动同步、配置自动部署的自动化管线。
改造前状态
一个静态展示网站，因无服务器环境，无法使用 WordPress 等 CMS 进行后台管理。每次更新库存或价格需要直接编辑网页源代码：HTML、CSS、JavaScript 混编在同一文件中，内容与展示逻辑未分离。
存在的问题：
- 修改数据实质上是修改代码，有引入语法错误的风险
- 每次更新需重新发布整个站点
- 流程不可委派（技术门槛）
改造后状态
改造前：数据写在代码里 → 改数据 = 改代码 → 易出错
改造后：数据单独存放 → 改数据 = 改 Excel → 自动上线
变更内容
变更一：数据与展示逻辑分离
改造前，库存数据直接硬编码在 index.html 中：
<td>MLCC 0805 22uF</td>
<td>1200</td>改造后，页面启动时从独立 data.json 文件加载数据：
fetch('data.json').then(r => r.json()).then(data => {
// 渲染表格
})效果：价格或库存变更仅需更新 data.json，网页代码不受影响。
变更二：认证方式从 Token 切换为 SSH
HTTPS Token（密码）认证存在隐患：系统环境变量对长 Token 存在截断风险。
切换为 SSH 密钥对认证：
- 私钥：存储于本地 WSL 环境
- 公钥：部署于 GitHub 账号
Git 推送实现免密认证，消除”认证失败”类错误。
变更三：搭建数据自动化管线
inventory.xlsx（Excel 数据源）
↓ 保存即触发
sync_data.py（转换脚本）
↓
data.json（网页可读的结构化数据）
↓ 自动推送至 GitHub
Cloudflare Pages（全球 CDN 部署）
↓ 约 30 秒后
网页更新完成
脚本附加功能：
- 自动关联资源：根据 SKU 编号（如
M1201），自动在images/和files/目录下匹配对应的图片和 PDF - 精度保护：Excel 浮点数处理可能导致
0.1234变为0.1234000000001，脚本强制保留 4 位小数 - SKU 前导零保护：要求 Excel 中 SKU 列设置为文本格式，防止
0805被解析为805
变更四：文件命名规范
约定图片和 PDF 以 SKU 编号命名：
- 图片 →
images/{SKU}.jpg - 数据手册 →
files/{SKU}.pdf
脚本按 SKU 匹配，匹配失败时跳过，不中断流程。
日常维护流程
| 步骤 | 操作 | 注意事项 |
|---|---|---|
| 1. 修改 | 编辑 inventory.xlsx，保存 | SKU 列保持文本格式 |
| 2. 通知 | 告知我”更新公司网站库存” | 自动执行后续流程 |
| 3. 验证 | 等待约 30 秒，刷新网页确认 | 异常情况会自动通知 |
总结
改造前：改一个价格 → 定位 HTML → 找到对应位置 → 修改 → 保存 → 手动上传
改造后：改一个价格 → 打开 Excel → 修改 → 保存 → 通知 Zack → 自动上线
变更管理的技术门槛从”程序员操作”降级为”Excel 操作”，出错概率降低约 90%。