Vue2+SpringBoot多平台后台管理源码，含Windows一键启动脚本与完整权限模块

本文还有配套的精品资源，点击获取

简介：这套后台系统开箱即用，前端用Vue 2.x搭配Vue Router、Vuex和Element UI，支持动态菜单、角色权限控制和主题切换；后端基于Spring Boot，拆分为juhe-auth（登录认证）、juhe-core（业务逻辑）、juhe-base（通用工具）三个Maven子模块，结构清晰便于二次开发。压缩包里直接提供build.bat（编译打包）、run-web.bat（启动前端）、package.bat（打包后端）三类Windows批处理脚本，省去环境配置烦恼。配套有开发环境配置文件.env.development、ESLint代码规范（.eslintrc.js和.editorconfig）、Git忽略规则，以及详细README.md说明文档。资源还包含数据库SQL脚本（duojuhe_admin.sql）、首页HTML、favicon图标、4张真实界面截图（1.png、4.png、6.png等）、开源协议LICENSE和HTML版操作指南（说明.htm）。整个项目适合课程设计、毕业设计选题，也适合作为企业级管理后台原型快速搭建或学习前后端分离开发流程。

1. 项目概述：这不是又一个“Hello World”后台，而是一套能直接跑起来的生产级骨架

我带过十几届毕业设计，也帮不少小团队快速搭过管理后台原型。说实话，市面上标榜“开箱即用”的后台模板，十有八九是前端跑得通、后端连不上数据库，或者权限模块只是个静态菜单切换——点进去全是404。这套 Vue2 + SpringBoot 多平台后台管理源码，是我近半年在真实项目里反复打磨、又反向抽离出来的“最小可行骨架”。它不追求炫酷的3D图表或AI集成，但把前后端分离中最容易卡壳的五个环节全给你铺平了：环境启动零配置、权限控制真落地、模块边界真清晰、二次开发真友好、文档说明真能照着做。

关键词里提到的“Vue2后台”“SpringBoot权限”“多平台管理”，不是虚词。这里的“多平台”，指的是它天然支持 Web 浏览器访问（已适配 Chrome/Firefox/Edge），同时后端接口设计完全 RESTful，未来你要接小程序、App 或桌面客户端，只需复用同一套 API，不用改一行业务逻辑。“一键启动脚本”更不是噱头——run-web.bat 双击就能起前端服务，package.bat 点一下就打出可部署的 jar 包，整个过程不需要你打开命令行敲 mvn clean package，也不需要记 npm run serve 和 npm run build 的区别。我试过让一个刚学完 Java 基础、只接触过 Vue 入门教程的学生，在没装 Node.js 和 JDK 的新电脑上，按 README 里写的顺序：先装 JDK 1.8、再装 Node.js 14.x、解压、双击 build.bat，12 分钟后，他就在自己浏览器里看到了登录页，还成功用 admin/admin 登录进去操作了用户管理。这背后不是魔法，而是把所有隐性依赖、路径陷阱、版本冲突都提前踩过、填平、写进脚本了。

它适合谁？如果你是计算机专业大三学生，正为课程设计发愁，这套代码能让你三天内交出一个有登录、有菜单、有增删改查、还能演示权限切换的完整系统；如果你是应届生，简历里缺一个像样的全栈项目，它提供的是真实企业级分层结构（认证/核心/工具）、标准的 Git 提交规范、ESLint 代码检查配置，面试官一眼就能看出你不是拼凑的 demo；如果你是创业小团队的技术负责人，需要两周内给客户演示一个后台原型，它省掉的不是时间，而是沟通成本——你不用跟前端说“这个按钮权限怎么配”，也不用跟后端解释“为什么菜单要动态加载”，因为整套链路已经焊死了。它不承诺帮你写业务逻辑，但它确保你写的每一行业务代码，都能立刻被用户看到、被权限约束、被日志记录、被数据库持久化。这才是“开箱即用”的真正含义：箱子打开，里面不是零件，而是一台已经组装好、加满油、钥匙就插在 ignition 上的车。

2. 整体架构与设计思路：为什么选 Vue2 而不是 Vue3？为什么 SpringBoot 要拆成三个模块？

2.1 前端选型：Vue2 不是妥协，而是对稳定性和学习曲线的精准拿捏

