【若依后管框架(前后端分离版)】 如何部署若依以及添加自己的功能模块和菜单

已于 2022-11-11 16:11:57 修改
阅读量2.6w 收藏 409
点赞数 116
分类专栏： 后端
于 2022-11-11 16:10:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44226181/article/details/127805791
版权

若依框架 前后端分离 功能模块 菜单管理 代码生成器
关键词由CSDN通过智能技术生成
本文详细介绍了如何在若依后管框架（前后端分离版）中添加自己的功能模块和菜单。从环境配置、源码下载、数据库准备到使用若依代码生成器生成接口和页面，再到后端代码的修改和前端页面的部署，一步步带你实现功能的完整添加。通过实例展示了若依框架的强大和易用性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

【若依后管框架(前后端分离版)】 如何添加自己的功能模块以及菜单

【文章开始之前，先说一句，若依牛逼！】

文章目录

1 若依框架简介

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

若依前后端分离版官方文档地址：http://doc.ruoyi.vip/ruoyi-vue/

在这里插入图片描述

代码仓库地址：https://gitee.com/y_project/RuoYi-Vue

在这里插入图片描述

2 若依框架【前后端分离版】下载安装运行
2.1 运行系统环境需求
  • JDK >= 1.8

在这里插入图片描述

  • MySQL >= 5.7

在这里插入图片描述

  • Maven >= 3.0

在这里插入图片描述

  • Node >= 12

在这里插入图片描述

  • Redis >= 3

在这里插入图片描述

2.2 源码下载

【官方推荐直接clone 仓库，笔者这里就直接下载源码 了】

前后端分离版源码地址：

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

在这里插入图片描述

直接下载源码压缩包

在这里插入图片描述

等待下载完成

在这里插入图片描述

OK，解压

在这里插入图片描述

点进去看看

在这里插入图片描述

OK，一个标准的Maven 多模块 工程项目。

2.3 数据源准备

在解压好的源码目录下 sql 文件夹

在这里插入图片描述

这两个sql 文件需要导入数据库

【新建名为 ry-vue (当然这个可以改)的数据库】

笔者因为已经有了 个同名数据库，就小改一下

在这里插入图片描述

确定

在这里插入图片描述

直接拖入两个SQL 文件

在这里插入图片描述

开始

另一个同理

最终数据库效果

在这里插入图片描述

OK。这样数据库 就准备好了 。

2.4 运行项目

使用IDEA 【或者其他开发工具导入项目】

在这里插入图片描述

OK。

在这里插入图片描述

这样就同步完成了。

修改一下数据源配置
在这里插入图片描述

主要是数据库名 和数据库 用户名密码。

OK，现在就可以启动服务了

在这里插入图片描述

注意启动时，Redis 服务需要处于 运行状态，不然会抛异常【因为若依框架使用到了缓存】
在这里插入图片描述

在这里插入图片描述

OK，这样后端 就启动成功 了。但是因为是前后端完全分离的，
直接访问

在这里插入图片描述

所以还需要启动项目

可以直接 在IDEA 工具中打开命令行

在这里插入图片描述

cd 到 ruoyi-ui 目录下

在这里插入图片描述

OK，使用命令 npm install 安装前端项目需要的依赖

在这里插入图片描述

等待安装完成

在这里插入图片描述

OK，依赖下载完成。现在就可以 运行前端项目 了

使用命令 npm run dev

在这里插入图片描述

等待运行完毕

在这里插入图片描述

OK，编译成功后，会自动弹出页面

在这里插入图片描述

这就是 若依【前后端分离版】 系统了。

3 添加自己的功能模块

在这里插入图片描述

输入计算密码， 进入系统

在这里插入图片描述

可以看到，默认的系统就是这个样子了，基本的功能可以说是相当齐全，让人忍不住再说一次，【若依牛逼！】

现在我们就来添加一个简单的自己的功能模块【主要是让大家能够知道使用方法】

3.1 准备数据源

这里笔者就简单的，比如说做一个“活动管理”，肯定得有一张活动表嘛

直接在数据库中创建

在这里插入图片描述

随便来几个字段**【注意：把注释填好，有用！！！！！！】**

