SSM + Vue 在线购物系统源码｜商品选购、订单处理与出入库管理

在线购物系统把前台选购与后台商品管理连接起来：用户浏览商品、收藏、加入购物车并提交订单，管理员维护商品分类与资料，处理订单，同时记录商品的入库和出库。项目适合学习一个商品从资料维护到购买、发货和确认收货的基本流程。

后端使用 SSM，管理端采用 Vue 2 与 Element UI，前台页面位于独立的 front 目录。配套提供源码、MySQL 脚本、运行说明和设计论文，可结合页面与接口学习商城业务的实现。

一、项目概况

二、用户选购：从商品浏览到订单查询

商品资料包含名称、分类、图片、尺码、颜色、用途、赠送对象、数量、价格和详情。用户可查看商品内容，收藏感兴趣的商品，或加入购物车，在提交订单时使用收货地址完成信息填写。

收藏管理把用户与商品关联，便于再次找到已关注的内容；订单列表则记录商品、购买数量、金额、地址与状态。用户可按不同状态查看订单，并对已发货订单确认收货。

结算页面包含账户余额检查与扣减逻辑，用于展示余额购买流程。学习这一部分时，可重点观察订单生成、余额更新和数量更新的调用顺序；扩展实际交易业务时，应将金额核算和库存扣减放到服务端统一处理，并补充事务与支付回调校验。

三、后台商品与出入库管理

管理员维护商品分类、商品信息和商品评论，商品列表提供入库与出库入口。从商品发起入库时，页面带入关联商品信息，录入数量后更新商品数量并保存入库记录；出库用于记录相反方向的数量变化。

独立的出入库列表便于查询和维护记录。它与商品主表的关系，适合用来学习跨表业务：一方面保留商品当前数量，另一方面保留具体的变动信息。进一步开发时，可围绕数量校验、修改记录后的数量一致性以及操作日志完善流程。

四、订单、用户与内容维护

后台将订单按未支付、已支付、已发货、已完成、已取消和已退款等状态组织。管理员可对已支付订单执行发货，用户再确认收货，形成购买后续处理流程。订单状态与页面按钮之间的对应关系，也适合作为后台权限和状态控制的学习案例。

用户管理集中维护账号、姓名、联系方式、邮箱与余额等资料。系统管理还提供商品资讯、轮播图和客服管理入口，客服消息记录用户提问与回复，帮助把商品展示、购买咨询和订单业务放在同一个应用中。

五、技术结构与学习重点

• Vue 管理界面：通过 Element UI 表格、表单和路由组织后台模块，Axios 调用后端接口。
• 角色菜单：管理员维护商品、用户与订单，用户管理个人收藏和购买记录。
• 数据关系：商品与分类、购物车、订单、评论和出入库记录相互关联。
• 业务一致性：将订单、余额与库存作为一组关联业务理解，学习服务端校验和事务的重要性。

六、部署入口与配置位置

1. 导入 sp-ssmv Maven 工程，安装与项目依赖兼容的 Java、MySQL 和 Tomcat 环境。
2. 创建数据库并导入 db.sql，修改 src/main/resources/config.properties 中的连接配置。
3. 部署后端，核对上下文路径。管理端 src/main/webapp/admin/src/utils/base.js 默认服务地址为 http://localhost:8080/sp-ssmv/，前台入口为 /sp-ssmv/front/index.html。
4. 需要修改管理端时，在 admin 目录安装依赖，使用 npm run serve 开发或 npm run build 构建。项目包含较早版本的 node-sass，应按依赖选择兼容的 Node.js 环境。
5. 检查商品图片和上传目录，再测试商品维护、入库、购物车、下单、发货及确认收货流程。

七、配套资料清单

• 项目源码：sp-ssmv，包含 Java 后端、Vue 管理端和前台页面。
• 数据库：db.sql。
• 运行说明：说明文档.txt。
• 设计论文：论文.docx，包含系统设计、业务说明与界面配图。