若依（RuoYi）是一套基于Java生态开发的开源企业级后台管理系统框架，核心定位是“快速搭建企业级后台管理平台”，旨在帮助开发者跳过重复的基础开发工作，直接聚焦于业务逻辑实现，在国内Java开发领域应用广泛，尤其适合中小型企业、后台系统开发者快速落地ERP、CRM、OA、数据管理平台等各类管理类项目。与单纯的前端框架不同，若依是一套“前后端一体化”的完整解决方案，其前端部分基于Vue生态构建，后端依托Spring Boot等主流Java技术栈，下面先详细介绍其使用方法，再对比其与其他主流前端框架的优劣势。
一、Java若依框架使用介绍
（一）若依框架核心特性与版本选择
若依框架的核心优势在于“开箱即用”，内置了企业级后台所需的大部分通用功能，同时提供多技术栈版本适配，满足不同开发需求，主流版本如下表所示：
版本名称 | 后端技术栈 | 前端技术栈 | 适用场景 |
|---|
若依（经典版） | Spring Boot + MyBatis | Vue 2 + Element UI | 快速开发、对前端技术要求不高 |
若依（Cloud版） | Spring Cloud Alibaba | Vue 2 + Element UI | 微服务架构、分布式项目 |
若依（Vue3 版） | Spring Boot + MyBatis-Plus | Vue 3 + Element Plus | 需使用Vue3新特性的项目 |
若依（分离版） | Spring Boot + MyBatis | 前后端完全分离（独立部署） | 需单独部署前端的场景 |
其核心特性包括：完善的RBAC权限体系（支持用户、角色、菜单、部门的细粒度控制）、丰富的基础功能模块（系统监控、数据维护、安全防护等）、强大的代码生成器、开源免费且社区维护活跃等。
（二）环境准备
若依框架的使用需准备基础开发环境，不同版本要求略有差异，通用环境如下：
后端环境：JDK 1.8+（推荐JDK 11及以上）、MySQL 5.7+（推荐MySQL 8及以上）、Redis 3.0+（推荐Redis 5及以上）、Maven 3.0+（推荐Maven 3.6）；
前端环境：Node.js 10.0+（推荐Node 16及以上）、npm/yarn 包管理工具；
开发工具：IDEA（后端）、VS Code（前端），可根据个人习惯替换。
（三）核心使用流程
1. 项目获取与初始化
通过官方仓库（Gitee/GitHub）克隆对应版本的若依源码，以前后端分离版（RuoYi-Vue）为例，克隆命令如下：
（1）拉取源码
# 克隆若依分离版源码git clone https://gitee.com/y_project/RuoYi-Vue.gitcd RuoYi-Vue
（2）数据库初始化
- 执行源码中
sql/ 目录下的 quartz.sql 和 ry-vue.sql 脚本（初始化系统表、定时任务表）
（3）后端核心配置（application.yml）
修改 ruoyi-admin 模块下 application.yml，配置数据库、Redis 连接（核心代码示例）：
# 服务器配置server: port: 8080# Spring 配置spring: # 数据源配置（适配 MySQL 8+） datasource: type: com.alibaba.druid.pool.DruidDataSource driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8&allowMultiQueries=true username: root # 替换为你的 MySQL 账号 password: root # 替换为你的 MySQL 密码 # Redis 配置 redis: host: localhost # 替换为你的 Redis 地址 port: 6379 # 替换为你的 Redis 端口 password: # 替换为你的 Redis 密码（无则留空） database: 0 timeout: 10000# MyBatis 配置mybatis: mapper-locations: classpath:mapper/**/*.xml # Mapper 扫描路径 type-aliases-package: com.ruoyi.project # 实体类别名包 configuration: map-underscore-to-camel-case: true # 下划线转驼峰 log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 打印 SQL 日志（开发环境）# 若依自定义配置ruoyi: # 文件上传路径 profile: /usr/local/ruoyi/uploadPath # 允许跨域请求 cors: enabled: true
模块下的 RuoYiApplication.java（项目启动入口）：package com.ruoyi;import org.mybatis.spring.annotation.MapperScan;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;/** * 若依框架启动类 * exclude = DataSourceAutoConfiguration：排除自动数据源配置（手动配置 Druid 时使用） */@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class})@MapperScan("com.ruoyi.project.**.mapper") // 扫描 Mapper 接口public class RuoYiApplication { public static void main(String[] args) { SpringApplication.run(RuoYiApplication.class, args); System.out.println("(♥∀♥) 若依框架启动成功！"); }}
# 进入前端项目目录cd ruoyi-ui# 安装依赖npm install# 启动前端开发服务npm run dev
启动成功后，访问 http://localhost，使用默认账号 admin、密码 123456 登录。4. 核心功能使用
系统管理：可进行用户、角色、菜单、部门的增删改查，配置细粒度权限，适配企业组织架构需求；
代码生成器：在数据库中创建业务表后，进入系统工具→代码生成，导入表并配置生成选项，可自动生成前后端CRUD代码，直接导入项目即可使用；
系统监控：查看在线用户、服务器CPU/内存/磁盘状态、操作日志和异常日志，便于项目运维；
二次开发：基于现有框架扩展业务模块，只需创建对应的controller、service、mapper和entity，配置菜单权限即可快速集成到系统中。
二、核心功能实操（代码示例）
1. 自定义业务模块开发（以 “用户信息扩展” 为例）
若依默认提供用户管理模块，以下示例展示扩展用户头像字段的开发流程，贴合实际业务需求。
（1）数据库表修改
在 sys_user 表中新增头像字段：
-- 扩展用户头像字段ALTER TABLE sys_user ADD COLUMN avatar_url VARCHAR(255) COMMENT '用户头像URL';
（2）后端实体类修改
com.ruoyi.project.system.domain.SysUser.java：
package com.ruoyi.project.system.domain;import com.ruoyi.framework.web.domain.BaseEntity;import org.apache.commons.lang3.builder.ToStringBuilder;import org.apache.commons.lang3.builder.ToStringStyle;/** * 用户表 sys_user */public class SysUser extends BaseEntity { private static final long serialVersionUID = 1L; // 原有字段... /** 用户头像URL */ private String avatarUrl; // Getter & Setter public String getAvatarUrl() { return avatarUrl; } public void setAvatarUrl(String avatarUrl) { this.avatarUrl = avatarUrl; } // 重写 toString @Override public String toString() { return new ToStringBuilder(this, ToStringStyle.MULTI_LINE_STYLE) .append("userId", getUserId()) .append("avatarUrl", getAvatarUrl()) // 追加其他原有字段 .toString(); }}
（3）后端 Mapper 接口
com.ruoyi.project.system.mapper.SysUserMapper.java：
package com.ruoyi.project.system.mapper;import com.ruoyi.project.system.domain.SysUser;import org.apache.ibatis.annotations.Param;import java.util.List;/** * 用户表 Mapper 接口 */public interface SysUserMapper { /** * 条件查询用户列表 */ List<SysUser> selectUserList(SysUser sysUser);
（4）后端 Service 层
com.ruoyi.project.system.service.ISysUserService.java：
package com.ruoyi.project.system.service;import com.ruoyi.project.system.domain.SysUser;import java.util.List;/** * 用户 业务层 */public interface ISysUserService { /** * 查询用户列表 */ List<SysUser> selectUserList(SysUser sysUser); /** * 根据用户ID查询 */ SysUser selectUserById(Long userId); /** * 新增用户 */ intinsertUser(SysUser sysUser); /** * 修改用户 */ intupdateUser(SysUser sysUser);}
com.ruoyi.project.system.service.impl.SysUserServiceImpl.javapackage com.ruoyi.project.system.service.impl;import com.ruoyi.project.system.domain.SysUser;import com.ruoyi.project.system.mapper.SysUserMapper;import com.ruoyi.project.system.service.ISysUserService;import org.springframework.stereotype.Service;import javax.annotation.Resource;import java.util.List;/** * 用户 业务层实现 */@Servicepublic class SysUserServiceImpl implements ISysUserService { @Resource private SysUserMapper userMapper; @Override public List<SysUser> selectUserList(SysUser sysUser) { return userMapper.selectUserList(sysUser); } @Override public SysUser selectUserById(Long userId) { return userMapper.selectUserById(userId); } @Override public int insertUser(SysUser sysUser) { return userMapper.insertUser(sysUser); } @Override public int updateUser(SysUser sysUser) { return userMapper.updateUser(sysUser); }}
（5）后端 Controller 层
com.ruoyi.project.system.controller.SysUserController.java：
package com.ruoyi.project.system.controller;import com.ruoyi.common.utils.poi.ExcelUtil;import com.ruoyi.framework.web.controller.BaseController;import com.ruoyi.framework.web.domain.AjaxResult;import com.ruoyi.framework.web.page.TableDataInfo;import com.ruoyi.project.system.domain.SysUser;import com.ruoyi.project.system.service.ISysUserService;import org.springframework.security.access.prepost.PreAuthorize;import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;import java.util.List;/** * 用户控制器 */@RestController@RequestMapping("/system/user")public class SysUserController extends BaseController { @Resource private ISysUserService userService; /** * 查询用户列表 */ @PreAuthorize("@ss.hasPermi('system:user:list')") // 权限控制（若依内置） @GetMapping("/list") public TableDataInfo list(SysUser sysUser) { startPage(); // 若依内置分页插件 List<SysUser> list = userService.selectUserList(sysUser); return getDataTable(list); } /** * 根据用户ID查询详细信息 */ @PreAuthorize("@ss.hasPermi('system:user:query')") @GetMapping(value = "/{userId}") public AjaxResult getInfo(@PathVariable("userId") Long userId) { return AjaxResult.success(userService.selectUserById(userId)); } /** * 新增用户 */ @PreAuthorize("@ss.hasPermi('system:user:add')") @PostMapping public AjaxResult add(@RequestBody SysUser sysUser) { return toAjax(userService.insertUser(sysUser)); } /** * 修改用户 */ @PreAuthorize("@ss.hasPermi('system:user:edit')") @PutMapping public AjaxResult edit(@RequestBody SysUser sysUser) { return toAjax(userService.updateUser(sysUser)); }}
（6）前端页面修改（Vue2 + Element UI）
修改 ruoyi-ui/src/views/system/user/index.vue（用户列表页），新增头像展示列：
<template> <divclass="app-container"> <!-- 搜索栏 --> <el-form:model="queryParams"ref="queryForm":inline="true"v-show="showSearch"label-width="68px"> <!-- 原有搜索项 --> <el-form-itemlabel="用户姓名"prop="userName"> <el-inputv-model="queryParams.userName"placeholder="请输入用户姓名"clearablesize="small" /> </el-form-item> </el-form> <!-- 操作按钮 --> <el-buttontype="primary"icon="el-icon-plus"size="mini" @click="handleAdd">新增</el-button> <el-buttonicon="el-icon-download"size="mini" @click="handleExport">导出</el-button> <!-- 用户列表表格 --> <el-table:data="userList"borderstripe> <!-- 原有表格列 --> <el-table-columnprop="userName"label="用户姓名"align="center" /> <!-- 新增头像列 --> <el-table-columnlabel="用户头像"align="center"> <templateslot-scope="scope"> <el-image :src="scope.row.avatarUrl || defaultAvatar" :preview-src-list="[scope.row.avatarUrl]" fit="cover" class="avatar-img" /> </template> </el-table-column> <!-- 权限操作列 --> <el-table-columnlabel="操作"align="center"width="180"> <templateslot-scope="scope"> <el-buttontype="primary"icon="el-icon-edit"size="mini" @click="handleEdit(scope.row)">编辑</el-button> <el-buttontype="danger"icon="el-icon-delete"size="mini" @click="handleDelete(scope.row.userId)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页插件 --> <el-pagination v-show="total > 0" :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" layout="total, prev, pager, next, jumper" :total="total" @pagination="getUserList" /> </div></template><script>// 引入原有逻辑...export default { name: "User", data() { return { // 原有数据... defaultAvatar: require("@/assets/img/default_avatar.png"), // 默认头像 userList: [], // 用户列表 total: 0 // 总条数 }; }, created() { this.getList(); // 初始化加载用户列表 }, methods: { // 获取用户列表 getList() { this.loading = true; this.getUsers(this.queryParams).then(res => { this.userList = res.rows; this.total = res.total; this.loading = false; }); }, // 封装请求（若依内置 request 工具） getUsers(params) { return this.request({ url: "/system/user/list", method: "get", params }); } // 原有方法... }};</script><stylescoped>/* 头像样式 */.avatar-img { width: 40px; height: 40px; border-radius: 50%;}</style>
2. 代码生成器使用（核心流程）
若依代码生成器可自动生成前后端 CRUD 代码，无需手动编写基础增删改查，步骤如下：
- 导入业务表（如
sys_user）→ 配置生成选项（包名、模块名、字段注释） - 解压后将
controller、service、mapper、entity 等文件复制到对应项目目录，直接使用
3. 权限控制示例（若依核心特性）
若依基于 Shiro 实现RBAC 权限体系，支持角色权限、菜单权限、按钮权限，核心代码示例：
后端接口权限控制（Controller 层）
// 仅拥有 "system:user:list" 权限的角色可访问@PreAuthorize("@ss.hasPermi('system:user:list')")@GetMapping("/list")public TableDataInfo list(SysUser sysUser) { startPage(); List<SysUser> list = userService.selectUserList(sysUser); return getDataTable(list);}
前端按钮权限控制（Vue 模板）
<!-- 仅拥有 "system:user:add" 权限的角色显示新增按钮 --><el-button type="primary" icon="el-icon-plus" size="mini" v-hasPermi="['system:user:add']" <!-- 若依内置权限指令 --> @click="handleAdd"> 新增</el
三、若依框架（前端部分）与其他主流前端框架的优劣势对比
需明确：若依的前端部分是基于Vue生态构建的“后台管理模板+功能组件集合”，并非独立的前端框架，其核心价值是“与Java后端无缝集成、快速实现后台管理功能”；而Vue、React、Angular等是通用前端框架，Element UI、Ant Design Vue等是UI组件库。下面重点对比若依前端与主流前端框架（及配套UI库）的优劣势，聚焦后台管理场景的适用性。
（一）对比Vue+Element UI（主流后台组合）
Vue+Element UI是国内后台管理系统最常用的前端组合，若依前端（经典版/Cloud版）正是基于此组合开发，二者对比核心聚焦“封装程度”和“开发效率”：
1. 若依前端优势
集成度高，开箱即用：无需手动搭建项目结构、配置路由、封装请求、实现权限控制，若依已完成所有基础封装，开发者可直接聚焦业务逻辑，大幅提升开发效率，尤其适合快速交付中小型后台项目；
与Java后端无缝适配：若依前后端统一开发规范，内置请求拦截、响应处理、权限校验逻辑，完美适配自身Java后端，避免前后端对接的兼容性问题，无需额外编写适配代码；
内置完整业务模块：包含用户、权限、日志、代码生成等后台必备模块，无需重复开发，同时支持多数据源、分布式事务、定时任务等企业级需求，降低开发成本；
中文文档完善，社区活跃：作为国内开源框架，若依提供全中文详细文档，GitHub/Gitee仓库维护及时，issue响应快，新手遇到问题容易找到解决方案，同时有大量社区扩展版本，生态丰富。
2. 若依前端劣势
灵活性不足：若依对前端代码进行了深度封装，若需修改基础架构（如路由机制、权限逻辑、请求封装），需熟悉其源码结构，修改成本较高，不如原生Vue+Element UI灵活；
前端技术更新滞后：经典版仍基于Vue 2+Element UI，虽有Vue 3版本，但整体更新速度慢于原生Vue生态，对于需要使用Vue 3最新特性（如Composition API深度应用）的项目，适配成本较高；
代码冗余：为适配多场景需求，若依内置了大量通用功能，对于简单后台项目，会存在代码冗余，增加项目体积，影响加载速度。
（二）对比React+Ant Design（主流前端组合）
React+Ant Design是另一款主流前端组合，尤其在中大型项目、复杂交互场景中应用广泛，二者对比聚焦“技术生态”和“场景适配”：
1. 若依前端优势
后台开发门槛更低：若依针对Java开发者优化，前端代码简洁，封装逻辑清晰，即使是前端基础薄弱的Java开发者，也能快速上手进行二次开发，无需深入掌握前端框架原理；
前后端协同成本低：若依前后端一体化设计，后端开发者可独立完成简单的前端修改，无需前端开发者单独配合，适合小型团队（前后端人员配比失衡）；
权限体系更完善：内置的RBAC权限模型的细粒度控制（按钮级权限、数据权限），比Ant Design原生权限控制更贴合企业后台需求，无需额外开发适配。
2. 若依前端劣势
交互灵活性不足：React的虚拟DOM、组件化思想更适合复杂交互场景（如大型数据表格、可视化大屏），而若依前端侧重“通用功能实现”，复杂交互的适配能力较弱；
生态扩展性较差：React生态丰富，有大量第三方组件（如Ant Design Pro、Umi）可适配不同场景，而若依前端生态相对封闭，主要围绕自身后台体系扩展，跨场景适配能力弱；
性能上限较低：对于大数据量、高并发的后台场景（如百万级数据表格渲染），若依前端的封装逻辑会导致性能瓶颈，不如React+Ant Design的性能优化空间大。
（三）对比Angular（全栈前端框架）
Angular是Google推出的全栈前端框架，自带路由、表单、状态管理等功能，适合大型企业级应用，二者对比聚焦“学习成本”和“项目适配”：
1. 若依前端优势
学习成本极低：Angular语法复杂、配置繁琐，学习门槛高，而若依前端基于Vue语法，简洁易懂，Java开发者可快速上手，无需投入大量时间学习前端框架；
开发效率高：Angular需手动配置大量基础功能（如路由、表单验证），而若依已完成所有基础配置，开发者可直接进行业务开发，尤其适合快速交付项目；
国内适配性更好：若依针对国内企业后台需求优化，支持中文环境、适配国内常用浏览器，而Angular在国内的社区支持、中文文档相对薄弱，问题排查难度大。
2. 若依前端劣势
大型项目适配性差：Angular的模块化、依赖注入设计更适合大型项目的维护和扩展，而若依前端更适合中小型后台，随着项目规模扩大，代码可维护性会下降；
原生功能薄弱：Angular自带完善的表单验证、状态管理、国际化等功能，而若依前端的这些功能需依赖第三方插件，扩展性和稳定性不如Angular原生支持；
跨平台能力弱：Angular可快速适配移动端、桌面端，而若依前端主要聚焦PC端后台管理，跨平台适配需额外开发，成本较高。
（四）对比ElAdmin（同类Java后台框架前端）
ElAdmin是与若依定位相似的Java后台框架，二者均为前后端分离架构，前端均基于Vue生态，对比聚焦“技术细节”和“功能侧重”：
1. 若依前端优势
代码生成能力更强：若依提供可视化代码生成器，支持单表、树表、主子表生成，可直接生成前后端完整代码，而ElAdmin需手动配置代码模板，效率较低；
版本选择更多：若依提供单体、微服务、Vue2/Vue3等多个版本，适配不同架构需求，而ElAdmin无原生微服务支持，版本相对单一；
社区更活跃：若依在Gitee上的星数远高于ElAdmin，社区贡献者更多，问题响应更快，扩展模块更丰富（如集成Activiti工作流）。
2. 若依前端劣势
前端技术更新较慢：ElAdmin前端基于Vue3+Element Plus，技术栈更前沿，而若依经典版仍基于Vue2，Vue3版本的完善度不如ElAdmin；
移动端适配更好：ElAdmin前端采用Flex布局，可自动适配移动端，而若依前端需单独开发移动端或使用UniApp版本，适配成本较高；
权限控制更灵活：ElAdmin集成Spring Security实现细粒度鉴权，通过@DataPermission注解实现字段级数据过滤，比若依的Shiro权限控制更灵活。
四、总结与选型建议
（一）若依框架核心定位
若依框架并非“单纯的前端框架”，而是“Java后端+前端模板”的一体化后台解决方案，其核心价值是“快速交付企业级后台管理系统”，适合以Java技术栈为主、追求开发效率、无需复杂前端交互的场景。其前端部分的优势在于“集成度高、适配性强、学习成本低”，劣势在于“灵活性不足、技术更新滞后、复杂场景适配能力弱”。
（二）选型建议
优先选若依：中小型企业后台、Java开发团队（前端基础薄弱）、需要快速交付的管理类项目（ERP、OA、CRM等），尤其适合需要微服务架构或多版本适配的场景；
选Vue+Element UI：需要灵活定制前端架构、前端团队能力较强、项目需求多变的后台项目，可基于原生组合自由扩展，适配更多个性化需求；
选React+Ant Design：中大型后台项目、复杂交互场景（如数据可视化大屏、大数据表格）、需要高扩展性和性能优化的项目；
选Angular：大型企业级应用、需要跨平台适配（PC端+移动端）、注重代码规范性和可维护性的项目；
选ElAdmin：偏好Vue3+Element Plus技术栈、需要灵活权限控制、以单体后台项目为主的场景。
总体而言，若依框架是Java后台开发者的“效率工具”，它不解决复杂的业务问题，但能快速搭好“后台骨架”，让开发者专注于业务逻辑；而其他前端框架更侧重“前端交互和灵活扩展”，适合前端主导、需求复杂的项目，选型核心需结合团队技术栈、项目规模和交付需求。
10个月宝宝每天需要喝多少奶粉？
