Vue3 + Spring Boot 工单系统实战：用户反馈和客服处理的完整闭环（提供gitHub仓库地址）

一、项目简介

最近做了一个工单系统项目，采用前后端分离架构，前端使用 Vue 3 + Vite + Element Plus，后端使用 Spring Boot + MySQL。

这个项目主要实现了一个完整的工单闭环流程：

• 用户登录后提交反馈
• 支持上传问题图片和附件
• 支持在回复区插入图片和附件
• 管理员查看工单、处理工单、回复用户
• 用户和管理员都可以在个人中心修改信息
• 支持头像上传到服务器
• 支持账号登录、退出登录、角色区分

这个项目不是只做了一个"展示页面"，而是把实际业务里常见的反馈、处理、回复、流转都串起来了。

---

二、技术栈

项目主要技术栈如下：

• 前端：Vue 3、Vite、Element Plus
• 后端：Spring Boot
• 数据库：MySQL
• 文件存储：本地磁盘上传
• 富文本编辑：支持图片和附件插入

项目整体结构比较清晰：

• 前端负责界面展示和交互
• 后端负责用户、反馈、工单、文件上传和数据存储
• 图片、附件等文件保存在服务器磁盘
• 工单和反馈信息保存在数据库中
  

---

三、登录与角色区分

系统提供了登录页，支持用户和管理员两种角色。

登录页除了正常输入账号密码外，还提供了演示账号按钮，方便快速体验：

• 用户账号：user / user123
• 管理员账号：admin / admin123

登录后系统会根据角色跳转到不同页面：

• 用户进入"我的反馈"
• 管理员进入"工单管理"

右上角还会显示当前登录用户的头像、昵称和下拉菜单，可以进入个人中心或者退出登录。

---

四、用户端功能

1. 我的反馈列表

用户登录后进入"我的反馈"页面，这里可以看到自己提交过的反馈列表。

页面支持：

• 按关键字搜索
• 按状态筛选
• 查看反馈编号、标题、描述摘要、状态、回复数量
• 点击某条反馈查看完整详情

整个页面是一个典型的"左侧列表 + 右侧详情"的布局，查看和操作都很方便。

2. 反馈详情

点击某条反馈后，右侧会显示详细信息，包括：

• 反馈编号
• 问题标题
• 问题描述
• 当前状态
• 问题图片
• 问题附件
• 回复记录

如果反馈还处于可回复状态，用户可以直接继续补充回复；如果已经关闭，则会自动关闭回复入口。

---

五、重点亮点：富文本图片与附件上传

这部分是我觉得最值得写出来的亮点。

很多反馈系统只支持简单的文本输入，用户表达问题时往往很困难，尤其是遇到这些场景：

• 截图需要贴出来
• 日志文件需要附上
• 文档说明需要上传
• 问题回复里需要同时包含文字、图片和附件

所以这个项目里专门做了富文本能力，让回复内容不再只是纯文字，而是可以混合：

• 文本
• 图片
• 附件

1. 富文本回复编辑器

在用户回复和管理员回复中，都可以使用富文本编辑器填写内容。

这个编辑器支持：

• 直接输入文字
• 插入图片
• 插入附件
• 发送后在详情页中直接展示

这样做的好处很明显：

• 问题描述更完整
• 沟通成本更低
• 管理员可以更快速定位问题
• 用户不用反复来回解释
  

2. 富文本里插入图片

在回复中插入图片后，图片会直接显示在正文区域里，而不是单独作为一个"文件列表"挂在旁边。

这在实际业务里特别实用，因为：

• 用户可以把截图直接贴进问题上下文中
• 管理员查看时不用再切换附件窗口
• 图文混排更接近真实工单沟通场景
  

3. 富文本里插入附件

除了图片，系统还支持在富文本里插入附件。

比如：

• 日志文件
• 说明文档
• Excel 表格
• PDF 文档

附件会以可点击的形式显示在正文中，方便用户和管理员查看或下载。

这部分比纯文本反馈更接近真实业务需求，因为很多问题不是一句话能说清的，必须配合文件一起说明。

4. 上传后的展示效果

上传完成后，系统会把图片和附件回写到内容中，后续在反馈详情页和工单详情页里都可以继续查看。

也就是说：

• 上传时先保存到服务器
• 返回文件访问地址
• 内容里存的是可访问链接
• 页面里能直接预览或点击打开

这种设计比把文件直接塞进数据库更合理，也更适合实际项目。

---

六、新建反馈功能