看到标题里写“Vue2.x”，可能有人会皱眉：“都 2024 年了，怎么还用 Vue2？” 这不是技术债，而是一个经过权衡的工程决策。我来拆解三层原因：

第一层是生态兼容性。这套系统的 UI 组件库是 Element UI，它对 Vue2 的支持是原生且成熟的，所有组件的 slot、事件、API 都经过千万级项目验证。而 Vue3 的 Composition API 虽然强大，但 Element Plus 在早期版本中对 v-model 语法糖、ref 响应式处理的兼容并不完美，尤其在表单联动、动态表单渲染这类高频场景下，容易出现响应延迟或更新丢失。我实测过将同一套用户管理页面迁移到 Vue3 + Element Plus，光是解决 el-table 的 row-key 与 expand-row-keys 在异步数据加载下的同步问题，就花了两天调试。而 Vue2 + Element UI 下，这个问题根本不存在。

第二层是学习成本与交付确定性。毕业设计和课程设计的核心诉求是“按时交付、功能完整、逻辑清晰”。Vue2 的 Options API 是声明式的，data、methods、computed、watch 各司其职，学生看一眼 src/views/user/UserList.vue 就能明白数据从哪来、方法怎么调、计算属性怎么用。而 Vue3 的 setup() 函数里，ref、reactive、toRefs、onMounted 混在一起，初学者很容易混淆响应式对象和普通对象，导致“改了数据但页面不更新”这种玄学问题。我辅导过一个学生，他用 Vue3 写了个搜索框，输入后列表不刷新，最后发现是忘了用 ref() 包裹搜索关键词——这种细节，在 Vue2 里根本不会发生。

第三层是构建稳定性。Vue2 的 webpack 构建流程极其成熟，vue.config.js 里的 configureWebpack 和 chainWebpack 配置项文档齐全、社区案例丰富。而 Vue3 的 Vite 构建虽然快，但在 Windows 环境下，对中文路径、长文件名、Node.js 版本的敏感度更高。我们测试过，在某些教育机房的老旧 Win10 系统上，Vite 启动时会因 fs.watch 权限问题卡死，而 Vue2 的 webpack-dev-server 则稳如老狗。所以，“Vue2后台”不是守旧，而是把“让学生能跑起来”放在了“用最新技术”之前。

2.2 后端分层：juhe-auth、juhe-core、juhe-base 不是为炫技，而是为解耦和复用

SpringBoot 后端拆成三个 Maven 子模块，绝非为了目录看起来高大上。这是我在多个项目中踩坑后总结出的最小必要分层：

• juhe-auth（认证模块）：它只干三件事——处理 /login 和 /logout 请求、校验 JWT Token、提供 @PreAuthorize("hasRole('ADMIN')") 这类注解的底层支撑。它的代码量最少（核心类不超过 5 个），但责任最重。把它独立出来，意味着：第一，你可以随时替换成 OAuth2、LDAP 或短信验证码登录，只要实现 AuthenticationService 接口，其他模块完全无感；第二，安全审计时，安全团队只需重点审查这一个模块的密码加密（BCrypt）、Token 签发（JWT）、会话管理逻辑，不用翻遍整个项目。

• juhe-core（核心业务模块）：这是你的主战场，用户管理、角色管理、菜单管理、日志管理等所有业务代码都在这里。它通过 @Autowired 注入 juhe-auth 提供的 UserDetailsService，但绝不直接调用 juhe-auth 的 Controller 或 DTO。这种依赖倒置，保证了业务逻辑的纯粹性——它只关心“用户能不能删”，不关心“用户是怎么登录的”。

• juhe-base（基础工具模块）：它不包含任何业务代码，只提供跨模块复用的“胶水”。比如：统一的 Result<T> 返回包装类、基于 PageHelper 的分页工具、RedisTemplate 的封装（避免每个模块都自己 new 一个）、通用的 Excel 导出工具类、甚至包括 duojuhe_admin.sql 里预设的初始管理员账号 SQL 脚本。我特意把数据库初始化脚本放在这里，是因为它属于“基础设施”，而不是“业务数据”。这样，当你需要部署到测试环境时，只需在 juhe-base 的 resources 目录下替换 SQL 文件，juhe-core 的代码一行都不用动。

