若依框架系列教程（RuoYi-Vue前后端分离版）

为什么把 RuoYi-Vue 当作一套代码来读

RuoYi-Vue 在国内外包与中小型管理系统项目里出现频率极高，原因不是它功能有多全，而是它把「前后端分离 + 权限 + 代码生成」这条链路走得比较完整，目录结构也相对规矩。把它当成一份可拆解的工程样本，比当成一个拿来就用的成品更有价值。这套教程对应的正是 RuoYi-Vue 前后端分离版本，讨论的是 Vue 前端工程与 Spring Boot 后端工程如何各自独立运行、又通过接口约定协作，适合已经写过 Vue 单页应用、也接触过 Spring Boot 的开发者对照源码去看。

技术栈与两端边界

后端基于 Spring Boot + Spring Security + MyBatis，配合 Redis 做令牌与缓存，数据源默认 MySQL。前端是 Vue 单页应用，用 Vuex 管状态、Vue Router 管路由、Axios 封装请求，UI 层用 Element UI。这套教程的关键点在于把「两端边界」讲清楚：后端暴露的是 REST 接口和一套统一的返回结构，前端拿到的不只是数据，还有权限标识、菜单树、字典项这些驱动界面渲染的元信息。理解这条边界，后面改任何一处业务才不会两边都动。

值得逐行对照的几个模块

• 认证与令牌：登录后令牌怎么签发、怎么带在请求头、拦截器如何校验，以及前端在路由守卫里怎么配合判断。
• 权限模型：用户、角色、菜单三者的关系，按钮级权限标识如何从后端下发到前端指令层。
• 代码生成器：从数据库表结构反推出后端实体、Mapper、Service、Controller 再到前端页面，这是 RuoYi 最有复用价值的部分，也是理解它工程约定的捷径。
• 统一响应与异常处理：全局异常、分页封装、返回码约定，决定了前端请求层怎么写。
• 通用能力：数据权限、操作日志、定时任务、字典管理，这些是管理系统里反复出现的横向需求，适合抽出来当轮子。

怎么用这份资料自学

建议不要顺着视频一集集看。先自己把前后端两个工程跑起来，登录进去点一遍菜单，对系统有个整体印象；然后挑一条完整链路——比如「新增一个业务模块」——从前端页面到后端接口走通，中途遇到不认识的注解或封装的请求方法再回头查。教程在这里的作用是解释「为什么这么设计」，比如为什么菜单要存在数据库而不是写死在路由里，为什么权限标识要单独抽一层。带着这些问题去看，比单纯跟敲代码有效得多。

动手改造比照着敲更有用

跑通之后建议做两件事：一是删掉一个不需要的模块，看牵动哪些配置和依赖；二是用代码生成器生成一张自己的业务表，再把生成的代码按自己的命名规范重写一遍。这个过程会逼你面对 RuoYi 的目录约定、包结构和前端路由注册方式，这些都是单纯看视频得不到的。前端部分还可以试着把某个页面从 Element UI 换成别的组件库写法，体会哪些是框架强绑定、哪些只是 UI 层选择。

适合谁，不适合谁

如果你已经能独立写 Vue 页面、也写过 Spring Boot 接口，但没接触过一套完整的管理系统骨架，这份资料能帮你补齐「工程组织」这一课，尤其是接口约定、权限分层和代码生成这三块。反过来，如果 Vue 或 Spring Boot 还停留在跟着教程敲的阶段，直接上手 RuoYi 容易在 Security 配置和前端请求封装上卡住，建议先把两端各自的基础走一遍再回来。它解决的是「一套管理系统骨架长什么样、为什么这么长」，而不是「从零教你写 Vue 或 Spring Boot」。