风禾尽起

一、立项背景和目标 在数字化消费趋势下，线上购物成为主流，但现有电商平台对书籍、文创等垂直品类覆盖不足，存在交互繁琐、加载慢等问题，线下书店又受地域限制。基于此，“我的书店” 电商项目应运而生，采用前后端分离架构，以解决用户精准购物需求，适配多端使用场景。 项目目标清晰：用户层面，打造界面友好、操作便捷的平台，实现商品浏览、搜索、购物车管理等功能；技术层面，用 Vue 3、Spring Boot 等主流技术搭建可维护架构，验证技术应用价值；业务层面，完成基础电商流程闭环，为后续拓展预留空间。 二、软件功能与核心模块 软件整体围绕 “找货 - 选货 - 管货” 核心场景，涵盖商品展示、分类筛选、实时搜索、购物车管理、分页浏览等功能。 产品展示模块（HomePage.vue）是核心，左侧侧边栏提供五大分类导航，选中分类高亮显示，主体用响应式网格展示商品卡片，含图片、名称等信息，还支持分页调整。 实时搜索模块带 300ms 防抖，避免无效请求，搜索范围覆盖商品多字段，且与分类协同，仅显示所选分类下匹配商品，提升精准度。 购物车管理模块（cart.js）基于 Pinia，支持添加、移除、更新商品数量及清空操作，通过计算属性实时统计总数量和价格，与产品展示模块无缝衔接。 路由与页面管理模块依托 Vue Router，配置首页、详情页、购物车页面路由，实现页面无缝切换，保持全局样式统一。 三、业务流程与功能路径 核心业务流程为：用户进首页→选分类 / 搜关键词→系统筛选分页展示商品→用户浏览卡片→加购→进购物车调整→查看总价，全程无刷新，交互连贯。 分类筛选路径：用户点侧边栏分类→触发 selectCategory 方法→重置关键词与页码→按分类 ID 过滤商品→更新分页→展示对应商品，分类与商品通过 categoryId 关联。 搜索功能路径：用户输关键词→300ms 后执行搜索→未选分类则筛选全量匹配商品，已选则筛选对应分类下商品→实时更新结果与分页，兼顾效率与精准度。 购物车操作路径：用户点 “加入购物车”→Pinia 存储数据→更新总数量与总价；进购物车页面→调整数量或删除商品→状态同步，确保数据一致。