当前位置：首页 > news >正文

Spring Boot 3 + Vue 3 + MySQL 工程项目流程管理系统源码前后端分离实战

news 2026/7/27 16:37:41

一、项目简介

本项目是一套基于 Spring Boot 3 + Vue 3 + MySQL 的工程项目流程管理系统，采用前后端分离架构。系统围绕工程项目全生命周期管理设计，包含普通用户端和管理员端两大角色。普通用户可以浏览项目列表、查看项目详情与进度、查阅系统公告；管理员负责用户、项目、项目类型、项目进度、公告等模块的增删改查全流程管理，并配有数据统计看板与 ECharts 图表分析功能。

二、技术栈

技术	说明
后端框架	Spring Boot 3.x
ORM	MyBatis-Plus（含分页插件）
权限控制	自定义 AuthInterceptor（拦截 /api/admin/、/api/user/、/api/common/）
前端框架	Vue 3（Composition API + setup 语法）
状态管理	Pinia（userStore 管理用户登录状态）
前端路由	Vue Router（createWebHistory 模式）
UI 组件库	Element Plus（表单、表格、对话框、上传、分页、进度条等）
图表库	ECharts（仪表盘饼图、柱状图）
构建工具	Vite
数据库	MySQL 8.x
文件上传	MultipartFile，存储至本地 uploads 目录
密码加密	MD5 工具类（Md5Util）
跨域配置	全局 CORS 允许所有来源、所有方法、携带凭证

三、功能模块

管理员端

仪表盘总览：展示项目总数、进行中项目数、已完工项目数、用户总数四个统计卡片，实时反映系统核心数据。
仪表盘图表：使用 ECharts 饼图展示项目状态分布（待审核/进行中/已完成等），柱状图展示各项目类型的项目数量。
仪表盘最新进度：展示最近 8 条项目进度记录，包含项目名称、进度标题、进度百分比、操作人、更新时间。
用户管理：分页查询用户列表，支持按用户名/昵称/手机号搜索；可新增、编辑、删除用户；编辑时可修改用户名、昵称、手机号、邮箱、头像、角色、状态，密码留空则不修改。
项目管理：分页查询项目列表，支持按项目名称/负责人搜索；可新增、编辑、删除项目；编辑时填写项目名称、类型、起止日期、预算、地点、负责人、状态、进度、封面图、描述。
项目类型管理：查询所有项目类型（按排序号正序），可新增、编辑、删除类型；删除时校验是否被项目引用，防止误删。
类型统计：展示每个类型的项目数量，用于图表数据源。
进度管理：分页查询进度记录，支持按所属项目 ID 筛选、按标题搜索；可新增、编辑、删除进度；编辑时选择所属项目、填写进度标题、当前进度百分比（滑块）、操作人、进度图片、描述。
进度自动更新项目状态：添加进度时，若进度 >= 100 自动将项目状态设为 COMPLETED，> 0 设为 IN_PROGRESS。
公告管理：分页查询公告列表，支持按标题搜索；可新增、编辑、删除公告；编辑时填写标题、发布人、封面图片、内容、状态（发布/草稿）、置顶开关。
文件上传：支持上传图片/文件，返回访问 URL，用于封面图、进度图等。
退出登录：清除 Session，跳转登录页。

普通用户端

查看项目列表：支持按类型 ID、状态、关键字搜索，按创建时间倒序排列。
查看项目详情：展示项目名称、类型、描述、封面图、起止日期、预算、地点、负责人、状态、进度等完整信息。
查看指定项目的进度记录列表：按创建时间正序排列，展示标题、描述、进度百分比、图片、操作人。
查看公告列表：仅显示已发布且状态为 1 的公告，置顶公告优先、按创建时间倒序。
查看公告详情：展示公告标题、内容、封面图、发布人、发布时间。
用户注册：填写用户名、密码、昵称、手机号，注册后角色默认为 USER，状态为正常。
用户登录：支持用户名密码登录，校验用户存在性、状态、密码，登录后 Session 存储当前用户。
快速登录：页面提供管理员/用户一键登录按钮，自动填充账号密码。
查看个人资料：获取当前登录用户信息，不返回密码。
修改个人资料：可更新昵称、手机号、邮箱、头像、密码，更新后刷新 Session。

四、项目总结

本系统技术选型主流且完整，前后端分离架构清晰，适合作为 Java Web 全栈开发的学习项目或中小型工程管理系统的二次开发基础。技术亮点包括：Spring Boot 3 与 Vue 3 的最新生态组合、MyBatis-Plus 高效 CRUD 与分页、自定义拦截器实现接口权限控制、Pinia 管理前端登录状态、ECharts 数据可视化看板、以及进度自动联动项目状态等业务逻辑。适用于工程项目管理、企业流程管理、毕业设计、课程设计等场景。