用户在"我的反馈"页面点击"新建反馈"，可以提交新的问题。

提交反馈时支持：

• 填写问题标题
• 填写问题描述
• 上传问题图片
• 上传问题附件
• 保存草稿
• 提交反馈

这里还有一个很方便的设计：草稿会保存在浏览器本地，用户临时离开页面后，回来还能继续编辑。

特别值得一提的是，提交反馈时不需要用户手动填写账号名称，系统会自动带上当前登录用户的昵称，减少重复操作。

---

七、个人中心功能

系统还做了个人中心页面，用户和管理员都可以进入。

个人中心支持：

• 查看账号名
• 修改昵称
• 上传头像到服务器
• 修改登录密码

其中头像不是只改一个前端显示，而是会真实上传到后端服务器，然后把头像地址保存到用户资料里。这样下一次登录、刷新页面、重新进入系统，头像都还能正常显示。

修改密码时需要输入：

• 当前密码
• 新密码
• 确认新密码

这部分比较符合真实业务场景，避免了直接改密码带来的安全问题。

---

八、管理员端功能

管理员登录后进入"工单管理"页面，可以看到所有用户提交的工单。

1. 工单统计

页面顶部会显示统计卡片，包括：

• 工单总数
• 待处理
• 处理中
• 已解决
• 已关闭

这个设计能让管理员一眼看到当前系统的处理情况。

2. 工单列表

管理员可以在列表中：

• 搜索工单标题、描述、编号或账号名称
• 按状态筛选
• 查看工单编号
• 查看标题
• 查看处理人
• 查看状态
• 查看更新时间
• 点击进入详情

3. 工单详情

工单详情页面展示的信息比较完整，包括：

• 问题描述
• 相关图片
• 相关附件
• 账号信息
• 创建和更新时间
• 回复记录

管理员在这里可以直接了解问题上下文，不需要再额外打开别的页面。

4. 状态流转和回复用户

管理员可以在工单详情中直接变更状态，例如：

• 待处理
• 处理中
• 已解决
• 已关闭

同时也可以直接回复用户，形成完整的处理闭环。

状态变更前会有确认弹窗，避免误操作。

---

九、文件和数据是怎么存的

这个部分建议一定写，因为很多读者会关心"上传的文件到底去哪了"。

1. 数据库存什么

业务数据都保存在 MySQL 中，包括：

• 用户信息
• 反馈记录
• 工单记录
• 回复记录
• 头像地址
• 图片和附件的元数据

2. 文件存什么

真正上传的图片和附件，不是直接放在数据库里，而是保存到后端服务器的本地磁盘目录中。

默认路径是：

${user.dir}/uploads

如果后端在仓库根目录启动，默认就是：

workOrderBackend/uploads

上传后会按照类型和日期分目录保存，例如：

• uploads/image/YYYY/MM/DD/...
• uploads/file/YYYY/MM/DD/...

3. 前端怎么访问

前端拿到的是后端返回的访问地址，通常通过：

• /api/files/...

来预览或下载文件。

也就是说：

• 数据在数据库
• 文件在服务器磁盘
• 页面里展示的是文件地址

这样的设计更适合实际项目。

---

十、项目特色总结

这个项目虽然是工单系统，但我觉得有几个比较实用的点：

1. 前后端分离清晰
2. 用户和管理员角色分明
3. 工单流转闭环完整
4. 支持头像上传
5. 支持图片和附件上传
6. 富文本回复体验较好
7. 数据和文件分开存储，结构清楚
8. 支持演示账号，方便快速体验

其中最核心的亮点就是富文本和附件能力。对于真实业务系统来说，单纯的文字反馈往往不够用，图文混排、日志附件、证据文件这些能力才更接近实际场景。

---

十一、结语

这个工单系统项目从登录、反馈提交、图片附件上传，到管理员工单处理、状态流转、富文本回复，基本已经形成了一个完整的业务闭环。

如果你正在学习 Vue3、Spring Boot，或者想做一个能真正演示的前后端分离项目，这个系统会是一个比较完整的参考。

如果你对这个项目感兴趣，后面我也可以继续整理一下：

• 前端页面结构
• 后端接口设计
• 数据库表结构
• 富文本和文件上传的实现思路

如果这篇文章或者这个项目对你有帮助，麻烦给个 Star 支持一下，这会是我继续完善项目的最大动力。

github仓库地址：

前端：https://github.com/mxnican/workOrderFrontend

后端：https://github.com/mxnican/workOrderBackend

有问题或者想交流实现细节的话，欢迎评论区见。