在这里插入图片描述

在这里插入图片描述

给表 本身也弄个 注释！！！ 有用！！！！！！

在这里插入图片描述

【确定】

在这里插入图片描述

OK。数据表新建成功。

随便插入一条数据吧

在这里插入图片描述

OK。

3.2 使用若依代码生成器生成菜单以及接口、页面

接下来就是本文最核心的地方了

在这里插入图片描述

在这旁边加上一个活动管理，对我们刚刚新弄的活动表 进行管理

在这里插入图片描述

点击菜单管理，先来一个“大 菜单”

在这里插入图片描述

在这里插入图片描述

确定

在这里插入图片描述

这样就添加上了，下面祭出 代码生成！

在这里插入图片描述

导入我们数据里面的 活动表

在这里插入图片描述

确定

在这里插入图片描述

OK，现在进行 一些设置，点击 编辑

在这里插入图片描述

在这里插入图片描述

可以看到一共有 三栏

① 基本信息

在这里插入图片描述

这个没啥好说的，改一下作者吧，这样生成的 接口代码中，文档注释 author 就会显示这个 了

② 字段信息

在这里插入图片描述

这个根据自己的需求改就好了

③ 生成信息【这个是核心】

在这里插入图片描述

OK，直接提交。【注意上级菜单】

在这里插入图片描述

点击生成 代码

在这里插入图片描述

下载下来

在这里插入图片描述

OK。代码生成就算完成了。

3.3 后端添加代码模块

就靠若依 生成的代码肯定是不够的，我们需要在后端源码 基础上做一些 修改

在这里插入图片描述

新建一个子模块

在这里插入图片描述

创建

在这里插入图片描述

OK，一个干净的子 模块

修改一下pom 文件

在这里插入图片描述

    <dependencies>
        <dependency>
            <groupId>com.ruoyi</groupId>
            <artifactId>ruoyi-common</artifactId>
        </dependency>
    </dependencies>

因为需要借助 “通用模块” 中的一些功能，所以要将其作为依赖加入我们的 活动模块中【properties 需要杀删掉， 父工程已经有了，这里最好不写】

修改ruoyi-admin 模块的pom 文件，将我们自己添加的活动模块加进来

        <!--    活动信息管理    -->
        <dependency>
            <groupId>com.ruoyi</groupId>
            <artifactId>ruoyi-activity</artifactId>
            <version>${ruoyi.version}</version>
        </dependency>

在这里插入图片描述

【记得刷一下，到这里 “自己动手” 的地方就算完了】

3.4 添加生成的代码到项目中

OK，现在就可以祭出 我们代码生成那一步生成的压缩包 了

在这里插入图片描述

解压出来

在这里插入图片描述

剩下的事儿 就非常简单 了

① 数据库

在这里插入图片描述

直接一把运行

在这里插入图片描述

OK， 运行成功。

② 添加后端代码

在这里插入图片描述

在这里插入图片描述

看看生成了些 啥

在这里插入图片描述

OK，控制器、实体类、数据层接口、业务层接口、业务层 实现类全有 了

还剩一个，mapper 映射文件

在这里插入图片描述

在这里

直接复制进去

在这里插入图片描述

OK，后端完事儿。

③ 贴入前端 代码

在这里插入图片描述

直接复制这一整个 文件夹

在这里插入图片描述

贴到这里，OK

还有个页面

在这里插入图片描述

也直接复制 这个文件夹

在这里插入图片描述

OK。大功告成

重启一下后端服务

在这里插入图片描述

查看前端页面

在这里插入图片描述

牛逼！

4 测试功能
4.1 增

请添加图片描述

在这里插入图片描述

4.2 删

请添加图片描述

在这里插入图片描述

4.3 改

请添加图片描述

在这里插入图片描述

4.4 查

略

OK，就这样吧，若依的强大 远远不止这些，大家慢慢探索吧，若依牛逼！！！

最后 我们一定能够成为我们想要去成为的人。

