RuoYi-Geek“菜单管理”使用方法

1、首先启动好若依极客的前后端

代码下载地址：Geek-XD: 开源社区爱好者https://gitee.com/geek-xd

后端需要连接数据库，并且找到文件（下图），修改url、username、password

前端需要安装yarn,具体的在.md文件中有。

如果需要改端口号在文件（下图）中修改

---

2、进入若依系统找到“菜单管理”

【以下是两种方式进行的新增菜单，每一个子目录是一个方式】

2.1在已有的菜单下加入子菜单

（以下的例子是：在“系统管理”这一级目录下加“菜单ZJ”）

 （1）、创建vue页面“菜单ZJ”

想看到system/ menuzj/index页面，需要在代码中加上如图一。

图一

代码如下

<template>
    <div>
        <h1> {
   
   { message }} </h1>
        <button @click="handleClick"> Click me </button>
    </div>
</template>
<script>
    export default {
        data() {
           return{
               message: 'Hello'
           }
        },
        methods:{
           handleClick(){
             this.message = "Clicked"
           }
        }
    }
</script>

（2）、进入菜单管理页面，找到系统管理。点击后面的“新增”按钮，如图

（3）、出现上图的界面之后，填写上面的信息

            菜单类型：选“菜单”。
            菜单名称，路由地址，组件路径这几个是必填的。

           菜单名称：就是显示到左侧目录中的名称。（菜单ZJ）
           路由地址：自定义，一般写页面名称就可以。

             （与router/index.js一致（我这里是： menuzj））
           组件路径：根据前端项目你的页面所在位置来写。

             （例：我这个页面是在views下的system下的 menuzj下的index。

                         【system/ menuzj/index  页面代码下面给出。】

               它默认就是在views路径下，所以views这一层就不需要写了。

               因此我的组件路径就是system/ menuzj/index）

填写完成的如下图二（路由地址、 组件路径，请看图二及图三的内容）

图二

图三

关于新页面的显示，需要在router/index.js中进行添加新的路由（如图三所示，代码在下面给出）

在 router 配置中添加路由步骤

1. 在 src/router 目录下， 找到对应的 router 文件， 例如 index.js。

2.  添加如下代码：                                                                                                                 

   import menuzj from '@/views/system/menuzj/index.vue';                                
   
   {      path: '/hello',                                                                       
          component: menuzj, 
          name: 'Menuzj', 
          meta: 
         { 
          title: 'Hello 菜单',
          icon: 'example',
        } 
   }

• path: 定义路由的路径。 例如 /hello
• component: 指向组件的路径。 
• name: 定义路由的名称， 例如 menuzj
• meta: 定义路由的 meta 信息，包含 title， icon 等。】

​（4）、新增好菜单后，页面显示如图四

图四

（5）、新建菜单完成如下图所示

2.2通过“代码生成”开辟新菜单

（1）、进入菜单管理页面，点击新建菜单，把页面出现的该填写的填写好

（2）、点击“代码生成”，先把这个新菜单的数据库的表设计建立好，通过导入表，将相关的信息填写好，点击“提交”成功之后，点击“代码生成”，会下载一个zip压缩包，其中包括表，前端，后端代码（如下图的内容）。

（3）、将相关的代码复制到相关的文件夹下，

先将新出现的表加入到连接的数据库中，可以直接拖进navicat连接的数据库中。

将vue文件夹中的两个文件复制，在软件VS或者IDEA中点击选中src再ctrl+v,

将后端的main文件夹复制，在软件VS或者IDEA中点击选中src再ctrl+v。

重新启动后端，刷新前端页面，那么就可以显示出来了，至此新建菜单完成。

3、菜单管理中常见配置项介绍：

• 菜单名称：
  • 作用： 用于在菜单栏中显示， 让用户知道这个菜单项是干什么的。
• 父级菜单：
  • 作用： 定义菜单的层级关系， 决定菜单在菜单栏中的位置。
• 显示排序：
  • 作用： 控制菜单在同一层级下的显示顺序。 数字越小越靠前。
• 路由地址：
  • 作用： 指定菜单项对应的页面路由，当用户点击菜单时， 跳转到该路由对应的页面。
• 组件路径：
  • 作用： 指定菜单项对应的组件， 通常和路由地址对应。
• 菜单图标：
  • 作用： 用于美化菜单，并增强识别性。
• 权限标识：
  • 作用： 用于控制用户对菜单的访问权限， 也用于控制按钮的显示。

  • 与后端接口绑定，用于精细化控制用户操作。和用户的权限紧密相关，设置不同的权限，可以看到不同的菜单

• 状态：
  • 作用： 用于控制菜单是否显示或者禁用。
• 是否外链
  • 作用： 用于判断路由是否为外链， 如果是外链需要配置外链地址。
• 是否缓存：
  • 作用： 设置是否缓存页面。
• 是否显示：
  • 作用： 控制菜单是否在菜单栏显示。