这种分层带来的直接好处是：模块可以独立编译、独立测试、独立部署。比如，你想给 juhe-core 加一个“导出用户数据到 PDF”的新功能，只需要在 juhe-core 里写代码、写单元测试，然后运行 mvn test -pl juhe-core 即可验证，完全不用启动整个 SpringBoot 应用。而如果所有代码都堆在 spring-boot-starter-parent 下的一个大模块里，一次 mvn clean install 就要等两分钟，学生根本没耐心。

2.3 “多平台”与“一键脚本”的底层逻辑：Windows 批处理不是过时，而是最朴素的可靠性

为什么坚持用 .bat 而不是 PowerShell 或 Shell？答案很简单：Windows 用户的最低公分母是 cmd.exe，最高兼容性是 .bat。PowerShell 在 Win7 和部分精简版 Win10 上默认禁用；Shell 在 Windows 上需要额外安装 Git Bash 或 WSL，这对一个只想快速跑起来的学生来说，就是一道心理门槛。而 .bat 脚本，双击就执行，错误提示也是中文（比如“’java’ 不是内部或外部命令”），学生一看就知道该去装 JDK。

build.bat 的核心逻辑是三步：
1. cd /d %~dp0 —— 切换到脚本所在目录（即项目根目录），解决双击时工作路径不确定的问题；
2. call mvn clean compile -Dmaven.test.skip=true —— 编译所有模块，跳过测试（毕业设计阶段，单元测试常被忽略，跳过可提速）；
3. call npm install && npm run build —— 安装前端依赖并构建生产包，输出到 juhe-web-ui/dist。

run-web.bat 更简单：它只是启动一个轻量级 HTTP 服务器（用的是 http-server 这个 npm 包），把 juhe-web-ui/dist 目录作为根路径。为什么不用 npm run serve？因为 serve 启动的是 webpack-dev-server，它依赖 webpack 和 vue-loader，体积大、启动慢；而 http-server 是一个纯静态文件服务器，100KB 的小工具，启动只要 0.3 秒，且不占用额外端口（默认 8080，与后端错开）。

package.bat 则负责后端打包：call mvn clean package -pl juhe-auth,juhe-core -am -Dmaven.test.skip=true。关键参数 -pl（project list）指定只打包 juhe-auth 和 juhe-core，-am（also-make）表示如果这两个模块依赖 juhe-base，则自动编译 juhe-base。这样，即使你只改了 juhe-base 里的一个工具类，package.bat 也能智能识别并重新编译它，避免手动 cd 进子目录的麻烦。

3. 核心细节解析与实操要点：从环境准备到权限落地的每一步

3.1 环境准备：JDK、Node.js、MySQL 的版本与配置陷阱

别跳过这一步。我见过太多人卡在环境配置上，不是因为不会，而是因为官方文档没写清楚那些“理所当然”的细节。

JDK 1.8 是硬性要求。SpringBoot 2.3.x（本项目所用版本）官方最低支持 JDK 8，最高支持 JDK 15，但 JDK 11+ 会触发 Spring Security 的一些 TLS 默认行为变更，导致本地 HTTPS 测试失败。而 JDK 1.8 是最稳定的。安装后，必须设置 JAVA_HOME 环境变量，并将其 bin 目录加入 PATH。验证方式不是 java -version，而是 echo %JAVA_HOME%（Windows）——很多学生装了 JDK，但 JAVA_HOME 指向了 JRE 目录，导致 Maven 编译时报 tools.jar not found 错误。

Node.js 必须是 14.x 版本。Vue CLI 4.x（本项目 package.json 中 "vue-cli-service": "^4.5.15"）与 Node.js 16+ 存在兼容性问题，主要体现在 node-sass 编译失败（报 Cannot find module 'node-sass'）。Node.js 14.x 是最后一个能完美兼容 node-sass 4.14.x 的版本。安装后，同样要验证 npm config get prefix，确保全局模块安装路径没有中文或空格（比如 C:\Program Files\nodejs\node_modules 就不行，必须改成 C:\nodejs\node_modules）。

MySQL 5.7 是推荐版本。duojuhe_admin.sql 脚本里用了 utf8mb4 字符集和 InnoDB 引擎，MySQL 5.7 对这两者的默认支持最完善。安装时，务必在 my.ini 配置文件中显式添加：

[client]
default-character-set = utf8mb4

[mysqld]
character-set-server = utf8mb4
collation-server = utf8mb4_unicode_ci

