基于 HTMLCSSJavaScript 的超市货架商品管理系统设计与实现一、前言零售门店的利润往往是在货架上一件一件省出来的。同样一家两三千平方米的超市货架排布混乱、畅销品断货、临期品压仓的门店与陈列整齐、补货及时、先进先出执行到位的门店相比月末盘点时的商品损耗率可能相差数个百分点。货架管理的本质是把三件事管清楚商品摆在哪、库存还剩多少、什么时候必须动销。围绕这条业务主线本文分享一个采用 HTML CSS JavaScript 原生技术实现的超市货架商品管理系统以货架为中心组织陈列位以保质期为主线管理临期损耗覆盖门店总览、货架平面图、货架详情、商品管理、补货任务、临期预警六大功能。整个系统不需要安装服务器与数据库浏览器直接打开页面即可运行断网环境下同样可用适合作为超市管理类课程设计与前端综合练习的参考实现。二、技术栈与整体结构项目在技术形态上如实采用纯静态实现全部页面由原生 HTML/CSS/JS 编写没有后端服务与数据库也没有引入任何构建工具。唯一的第三方组件是 ECharts 图表库已将其本地化到项目 vendor 目录中保证离线打开时销售趋势等图表仍能正常渲染。├── index.html # 门店总览经营指标 销售趋势图 ├── shelf-map.html # 货架平面图六大分区网格 ├── shelf-detail.html # 货架详情层位排布 陈列数量 临期标红 ├── product-manage.html # 商品管理增删改查 检索分页 ├── restock-task.html # 补货任务缺口扫描 一键生成补货单 ├── expiry-alert.html # 临期预警三级分级 货值折算 ├── about.html # 关于系统 ├── css/style.css # 全站样式设计令牌统一管理 ├── js/data.js # 种子数据 浏览器端持久化 业务计算 ├── js/common.js # 侧边栏 / 顶栏 / 弹窗 / 轻提示等公共组件 ├── js/*.js # 各页面逻辑 └── vendor/echarts.min.js # 本地化图表库架构上最关键的一条约定是单一数据源所有商品、货架层位计划、补货单都存放在同一个数据模块中首次打开页面时写入一套完整的门店种子数据此后的增删改操作统一读写并持久化到浏览器本地存储刷新或关闭页面后数据不丢失。因此商品管理里改一个库存数字总览看板的预警数、货架详情的陈列统计、补货任务的缺口清单会同步变化各页面口径永远一致不会出现各管一摊的数据孤岛。视觉上没有套用常见的蓝白后台模板而是为货架零售域定制了一套浆果熟成 × 茄紫配色深茄紫作主色呼应果蔬熟成与精品货架的卖场气质莓品红承担顶栏小票牌、二级临期标识与补货动作等关键强调蜜橙黄与莓胭红分别对应临期的关注与告警级别工作区铺在米浆纸色的货架底色上衬托商品与价签信息。顶栏的门店徽章做成带撕票锯齿边的小票牌侧边栏的品牌徽标则是三层层板承载货块的货架剪影与业务域直接呼应。门店总览页首屏即呈现四项核心经营指标与近七日销售趋势三、功能设计把零售陈列规则写进页面分区陈列管理。系统按超市真实动线把卖场划分为饮料、生鲜、休闲食品、粮油副食、日化、家纸母婴六大分区共十二座货架。货架平面图以分区分组展示全部货架每座货架卡片上除了营业状态与责任人还用一排迷你层板直观示意该架各层的陈列饱满度莓红色块即代表架上存在临期商品。点击任意货架即可进入层位明细从平面到单架只有一次点击的距离。层位排布与先进先出。货架详情页是系统的核心界面每层商品陈列在一块木质层板上按自下而上 1→N 层编号每个陈列位标注商品名称、规格、陈列数量与位容量百分比。页面贯彻先进先出FIFO原则——补货时新到货品置于层位后端、早进商品置于前端优先动销对保质期敏感的品类则进一步按生产日期由早到晚组织排面。同时兼顾黄金陈列位的零售经验与顾客视线平齐的中部层位优先安排高动销商品底层承载整箱重货顶层陈列轻小品类。临期商品在层板上直接标红名称旁附带临期角标理货员巡场时一眼即可锁定需要优先处理的商品。生鲜乳品区是临期管理压力最大的分区保质期普遍只有七天至二十一天系统在乳品冷藏柜的排面上对临期商品逐位标注并统计每架临期商品数量商品档案与库存口径。商品管理页维护全场七十个在册 SKU 的完整档案13 位商品条码、名称规格、所属分区、零售价、保质期、生产日期、后仓库存与安全库存。系统采用零售行业通行的库存口径——“可用库存 货架陈列量 后仓库存”列表中两数分列避免库里明明有货、架上却已卖空的口径争议。新增与编辑通过独立弹窗完成条码位数、价格、生产日期等字段均有业务校验删除前会明确提示连带清空的陈列位。补货任务闭环。系统按可用库存低于安全库存两倍线自动扫描缺口商品生成按紧急程度排序的缺货清单理货员勾选后一键生成带单号的补货单入库确认时后仓库存即时回补形成扫描缺口 → 生成补货单 → 验收入库的完整闭环。四、数据模型与临期损耗控制数据模型围绕三张表展开商品表记录档案与库存字段货架表以层位计划的方式嵌套记录每层每个陈列位上的商品与数量补货单表记录单号、明细与单据状态。商品条码并非随意编造而是按 EAN-13 校验规则实算生成的合法码段种子数据中的商品名、规格、价格也对照社区超市的真实品类结构设计从 550 毫升饮用水到五升装花生油各有归属。临期损耗控制是零售数据分析里最见功夫的一环。系统按剩余保质期把临期风险划成三级剩余七天以内为一级临期当日启动折价清仓八至十五天为二级临期调整到端架黄金位加大关联陈列十六至三十天为三级关注纳入周报跟踪并压降订货量。预警页同时把在架与后仓的临期商品折算成货值金额让店长对再不动销就要亏多少有直接的量级感知——这套分级处置策略正是连锁商超行业应对货损的通行做法。补货单本身也带有完整的单据生命周期从扫描缺口时的待入库到到货验收后的已入库每一步都在补货单记录中留痕月末复盘补货及时率时可以直接按单据追溯。五、系统演示回到门店总览除销售趋势外页面下方还提供各分区库存分布图与经营速览最紧缺商品、待巡检货架、先进先出执行要点一屏读全。临期预警按级别着色排序处置建议直接写在行内。关于页则完整交代了系统的功能基线与不同岗位的使用动线理货员从货架平面图进入所负责货架库管员在补货任务中处理缺口店长巡览总览与临期两张看板。全部页面在浏览器中通过 file 方式直接打开即可运行断网状态下除远程图片外所有功能增删改查、补货单生成与入库、临期分级、图表渲染均正常工作日常操作产生的数据变更自动留存下次打开页面时仍可延续上一次的经营状态。六、小结本文实现了一个基于原生 HTML CSS JavaScript 的超市货架商品管理系统以六大分区、十二座货架组织卖场陈列以陈列量 后仓库存统一库存口径以剩余保质期三级分级驱动临期损耗处置并串联起商品档案维护与补货单闭环。项目结构清晰、零构建零部署既可作为超市管理类课程设计的界面与交互原型也适合用来练习组件化页面组织、浏览器端数据持久化与图表本地化集成等前端工程课题。后续如有需要可以在保持页面结构不变的前提下将数据层替换为接口调用平滑演进为带后端的完整系统。如果在实现类似系统时遇到问题欢迎评论区交流。完整资源已整理上传含全部源码与使用说明超市货架商品管理系统演示版 HTMLCSSJavaScript 货架管理静态网页超市管理课程设计参考如果在实现类似系统时遇到问题欢迎评论区交流。
