若依框架教程

发表于 2023-08-24 分类于学习进阶 Waline：

RuoYi-Vue 是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Spring Security、MyBatis、Jwt、Vue），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置；支持集群，支持多数据源，支持分布式事务。

若依框架介绍

若依框架有很多个版本，我只使用过前后端分离版本，在此记录。

官方库：若依/RuoYi-Vue
官方文档：http://doc.ruoyi.vip/ruoyi-vue/
若依框架：基于 SpringBoot+Vue 前后端分离的 Java 快速开发框架

前端采用 Vue、Element UI。
后端采用 Spring Boot、Spring Security、Redis & Jwt。
权限认证使用 Jwt，支持多终端认证系统。
支持加载动态权限菜单，多方式轻松权限控制。
高效率开发，使用代码生成器可以一键生成前后端代码。

开发过程

若依框架为我们集成很多小功能，下面介绍一下利用若依框架的整个开发过程，之后就能基于这整个过程快速开发自己的项目啦。

1. 认识若依框架代码结构及模块功能

引自官方文档，介绍了目录结构及不同模块的功能

后端代码结构

com.ruoyi
├── common            // 工具类
│       └── annotation                    // 自定义注解
│       └── config                        // 全局配置
│       └── constant                      // 通用常量
│       └── core                          // 核心控制
│       └── enums                         // 通用枚举
│       └── exception                     // 通用异常
│       └── filter                        // 过滤器处理
│       └── utils                         // 通用类处理
├── framework         // 框架核心
│       └── aspectj                       // 注解实现
│       └── config                        // 系统配置
│       └── datasource                    // 数据权限
│       └── interceptor                   // 拦截器
│       └── manager                       // 异步处理
│       └── security                      // 权限控制
│       └── web                           // 前端控制
├── ruoyi-generator   // 代码生成（可移除）
├── ruoyi-quartz      // 定时任务（可移除）
├── ruoyi-system      // 系统代码
├── ruoyi-admin       // 后台服务
├── ruoyi-xxxxxx      // 其他模块

前端代码结构

├── build                      // 构建相关
├── bin                        // 执行脚本
├── public                     // 公共文件
│   ├── favicon.ico            // favicon图标
│   └── index.html             // html模板
│   └── robots.txt             // 反爬虫
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── layout                 // 布局
│   ├── plugins                // 通用方法
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── utils                  // 全局公用方法
│   ├── views                  // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   ├── permission.js          // 权限管理
│   └── settings.js            // 系统配置
├── .editorconfig              // 编码格式
├── .env.development           // 开发环境配置
├── .env.production            // 生产环境配置
├── .env.staging               // 测试环境配置
├── .eslintignore              // 忽略语法检查
├── .eslintrc.js               // eslint 配置项
├── .gitignore                 // git 忽略项
├── babel.config.js            // babel.config.js
├── package.json               // package.json
└── vue.config.js              // vue.config.js

2. 根据项目需求创建表结构

若依框架的代码生成功能依赖于数据库表结构，所以首先我们需要根据需求创建数据库表。

MySQL 创建项目数据库，运行 ruoyi sql 文件【Windows 下推荐一个数据库桌面软件：Navicat】

之后根据项目需求创建表

3. 字典设置

字典适用于固定变量，例如一些下拉框的选择、数据状态等。在最重要的代码生成功能也会需要使用到。

4. 代码生成

系统工具 -> 代码生成 -> 导入表 -> 选择表编辑

上图中字典类型的选择就是我们刚才在字典类型中设置的。
插入、编辑、列表、查询字段选择其实就是对应 Mybatis 中的 sql 语句字段。根据项目需求进行选择即可，最终显示反应在列表页面，例如下面的岗位管理，查询和列表展示有哪些字段都是在刚才的代码生成功能中字段提前选择好的，所以选择尽量准确可以减少后面修改。你的编辑选项是会一直保存的，所以不用担心关闭了之后，重新打开需要重新选择。