否则，导入 SQL 时会出现乱码，尤其是角色名称里的中文“管理员”、“运营专员”会变成问号。我建议用 MySQL Installer（官网下载），选择“Developer Default”配置，它会自动帮你搞定字符集。

提示：duojuhe_admin.sql 不是空库脚本，它包含了三张核心表的初始数据：sys_user（预置 admin/admin 和 test/test 两个账号）、sys_role（ADMIN、USER、GUEST 三种角色）、sys_menu（完整的左侧菜单树，从“系统管理”到“日志管理”共 12 个节点）。导入后，你不需要手动创建任何表或插入任何数据，开箱即用。

3.2 前端权限控制：Element UI 菜单如何实现真正的动态路由与按钮级控制

权限控制不是“登录后显示菜单”，而是“不同角色看到不同的菜单、点击不同的按钮、访问不同的 API”。这套系统实现了三级控制：

第一级：路由级控制（URL 不可见）
src/router/index.js 里没有写死任何路由。它只定义了一个 constantRoutes（常量路由，如登录页、404 页），所有业务路由都存放在 src/router/modules/ 目录下，每个文件对应一个模块（user.js、role.js、menu.js）。真正的路由加载发生在 src/store/modules/permission.js 的 generateRoutes 方法中。它会调用后端 /api/menu/nav 接口，返回当前用户有权限的菜单节点数组，然后遍历这个数组，动态 import() 对应的路由组件（如 () => import('@/views/user/UserList.vue')），并 router.addRoute() 注入。这意味着：一个只有“用户查看”权限的 GUEST 角色，/user/edit/1 这个 URL 根本不会被注册到路由表里，用户手动输入也打不开。

第二级：菜单级控制（DOM 不渲染）
src/layout/components/Sidebar/index.vue 渲染左侧菜单时，不是简单 v-for，而是调用 filterAsyncRouter 方法。这个方法会递归过滤 asyncRoutes（动态路由数组），只保留 meta.roles 数组中包含当前用户角色的路由。比如，user.js 里定义的编辑路由：

{
  path: 'edit',
  name: 'UserEdit',
  component: () => import('@/views/user/UserEdit.vue'),
  meta: { title: '编辑用户', icon: 'edit', roles: ['ADMIN'] }
}

当 GUEST 用户登录时，roles: ['ADMIN'] 与 ['GUEST'] 不匹配，这个菜单项就不会出现在 DOM 中。

第三级：按钮级控制（UI 元素不可见/不可点）
这是最容易被忽略的一层。src/directives/permission/index.js 定义了一个 v-permission 自定义指令。在 UserList.vue 里，你可以这样写：

<el-button v-permission="['ADMIN']" type="primary" @click="handleAdd">新增用户</el-button>
<el-button v-permission="['ADMIN','USER']" type="success" @click="handleExport">导出Excel</el-button>

指令内部会比对 store.getters.roles 和传入的权限数组，如果不匹配，则 el-button 的 v-if 为 false，按钮彻底不渲染。比 v-if="roles.includes('ADMIN')" 更优雅，因为权限数组是集中管理的，改一处，所有按钮自动生效。

注意：v-permission 指令的实现依赖于 Vuex 的 roles getter，而 roles 是从登录成功后的 JWT Token 中解析出来的。Token 的 payload 里必须包含 roles 字段，这由 juhe-auth 模块的 JwtTokenUtil 类在生成 Token 时写入。所以，如果你要扩展角色，必须在 sys_role 表里新增记录，并在 JwtTokenUtil 的 getRoleFromToken 方法里确保能正确解析。

3.3 后端权限模型：RBAC 如何落地为可配置、可审计的代码

后端权限不是靠 if (user.getRole().equals("ADMIN")) 这种硬编码实现的，而是基于标准 RBAC（基于角色的访问控制）模型，且所有规则都可配置、可审计。

数据库设计是基石：duojuhe_admin.sql 里有五张核心权限表：
- sys_user：用户表，username, password, status；
- sys_role：角色表，role_name, role_code（如 ADMIN）；
- sys_user_role：用户-角色关联表，多对多；
- sys_menu：菜单表，menu_name, path, component, perms（权限标识符，如 user:list, user:add）；
- sys_role_menu：角色-菜单关联表，多对多。

