若依框架部署

戈瑾 / 2024-01-22 / 原文

一、若依介绍

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

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端口就能访问到后台。