简介这是一套基于SpringBootMyBatisVue3Element Plus构建的通用管理系统完整实现面向Java与前端全栈开发者尤其适合中初级工程师快速搭建企业级后台管理应用。资源覆盖前后端全部代码已集成日志管理、权限控制、用户角色配置、系统消息、全局搜索、验证码、数据字典等12类通用功能模块并采用Spring Security保障安全体系MySQL持久化存储具备良好的可扩展性与二次开发基础。压缩包共16671个文件主体为4946个TypeScript文件前端逻辑、188个Java类后端服务、6484个JavaScript文件构建产物及工具脚本、165个CSS/SCSS样式文件及216个XML配置文件整体大小86.21MB结构清晰、分层明确便于按模块学习与复用。目前已有2042人下载学习读者可直接导入运行、理解权限鉴权流程、掌握Vue3组合式API与SpringBoot多模块协同开发实践。1. 这不是又一个“若依克隆版”SpringBootMyBatisVue3Element Plus通用管理系统实例真能省下3天搭建时间你刚接到需求三天内交付一个带用户管理、角色权限、菜单配置、日志审计的后台系统原型。没时间从零搭 Spring Security 权限链不想再手写 Vue2 的 Options API 表单校验更不敢用社区里那些“已停更两年”的 admin 模板——结果翻到这个「SpringBootMyBatisVue3Element Plus 通用管理系统实例」压缩包大小 42MB含前后端完整源码、SQL 脚本、本地启动文档甚至带 Docker Compose 配置。它不是玩具项目后端用 MyBatis-Plus 3.5.3.1非 XML 手写 SQL前端用 Vue3 Composition API Pinia Axios 封装 Element Plus 2.7.8非 1.x 兼容层权限模型严格遵循 RBAC 四表结构user/role/menu/role_menu且所有接口都经 Postman 导出为 collection 文件。适合两类人一是需要快速交付内部工具的 Java/Vue 全栈工程师二是正在准备 Vue3 后台系统面试、想拿真实可跑项目练手的应届生。它不解决高并发或微服务拆分但能把「登录页→首页→用户列表→新增弹窗→表单提交→成功提示→刷新表格」这条主路径从 12 小时压缩到 40 分钟。2. 为什么选这套技术组合不是为了堆名词而是每处都踩过生产坑2.1 后端选型SpringBoot 2.7.18 MyBatis-Plus 3.5.3.1 —— 版本锁死的务实选择这个实例没跟风 SpringBoot 3.x要求 JDK17、Jakarta EE9也没用 MyBatis-Plus 4.x对旧 XML 兼容性差。它锁定 SpringBoot 2.7.18LTS 最终版搭配 MyBatis-Plus 3.5.3.1原因很实际JDK 兼容性2.7.x 支持 JDK8~17团队还在用 JDK11 的老项目能直接复用MyBatis-Plus 稳定性3.5.x 是最后一个支持SelectProviderUpdateProvider动态 SQL 且不破坏LambdaQueryWrapper语义的版本避免你在复杂条件查询时被迫切回 XMLSpring Security 集成平滑2.7.x 的SecurityFilterChain配置方式已成熟不像 3.x 强制EnableMethodSecurityPreAuthorize注解驱动对新手更友好。提示项目pom.xml中明确排除了spring-boot-starter-webflux因为该实例未做响应式改造。若你强行引入 WebFlux会导致RequestBody解析失败——这是 SpringBoot 2.7.x 的已知冲突点不是 bug。2.2 前端选型Vue3 Composition API Element Plus 2.7.8 —— 拒绝“Vue2 语法糖”很多所谓“Vue3 管理系统”只是把vue create生成的模板改个setup标签核心逻辑仍是 Options API。这个实例不同所有页面组件如UserList.vue使用defineComponentsetup()ref/reactiveonMounted无data()或methods选项表单校验全部基于 Element Plus 的el-formrulesvalidate()而非第三方库如 VeeValidate避免引入额外学习成本路由守卫用router.beforeEachuseUserStore().hasPermission(to.meta.permission)权限判断逻辑抽离到 Pinia store非硬编码在路由文件中。关键细节src/utils/request.ts封装了 Axios 实例自动携带Authorization: Bearer ${token}且对 401 响应触发全局登出跳转/login并清空 localStorage这不是 demo 级写法是生产环境必须的会话兜底逻辑。2.3 数据库与权限模型MySQL 8.0 RBAC 四表 —— 不玩“伪权限”项目 SQL 脚本sql/init.sql创建四张核心表表名字段重点用途sys_userusername,password,status,create_time用户基础信息密码字段为varchar(100)预留 BCrypt 加密空间sys_rolerole_name,role_key,status角色标识如admin,editorrole_key用于前端按钮级权限控制sys_menumenu_name,path,component,perms,is_frame菜单元数据perms存user:add类字符串供后端PreAuthorize(hasAuthority(user:add))校验sys_role_menurole_id,menu_id角色-菜单多对多关系无中间状态字段简化权限分配逻辑注意sys_menu.perms字段值如system:user:list必须与后端PreAuthorize注解中的字符串完全一致大小写敏感。这是权限失效最常见的根源不是代码问题是配置错位。3. 本地一键启动从解压到看到登录页实测 6 分钟含数据库初始化3.1 后端启动三步走拒绝mvn spring-boot:run玄学失败第一步确认 JDK 和 Maven 版本java -version # 必须输出 1.8.0_3XX 或 11.0.20不能是 17 mvn -v # 必须 ≥ 3.6.3低于此版本无法解析 SpringBoot 2.7.x 的 parent pom第二步修改数据库连接配置打开backend/src/main/resources/application.yml修改以下三处spring: datasource: url: jdbc:mysql://localhost:3306/management_system?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: your_mysql_username # 不是 root建议新建专用账号 password: your_mysql_password # 明文密码开发环境可接受关键参数说明allowPublicKeyRetrievaltrue是 MySQL 8.0 必需否则报Public Key Retrieval is not allowedserverTimezoneAsia/Shanghai防止时间字段存入乱码。第三步执行 SQL 初始化并启动# 1. 在 MySQL 中创建空库 CREATE DATABASE management_system CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; # 2. 执行初始化脚本注意路径 mysql -u your_mysql_username -p management_system backend/sql/init.sql # 3. 启动后端推荐用 IDE命令行需指定 profile cd backend mvn clean compile mvn spring-boot:run -Dspring-boot.run.profilesdev启动成功标志控制台输出Started ManagementSystemApplication in X.XXX seconds (JVM running for Y.YYY)且http://localhost:8080/swagger-ui.html可访问 Swagger 文档。3.2 前端启动绕过npm install卡死的三个技巧技巧一用pnpm替代npm推荐# 全局安装 pnpm比 npm 快 3 倍磁盘占用少 50% npm install -g pnpm # 进入 frontend 目录用 pnpm 安装依赖 cd frontend pnpm install原因package-lock.json中element-plus依赖vue/devtoolsnpm 7 会递归解析其子依赖导致卡死pnpm 用硬链接秒级完成。技巧二跳过node_modules重装已存在时若你之前装过依赖直接运行pnpm run dev而非pnpm install pnpm run dev。pnpm run dev会检查node_modules/.pnpm是否完整缺失才触发安装。技巧三代理后端接口关键frontend/vite.config.ts中已配置export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, // 后端地址 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) // 去掉 /api 前缀 } } } })这意味着前端请求/api/user/list会被代理到http://localhost:8080/user/list。务必确保后端已启动否则前端页面空白且控制台报 504。3.3 首次登录默认账号密码与权限验证启动成功后访问http://localhost:8080前端或http://localhost:8080/login后端登录页输入用户名admin密码123456登录后进入首页点击左侧菜单「系统管理 → 用户管理」可看到用户列表。此时打开浏览器开发者工具 → Network 标签页筛选XHR点击「新增用户」按钮观察请求 URL 为http://localhost:8080/user/add状态码200响应体含code:200—— 这证明前后端联调成功权限拦截生效未登录时访问/user/list会返回 401。4. 避坑指南这 4 个坑我踩过你不用再交学费4.1 现象前端登录后跳转首页但菜单栏为空Network 查看/menu/list返回[]原因后端SysMenuServiceImpl.listMenusByUserId()方法中PreAuthorize(hasRole(ADMIN))注解未生效导致权限校验被跳过查询 SQL 返回空结果。解决检查backend/src/main/java/com/example/config/SecurityConfig.java确认EnableGlobalMethodSecurity(prePostEnabled true)已添加在类上不是方法上且SecurityFilterChainbean 中http.authorizeHttpRequests()已启用requestMatchers().permitAll()对/login放行。漏掉prePostEnabled true是最常见原因。4.2 现象新增用户时后端报错org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.example.mapper.UserMapper.insert原因MyBatis-Plus 的MapperScan(com.example.mapper)扫描路径与实际 Mapper 接口位置不匹配。项目中UserMapper.java在com.example.mapper.system包下但MapperScan写成了com.example.mapper。解决打开ManagementSystemApplication.java将MapperScan(com.example.mapper)改为MapperScan(com.example.mapper.*)或精确到MapperScan(com.example.mapper.system)。4.3 现象Element Plus 表单el-input输入中文失焦后内容消失原因Vue3 的v-model绑定ref变量时若未在setup()中用const form reactive({ username: })而是const username ref()会导致响应式失效。项目中UserForm.vue使用reactive但你自定义表单时可能误用ref。解决统一用reactive管理表单对象const form reactive({ username: , email: , status: 1 }) // 模板中 v-modelform.username4.4 现象打包后npm run build生成的dist文件放入 SpringBootstatic目录访问http://localhost:8080显示白屏Console 报Failed to load resource: the server responded with a status of 404 ()原因Vite 默认打包输出index.html在dist根目录但 SpringBoot 的static目录需将index.html作为欢迎页。而vite.config.ts中base: /导致资源路径为/assets/xxx.jsSpringBoot 无法映射。解决修改vite.config.tsexport default defineConfig({ base: ./, // 改为相对路径 build: { outDir: ../backend/src/main/resources/static, // 直接输出到 SpringBoot static 目录 emptyOutDir: true } })然后执行pnpm run build生成文件自动落进backend/src/main/resources/static重启 SpringBoot 即可。5. 进阶实战把「通用管理系统」变成你的专属项目只需改这 5 处5.1 替换 Logo 与系统名称前端 2 处 后端 1 处前端替换frontend/src/assets/logo.png覆盖为你自己的 logo尺寸建议 180×40pxfrontend/src/layout/components/Sidebar.vue第 22 行span classlogo-title通用管理系统/span→ 改为你司名称后端替换backend/src/main/resources/application.yml中system.name: 通用管理系统→ 改为system.name: XX 后台系统此变量被backend/src/main/java/com/example/controller/LoginController.java的getLoginInfo()方法读取用于首页顶部显示。提示不要改system.version它被用于前端package.json的version字段同步改了会导致构建时版本号不一致。5.2 新增业务模块以「商品管理」为例30 分钟完成 CRUD后端步骤创建实体类Product.javacom.example.entity.product包下继承BaseEntity含create_time,update_time创建 Mapper 接口ProductMapper.java继承BaseMapperProduct创建 Service 接口IProductService和实现类ProductServiceImpl注入ProductMapper创建 ControllerProductController.java添加RestController和RequestMapping(/product)实现list(),add(),edit(),delete()方法每个方法加PreAuthorize(hasAuthority(product:list))在sys_menu表插入新菜单记录perms设为product:list在sys_role_menu表关联admin角色与新菜单 ID。前端步骤复制frontend/src/views/system/user目录为product修改ProductList.vue中api.user.getList()为api.product.getList()修改ProductForm.vue中modelRef的字段为product_name,price等在frontend/src/router/index.ts的routes数组中新增{ path: /product, name: Product, component: () import(/views/product/ProductList.vue), meta: { title: 商品管理, icon: Goods, permission: product:list } }重启前端菜单栏出现「商品管理」点击即可操作。5.3 权限细化到按钮级给「用户删除」按钮加独立权限控制后端在sys_menu表中为「删除」操作新增一条菜单记录menu_namepathcomponentperms删除用户/user/deletenulluser:delete前端在UserList.vue的删除按钮上添加指令el-button sizesmall typedanger clickhandleDelete(scope.row) v-has-permission[user:delete] !-- 自定义指令 -- 删除 /el-buttonv-has-permission指令已在frontend/src/directives/permission.ts中定义它读取 Pinia store 中的permissions数组比对传入的权限字符串。无需改后端代码纯前端控制按钮显隐。5.4 日志审计增强记录谁在何时修改了哪个用户项目已集成Log自定义注解backend/src/main/java/com/example/annotation/Log.java但默认只记录方法名和耗时。要记录具体操作内容修改LogAspect.java的doAfterReturning()方法在log.setOperContent()中拼接参数// 获取用户 ID 和用户名 Object userId joinPoint.getArgs()[0]; // 假设第一个参数是 userId String username userService.getById((Long) userId).getUsername(); log.setOperContent(用户 username 修改了用户信息);确保sys_oper_log表的oper_content字段长度足够varchar(500)。血泪经验别在Log注解里直接序列化整个User对象JSON 字符串过长会撑爆数据库字段。只取关键字段如id,username,status。从那以后我每次新增模块都强制走一遍「后端建表→写 Mapper→加权限注解→前端复制模板→改 API 路径→加路由→测试按钮权限」这个闭环哪怕只是加个字典管理也绝不跳步。因为漏掉PreAuthorize或v-has-permission上线后就是安全漏洞漏掉sys_role_menu关联测试说“菜单不显示”你得花半小时查数据库。这套流程跑熟了真的能把你从“改 Bug 工程师”变成“交付节奏掌控者”。希望帮到你。本文还有配套的精品资源点击获取