本采购商城作为企业供应链体系内核心配套模块，依托 Vue+SpringBoot 前后端分离架构搭建，打通内部采购中心业务链路，面向企业全体内部员工提供线上物资采购渠道。以往企业物资申领多依赖线下提报、人工登记，流程繁琐、物资查找低效、采购申请信息难以统一归集管理。为此搭建一体化线上采购商城，整合商品浏览、检索筛选、收藏加购、集采 / 自采申请提报全流程，员工可自主查询、选购办公及工作所需物资，购物车数据可直接同步至采购中心生成对应申请单据，实现内部采购线上标准化流转，简化采购流程，提升企业物资申领与采购管理效率。
1. 首页
顶部设商品搜索栏，输入商品名点击搜索按钮，跳转至商品搜索页；下方为商品分类区与商品轮播图，点击分类跳转搜索页，点击轮播图直达商品详情页。
2. 商品详情页
上半部分展示商品图片及属性信息，用户选择属性、输入采购量后，可点击「加入购物车」或「收藏」，将商品存入对应模块；下半部分呈现商品详细描述。
3. 我的收藏夹
集中展示已收藏商品，支持批量取消收藏、批量加入购物车，便捷管理心仪商品。
4. 我的购物车
可查看购物车商品，支持批量删除、批量收藏；选定送货地址后，点击「创建集采申请单」「创建自采申请单」，自动同步商品信息至采购平台对应申请页面。
5、我的收货地址
维护收货地址信息
二、后台管理端
1. 类目管理
管控商城分类展示，在编辑页面可关联属性管理信息，规范分类体系。
2. 产品管理
维护产品基础信息、所属分类及属性，支持通过产品与属性信息批量生成商品；产品启用后，对应商品自动批量上架。
3. 商品管理
实现商品新增、删除、修改、上下架操作，可编辑系统生成的商品信息，也可直接新增商品并关联至对应产品。
4. 属性管理
负责商品属性的新增、删除与修改，为商品标准化配置提供支撑。
本项目技术栈：前端 Vue，后端 SpringBoot，前后端分离开发。
团队共 4 人（2 前端、2 后端），本人负责采购商城前端页面开发，包括首页、商品详情、收藏夹、购物车等页面实现；完成购物车跳转采购申请页面的数据传递与功能对接；参与商品搜索页面的交互逻辑与状态管理开发。
项目亮点
流程完整：实现商品浏览、搜索、筛选、收藏、加购、生成集采 / 自采申请单一体化采购流程。
体验友好：支持筛选条件动态展示、单属性删除、搜索状态保留、结果排序持久化，操作流畅。
架构合理：采用 Vue + SpringBoot 前后端分离，后台支持分类、属性、商品统一管理，可批量上架、批量操作，扩展性与维护性强。
难点：
搜索内容跨页面传递并保留；
筛选条件按属性分组展示，支持单分组删除且不影响其他条件；
搜索结果排序后，修改筛选条件排序状态不重置。
解决方法：
使用路由参数 / 全局状态管理实现搜索关键词与筛选条件跨页携带与持久化；
筛选条件按属性分组渲染，单独维护每组条件状态，实现单组删除、其他条件保留；
将排序方式独立存储，修改筛选条件时仅更新条件数据，不重置排序字段，保持排序状态不变。
评论