若依前后端分离使用笔记（搭建新的菜单块、前端提交数据到后端）
qq_51135343的博客
08-16 626
若依，前后端分离，前端提交到后端url
若依框架前后端不分离版 前后端代码生成教程
weixin_45869434的博客
05-24 3838
若依框架前后端不分离版 前后端代码生成教程
若依框架如何增加自己的菜单和代码
alankuo的专栏
09-29 2114
这里的 @ss.hasPermi('your:permission:code') 中的 your:permission:code 要与在数据库 sys_menu 表中设置的 perms 字段相对应。- 在 src/router/index.js 文件中，需要配置路由信息，确保新菜单对应的页面组件能够被正确路由。- 如果菜单是嵌套在其他菜单下的子菜单，可能需要在父菜单对应的组件中进行一些配置，以正确显示子菜单。- 如果菜单对应的功能需要后端接口支持，需要在相应的模块中创建新的接口。
如何在若依框架上新建自己的子项目
weixin_43768573的博客
12-08 1147
如何在若依框架上新建自己的子项目
如何在Ruoyi创建新模块
最新发布
Shang_hh的博客
04-04 652
在ruoyi后端框架中创建新的模块
RuoYi-Vue（前后端分离版）配置教程
qq_64042847的博客
09-15 1015
若依框架运行配置
若依框架搭建
m0_68154641的博客
08-22 1104
4、找到配置文件ruoyi-admin\src\main\resources\application-druid.yml中有链接数据库的配置，将数据库，用户和密码填上自己的就可以连到相应的数据库了，如图，我的数据库名为flow_test。ps:redis如果是连的其他远程的redis或者有自己的用户名和密码或端口，则需要在若依ruoyi-admin\src\main\resources\application.yml 文件中做相应的改动。1、vscode打开若依项目下的ruoyi-ui文件夹。
RuoYi框架添加自己的模块（学生管理系统CRUD）
没化妆，别看
03-08 378
首先肯定要顺利运行框架了，这个我不多说了。
若依（RuoYi）系统添加自定义的模块
08-02 6396
其实在RuoYi系统的后台进行菜单配置时，就会需要填写组件的路径，指向自己的模块组件就可以了。在IDEA中配置所有相关pom.xml文件配置好以后，重新更新一下所有项目模块。正常情况，在ruoyi-admin下能看到自定义的模块，如果显示红色提示说明依赖有问题，先去自己的模块下的compile一下。5、配置RuoYiApplication程序的入口，将自定义的模块让Spring扫描到，这样自己模块的所有类，才能真正使用。"})
若依如何新建一个菜单并显示菜单页面（超详细图文教程）
Keep__Me的博客
08-28 2万+
我这里的需求是想在班级管理下面直接加一个学生管理页面，然后显示班级管理的页面，然后在这个页面的基础上修改这个页面。例：我这个学生管理模块的页面是在views下的system下的student下的index。当我们使用若依的时候，我们会有这样的需求，就是直接在这个菜单下面直接再添加一个菜单。我们首先需要新增一个学生管理菜单，然后在前端项目中把vue页面加进去。进来菜单管理页面，我们能看到，列表中显示的菜单，跟左边的菜单是完全对应的。菜单名称，路由地址，组件路径这几个是必填的，其他的暂时就不用管了。
【若依框架1】前后端分离版本添加菜单
Wondgirl的极客世界
09-18 581
1.登陆若依系统后[系统管理]>>[菜单管理]>>[新增]2.直接在sys_menu表中插入一条数据。【若依框架1】前后端分离版本添加1级菜单。
若依框架 : 新建模块及配置菜单
yuanchun的知识整理
07-25 2345
若依框架 新增模块 配置菜单
【若依框架】代码生成详细教程，15分钟搭建Springboot+Vue3前后端分离项目，基于Mysql8数据库和Redis5，管理后台前端基于Vue3和Element Plus，开发小程序数据后台
热门推荐
编程小石头
06-25 8万+
今天我们来借助若依来快速的搭建一个基于springboot的Java管理后台，后台网页使用vue3和 Element Plus来快速搭建。
若依前后端分离框架低代码功能
qq_26875391的博客
09-25 1575
若依前后端分离版的低代码功能使用 若依的后端访问方法 若依的匿名访问
若依框架的使用（前后端分离版）
weixin_43765747的博客
02-10 2万+
若依是一套全部开源的免费的快速开发平台，可以迅速搭建项目。 这里我们主要介绍前端的使用。 介绍 前端采用Vue、Element UI。 权限认证使用Jwt，支持多终端认证系统。 支持加载动态权限菜单，多方式轻松权限控制。 高效率开发，使用代码生成器可以一键生成前后端代码。 功能 用户管理：用户是系统操作者，该功能主要完成系统用户配置。 部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。 岗位管理：配置系统用户所属担任职务。 菜单管理：配置系统菜单，操作权限，按钮权限
若依_Vue前后端分离版本
weixin_45728126的博客
04-18 1313
RuoYi是一款基于的极速后台开发框架。RuoYi 是一个Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Apache Shiro、MyBatis、Thymeleaf、Bootstrap），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、通知公告等。在线定时任务配置；支持集群，支持多数据源，支持分布式事务。com.ruoyi├── common // 工具类│ └── annotation // 自定义注解。
如何在若依添加菜单选项
小林的博客
09-05 1156
到这里就结束，写这些文章只是为了帮助我这个新人小白记住和后面观看，对你有帮助可以点点赞
若依管理系统RuoYi-Vue（一）：项目启动和菜单创建
qq_20236937的博客
05-24 2000
本篇文章将会讲解如何如何使用RuoYi-Vue前后端分离版本若依管理系统应该是国内最受欢迎的完全开源的后端管理系统了吧，看看gitee上的star数量，着实惊人。若依系统有很多个版本个人觉得前后端不分离版本太丑，而且前后端不分离维护起来也比较困难，而微服务版本又拆分的太细，前后端分离版本则正好，本篇文章将会讲解如何如何使用RuoYi-Vue前后端分离版本。
若依vue前后端分离版添加新模块
weixin_52472152的博客
03-11 777
2、修改ApplicationConfig类，增加@ComponentScan注解。1、新建ruoyi-sale模块，文件结构如下图。3、前端文件结构如下图。
ruoyi前后端分离前端新增菜单
01-03
### Ruoyi 前后端分离架构下前端新增菜单功能实现 在Ruoyi项目中，为了实现在前后端分离架构下的前端新增菜单功能，需遵循一系列操作流程来确保新菜单能够被正确识别并显示。 #### 准备工作 确保已经安装并配置好必要的开发环境以及依赖库。对于Ruoyi框架而言，通常会使用Vue.js作为前端技术栈的一部分[^2]。 #### 创建自定义菜单 当需要向应用中添加新的业务模块时，可以通过代码生成工具快速搭建基础结构。此时应先通过后台管理界面或其他方式创建所需的自定义菜单项[^3]。 ```javascript // 示例：假设这是用于请求API的服务文件 api/menuService.js import axios from 'axios'; export const addMenu = (menuData) => { return axios.post('/api/menus', menuData); }; ``` #### 修改前端路由配置 为了让新加入的菜单能够在导航栏或侧边栏展示出来，还需要更新前端项目的路由设置。这一步骤涉及到编辑`router/index.js`中的路径映射关系，并确保每个菜单项都有相应的组件与之对应。 ```javascript // router/index.js 中的部分内容 { path: '/new-feature', name: 'NewFeature', component: () => import('@/views/new-feature/index.vue'), meta: { title: '新特性', icon: 'el-icon-s-promotion' } } ``` #### 更新视图层逻辑 最后，在具体的页面组件内完成数据获取和服务调用等功能实现。这里可能涉及到了解Vuex状态管理模式的应用场景，以便更好地管理和共享全局变量。 ```vue <!-- views/new-feature/index.vue --> <template> <div class="new-feature"> <!-- 组件模板代码 --> </div> </template> <script> import { mapActions } from 'vuex'; import { addMenu } from '@/api/menuService'; export default { methods: { ...mapActions(['fetchData']), handleAddMenu() { let newMenuItem = {/* 菜单项的数据 */}; addMenu(newMenuItem).then(response => { console.log('成功添加菜单:', response.data); }).catch(error => { console.error('失败:', error); }); } }, mounted() { this.fetchData(); } } </script> ```
评论 22
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Ding Jiaxiong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值