【Ruoyi管理后台】本地运行前后端分离版本_若依前后端分离

系统需求

我们需要先安装并配置好以下系统环境，具体的搭建安装方式可自行查阅

• JDK >= 1.8
• MySQL >= 5.7
• Maven >= 3.0
• Node >= 12
• Redis >= 3

仓库

前后端分离版

https://gitee.com/y_project/RuoYi-Vue

前后端分离的好处

1. 前端代码和后端代码分离，独立开发，相互不影响
2. 前端页面发布和后端jar发布，也是独立部署，相互不影响

拉取代码仓库

点击橙色的克隆/下载，并复制其仓库地址

打开 Git Bash （需提前安装 git 软件），切换到本地存放的目录，例如 D盘的 workspaces 目录，在命令行输入以下命令：

git clone https://gitee.com/y_project/RuoYi-Vue.git
1

如下图所示则代表代码拉取成功

目录说明

拉取后的目录结构如下：

bin

window 系统下的批处理文件

• clean.bat：项目清理处理
• package.bat：项目打包处理
• run.bat：项目运行处理，但是一般使用 ry.bat 文件

doc

有一份若依官方4年前写的环境使用手册，可以忽略

sql

存放着项目所需的表结构和数据 sql 文件

• quartz.sql：定时任务
• ry_20231130.sql：系统项目

项目结构

com.ruoyi     
├── common            // 工具类
│       └── annotation                    // 自定义注解
│       └── config                        // 全局配置
│       └── constant                      // 通用常量
│       └── core                          // 核心控制
│       └── enums                         // 通用枚举
│       └── exception                     // 通用异常
│       └── json                          // JSON数据处理
│       └── utils                         // 通用类处理
│       └── xss                           // XSS过滤处理
├── framework         // 框架核心
│       └── aspectj                       // 注解实现
│       └── config                        // 系统配置
│       └── datasource                    // 数据权限
│       └── interceptor                   // 拦截器
│       └── manager                       // 异步处理
│       └── shiro                         // 权限控制
│       └── web                           // 前端控制
├── ruoyi-generator   // 代码生成
├── ruoyi-quartz      // 定时任务
├── ruoyi-system      // 系统代码
├── ruoyi-admin       // 后台服务
├── ruoyi-ui          // 前端界面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

项目分离

既然是前后端分离，那么我们将里面的目录进行整理，我们建立一个新的目录 ruoyi

前端界面项目

我们将拉取项目下的 ruoyi-ui，移动到 ruoyi 目录下，作为我们的前端界面项目

后端接口服务项目

在 ruoyi 目录下创建 ruoyi-backend 目录，作为我们后端接口服务项目，然后将剩余的目录和文件移动到 ruoyi-backend 目录下

整理后效果

ruoyi 目录下

ruoyi-ui 目录下

ruoyi-backend 目录下

创建项目数据库

以下的演示为在虚拟机安装的 MySql8 的操作，具体可按照自己本地环境的情况进行操作

登录 MySql 数据库

mysql -u root -p

# 提示输入 root 账号的密码
1
2
3

创建数据库账号授权

# 创建用户和指定密码
create user 'ruoyi'@'%' identified by 'ruoyi#Passw0rd';
# 创建数据库
create database ruoyi_db;
# 进行授权，将数据库的全部表，授权给用户，'%'代表全网访问
grant all privileges on ruoyi_db.* to 'ruoyi'@'%' with grant option;flush privileges;
1
2
3
4
5
6

数据导入

以下演示导入 ry_20231130.sql ，其他 sql 文件导入操作方式相同。推荐使用方式二进行数据导入。

命令行导入（方式一）

将 ry_20231130.sql 文件上传到 root 的 home 目录下

登录 mysql 后台

mysql -u root -p

# 提示输入 root 账号的密码
1
2
3

在 mysql 命令行下执行 ry_20231130.sql 文件

# 切换到 ruoyi_db 数据库
use ruoyi_db;
# 导入 sql 文件
source ry_20231130.sql;
1
2
3
4

导入成功如下图所示

客户端导入（方式二）

打开 navicat 等客户端软件，新建连接，并输入创建好的数据库信息，如下图所示

双击打开我们的数据库 ruoyi_db

鼠标右键 - 运行 SQL 文件，选择 ry_20231130.sql 文件，并点击 开始 按钮

运行成功如下图所示

数据查看

我们可以使用 navicat 等客户端查看我们导入的数据，如下图所示，项目的数据表已经成功导入进来了

导入项目

前端项目

将上面划分好的 ruoyi-ui 目录导入到 ide 中来，下图为 webstrom 界面

打开控制台，然后输入 npm install 命令进行依赖包的安装

完成安装后，如下图所示，会多出一个本地的组件库

创建启动脚本

创建运行前端服务的脚本，如下图所示

点击 + 号，创建一个 npm 类型的配置，其中使用 dev 脚本模式启动

dev 的脚本配置，对应的是项目中的 package.json 里面的配置，执行的是这部分的代码，启动一个开发服务器（后续说明）

后端项目

将上面划分好的 ruoyi-backend 目录导入到 ide 中来，下图为 intellij idea 界面

第一次导入进来，可能需要导入大量的依赖包，请耐心等待

配置数据库链接

找到 application-druid.yml 文件，调整 url 地址、用户名 username、密码 password ，对应着上面 数据导入 章节中创建的内容

配置 redis 链接

找到 application.yml 文件，调整 redis 属性下的 host 地址、密码 password （一般默认为空）

启动项目

先启动后端项目，再启动前端项目

后端项目

RuoYiApplication 为后端项目启动入口类，只要点击右上角的三角形按钮即可启动项目

前端项目

直接点击右上角的三角形即可运行

成功界面

前端项目运行成功后，会自动弹出默认的浏览器，并打开后台登录入口，如下图所示

输入验证码后，成功登录