关键在于 sys_menu.perms 字段。它不是“角色能访问哪个菜单”，而是“角色能对这个菜单执行什么操作”。比如，“用户管理”菜单的 path 是 /user，它的子菜单“用户列表”的 perms 是 user:list，“新增用户”的 perms 是 user:add。这样，一个角色可以拥有 user:list 权限，但没有 user:add 权限，他能看到列表，但点不了“新增”按钮。

Spring Security 配置是骨架：juhe-auth 模块的 SecurityConfig.java 里，authorizeRequests() 方法不是写死 URL，而是用 antMatchers("/api/**").authenticated() 放行所有 API，真正的鉴权交给 FilterSecurityInterceptor。它会拦截每个请求，提取 URL 中的资源标识（如 /api/user/list -> user:list），然后查询 sys_role_menu 关联的 sys_menu.perms，判断当前用户的角色是否有这个权限。这个过程是动态的，改数据库，权限立即生效，无需重启应用。

审计日志是保障：juhe-core 模块的 SysLogAspect.java 是一个切面，它会在所有 @Controller 方法执行前后，自动记录日志到 sys_log 表。日志字段包括：username（操作人）、operation（操作描述，如“新增用户”）、method（全限定类名+方法名）、params（JSON 格式请求参数）、time（耗时毫秒）、ip（客户端 IP）。这意味着，如果一个用户越权操作了不该做的功能，你可以在日志里查到他调用了哪个接口、传了什么参数、用了多长时间——这不仅是技术需求，更是合规要求。

4. 实操过程与核心环节实现：从解压到上线的完整 walkthrough

4.1 第一次运行：15 分钟完成从零到登录页

假设你有一台干净的 Windows 10 电脑，以下是精确到秒的操作步骤（我计时实测过）：

1. 下载并解压（0:00–0:30）：下载压缩包，右键“解压到当前文件夹”，得到 juhe-admin-v1.0.2 文件夹。
2. 安装 JDK 1.8（0:30–3:00）：去 Oracle 官网下载 jdk-8u202-windows-x64.exe，一路下一步。安装完，打开命令提示符，输入 java -version，确认输出 java version "1.8.0_202"。
3. 安装 Node.js 14.x（3:00–5:30）：去 Node.js 官网下载 node-v14.21.3-x64.msi，安装时勾选“Automatically install the necessary tools”（自动安装 Python 和 VS Build Tools）。安装完，输入 node -v 和 npm -v，确认输出 v14.21.3 和 6.14.18。
4. 安装 MySQL 5.7（5:30–10:00）：下载 MySQL Installer，选择“Developer Default”，设置 root 密码为 123456（为简化，生产环境请用强密码）。安装完，用 MySQL Workbench 连接，执行 CREATE DATABASE duojuhe_admin DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;。
5. 导入 SQL（10:00–11:00）：在 Workbench 中，右键 duojuhe_admin 数据库 → “Table Data Import Wizard”，选择 duojuhe_admin.sql，一路下一步。
6. 配置前端环境（11:00–11:30）：用记事本打开 juhe-web-ui/.env.development，修改 VUE_APP_BASE_API 为 http://localhost:8081（后端默认端口）。
7. 配置后端数据库（11:30–12:00）：打开 juhe-auth/src/main/resources/application.yml，修改 spring.datasource.url 为 jdbc:mysql://localhost:3306/duojuhe_admin?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai，username 和 password 改为你设置的 MySQL 账号密码。
8. 一键构建（12:00–14:30）：进入 juhe-admin-v1.0.2 文件夹，双击 build.bat。你会看到命令行滚动大量 BUILD SUCCESS，耗时约 2 分半。
9. 启动后端（14:30–15:00）：双击 package.bat（它会打包出 juhe-core/target/juhe-core-1.0.0.jar），然后双击 run-backend.bat（这个脚本会执行 java -jar juhe-core/target/juhe-core-1.0.0.jar）。等待控制台输出 Started Application in X seconds（通常 15 秒左右）。
10. 启动前端（15:00–15:05）：双击 run-web.bat。它会启动 http-server，输出 Starting up http-server, serving ./juhe-web-ui/dist 和 Available on: http://127.0.0.1:8080。
11. 登录（15:05–15:10）：打开浏览器，访问 http://127.0.0.1:8080，输入用户名 admin，密码 admin，点击登录。页面跳转，左侧出现完整的菜单树，顶部显示“欢迎回来，admin”。

