获课：789it.top/14915/

若依（RuoYi）是一款基于 Spring Boot + Vue 的前后端分离快速开发框架，凭借其模块化设计、开箱即用的权限管理系统和丰富的功能组件，成为企业级项目开发的热门选择。本文将从零基础视角出发，通过“环境搭建→核心模块解析→实战开发”三步走策略，帮助初学者快速掌握若依框架的核心开发技巧。

一、环境搭建：从零到一的启动准备

1. 开发环境要求

• 后端环境：JDK 1.8+、Maven 3.6+、MySQL 5.7+、Redis（可选）
• 前端环境：Node.js 16.x+、npm 8.x+、Vue CLI 4.x
• 开发工具：IntelliJ IDEA（后端）、VS Code（前端）、Postman（API调试）

2. 快速启动步骤

（1）后端启动

1. 下载源码：从 GitHub 克隆若依后端项目（ruoyi-vue 分支）。

   bashgit clone https://github.com/yangzongzhuan/RuoYi-Vue.gitcd RuoYi-Vue/ruoyi-admin

2. 配置数据库：
   • 导入 sql/ry.sql 到 MySQL，创建数据库 ry。
   • 修改 application-druid.yml 中的数据库连接信息：

     yamlurl: jdbc:mysql://localhost:3306/ry?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8username: rootpassword: your_password

3. 启动服务：
   • 使用 IDEA 打开项目，运行 RuoYiApplication.java 主类。
   • 访问 http://localhost:8080，默认账号 admin/admin123。

（2）前端启动

1. 安装依赖：

   bashcd RuoYi-Vue/ruoyi-uinpm install

2. 配置后端接口地址：
   • 修改 .env.development 文件中的 VUE_APP_BASE_API：

     VUE_APP_BASE_API = '/dev-api'

   • 在 vue.config.js 中配置代理（避免跨域）：

     javascriptdevServer: {  proxy: {    '/dev-api': {      target: 'http://localhost:8080',      changeOrigin: true,      pathRewrite: { '^/dev-api': '' }    }  }}

3. 启动前端：

   bashnpm run dev

   • 访问 http://localhost:81，界面与后端登录页一致。

二、核心模块解析：拆解若依的“四梁八柱”

1. 权限管理系统：若依的“安全核心”

若依基于 RBAC（角色权限控制） 模型，通过“用户→角色→菜单”三级关联实现精细权限控制。

• 用户管理：存储用户基本信息（账号、密码、状态等）。
• 角色管理：关联菜单权限，一个角色可分配多个菜单。
• 菜单管理：支持多级菜单，动态生成侧边栏导航。

关键表结构：

• sys_user（用户表）
• sys_role（角色表）
• sys_menu（菜单表）
• sys_user_role（用户角色关联表）
• sys_role_menu（角色菜单关联表）

2. 代码生成器：若依的“开发加速器”

代码生成器可自动生成 CRUD 代码，包括：

• 后端：Controller、Service、Mapper、Entity
• 前端：Vue 页面、API 请求、路由配置

使用步骤：

1. 配置数据源：在“系统工具→代码生成”中填写数据库连接信息。
2. 选择表：勾选需要生成代码的表（如 sys_dept 部门表）。
3. 生成代码：点击“生成代码”按钮，下载 ZIP 包并解压到项目对应目录。

3. 动态菜单与路由：若依的“灵活导航”

前端路由根据用户权限动态生成，核心逻辑：

1. 后端返回菜单数据：登录时调用 /getRouters 接口，返回当前用户的菜单树。
2. 前端动态添加路由：在 permission.js 中解析菜单数据，通过 router.addRoutes 动态添加路由。

   javascript// 示例：解析菜单数据并添加路由function addRoutes(menus) {  menus.forEach(menu => {    if (menu.path) {      router.addRoute({        path: menu.path,        component: () => import(`@/views/${menu.component}`),        meta: { title: menu.meta.title, icon: menu.meta.icon }      });    }  });}

三、实战开发：从“Hello World”到完整功能

1. 开发一个简单的用户管理功能

（1）后端开发

1. 创建 Entity：

   java// src/main/java/com/ruoyi/system/domain/SysUser.java@Data@TableName("sys_user")public class SysUser {    @TableId(type = IdType.AUTO)    private Long userId;    private String userName;    private String password;    // 其他字段...}

2. 创建 Mapper：

   java// src/main/java/com/ruoyi/system/mapper/SysUserMapper.javapublic interface SysUserMapper extends BaseMapper<SysUser> {    List<SysUser> selectUserList(SysUser user);}

3. 创建 Controller：

   java// src/main/java/com/ruoyi/system/controller/SysUserController.java@RestController@RequestMapping("/system/user")public class SysUserController {    @Autowired    private SysUserService userService;    @GetMapping("/list")    public TableDataInfo list(SysUser user) {        startPage();        List<SysUser> list = userService.selectUserList(user);        return getDataTable(list);    }}

（2）前端开发

1. 创建 Vue 页面：

   vue<!-- src/views/system/user/index.vue --><template>
     <div class="app-container">
       <el-table :data="userList" border>
         <el-table-column prop="userId" label="用户ID" />
         <el-table-column prop="userName" label="用户名" />
       </el-table>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         userList: []
       };
     },
     created() {
       this.getUserList();
     },
     methods: {
       getUserList() {
         this.$http.get('/system/user/list').then(response => {
           this.userList = response.data.rows;
         });
       }
     }
   };
   </script>

2. 配置路由：

   javascript// src/router/index.js{  path: '/system/user',  component: Layout,  children: [{    path: 'index',    component: () => import('@/views/system/user/index'),    name: 'User',    meta: { title: '用户管理', icon: 'user' }  }]}

2. 常见问题解决

• 跨域问题：确保前端代理配置正确，或后端添加 @CrossOrigin 注解。
• 接口 403 错误：检查用户是否拥有该接口的权限（通过菜单管理分配）。
• 代码生成后页面不显示：确认前端路由配置和组件路径是否匹配。

四、总结与进阶建议

1. 学习路径总结

1. 环境搭建：掌握前后端分离项目的启动流程。
2. 核心模块：理解权限管理、代码生成、动态路由的实现原理。
3. 实战开发：通过 CRUD 功能熟悉若依的开发规范。

2. 进阶方向

• 性能优化：学习 Redis 缓存、分页查询优化。
• 安全加固：研究若依的 XSS 防护、SQL 注入防御机制。
• 微服务改造：基于若依拆分用户、权限、业务等微服务模块。

若依框架的魅力在于“约定优于配置”，通过标准化开发流程显著提升效率。初学者只需按图索骥，即可快速上手企业级项目开发。随着对框架的深入理解，可进一步探索其底层设计思想，实现从“会用”到“用好”的跨越。