使用若依框架搭建后台管理系统

因为需要搭建一套后台管理系统，在网上找了一下开源的模板，基于功能与易用性的考虑，选择了若依框架前后端分离版本进行开发。

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

下面分享一下搭建过程。

一、环境准备

开发工具：使用IntelliJ IDEA进行后端代码开发，使用VS Code进行前端开发。

环境需求：

Node.js：Node.js和npm用于前端Vue.js项目的构建和管理，参考windows系统安装node.js环境。

MySQL：MySQL 5.7.0及以上版本，参考windows安装mysql5.7.32解压版。

Redis：Redis 5及以上版本，windows系统安装redis。

二、源码与工具下载

1.下载地址

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

若依框架修改器：https://gitee.com/lpf_project/RuoYi-MT/releases/tag/V4-20230425

源码下载的时候需要选择下载zip格式：

若依框架修改器选择exe格式：

下载完成后文件：

2.修改RuoYi框架包名

可以使用若依框架修改器修改源码中的项目名和包名等信息：

选中下载的zip源码文件，选择源码版本，然后按照需求修改内容后点击开始执行：

执行结束后会在zip源码文件的同目录下新建一个当前时间的文件夹，将修改完成的源码输出该目录中，后续就可以直接使用了。

三、初始化开发环境

1.导入项目

使用IDEA，点击File->Open打开修改完的源码，IDEA会自动加载项目结构：

加载完成后，点击File->Project Structure确保项目jdk为1.8版本：

2.导入sql脚本

数据库脚本在项目目录下sql文件夹下，需要新建数据库后导入：

创建数据库：

create database rust2;

切换数据库：

use rust2;

导入sql脚本文件（windows目录需要增加\作为转义字符）：

source E:\\idea\\Rust\\sql\\ry_20250522.sql;
source E:\\idea\\Rust\\sql\\quartz.sql;

导入完成：

3.修改配置文件

配置文件在admin模块下的resource文件夹中，文件名为application.yml和application-druid.yml：

修改MySQL配置(数据库名称、数据库用户和密码)：

修改redis配置(如果redis有密码需要配置)：

JWT令牌密钥修改（防止暴力破解）：

其他配置根据需要进行修改即可。

4.启动后端

配置完成后就可以启动后端模块了，启动脚本为admin模块下的RuoYiApplication.java，右键鼠标右键运行：

出现这个页面就启动成功了：

5.启动前端

前端代码在ui模块下，使用vs code工具打开该文件夹：

在vs code菜单栏中，点击【查看】->【终端】进入控制台：

通过npm install命令安装依赖：

通过npm run dev命令启动前端服务：

6.开发环境测试

通过浏览器，输入http://localhost 访问系统，（默认账户/密码 admin/admin123）：

登录成功后首页：

可以正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功。

四、业务逻辑开发

1.首页调整

若依的默认首页是项目说明，我们需要将其替换成统计页面，统计页面源码为index_v1.vue，在ui目录下\src\views文件夹：

我们将原先的index.vue删除掉，然后将index_v1.vue文件名修改成index.vue：

替换完成后重新登录就可以看见修改结果了：

其中图表的源码在\src\views\dashboard目录下：

可以根据需要在index.vue中引用，需要注意图表数据是静态的，使用的时候需要开发后台接口动态获取数据。

2.代码生成

代码生成功能可以快速生成展示数据页面，配置文件为generator模块中的resources目录下的generator.yml，为了方便管理，我们需要修改配置文件，将生成的业务代码放到统一模块中管理，此处修改为business：

登录系统后，点击【系统工具】->【代码生成】页面进行代码生成操作：

如果是已存在的表数据，可以通过导入功能生成。这边暂时没有迁移数据，将通过新建表方式，将业务表添加到数据库中：

create table rust_student (
  student_id           int(11)         auto_increment    comment '编号',
  student_name         varchar(30)     default ''        comment '学生名称',
  student_age          int(3)          default null      comment '年龄',
  student_hobby        varchar(30)     default ''        comment '爱好（0代码 1音乐 2电影）',
  student_sex          char(1)         default '0'       comment '性别（0男 1女 2未知）',
  student_status       char(1)         default '0'       comment '状态（0正常 1停用）',
  student_birthday     datetime                          comment '生日',
  primary key (student_id)
) comment = '学生信息表';

选择新建将上面建表sql粘贴进去执行：

建表完成后会展示到代码生成页面：

点击编辑按钮进行配置调整（可以调整字段信息、生成信息、菜单层级等）：

字段调整的时候需要注意，如果字段是枚举类型，需要提前在【系统管理】->【字典管理】管理中将枚举数据添加到字典中，比如学生性别字段：