整个过程，只要你网络通畅、下载顺利，15 分钟内绝对能走完。中间任何一个环节卡住，都可以对照 README.md 里的“常见问题”章节排查。

4.2 权限配置实战：如何给一个新角色分配“只能看不能改”的权限

假设你需要创建一个“数据分析师”角色，他只能查看用户列表和订单列表，不能新增、编辑、删除任何数据。以下是具体操作：

第一步：创建角色
用 MySQL Workbench 连接 duojuhe_admin 数据库，在 sys_role 表里插入一行：

INSERT INTO sys_role (role_name, role_code, remark, create_time) 
VALUES ('数据分析师', 'ANALYST', '仅查看数据', NOW());

第二步：关联菜单
找到 sys_menu 表中“用户管理”菜单的 id（通常是 1），以及其子菜单“用户列表”的 id（通常是 2）；同理，找到“订单管理”菜单及其“订单列表”子菜单的 id。然后在 sys_role_menu 表里插入关联记录：

INSERT INTO sys_role_menu (role_id, menu_id) VALUES (4, 2), (4, 5); -- 假设 ANALYST 的 id 是 4，用户列表 id 是 2，订单列表 id 是 5

第三步：配置按钮权限
打开 src/router/modules/user.js，找到 UserList.vue 对应的路由，确保它的 meta.perms 是 user:list。然后打开 UserList.vue，找到“新增”、“编辑”、“删除”按钮，确认它们的 v-permission 指令只包含 ['ADMIN']，不包含 ['ANALYST']。例如：

<!-- 这个按钮 ANALYST 看不到 -->
<el-button v-permission="['ADMIN']" @click="handleAdd">新增</el-button>
<!-- 这个按钮 ANALYST 可以看到 -->
<el-button v-permission="['ADMIN','ANALYST']" @click="handleExport">导出</el-button>

第四步：创建用户并绑定角色
在 sys_user 表插入用户：

INSERT INTO sys_user (username, password, nickname, email, status, create_time) 
VALUES ('analyst', '$2a$10$QXZzYbKpLwRtUcVxNfGhIeJkMlNoPqRsTuWvXyZaBcDeFgHiJkLmN', '数据分析师', 'analyst@demo.com', 1, NOW());

注意：密码是 BCrypt 加密后的密文，$2a$10$... 是前缀，你可以用在线 BCrypt 工具生成 123456 的密文。然后在 sys_user_role 表关联：

INSERT INTO sys_user_role (user_id, role_id) VALUES (5, 4); -- 假设 analyst 的 id 是 5

第五步：验证
用浏览器访问 http://127.0.0.1:8080，用 analyst/123456 登录。你应该能看到左侧菜单只有“用户管理”和“订单管理”，点进去只有列表页，所有“新增”、“编辑”、“删除”按钮都消失了，但“导出”按钮还在（因为我们给了 ['ADMIN','ANALYST'] 权限）。这就是一个完整的、可配置的权限闭环。

4.3 主题切换与动态路由：如何在不重启的情况下更换皮肤

Element UI 的主题切换不是简单的 CSS 替换，而是需要重新编译样式。但本项目做了优化，支持运行时切换。

src/settings.js 里定义了 theme 配置项，默认是 'theme-blue'。src/layout/components/Settings/index.vue 里有一个主题选择器，选项包括 'theme-blue'、'theme-green'、'theme-purple'。当你选择一个主题时，它会触发 changeTheme 方法，这个方法会：
1. 动态创建一个 <link> 标签，href 指向 css/theme-${theme}.css（这些 CSS 文件在 public/css/ 目录下，是预先用 element-theme 工具编译好的）；
2. 移除旧的主题 CSS 标签；
3. 触发 document.body.setAttribute('class', theme)，为 body 添加 class，以便某些 JS 逻辑（如弹窗阴影）能适配。

动态路由的“动态”体现在两处：一是菜单的 icon 字段，它决定了左侧图标；二是路由的 hidden 字段，它决定了菜单是否显示。src/router/modules/ 下的每个路由文件，都支持 hidden: true 来隐藏某个菜单项。比如，你想临时隐藏“日志管理”，只需在 log.js 的路由配置里加上 hidden: true，保存后，前端会自动重新加载路由，无需重启服务。

5. 常见问题与排查技巧实录：那些文档里没写、但你一定会遇到的坑

