若艺框架系列视频教程（若艺-Vue 前后端分离版）

这套资料的主题很明确：围绕 RuoYi-Vue 的前后端分离版本，讲一个已经成型的权限管理系统是怎么从登录鉴权一路做到代码生成、数据权限与前端路由控制的。它不是从 Vue 语法讲起的入门课，更像是拿一个真实项目骨架，逐层拆开给你看工程结构怎么组织、哪些模块可以直接复用、哪些地方需要按业务改造。

技术栈与版本前提

RuoYi-Vue 的分离版是典型的「Spring Boot + Vue」双工程结构：后端提供 REST 接口，用 Spring Security + JWT 做无状态鉴权，MyBatis 负责数据访问，Redis 承担令牌与缓存；前端是 Vue 单页应用，配 Vuex 管理状态、Vue Router 做路由、Axios 封装请求，UI 层用 Element UI。这套组合在中小型管理系统里非常常见，学会之后迁移到其他项目成本很低。

看这套视频之前，最好已经写过 Vue 组件、会用 npm 跑构建，也大致知道 Spring Boot 的 Controller 和 Service 分层。否则进度会卡在环境配置和依赖理解上，而不是框架设计本身。

项目结构与可复用模块

这个框架真正的价值在于「结构可抄」。后端的ruoyi-common、ruoyi-framework、ruoyi-system是分层拆出来的，通用返回体、异常处理、分页封装、日志切面都放在公共层，业务模块只关心自己的表和逻辑。前端的api、views、store、router、utils/request.js各司其职，请求拦截器统一带 token、统一处理错误码。

• 权限相关：菜单与按钮级权限、后端@PreAuthorize注解与前端指令配合
• 数据范围：部门数据权限的 SQL 拼接方式，这是很多自研项目缺失的一环
• 代码生成：从数据库表反向生成前后端 CRUD，省掉重复劳动
• 通用能力：分页、字典、操作日志、定时任务、接口限流

这些模块拆开看都不复杂，难的是它们之间的调用关系。视频按登录流程、权限校验流程、一次列表查询流程分别串讲，正是理解依赖链的好方式。

怎么用它对照实践

建议不要把视频当连续剧看。更有效的做法是本地把前后端都跑起来，登录进去改一张表、加一个菜单、写一个业务模块，遇到不懂的地方再回到对应章节。重点看三块：一是登录到获取用户信息这条链路，二是前端动态路由是怎么根据后端返回的菜单生成的，三是代码生成器的模板逻辑。这三块吃透，RuoYi-Vue 的骨架基本就掌握了。

需要留意的是，框架默认的配置（比如 token 过期策略、多数据源、缓存键设计）在真实项目里多半要按需调整，视频给的是可运行的基线，不是最终方案。带着「这里为什么要这么写、换成我的业务该怎么改」的问题去看，收获会比照着敲代码大得多。

适合谁、不适合谁

适合已有一定 Vue 和 Java 基础、需要一个管理系统起点或想研究成熟工程结构的开发者；如果你还在学 Vue 基础语法或没接触过 Spring Boot，建议先补前置知识再回来。整体上，这是一份拿来对照源码和实际项目的参考资料，价值在于结构和思路，而不只是操作步骤。