然后在字段类型中选择该字典：

选择上级菜单：

提交完成后点击生成代码按钮：

生成完成后得到一个ruoyi.zip文件，会自动下载到本地：

将其解压后的代码按照目录复制到项目源码中，sql文件在数据库中执行即可：

因为生成的时候选择了新的business模块，我们需要新建一个模块：

修改business模块pom.xml文件：

修改admin模块pom.xml文件：

修改项目主pom.xml文件:

新建完成后将生成的java后台代码粘贴到business模块中：

将生成的vue前台代码复制到ui模块中：

执行sql文件：

完成后重新启动前后台模块，登录系统就可以看到新增的页面了：

3.定时任务

定时任务模块为quartz，需要在后台代码中编写任务内容，然后在前台页面中配置任务执行，后台参考代码位置\src\main\java\com\rust\quartz\task\RyTask.java：

暂时对于定时任务的需求是汇总数据，通过代码调用mysql用存储过程实现：

存储过程示例：

DELIMITER //
CREATE PROCEDURE `SummaryOrdersByDay`()
BEGIN

INSERT INTO order_summary (userid,summary_price,bill_type,summary_dimension,summary_time)
SELECT userid,SUM(order_price) ,'day','server',CURDATE() - INTERVAL 1 DAY  FROM orderlist_sync  WHERE pay_status=1 AND js_status=1 AND DATE(updated_at) = CURDATE() - INTERVAL 1 DAY 
GROUP BY userid;

INSERT INTO order_summary (order_name,summary_price,bill_type,summary_dimension,summary_time)
SELECT order_name,SUM(order_price) ,'day','player',CURDATE() - INTERVAL 1 DAY  FROM orderlist_sync  WHERE pay_status=1 AND js_status=1 AND DATE(updated_at) = CURDATE() - INTERVAL 1 DAY 
GROUP BY order_name;

INSERT INTO order_summary (order_type,summary_price,bill_type,summary_dimension,summary_time)
SELECT order_type,SUM(order_price) ,'day','pay',CURDATE() - INTERVAL 1 DAY  FROM orderlist_sync  WHERE pay_status=1 AND js_status=1 AND DATE(updated_at) = CURDATE() - INTERVAL 1 DAY 
GROUP BY order_type;

INSERT INTO order_summary (summary,summary_price,bill_type,summary_dimension,summary_time)
SELECT '汇总',IFNULL(SUM(order_price),0)  ,'day','summary',CURDATE() - INTERVAL 1 DAY  FROM orderlist_sync  WHERE pay_status=1 AND js_status=1 AND DATE(updated_at) = CURDATE() - INTERVAL 1 DAY ;

END//
DELIMITER ;

后台定时任务代码示例：

mapper代码示例：

前台配置示例：

这样简单的定时任务就配置完成了，其他功能的使用可以参考官方文档。

五、源码打包部署

1.前端打包

前端代码使用npm run build:prod命令打包，在vscode终端中执行：

打包完成后会在ui模块根目录下创建dist文件夹，该文件夹便是最终的前端静态代码：

2.前端部署

最终生产部署上线需要根据实际情况选择部署方式，前端一般放到nginx静态服务器就行。为了方便管理，我们这里直接选择宝塔面板部署：

创建静态站点：

将dist文件夹下文件全部上传到静态网站目录：

3.后端打包

后端使用maven工具打包，通过IDEA菜单栏中View->Tool Windows->Maven打开工具栏：

点击package打包（打包前注意将mysql、redis等配置修改为生产环境数值）：

打包完成后会在admin模块下创建一个target文件夹，最终的后端代码为rust-admin.jar：

4.后端部署

后端部署可以选择上传服务器后使用命令行执行：java –jar rust-admin.jar启动，这里为了方便管理，我们也选择在宝塔面板部署：

上传jar包到宝塔服务器：

新建java项目，选择jar包后自动填写，有需要可以修改：

配置完成后宝塔面板会自动读取配置启动。

5.配置nginx代理

前后端部署完成后，需要将后台接口在nginx上配置一下反向代理：

配置内容：

    location / {
		root c:/wwwroot/49.232.103.160;
		try_files $uri $uri/ /index.html;
		index  index.html index.htm;
    }

    location /prod-api/ {
		proxy_set_header Host $http_host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header REMOTE-HOST $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_pass http://localhost:8080/;
	 }

在宝塔中修改nginx配置文件：

这样系统就可以正常登录访问了，到这里通过若依框架搭建的后台管理系统整个流程就算是完成了，具体的业务细节就可以根据需求慢慢添加了。

扩展说明：

1.参考文档：https://doc.ruoyi.vip/ruoyi-vue/

2.若依官方网站：https://ruoyi.vip/