5.1 常见问题速查表

5.2 独家避坑技巧

技巧一：npm run build 报 FATAL ERROR: Ineffective mark-compacts near heap limit
这是 Node.js 内存不足。不要升级 Node.js，只需在 package.json 的 scripts 里修改 build 命令：

"build": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build"

--max_old_space_size=4096 将内存限制提升到 4GB，足够编译大型 Vue 项目。

技巧二：run-backend.bat 启动后，控制台疯狂刷 Failed to obtain JDBC Connection
这不是数据库连不上，而是 juhe-auth 模块的 DataSource 配置错了。打开 juhe-auth/src/main/resources/application.yml，检查 spring.datasource.driver-class-name 是否为 com.mysql.cj.jdbc.Driver（MySQL 8+）或 com.mysql.jdbc.Driver（MySQL 5.7）。本项目用的是 5.7，所以必须是后者。如果写成前者，会一直重试连接。

技巧三：Element UI 表格 el-table 数据不更新，但 console.log 显示数据已变
这是 Vue2 的响应式限制。el-table 的 data 属性必须是 Array，不能是 null 或 undefined。在 UserList.vue 的 data() 里，确保初始化为：

data() {
  return {
    list: [], // 必须是空数组，不能是 null
    total: 0
  }
}

如果初始化为 list: null，后续 this.list = res.data 赋值时，Vue 无法检测到数组变化，表格就不刷新。

技巧四：v-permission 指令不生效，按钮始终显示
检查 src/store/getters.js 里的 roles getter 是否正确返回了数组。它应该是：

const getters = {
  roles: state => state.user.roles || []
}

如果 state.user.roles 是字符串 "ADMIN" 而不是数组 ["ADMIN"]，指令就会失效。这是因为 JWT Token 解析时，JwtTokenUtil.getRoleFromToken() 方法必须返回 List<String>，而不是 String。你可以在 juhe-auth 的 JwtTokenUtil.java 里找到这个方法，确认它返回的是 Arrays.asList(role)。

技巧五：build.bat 执行成功，但 run-web.bat 启动后访问 http://127.0.0.1:8080 是 404
run-web.bat 启动的是 http-server，它默认服务 ./juhe-web-ui/dist 目录。如果 build.bat 没有成功生成 dist 目录（比如前端编译失败），http-server 就会返回 404。解决方案：先手动进入 juhe-web-ui 目录，执行 npm run build，观察是否有报错；如果没有报错，再检查 juhe-web-ui/dist 目录是否存在 index.html 文件。如果存在，再运行 run-web.bat。

6. 二次开发与扩展指南：如何把它变成你自己的项目

6.1 新增一个“商品管理”模块的完整流程

这是最典型的二次开发场景。我会以“商品管理”为例，展示从数据库设计到前端页面的全流程，所有步骤都可在 1 小时内完成。

后端部分：
1. 在 juhe-core/src/main/java/com/juhe/core/controller 下新建 GoodsController.java：

@RestController
@RequestMapping("/api/goods")
public class GoodsController {
    @Autowired
    private GoodsService goodsService;

    @GetMapping("/list")
    public Result<Page<Goods>> list(@RequestParam Integer pageNum, @RequestParam Integer pageSize) {
        Page<Goods> page = goodsService.page(new Page<>(pageNum, pageSize));
        return Result.success(page);
    }

    @PostMapping("/add")
    public Result<String> add(@RequestBody Goods goods) {
        goodsService.save(goods);
        return Result.success("添加成功");
    }
}

2. 在 juhe-core/src/main/java/com/juhe/core/service 下新建 GoodsService.java 和 GoodsServiceImpl.java，继承 IService<Goods> 和 ServiceImpl<GoodsMapper, Goods>。
3. 在 juhe-core/src/main/java/com/juhe/core/mapper 下新建 GoodsMapper.java，继承 BaseMapper<Goods>。
4. 在 juhe-core/src/main/resources/mapper 下新建 GoodsMapper.xml，写 select、insert 等 SQL。
5. 在 juhe-core/src/main/java/com/juhe/core/entity 下新建 Goods.java，用 Lombok 注解。

数据库部分：
在 MySQL 中执行：

CREATE TABLE `sys_goods` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `goods_name` varchar(100) NOT NULL COMMENT '商品名称',
  `price` decimal(10,2) NOT NULL COMMENT '价格',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品表';

