一、项目简介最近做了一个工单系统项目采用前后端分离架构前端使用 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/...来预览或下载文件。也就是说数据在数据库文件在服务器磁盘页面里展示的是文件地址这样的设计更适合实际项目。十、项目特色总结这个项目虽然是工单系统但我觉得有几个比较实用的点前后端分离清晰用户和管理员角色分明工单流转闭环完整支持头像上传支持图片和附件上传富文本回复体验较好数据和文件分开存储结构清楚支持演示账号方便快速体验其中最核心的亮点就是富文本和附件能力。对于真实业务系统来说单纯的文字反馈往往不够用图文混排、日志附件、证据文件这些能力才更接近实际场景。十一、结语这个工单系统项目从登录、反馈提交、图片附件上传到管理员工单处理、状态流转、富文本回复基本已经形成了一个完整的业务闭环。如果你正在学习 Vue3、Spring Boot或者想做一个能真正演示的前后端分离项目这个系统会是一个比较完整的参考。如果你对这个项目感兴趣后面我也可以继续整理一下前端页面结构后端接口设计数据库表结构富文本和文件上传的实现思路如果这篇文章或者这个项目对你有帮助麻烦给个 Star 支持一下这会是我继续完善项目的最大动力。github仓库地址前端https://github.com/mxnican/workOrderFrontend后端https://github.com/mxnican/workOrderBackend有问题或者想交流实现细节的话欢迎评论区见。