初识 RuoYi-Vue
项目介绍
-
RuoYi-Vue 是什么？
RuoYi-Vue 是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Spring Security、MyBatis、Jwt、Vue），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、通知公告、代码生成等。在线定时任务配置，支持集群，支持多数据源，支持分布式事务等。
RuoYi-Vue 官方文档：RuoYi-Vue
-
RuoYi-Vue 和 RuoYi 是什么关系？
一般而言 RuoYi 是指 RuoYi 家族，具体而言 RuoYi 是指 RuoYi 家族中一个特定的版本（前后端不分离版本），通常别人问你"你项目有没有使用 RuoYi"，是问你有没有使用 RuoYi 家族中的一个版本，而不是问你是否使用的是前后端不分离版，所以后续我们直接讲 RuoYi 都是指 RuoYi 家族，而不是特指 RuoYi 前后端不分离版。
RuoYi-Vue 是 RuoYi 家族中的一个版本，RuoYi 有很多版本，前后端不分离版（RuoYi）、前后端分离版（RuoYi-Vue）、微服务版（RuoYi-Cloud）、移动版（RuoYi）。
项目技术栈
后端技术栈
| 分类 | 技术 / 框架 | 作用 |
|---|---|---|
| 核心框架 | Spring Boot 2.x | 后端主框架，项目启动、自动配置 |
| Spring 5.x | IOC、AOP、事务管理 | |
| 安全权限 | Spring Security | 登录认证、权限控制 |
| JWT (jjwt) | 无状态令牌认证，前后端分离专用 | |
| 数据层 | MyBatis / MyBatis-Plus | 数据库操作、CRUD、分页 |
| MySQL | 主数据库 | |
| Redis | 缓存、Token 存储、字典缓存 | |
| 工具类 | Lombok | 简化 Java 代码（get/set/ 日志） |
| Hutool | 通用工具库（字符串、日期、加密） | |
| PageHelper | 分页插件 | |
| 任务 | Quartz | 定时任务 |
| 文档 | Knife4j(Swagger) | 接口文档生成、在线调试 |
| 构建 | Maven | 依赖管理、项目打包 |
前端技术栈
| 分类 | 技术 / 框架 | 作用 |
|---|---|---|
| 核心框架 | Vue 2.x | 前端核心框架 |
| Vue Router 3.x | 路由跳转、权限控制 | |
| Vuex 3.x | 全局状态管理（用户、菜单、权限） | |
| UI 组件 | Element UI | 后台管理系统 UI 组件库 |
| 网络请求 | Axios | 接口请求、统一拦截处理 |
| 图表 / 工具 | ECharts | 数据图表展示 |
| js-cookie | 存储 Token | |
| 构建 | Webpack | 项目打包、编译 |
项目结构
-
文件介绍：
.github：GitHub 相关配置（如 Issue 模板、CI/CD 工作流）bin：项目脚本工具目录（如启动 / 停止脚本）doc：项目文档存放目录（使用说明、部署指南、API 文档等）sql：数据库脚本目录（初始化 SQL、升级脚本、菜单 / 权限数据等）.gitignore：Git 忽略文件配置（指定不需要提交的文件 / 目录）LICENSE：开源协议声明（若依使用 MIT 协议）README.md：项目说明文档（快速开始、技术栈、部署步骤）pom.xml：Maven 项目核心配置文件（依赖管理、模块聚合、打包配置）ry.bat/ry.sh：项目快速启动脚本（Windows/Linux 环境一键启动后端服务）
-
后端模块介绍：
目录 核心作用 ruoyi 父级模块，统筹管理其他子模块还有整个项目的依赖版本 ruoyi-admin 启动入口模块，包含 Controller 层、全局异常处理、权限拦截、API 接口等，是整个后端服务的启动器 ruoyi-common 公共工具模块，封装通用工具类、常量、枚举、异常、Redis 操作、工具类（如日期、加密、文件处理）等 ruoyi-framework 框架核心模块，负责 Spring 配置、权限管理（Spring Security/Shiro）、全局拦截器、数据权限、XSS 防护等底层能力 ruoyi-system 系统业务模块，实现用户、角色、菜单、部门、岗位、字典、通知公告等核心系统功能的 Service/Mapper 层 ruoyi-generator 代码生成模块，你之前看到的「代码生成」功能就来自这里，负责根据数据库表自动生成前后端 CRUD 代码 ruoyi-quartz 定时任务模块，基于 Quartz 实现定时任务管理（如数据备份、日志清理、报表生成） -
前端模块介绍：
目录 / 文件 作用 src 项目核心源码，所有业务代码都在这里 ├─ api 封装所有后端接口请求（axios 统一管理） ├─ assets 存放图片、样式、字体等静态资源 ├─ components 公共组件（上传、弹窗、表格等复用组件） ├─ layout 系统整体布局（侧边栏、头部、页面容器） ├─ router 前端路由（页面跳转、权限控制） ├─ store 全局状态管理（用户信息、菜单、权限） ├─ utils 工具函数（时间格式化、加密、通用方法） ├─ views 所有业务页面（系统管理、代码生成、自定义页面） ├─ App.vue 项目根组件 ├─ main.js 项目入口文件（启动 Vue、加载插件） ├─ permission.js 权限控制（登录校验、动态菜单） package.json 项目依赖、启动 / 打包命令 vue.config.js Vue 项目配置（代理、打包、端口） .env.development 开发环境配置（接口地址）
项目启动
这里我们主要是基于 RouYi-Vue 的 SpringBoot2 版本进行学习
-
Step1：拉取代码
shell# 方式一：指定分支拉去 git clone -b springboot2 https://gitee.com/y_project/RuoYi-Vue.git # 方式二：直接拉主分支，然后切换到 SpringBoot2 分支（切分支可以直接在 IDEA 中操作） git clone https://gitee.com/y_project/RuoYi-Vue.git git checkout springboot2 -
Step2：后端启动
PS：这里不过多介绍，详情参考官方文档：RuoYi-Vue------后端运行
- 执行 SQL，建库、建表、加数据
- 修改 MySQL 连接信息
- 修改 Redis 连接信息
- 运行 rouyi-admin 模块下的启动类
-
Step3：前端启动
PS：这里不过多介绍，详情参考官方文档：RuoYi-Vue------前端运行
npm install下载依赖npm run dev启动项目
代码生成
-
Step1：建表
- 方式一：创建，编写好建表语句，然后让若依帮你建表
- 方式二：导入，自己在数据库建表，然后导入创建的表
-
Step2：生成代码
会生成一个压缩包，压缩包里面包括了前后端基础的 CRUD 代码，数据库文件
-
Step3：执行SQL
将压缩包里面的 SQL 文件拿到数据库中执行，主要作用是往数据库里插入菜单权限数据，让前端能显示出菜单
-
Step4：拷贝代码
按照压缩包里面的包路径，将代码放到对应的位置
参考资料：