夜雨聆风英创客 Codex 零基础实战课 · 第17课
把Excel表格变成一个能搜索的网页
原表不动，先整理副本，再做搜索和筛选
8月12日 · 零基础Codex课程第17讲
“110的弯头还有多少？放在哪个仓？”
群里突然有人问了一句。你先找那份Excel，再确认是不是最新版，然后横着拖到库存列、仓库列、更新时间列。两分钟过去了，对方又补了一句：“只看启用的。”
Excel没有错。真正麻烦的是，一张原本用来维护数据的表，后来同时承担了查询、分享、手机查看和版本管理。列越来越多，文件名也从“产品表.xlsx”变成“产品表最新版_最终确认2.xlsx”。
今天不做复杂系统。我们只把一个高频动作处理掉：让同事打开网页，输入“110”或者选择“管材、二号仓、启用”，几秒钟内找到需要的记录。
这件事看起来像“给Excel加个搜索框”，实际要先处理数据。原表里如果有重复编码、空仓库，或者库存一列既有数字又有“待盘点”，网页只会把问题显示得更快，不会自动让数据变正确。
先保留原表，别让程序替你整理历史
本课练习里有一份 产品资料查询练习表.xlsx。它故意保留了几种常见情况：F2005重复出现，P1008没有仓库，F2007的库存写成“待盘点”，用途里还混用了斜杠。
这些问题不应该在原文件里被悄悄改掉。正确做法是保留原始Excel，再生成一份清洗副本，同时写清楚改了哪一行、为什么改，还有哪些地方没有资格替企业决定。
课程清洗记录里做了什么
重复编码只在查询副本中保留一条，原表不删；
空仓库改成“待确认”，没有猜具体仓库；
“待盘点”从库存数字列移出，另放到数据状态；
用途分隔符统一，日期统一为YYYY-MM-DD；
停用产品继续保留，不把历史记录当垃圾删除。
OpenAI当前的数据清洗用例也采用类似思路：处理混合日期、重复行、空值和别名时，写出一份清洗后的副本，同时保持原始文件不变，并记录改动、删除和无法确定的内容。
【白板图解：一张Excel表变成查询网页的五道关】
一行是一条记录，一列只放一种意思
网页查询最喜欢规矩的数据。每一行对应一个产品，每一列有固定含义。产品编码列就放编码，库存列就放数字，仓库列就放仓库名称。
“库存：待盘点”“二号仓/临时区”“给水，工业，其他”这些写法，人一眼能猜出大概，程序却很难稳定筛选。
本课附带的 字段说明 工作表，会告诉读者每一列将怎样进入页面。例如产品编码用于唯一识别，分类和仓库进入下拉筛选，更新时间用来提醒数据是否过旧。
整理字段时，先问这几句话
这列每一行的单位是否相同？
空白表示没有、未知，还是不适用？
同一个选项有没有三种不同写法？
编码是否真的唯一？
这列是否包含客户隐私或内部价格？
为什么中间还要经过CSV？
Excel工作簿可以有多个工作表、公式、格式、图片和权限。浏览器如果要直接读取.xlsx，通常需要额外的解析库。
为了让零基础练习可以双击运行，本课采用更简单的路线：企业继续用Excel维护；需要给查询页的数据，另存为UTF-8 CSV。CSV只保存表格里的文字和数字，浏览器容易读取，也更容易检查版本差异。
让Codex先检查表格，不要立刻做网页
请先检查这份产品资料表，不要覆盖原文件，也不要制作页面。
请说明：
1. 每个工作表和字段的用途；
2. 哪些字段适合关键词搜索或下拉筛选；
3. 重复编码、空值、混合数据类型和不一致写法；
4. 哪些问题可以按明确规则清洗；
5. 哪些问题必须由业务负责人确认；
6. 建议的清洗后字段结构。
请生成清洗副本和清洗记录，
保留原始行号或产品编码，不能凭空补值。查询工具不只是搜索框
关键词搜索只能解决一部分问题。业务员还会问：只看某个仓库、只看启用产品、哪些库存低于30、最近更新的是哪一批。
所以本课页面加了分类、仓库、状态和库存筛选，还可以按更新时间或库存排序。查到的结果能导出为新的CSV，方便复核，但不会回写原始Excel。
页面顶部还会显示当前数据源、记录数量和最新更新时间。使用者至少知道自己正在看哪份文件，以及这批数据有多旧。
【白板图解：查询工具容易被忽略的六个细节】
把有问题的CSV上传进去，会发生什么？
练习项目同时提供 products_raw.csv 和 products_clean.csv。
先上传原始CSV，页面会发现重复编码和无法识别的库存。再上传清洗后的CSV，重复编码归零，但“仓库待确认”和“库存待盘点”仍然保留。
这正是清洗和造假的区别：清洗让数据结构更稳定，却不应该把未知事项伪装成确定答案。
制作查询页的任务说明
请基于清洗后的产品CSV，制作一个浏览器查询工具。
功能：
- 搜索产品编码、名称、规格、压力、用途和备注；
- 按分类、仓库、启用状态筛选；
- 筛选有库存、低库存、零库存和库存待确认；
- 按编码、更新时间或库存排序；
- 显示结果数、来源文件和最新更新时间；
- 检查重复编码、空仓库和非数字库存；
- 导出当前筛选结果；
- 支持上传UTF-8 CSV。
限制：
- 不覆盖原始Excel和CSV；
- 不自动上传数据；
- 不使用外部依赖；
- 缺少必要字段时拒绝导入并说明原因；
- 所有表格内容输出前进行HTML转义；
- 适配360px手机宽度；
- 提供浏览器测试页。“只在浏览器里处理”不等于可以随便公开
本课工具双击即可打开。上传CSV后，文件只在当前浏览器里解析，没有服务器，也不会自动发送出去。
但等到第20课把页面发布到互联网上，问题就变了。公开网站的访问者可能看到页面里预置的数据，也可能下载查询结果。真实企业需要先决定谁能访问、是否登录、哪些字段允许显示，以及数据多久更新一次。
这些内容不要放进公开查询页
客户姓名、手机号、地址和合同信息；
内部采购价、最低折扣和销售权限；
账号、密码、密钥和系统连接信息；
未经授权的员工私人联系方式；
不能公开的库存、产能和供应链数据。
今天怎么练
打开“产品资料查询练习表.xlsx”，先看原始数据和数据问题工作表；
解压查询工具，双击index.html；
上传products_raw.csv，记录页面发现的问题；
再上传products_clean.csv，比较变化；
搜索“110”，再筛选管材、启用和低库存；
导出当前结果，确认原始文件没有改变；
打开tests.html，检查七项浏览器测试。
OpenAI当前的数据类用例也把CSV、电子表格、导出文件和本地数据文件列为可处理来源，并强调先检查字段、缺失值、重复记录、匹配失败和数据问题，再生成可复核的表格、图表或报告。
对河南、许昌的中小企业来说，这种查询页适合从产品资料、库存目录、设备台账、客户服务知识和内部物料清单开始。先解决“大家总在找同一张表”的问题，再考虑权限、自动更新和系统连接。
下一课
《用Codex制作一个轻量级客户管理系统》
从“查一张表”继续往前，加入客户、跟进记录、状态和下一步提醒。
关于英创客
厦门英创客智能科技有限公司，提供AI培训、企业AI应用咨询、智能工具实施与OPC创业培训。
许昌运营中心：许昌市魏都区七一路三国大酒店后楼2F
客服微信：zichengshuo-
本文参考OpenAI当前数据清洗与数据查询用例资料整理。练习中的企业、产品和库存数据均为虚构。文章与配图使用AI辅助制作，并经人工编辑核对。
