若依框架如何增加自己的菜单和代码

以下是在若依框架中增加自己的菜单和相关代码的步骤：

一、增加菜单

1. 数据库操作

- 菜单信息存储在数据库表中。若依框架中菜单相关的表主要有  sys_menu 。

- 使用数据库管理工具（如Navicat等）连接到数据库，向  sys_menu  表中插入一条新的菜单记录。需要填写的主要字段包括：

-  menu_name ：菜单名称。

-  parent_id ：父菜单的ID，如果是一级菜单则为0。

-  order_num ：菜单显示顺序的序号。

-  url ：菜单对应的前端页面路由地址，如果是后端接口则填写对应的接口地址。

-  perms ：权限标识，用于权限控制，可根据需求设置。

-  icon ：菜单图标，若依框架中通常使用Element - UI的图标类名。

2. 后端代码（可选，如果有后端功能关联）

- 如果菜单对应的功能需要后端接口支持，需要在相应的模块中创建新的接口。

- 在若依框架中，接口通常位于  com.ruoyi.[模块名].controller  目录下。创建一个新的  @RestController  类或者在现有控制器类中添加新的方法。

- 示例：

@RestController

@RequestMapping("/your - module - name")

public class YourController {

    @GetMapping("/your - method - name")

    public Result yourMethod() {

        // 这里编写业务逻辑

        return Result.success("操作成功");

    }

}

- 这里的  Result  通常是若依框架自定义的用于返回结果的类。

3. 前端代码

- 若菜单对应的是前端页面，需要在前端项目中创建新的页面组件。

- 在若依框架的前端项目中（基于Vue.js），页面组件通常位于  src/views  目录下。创建一个新的  .vue  文件。

- 如果菜单是嵌套在其他菜单下的子菜单，可能需要在父菜单对应的组件中进行一些配置，以正确显示子菜单。

- 在  src/router/index.js  文件中，需要配置路由信息，确保新菜单对应的页面组件能够被正确路由。示例：

{

    path: '/your - path',

    name: 'YourComponentName',

    component: () => import('@/views/your - component - file.vue'),

    meta: { title: '菜单名称', icon: 'el - icon - your - icon - class - name', affix: false }

}

二、权限控制（如果需要）

1. 后端权限控制

- 在若依框架中，权限控制通常是通过注解实现的。例如，在控制器方法上可以使用  @PreAuthorize  注解。

- 如果要限制只有特定权限的用户才能访问新创建的接口，可以这样设置：

@PreAuthorize("@ss.hasPermi('your:permission:code')")

@GetMapping("/your - method - name")

public Result yourMethod() {

    // 业务逻辑

    return Result.success("操作成功");

}

- 这里的  @ss.hasPermi('your:permission:code')  中的  your:permission:code  要与在数据库  sys_menu  表中设置的  perms  字段相对应。

2. 前端权限显示

- 在前端，若依框架根据用户的权限动态显示菜单。确保在登录获取用户权限信息时，新创建菜单的权限标识能够被正确处理。

- 在前端组件中，也可以根据用户权限进行功能的显示与隐藏，例如：

<el - button v - if="$store.getters.permissions.includes('your:permission:code')">操作按钮</el - button>

 

通过以上步骤，就可以在若依框架中增加自己的菜单和相关代码。