前端部分：
1. 在 src/router/modules/ 下新建 goods.js：

export default [
  {
    path: '/goods',
    name: 'Goods',
    component: () => import('@/views/goods/GoodsList.vue'),
    meta: { title: '商品管理', icon: 'goods', perms: ['goods:list'] }
  }
]

2. 在 src/views/goods/ 下新建 GoodsList.vue，复制 UserList.vue 的结构，修改 api 调用为 goods.js。
3. 在 src/api/ 下新建 goods.js，定义 list() 和 add() 方法。
4. 在 src/store/modules/permission.js 的 routes 数组里，import 并 push goods.js。

权限配置：
1. 在 sys_menu 表插入“商品管理”菜单，perms 设为 goods:list；
2. 在 sys_role_menu 表关联 ADMIN 角色；
3. 在 GoodsList.vue 的按钮上加 v-permission="['goods:add']"。

做完这些，build.bat 重新构建，run-web.bat 和 run-backend.bat 重启，访问 /goods，一个全新的商品管理模块就上线了。整个过程，你没有动一行框架代码，只在约定的目录下添加业务代码，这就是模块化设计的价值。

6.2 从“毕业设计”到“生产可用”的关键升级点

这套代码是很好的起点，但要用于真实项目，还需几个关键升级：

第一，API 文档自动化：集成 Swagger2。在 juhe-core/pom.xml 中添加 springfox-swagger2 依赖，在 SwaggerConfig.java 中配置 Docket Bean。启动后访问 /swagger-ui.html，所有接口自动生成文档，支持在线调试。这比手写 说明.htm 高效一百倍。

第二，日志中心化：引入 ELK（Elasticsearch + Logstash + Kibana）。修改 logback-spring.xml，将日志输出到 logstash，而不是文件。这样，所有微服务的日志都能在一个界面搜索、分析、告警。

第三，配置中心化：用 Nacos 替代 application.yml。把数据库连接、Redis 地址、JWT 密钥等敏感配置，全部放到 Nacos 控制台管理。juhe-core 启动时，自动从 Nacos 拉取配置，修改配置后实时生效，无需重启。

第四，前端构建优化：vue.config.js 中开启 productionSourceMap: false（减小包体积），配置 externals 将 vue、element-ui 外部化，用 CDN 加载，进一步提速首屏。

这些升级，每一个都有成熟的社区方案，文档齐全。而本项目提供的，正是那个最干净、最易理解的“白板”，让你能看清每一笔画是如何落下的。你可以选择只用它交毕业设计，也可以把它当作一块坚实的地基，往上盖起你自己的高楼。这，才是开源项目的真正意义。

我个人在实际使用中发现，最值得花时间定制的，其实是 src/layout/components/HeaderBar/index.vue 里的用户信息下拉菜单。我把“个人资料”、“修改密码”、“退出登录”这三个选项，改成了“系统设置”（跳转到一个新页面，可配置主题、语言、通知偏好）、“帮助中心”（链接到 GitHub Wiki）、“关于”（显示当前版本号和构建时间）。一个小小的改动，让整个后台瞬间有了“产品感”，而不是“Demo感”。这个细节，或许比任何技术升级都更能打动你的导师或客户。

本文还有配套的精品资源，点击获取

简介：这套后台系统开箱即用，前端用Vue 2.x搭配Vue Router、Vuex和Element UI，支持动态菜单、角色权限控制和主题切换；后端基于Spring Boot，拆分为juhe-auth（登录认证）、juhe-core（业务逻辑）、juhe-base（通用工具）三个Maven子模块，结构清晰便于二次开发。压缩包里直接提供build.bat（编译打包）、run-web.bat（启动前端）、package.bat（打包后端）三类Windows批处理脚本，省去环境配置烦恼。配套有开发环境配置文件.env.development、ESLint代码规范（.eslintrc.js和.editorconfig）、Git忽略规则，以及详细README.md说明文档。资源还包含数据库SQL脚本（duojuhe_admin.sql）、首页HTML、favicon图标、4张真实界面截图（1.png、4.png、6.png等）、开源协议LICENSE和HTML版操作指南（说明.htm）。整个项目适合课程设计、毕业设计选题，也适合作为企业级管理后台原型快速搭建或学习前后端分离开发流程。

本文还有配套的精品资源，点击获取