menu 菜单开发

框架标准菜单定义

平台管理端菜单项文件位置： niucloud-core/src/main/resources/core/loader/menu/admin.json

店铺管理端菜单项文件位置： niucloud-core/src/main/resources/core/loader/menu/site.json

如下图所示

框架首次安装系统时，会自动加载上面的两个菜单到数据表 sys_menu 表中

插件菜单定义

插件中也可以自定义菜单项，框架对于插件的约束是宽容的，插件可以对整个系统的菜单项进行操作。甚至可以操作标准菜单定义。插件中菜单项的定义位置与标准菜单项的定义方式几乎相同

目录结构

以 cs_mall 插件为例:

平台管理端端菜单项在 niucloud-addon/cs_mall/src/main/resources/cs_mall/loader/menu/admin.json

店铺管理端菜单项在 niucloud-addon/cs_mall/src/main/resources/cs_mall/loader/menu/site.json

插件安装时，这两个地方定义的菜单项的结构，框架会自动装载到菜单数据表 sys_menu 中

插件中菜单定义示例

cs_mall 插件配置菜单如下

/***************************admin.json菜单*****/
{
  "menu": [
  ],
  "delete": [
  ]
}

/**************************site.json菜单配置***/
{
  "menu": [
    {
      "menu_name": "测试商城插件",
      "menu_short_name": "",
      "menu_key": "cs_mall",
      "parent_key": "",
      "menu_type": 0,
      "icon": "",
      "api_url": "",
      "router_path": "",
      "view_path": "",
      "methods": "",
      "sort": 100,
      "status": 1,
      "is_show": 1,
      "children": [
        {
          "menu_name": "测试商城插件",
          "menu_short_name": "",
          "menu_key": "cs_mall_hello_world",
          "parent_key": "",
          "menu_type": 1,
          "icon": "",
          "api_url": "cs_mall/hello_world",
          "router_path": "cs_mall/hello_world",
          "view_path": "hello_world/index",
          "methods": "get",
          "sort": 100,
          "status": 1,
          "is_show": 1
        }
      ]
    }
  ],
  "delete": [
  ]
}

插件中菜单定义字段说明

字段名	说明
menu_name	菜单标题，出现在菜单项上的文字(建议四个字)
menu_key	菜单的关键字，这个必须唯一，添加父子菜单，删除等操作键时使用，预定插件菜单关键字用插件名称做前缀
menu_short_name	菜单的简称，菜单简写名称（建议2个字说明，特殊情况3个字，例如：微官网）
parent_key	父级菜单标识 key，根菜单为空
menu_type	菜单类型，0表示目录 1表示菜单 2表示功能按钮
icon	菜单的图标
api_url	菜单对应的后台 api 接口地址，作用是控制 api 接口权限与菜单权限控制一致，并非实际调用URL
router_path	路由地址，表示实际的菜单调用网址 URL，菜单调用路由的开发，请参考相关开发说明
view_path	前端代码文件路径
methods	请求方法，与 api_url 对应，包括 GET, POST, PUT, DELETE 等
sort	排序号，排序号越大，越靠前
status	状态，1表示启用，0表示禁用
is_show	菜单是否可见 1表示可见 0表示隐藏
children	子菜单数组

菜单类型详细说明

menu_type = 0 ，表示为目录菜单，不需要设置浏览器访问地址、也没有前端页面

menu_type = 1，表示为菜单页面，可以在浏览器中打开。必须设置 router_path、view_path。 api_url 建议填写，用于权限控制

menu_type = 2，表示定义功能操作菜单。router_path、view_path 可以为空，api_url 建议填写，用于权限控制。通常用于定义增删改查等操作按钮，没有固定页面，在体现形式上为弹框、功能操作。例如：添加品牌弹框、删除品牌操作等

刷新菜单（必要）

每次修改菜单文件后，必须需要刷新菜单才能使更改生效。才能更新到数据表 sys_menu 中。刷新菜单的方式为：

1.登录平台端

2.点击【开发】->【平台菜单或店铺菜单】->【重置菜单】 3.刷新浏览器即可看到效果

根据后端定义的菜单路径找到前端页面开发

菜单定义中的 view_path 字段对应前端页面文件的路径。以下是查找对应文件的规则：

店铺端菜单的前端文件通常位于以下路径：

admin/src/addon/cs_mall/views/[view_path].vue

例如，view_path 为 hello_world/index，对应的文件路径为：

admin/src/addon/cs_mall/views/hello_world/index.vue

根据 router_path 定义的地址，即可看到页面功能

菜单权限设置

平台端，在管理员角色功能中，可以添加/编辑菜单来控制操作权限 店铺端，在权限管理—>角色管理中，可以添加/编辑菜单来控制操作权限

菜单注意事项

插件安装时，框架会自动装载到菜单数据表 sys_menu 中

每次修改编辑了菜单文件，必须要重启，再点击重置菜单才有效！！！

插件安装、卸载时，系统会自动装载、删除菜单，不需要开发者在插件的安装、卸载脚本中对于菜单做相关处理

插件开发时，有针对于菜单的处理，安装插件后一定要首先在店铺套餐中勾选，界面才会生效。常常，我们开发了菜单功能，发现界面没有按照预定的想法变化，就是忽略了上面的步骤