Spring Boot 3 + Vue 3 个性化定制服装订单管理系统源码前后端分离
一、项目简介
本系统是一套基于 Spring Boot 3 + Vue 3 + MySQL 的个性化定制服装订单管理平台,采用前后端分离架构。系统支持普通用户、设计师(教练端)和管理员三种角色,提供从服装定制下单、设计稿提交、订单流转、支付确认到评价反馈的全流程闭环管理,并内置即时消息沟通与数据统计看板。
二、技术栈
| 技术 | 说明 |
|---|---|
| 后端框架 | Spring Boot 3.x |
| ORM | MyBatis-Plus(含自动填充、分页插件) |
| 权限认证 | Spring Security + JWT(Token 认证,方法级权限控制 @PreAuthorize) |
| 前端框架 | Vue 3(Composition API + script setup) |
| 前端路由 | Vue Router 4(按角色动态路由守卫) |
| 状态管理 | Pinia(用户状态 store) |
| UI 组件库 | Element Plus |
| 构建工具 | Vite |
| 数据库 | MySQL(MyBatis-Plus 自动建表/映射) |
| 文件存储 | 本地文件系统(按日期分目录,UUID 重命名) |
三、功能模块
普通用户端
- 注册/登录:通过用户名、密码、邮箱、手机号注册账号,登录后获取 JWT Token 并自动跳转至工作台。
- 创建定制订单:选择服装品类(clothing_category)、面料(fabric)、颜色(color)、尺码(size 或 customSize)、工艺类型(craftIds,多选),并填写自定义图案、自定义文字、特殊要求及总价后提交订单。
- 查看我的订单:按订单状态(status)或品类(categoryId)筛选订单列表,支持分页查看。
- 确认设计稿:设计师提交设计图后,用户可确认设计(状态流转至待支付),或填写修改意见退回设计师修改。
- 支付订单:对状态为“待支付”的订单,选择支付方式(payMethod)完成支付,记录支付时间。
- 取消订单:订单未进入生产阶段(status < 3)时,填写取消原因后取消订单。
- 评价订单:订单完成后(status=6),用户可对订单进行评分(rating 1-5)并填写评价内容。
- 个人资料管理:修改昵称、头像、邮箱、手机号、专长、偏好,支持修改密码(需验证旧密码)。
- 站内消息:与设计师/管理员发起会话,查看会话列表(显示最新消息、未读数、关联订单ID),按订单筛选聊天记录。
- 浏览公开数据:首页查看轮播图(banner)、服装品类、面料、颜色、工艺类型列表。
设计师端
- 查看待接订单:查看所有状态为“待接单”的订单列表,排除自身已拒绝的订单。
- 接单/拒单:接收订单(状态流转为“设计中”),或填写拒绝原因后拒绝接单;当所有设计师均拒绝时,订单自动标记为“被拒绝”。
- 提交设计稿:对已接订单上传设计图(designImage)并填写设计备注(designRemark),提交后状态流转为“待确认”。
- 查看我的设计:按状态筛选本人负责的订单列表(设计中/待确认/生产中等)。
- 更新订单状态:对已接订单,在状态 3~6 范围内更新(如标记为生产中、已完成等)。
- 设计师统计看板:查看个人总订单数、已完成数、进行中数、待接单数、总评价数、平均评分、总收入、月收入、年收入。
- 站内消息:与用户/管理员会话,查看未读消息数,标记消息已读。
管理员端
- 用户管理:按角色(role)或关键词(用户名/昵称/邮箱)搜索用户列表,支持分页;编辑用户昵称、邮箱、手机号、状态、角色;删除用户。
- 订单管理:查看全部订单列表,按状态或订单号(orderNo)搜索,支持分页;更新订单状态(3~6 范围)。
- 管理员统计看板:查看总订单数、已完成订单数、待接单数、进行中数、完成率、总评价数、好评/中评/差评数、好评率、总用户数、总设计师数。
- 文件管理:上传图片/文件(支持指定类型),删除已上传文件。
- 站内消息:与用户/设计师会话,查看未读消息数,标记消息已读。
四、项目总结
项目技术亮点包括:采用 Spring Boot 3 + Vue 3 最新技术栈,前后端分离架构清晰;使用 Spring Security + JWT 实现细粒度方法级权限控制;MyBatis-Plus 简化数据操作;Vue Router 4 动态路由守卫实现角色隔离;内置即时消息模块和统计看板,适合作为企业级订单管理系统的二次开发基础或毕业设计实战项目。
界面展示
交付内容
本项目为完整交付,包含:
- 完整后端源码
- 完整前端源码
- 数据库初始化脚本(SQL)
- 万字项目文档(设计文档 / 论文,可作课程设计、毕业设计参考)
获取完整源码
完整前后端源码 + 数据库脚本 + 万字项目文档见 Gitee 仓库:https://gitee.com/kangxihuang/src-K110