ruoyi-vue初步接触引言从零开始认识ruoyi-vue对于刚接触Java全栈开发的同学来说“ruoyi-vue”这个名字或许有些陌生。实际上它是一个基于Spring Boot、Spring Security、MyBatis和Vue.js的开源后台管理系统框架。通过它我们可以快速搭建具备权限管理、代码生成、多数据源支持等功能的Web应用。本文将从基础概念讲起逐步深入到代码实践帮助你迈出使用ruoyi-vue的第一步。## 第一部分ruoyi-vue的核心架构### 什么是ruoyi-vueruoyi-vue若依前后端分离版是一个企业级开发平台它将Java后端和Vue前端分离通过RESTful API通信。后端负责业务逻辑、数据存储和权限控制前端负责界面展示和用户交互。### 核心组件-后端Spring Boot 2.x、Spring Security认证授权、MyBatis数据库操作、Redis缓存。-前端Vue 2.x、Element UI组件库、AxiosHTTP请求。-工具代码生成器自动生成CRUD代码、SwaggerAPI文档。理解这些组件后我们开始实际搭建环境。## 第二部分环境准备与项目启动### 前置条件- JDK 1.8± Maven 3.6± MySQL 5.7± Redis可选- Node.js 12用于前端### 快速启动后端1. 从GitHub克隆项目git clone https://gitee.com/y_project/RuoYi-Vue.git2. 导入数据库执行sql/ry_20240629.sql在MySQL中创建数据库并运行脚本。3. 修改application-druid.yml中的数据库连接配置。4. 运行RuoYiApplication.java启动类。### 快速启动前端1. 进入ruoyi-ui目录。2. 执行npm install安装依赖。3. 执行npm run dev启动开发服务器。启动后访问http://localhost:80使用默认账号admin/admin123登录。## 第三部分核心功能代码示例### 示例1用户管理接口的权限控制ruoyi-vue的权限控制基于Spring Security和JWT。以下代码展示了用户登录后获取用户信息的接口并演示了权限注解的使用。java// 后端代码SysUserController.javaRestControllerRequestMapping(/system/user)public class SysUserController extends BaseController { Autowired private ISysUserService userService; /** * 获取当前登录用户信息 * 需要 system:user:query 权限 */ GetMapping(/getInfo) PreAuthorize(ss.hasPermi(system:user:query)) // 权限校验 public AjaxResult getInfo() { // 从SecurityContext获取当前用户ID Long userId SecurityUtils.getUserId(); SysUser user userService.selectUserById(userId); // 返回用户信息包括角色、权限 return success(user); }}上述代码中PreAuthorize注解确保只有拥有system:user:query权限的用户才能调用该接口。权限数据存储在数据库的sys_menu表中通过ss工具类动态校验。### 示例2使用代码生成器创建新模块ruoyi-vue最强大的功能之一是代码生成器。以下步骤演示如何生成一个“图书管理”模块。1.设计数据库表在MySQL中创建表sql CREATE TABLE book ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(255) DEFAULT NULL COMMENT 书名, author varchar(100) DEFAULT NULL COMMENT 作者, publish_date datetime DEFAULT NULL COMMENT 出版日期, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;2.导入表并生成代码- 登录后台进入“系统工具” - “代码生成”。 - 点击“导入”选择book表。 - 编辑字段信息如设置name为模糊查询。 - 点击“生成代码”下载ZIP包。3.部署生成的文件将ZIP包中的文件分别复制到项目对应目录 -main/java下controller、domain、mapper、service文件夹。 -resources/mapper下的XML文件。 -ruoyi-ui/src/views下的Vue页面。完成后重启项目即可在菜单中看到新的“图书管理”模块支持增删改查操作。## 第四部分高级用法自定义权限拦截### 实现原理ruoyi-vue使用拦截器SecurityInterceptor对每个请求进行JWT校验。我们可以扩展这个机制实现更细粒度的权限控制。### 示例记录操作日志的自定义注解以下代码演示如何创建一个Log注解自动记录用户操作到数据库。java// 自定义注解 Log.javaTarget({ElementType.METHOD}) // 作用于方法Retention(RetentionPolicy.RUNTIME)public interface Log { String title() default ; // 模块名称 String businessType() default OTHER; // 操作类型}// 切面实现 LogAspect.javaAspectComponentpublic class LogAspect { AfterReturning(annotation(log)) // 方法执行后触发 public void doAfterReturning(JoinPoint joinPoint, Log log) { // 从请求上下文获取用户信息 SysUser currentUser SecurityUtils.getLoginUser().getUser(); // 构建日志对象 SysOperLog operLog new SysOperLog(); operLog.setTitle(log.title()); operLog.setOperName(currentUser.getUserName()); operLog.setOperTime(new Date()); operLog.setOperIp(IpUtils.getIpAddr(ServletUtils.getRequest())); // 保存到数据库注入SysOperLogService operLogService.insertOperlog(operLog); }}// 使用示例在Controller方法上添加注解GetMapping(/list)Log(title 图书管理, businessType QUERY)public AjaxResult list(Book book) { // 业务逻辑...}这个例子展示了ruoyi-vue的AOP面向切面编程能力。通过自定义注解和切面我们可以在不侵入业务代码的情况下统一处理日志记录、权限校验等横切关注点。## 总结通过本文的学习我们初步接触了ruoyi-vue框架的核心概念和实际应用。从环境搭建、权限控制到代码生成和自定义注解ruoyi-vue提供了一套完整的解决方案帮助开发者快速构建企业级后台系统。它最大的优势在于-开箱即用内置用户管理、角色管理、菜单管理等基础功能。-代码生成减少重复劳动提高开发效率。-可扩展性基于Spring生态易于集成其他组件。建议读者继续探索其源码深入理解权限缓存机制、多数据源配置等高级特性。希望本文能为你打开ruoyi-vue的大门享受高效开发的乐趣。