温馨提示本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系名片一、项目背景与意义随着精品咖啡消费的持续升温咖啡馆、连锁门店以及企业行政采购对咖啡豆、咖啡器具、耗材的采购频次和品类复杂度不断提升。传统依靠微信、Excel 表格和电话沟通的采购方式普遍存在商品信息不透明、订单状态难追踪、库存与采购脱节、对账效率低等问题。本项目基于 Spring Boot Vue3 前后端分离架构构建一套面向咖啡采购场景的商城管理系统覆盖商品浏览、采购下单、订单流转、库存管理、供应商管理与数据统计等核心环节帮助采购方与供应方在同一平台上高效协作。1.1 系统目标采购流程线上化从选品、加购、下单到收货确认全流程可追溯。库存实时联动下单扣减库存入库自动补货避免超卖与积压。角色权限清晰管理员、采购员、供应商各自拥有独立的功能边界。数据可视化通过图表展示采购趋势、热销品类与供应商履约情况。二、技术选型层次技术栈说明后端框架Spring Boot 3.x快速构建 RESTful 接口内置 Tomcat持久层MyBatis-Plus简化 CRUD支持分页与条件构造器数据库MySQL 8.0存储商品、订单、库存、用户等数据缓存Redis缓存商品分类、购物车与登录令牌认证授权Spring Security JWT无状态鉴权支持多角色权限控制前端框架Vue 3 Vite组合式 API构建速度快UI 组件库Element Plus后台管理界面快速搭建状态管理Pinia管理用户信息、购物车与全局配置图表ECharts采购趋势与销售统计可视化三、系统架构设计系统采用前后端分离架构前端通过 Axios 调用后端 RESTful 接口后端按 Controller、Service、Mapper 三层组织代码并通过 JWT 完成身份校验。flowchart TD A[Vue3 前端] --|HTTP/JSON| B[Spring Boot 应用] B -- C[Controller 层] C -- D[Service 层] D -- E[Mapper 层] E -- F[(MySQL)] D -- G[(Redis)] B -- H[JWT 鉴权过滤器] H -- C3.1 分层职责Controller接收请求参数、校验入参、返回统一响应体。Service承载业务逻辑如库存扣减、订单状态流转。Mapper基于 MyBatis-Plus 完成数据访问。Common统一异常处理、响应封装、工具类与常量定义。四、数据库设计核心表围绕「用户—商品—订单—库存」四条主线展开主要表结构如下表名说明关键字段sys_user用户表id、username、password、role、phonecoffee_product咖啡商品表id、name、category_id、price、stock、originproduct_category商品分类表id、name、parent_id、sortpurchase_order采购订单表id、order_no、user_id、total_amount、statusorder_item订单明细表id、order_id、product_id、quantity、pricesupplier供应商表id、name、contact、address、ratingstock_record库存流水表id、product_id、type、quantity、create_time4.1 订单状态设计订单状态采用枚举值管理流转路径为待支付 → 已支付 → 已发货 → 已完成任一环节可进入已取消状态。public enum OrderStatus { PENDING(0, 待支付), PAID(1, 已支付), SHIPPED(2, 已发货), COMPLETED(3, 已完成), CANCELLED(4, 已取消); private final int code; private final String desc; OrderStatus(int code, String desc) { this.code code; this.desc desc; } public int getCode() { return code; } public String getDesc() { return desc; } }五、核心功能实现5.1 用户登录与鉴权登录成功后由后端签发 JWT前端将 token 存入 Pinia 与 localStorage后续请求通过请求拦截器统一携带。PostMapping(/login) public ResultLoginVO login(RequestBody Valid LoginDTO dto) { SysUser user userService.getByUsername(dto.getUsername()); if (user null || !passwordEncoder.matches(dto.getPassword(), user.getPassword())) { throw new BizException(用户名或密码错误); } String token jwtUtil.generateToken(user.getId(), user.getRole()); return Result.success(new LoginVO(token, user.getUsername(), user.getRole())); }5.2 商品分页查询GetMapping(/page) public ResultPageCoffeeProduct page(ProductQuery query) { PageCoffeeProduct page new Page(query.getPageNum(), query.getPageSize()); LambdaQueryWrapperCoffeeProduct wrapper new LambdaQueryWrapper() .like(StringUtils.hasText(query.getName()), CoffeeProduct::getName, query.getName()) .eq(query.getCategoryId() ! null, CoffeeProduct::getCategoryId, query.getCategoryId()) .orderByDesc(CoffeeProduct::getCreateTime); return Result.success(productService.page(page, wrapper)); }5.3 下单与库存扣减下单时需保证库存扣减的原子性这里使用数据库乐观锁配合事务控制避免并发超卖。Transactional(rollbackFor Exception.class) public Long createOrder(Long userId, ListOrderItemDTO items) { BigDecimal total BigDecimal.ZERO; for (OrderItemDTO item : items) { int affected productMapper.deductStock(item.getProductId(), item.getQuantity()); if (affected 0) { throw new BizException(商品库存不足 item.getProductId()); } total total.add(item.getPrice().multiply(BigDecimal.valueOf(item.getQuantity()))); } PurchaseOrder order new PurchaseOrder(); order.setOrderNo(OrderNoUtil.generate()); order.setUserId(userId); order.setTotalAmount(total); order.setStatus(OrderStatus.PENDING.getCode()); orderMapper.insert(order); orderItemService.saveBatch(order.getId(), items); return order.getId(); }update iddeductStock UPDATE coffee_product SET stock stock - #{quantity}, version version 1 WHERE id #{productId} AND stock #{quantity} /update5.4 前端购物车与下单import { defineStore } from pinia import { ref, computed } from vue export const useCartStore defineStore(cart, () { const items ref([]) const totalCount computed(() items.value.reduce((s, i) s i.quantity, 0)) const totalAmount computed(() items.value.reduce((s, i) s i.price * i.quantity, 0) ) function add(product, quantity 1) { const exist items.value.find(i i.productId product.id) if (exist) { exist.quantity quantity } else { items.value.push({ productId: product.id, name: product.name, price: product.price, quantity }) } } function clear() { items.value [] } return { items, totalCount, totalAmount, add, clear } })六、系统界面与运行效果系统主要包含以下页面登录页账号密码登录支持角色区分跳转。商品商城页分类筛选、关键词搜索、加入购物车。购物车与结算页数量调整、金额汇总、提交订单。订单管理页订单列表、状态筛选、详情查看。库存管理页库存预警、入库出库记录。数据统计页采购趋势折线图、品类占比饼图。七、总结与展望本项目以咖啡采购为业务场景完成了从商品管理、采购下单到库存联动的完整闭环验证了 Spring Boot Vue3 前后端分离架构在中型业务系统中的可行性。后续可从以下方向继续优化引入消息队列处理订单超时自动取消与库存回滚。接入对象存储支持商品图片批量上传。增加供应商评价体系与采购合同管理模块。基于采购历史数据实现智能补货推荐。