一、若依介绍
1.1 低代码开发平台
低代码诞生的目的是将可`重复性的编程`工作通过`平台实现`，将开发人员从没有技术含量的`增删改查`开发中解放出来，让其专注于更有价值的开发工作
例如：**数据库设计、流程设计、API核心开发、业务逻辑**开发等工作。所以，低代码开发平台可以提高开发效率。
常见产品有：
- 明道云、Noohle（怒吼）、简道云
- 若依/RuoYi、 jeecg-boot、人人开源 / renren-fast
1.2 若依简介
**RuoYi-Vue** 是一个轻量级快速开发平台，毫无保留给个人及企业免费使用。基于经典技术组合（Spring Boot、Spring Security、MyBatis、Jwt、Vue、Element）内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。
1）若依提供了企业级后台管理系统基础通用的功能，免去开发者去搭建和配置繁琐项目环境
2）提供了代码生成技术：通过数据库表就可以自动生成（java后端代码，前端vue页面）
1.3 特点
功能特性：
- 完善的权限管理
- 开发支持多语言
- 丰富的前端插件
- 强大代码生成器
使用最流行的技术
- RuoYi（SpringBoot+Bootstrap）
- RuoYi-Vue（SpringBoot+Vue）
- RuoYi-Cloud（SpringCloud+Vue）
- RuoYi-App（Uniapp+Vue）
- 完全响应式布局
- 支持电脑、平板、手机等所有主流设备
- 提供多种不同风格的皮肤
- 使用最流行的的扁平化设计
- 集成多款国内优秀插件
1.4 优缺点
优点：
- 高度集成的开发框架，支持快速开发和部署
- 代码简单清晰明了，易于维护
- 提供了自定义组件等功能，可满足各种需求
- 采用前后端分离的设计思路，使应用更加灵活，易于扩展
缺点：
- 使用ruoyi框架需要一定的JavaWeb开发经验，在没有JavaWeb基础的情况下，上手可能会困难
- 提供的代码生成器可能不能满足需求，并且代码生成的质量还需要另加一定的开发工作
- 支持的功能还比较简单，但是这也使得它更加轻量级，通用性更好
二、项目部署
2.1 准备工作
(1) 基本环境要求
- JDK >= 1.8
- MySQL >= 5.7
- Maven >= 3.0
- Node >= 12
- Redis >= 3
(2) 本地环境
- JDK = 1.8.0_131
- MySQL = 8.0.21
- Maven = 3.8.3
- Node = 18.16.0
- Redis = 5.0.14.1
(3) 软件
Navicat（数据可视化）
IDEA
2.2 开发环境配置
2.2.1 Mysql
(1) 下载zip安装包：
下载链接：https://www.mysql.com/downloads/，我们下载的是mysql8.0.21
(2) 解压到自定义目录
下载完成后，将zip包解压到自定义目录，我的解压目录是 D:\soft\mysql-8.0.21-winx64。
(3) 配置环境变量
顺序打开：控制面板->系统->高级系统设置->环境变量，在“系统变量”中找到“Path”，编辑，添加一行mysql刚刚解压的目录下的bin的目录。
(4) 创建配置文件
在mysql解压目录下创建my.ini的配置文件，文件内容如下
|
[mysql] # 设置mysql客户端默认字符集 default-character-set=utf8
[mysqld] # 绑定IPv4 bind-address=0.0.0.0 # 设置端口号 port=3306 # 设置mysql的安装目录，即解压目录 basedir=D:\\soft\\mysql-8.0.21-winx64 # 设置数据库的数据存放目录 datadir=D:\\soft\\mysql-8.0.21-winx64\\data # 设置允许最大连接数 max_connections=200 # 设置允许连接失败次数 max_connect_errors=10 # 设置服务端的默认字符集 character-set-server=utf8 # 创建表使用的默认存储引擎 default-storage-engine=INNODB |
(5) 安装mysql服务
cmd管理员模式进入mysql安装目录bin目录下，执行命令mysqld -install
(6) 初始化数据文件
执行命令mysqld --initialize-insecure --user=mysql
(7) 启动MySQL服务
执行命令net start mysql
(8) Navicat建立Mysql连接
2.2.2 JDK及Maven安装
JDK和Maven的安装配置不做重点介绍，我使用的JDK版本是1.8.0_131，Maven版本是3.8.3。
在IDEA中依次点击“File—Project Structure—SDKs—+JDK”，配置安装好的JDK。
在IDEA中依次点击“File—Settings—Build,Execution,Deployment—Bulid Tools—Maven”，在Maven home directory中配置安装好的Maven。
2.2.3 Node.js安装
(1) 下载安装包：Node.js官方安装包及源码下载地址：https://nodejs.org/en/。
根据自己电脑系统及位数选择，我这里选择windows64位.zip格式安装包。
(2) 下载完成后，双击安装包开始安装，一直点next即可，安装路径我修改到了：F:\soft\NVM\nodejs，安装完成如图所示。
(3) 配置环境变量：右击此电脑选择属性，点击高级系统设置，在系统变量中配置node的环境变量。
(4) 检测是否安装成功：
点击开始-运行-cmd（win+R），打开dos，输入“node --version”检查Node.js版本：
2.2.4 Redis安装
(1) 下载Redis压缩包，解压到自定义目录。
(2) 在redis文件目录输入cmd并回车，弹出命令行。输入redis-server.exe redis.windows.conf回车，如下即表示启动成功。
2.3 项目工程配置
2.3.1 项目下载
若依的源代码是开源的，所以在若依的官方网站即可进行下载，若依的官网是：http://www.ruoyi.vip/，进入官网后，根据系统需求选择框架版本，我们选择的是RuoYi-Vue前端分离版，点击跳转到git，下载即可。
可以选择直接通过git从IDEA进行克隆，也可以下载压缩包手动导入，我采用的第二种方式。
下载解压后的文件如下所示：
打开IDEA，导入解压后的项目。
IDEA会自动加载`Maven`依赖包，初次加载会比较慢（根据自身网络情况而定）
2.3.2 Mysql配置
(1) 导入sql
创建数据库`create database ry;`。在连接名上点击鼠标右键，选择新建数据库。
填写数据库名，字符集选择utf-8，排序规则选择utf8_general_ci.
在数据库名上点击鼠标右键，选择【运行SQL文件】。运行上图红框内的两个sql文件。
找到sql文件所在的本地路径，选中的后，点击【开始】，执行SQL文件。
分别导入成功后结果如下：
执行成功后，在【表】上点击鼠标右键，选择【刷新】，刷新完成后，即可显示出所有的表。
sql文件运行成功。
(2) 配置文件
在`ruoyi-admin`模块下，修改数据库连接，编辑`resources`目录下的`application-druid.yml`
url:修改本地数据库连接
username:修改数据库用户名(root)
password:修改数据库密码
2.3.3 开启Redis服务
双击运行redis-server.exe,有图标就是开启成功
2.3.4 项目启动
(1) 后端运行
在`ruoyi-admin`模块下，启动项目`com.ruoyi.RuoYiApplication.java`
见到这个banner,说明若依后端启动成功。
(2) 前端运行
IDEA打开前端文件夹ruoyi-ui。
点击底部菜单栏中的Terminal命令，执行以下命令：
npm install # 安装依赖
npm install --registry=https://registry.npmmirror.com # 通过如下操作解决 npm 下载速度慢的问题
npm run dev # 启动服务
注意：运行中遇到了以下错误：
执行命令$env:NODE_OPTIONS="--openssl-legacy-provider"可以解决。
运行成功后，由于项目本身做了重定向功能，因此会自动跳转到对应网址。
登录成功后的页面如下：
三、源码分析
3.1 前端代码
前端技术栈 ES6、vue、vuex、vue-router、vue-cli、axios、element-ui
|
├── 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 |
跨域转发：
浏览器F12抓取登录请求地址，前端获取验证码的请求URL：http://localhost:81/dev-api/captchaImage，若依的后端端口是8080，前端是81，前后端部署在不同的服务器环境中，存在跨域的问题。
若依前端是基于代理转发解决跨域问题的。以下这段代码是在 Vue 项目的配置文件中，用于配置开发服务器的代理设置。
通过这个配置，我们可以将前端应用发送的请求代理转发到后端 API 服务器，以解决跨域访问的问题。这里使用了一个名为 proxy 的配置项，它的作用是对指定的请求路径进行代理转发。即将/dev-api替换成’’，再映射到http://localhost:8080。前端URL直接通过81端口就能访问到后台。
3.2 后端代码
后端技术栈 SpringBoot、MyBatis、Spring Security、Jwt
