提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、技术架构与交互关系
- 1.1 架构总览
- 1.2 阶段一：用户下单（前端准备）
- 1.3 阶段二：后台处理（后端逻辑）
- 1.4 阶段三：返回结果（打包寄回）
- 二、前端 Vue 3 关键代码解读
- 三、后端 Spring Boot 关键代码解读
前言
近期接触了一个Web商城系统开发的项目，作为项目学习案例分享给大家。这套系统采用了当前主流的前后端分离架构：前端基于Vue 3 + Element Plus，后端使用Spring Boot 3 + MyBatis，技术栈——Java 21、MySQL 8.0、Vite构建工具。通过本项目实践，学习者可全面提升Web应用开发能力，掌握电商类的完整开发流程与关键技术。
环境搭建篇可跳转：【Web商城系统开发Spring Boot + Vue】之环境搭建
一、技术架构与交互关系
1.1 架构总览
Web商城采用了前后端分离架构，整个系统可分成了三个清晰的层次，整体架构图如下：前端Vue3负责界面，Spring Boot处理数据业务，MySQL存储数据，中间通过HTTP协议通信。
顾客购买整体流程：用户点按钮 → 前端打包数据 → 网络发送 → 后端接收处理 → 查数据库 → 返回结果 → 前端更新界面
┌─────────────────────────────────────────────────────────────┐ │ 🎨 前端层 (Vue3) │ │ ┌─────────────────┬─────────────────┬─────────────────┐ │ │ │ 用户界面 │ 路由系统 │ HTTP客户端 │ │ │ │ Element Plus │ Vue Router │ Axios │ │ │ │ Vue3 组件 │ 权限控制 │ 拦截器 │ │ │ └─────────────────┴─────────────────┴─────────────────┘ │ └─────────────────────────────────────────────────────────────┘ │ ┌────────────────────┐ │ RESTful API │ │ (HTTP/JSON) │ └────────────────────┘ │ ┌─────────────────────────────────────────────────────────────┐ │ 🔧 后端层 (Spring Boot) │ │ ┌─────────────────┬─────────────────┬─────────────────┐ │ │ │ 控制器层 │ 业务逻辑层 │ 数据访问层 │ │ │ │ @RestController │ @Service │ @Mapper │ │ │ │ 请求处理 │ 数据处理 │ SQL执行 │ │ │ └─────────────────┴─────────────────┴─────────────────┘ │ │ ┌─────────────────┬─────────────────┬─────────────────┐ │ │ │ 安全认证 │ 文件上传 │ 统一响应 │ │ │ │ JWT Token │ 本地存储 │ Result类 │ │ │ │ 拦截器 │ 路径映射 │ 异常处理 │ │ │ └─────────────────┴─────────────────┴─────────────────┘ │ └─────────────────────────────────────────────────────────────┘ │ ┌────────────────────┐ │ JDBC连接池 │ │ (HikariCP) │ └────────────────────┘ │ ┌─────────────────────────────────────────────────────────────┐ │ 🗄️ 数据库层 (MySQL) │ │ ┌─────────────────┬─────────────────┬─────────────────┐ │ │ │ 用户表 │ 商品表 │ 订单表 │ │ │ │ user/admin │ goods │ orders │ │ │ │ 权限管理 │ 库存管理 │ 交易记录 │ │ │ └─────────────────┴─────────────────┴─────────────────┘ │ │ ┌─────────────────┬─────────────────┬─────────────────┐ │ │ │ 购物车 │ 评价表 │ 公告表 │ │ │ │ cart │ comment │ notice │ │ │ │ 临时存储 │ 用户反馈 │ 系统通知 │ │ │ └─────────────────┴─────────────────┴─────────────────┘ │ └─────────────────────────────────────────────────────────────┘1.2 阶段一：用户下单（前端准备）
# 第1步：用户在界面上点击用户点击"加入购物车"按钮# 第2步：Vue组件捕获点击前端代码开始执行： - 收集商品信息：薯片，价格15元，数量1 - 获取用户信息：用户ID=1001- 检查库存是否充足（前端缓存）# 第3步：Axios打包请求（想象成填快递单）准备发送到后端的"快递单"： 收件地址：http://localhost:9090/cart/add 快递内容：{"goodsId":123,"quantity":1,"userId":1001}身份证明：JWT Token（就像身份证复印件） 包装格式：JSON格式（标准快递箱）# 第4步：网络发送开始运送： 运输方式：HTTP协议（像顺丰快递） 出发地：你的电脑/手机 目的地：后端服务器1.3 阶段二：后台处理（后端逻辑）
# 第5步：Spring MVC接收（客服接单）后端收到快递： - 检查快递单：POST /cart/add - 开箱验货：JSON → Java对象 - 登记信息：记录到系统日志# 第6步：JWT验证（保安检查身份证）保安工作流程： 输入：检查Token 过程： → 有没有带Token？ ❌ → 拒绝："请先登录"→ Token是否有效？ ❌ → 拒绝："登录过期"→ Token是否过期？ ❌ → 拒绝："重新登录"→ 所有检查通过 ✅ → 放行，获取用户ID=1001# 第7步：Service处理业务（仓库管理员操作）管理员操作清单：1. 查询商品信息： 商品：薯片 价格：15元 库存：200件2. 检查业务规则： → 库存是否足够？ ✅200>1→ 用户是否有权限？ ✅ 普通用户可以购买 → 商品是否下架？ ❌ 正常销售3. 更新购物车： → 检查用户购物车：已有10件商品 → 添加新商品：购物车数量=11→ 计算总价：165元# 第8步：Mapper操作数据库（拣货员进仓库）拣货员工作： 需要：连接数据库 操作： 打开仓库门（获取数据库连接） 查询SQL：SELECT * FROM cart WHERE user_id=1001如果没有记录：INSERT新记录 如果有记录：UPDATE数量 关门还钥匙（释放连接）# 第9步：数据库执行（仓库实际存取）仓库操作记录： 执行SQL： INSERT INTO cart(user_id, goods_id, quantity)VALUES(1001,123,1)返回结果：成功插入1.4 阶段三：返回结果（打包寄回）
# 第10步：封装结果（打包商品）打包流程：1. 选择包装盒：Result类2. 放入商品：购物车数据3. 贴上标签： 状态：200（成功） 消息："加入购物车成功"数据：{"cartCount":11,"total":165}4. 封箱：Java对象 → JSON# 第11步：网络返回（快递送回）返回的快递： 发件人：后端服务器 收件人：你的浏览器 快递单：HTTP200OK 包裹内容：上面那个JSON# 第12步：前端接收（拆快递）浏览器操作：1. 签收快递：收到HTTP响应2. 检查状态：200 OK3. 拆箱：JSON → JavaScript对象4. 验货：code=200，msg="成功"# 第13步：更新界面（显示结果）界面更新清单： ✓ 右上角购物车数字：10 →11✓ 弹出提示框："加入购物车成功"✓ 购物车列表新增：薯片 x1 ✓ 总价更新：150元 →165元二、前端 Vue 3 关键代码解读
三、后端 Spring Boot 关键代码解读
🌷🌷🍀🍀🌾🌾🍓🍓🍂🍂🙋🙋🐸🐸🙋🙋💖💖🍌🍌🔔🔔🍉🍉🍭🍭🍋🍋🍇🍇🏆🏆📸📸⛵⛵⭐⭐🍎🍎👍👍🌷🌷
