ant design pro 如何实现动态菜单带上 icon 的

于 2024-08-20 15:28:42 发布
阅读量637 收藏 7
点赞数 11
分类专栏： ant design pro 文章标签： javascript react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39637597/article/details/141359719
版权

在这里插入图片描述

如上图所示，这里的菜单是从后端动态得到的

在这里插入图片描述
我们看下后端菜单的响应数据：

{
    "success": true,
    "data": [
        {
            "_id": "66b6cd18b9ad87dfa985f190",
            "name": "认证管理",
            "path": "/auth",
            "permission": {
                "_id": "66b9ad528554e602536acc84",
                "name": "授权管理菜单",
                "path": "/auth",
                "action": "GET",
                "permissionGroup": "66b9ad348554e602536acc67",
                "createdAt": "2024-08-12T06:36:02.754Z",
                "updatedAt": "2024-08-12T06:36:02.754Z",
                "__v": 0
            },
            "createdAt": "2024-08-10T02:14:48.819Z",
            "updatedAt": "2024-08-12T10:30:50.749Z",
            "__v": 0,
            "icon": "SecurityScanOutlined",
            "children": [
                {
                    "_id": "66b6cdbbb9ad87dfa985f1f9",
                    "name": "用户管理",
                    "path": "/auth/users",
                    "parent": {
                        "_id": "66b6cd18b9ad87dfa985f190",
                        "name": "认证管理",
                        "path": "/auth",
                        "permission": "66b9ad528554e602536acc84",
                        "createdAt": "2024-08-10T02:14:48.819Z",
                        "updatedAt": "2024-08-12T10:30:50.749Z",
                        "__v": 0,
                        "icon": "SecurityScanOutlined"
                    },
                    "permission": {
                        "_id": "66b6d352b9ad87dfa985f3f0",
                        "name": "查看用户",
                        "path": "/users",
                        "action": "GET",
                        "permissionGroup": "66b6d2c9b9ad87dfa985f34f",
                        "createdAt": "2024-08-10T02:41:22.895Z",
                        "updatedAt": "2024-08-10T08:03:22.477Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:17:31.227Z",
                    "updatedAt": "2024-08-12T10:23:32.641Z",
                    "__v": 0,
                    "icon": "HeartOutlined",
                    "children": []
                },
                {
                    "_id": "66b6cdcfb9ad87dfa985f210",
                    "name": "角色管理",
                    "path": "/auth/roles",
                    "parent": {
                        "_id": "66b6cd18b9ad87dfa985f190",
                        "name": "认证管理",
                        "path": "/auth",
                        "permission": "66b9ad528554e602536acc84",
                        "createdAt": "2024-08-10T02:14:48.819Z",
                        "updatedAt": "2024-08-12T10:30:50.749Z",
                        "__v": 0,
                        "icon": "SecurityScanOutlined"
                    },
                    "permission": {
                        "_id": "66b6d40db9ad87dfa985f475",
                        "name": "查看角色",
                        "path": "/roles",
                        "action": "GET",
                        "permissionGroup": "66b6d2e9b9ad87dfa985f377",
                        "createdAt": "2024-08-10T02:44:29.797Z",
                        "updatedAt": "2024-08-10T08:03:18.669Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:17:51.754Z",
                    "updatedAt": "2024-08-12T10:11:47.776Z",
                    "__v": 0,
                    "icon": "MenuFoldOutlined",
                    "children": []
                },
                {
                    "_id": "66b6cde2b9ad87dfa985f229",
                    "name": "菜单管理",
                    "path": "/auth/menus",
                    "parent": {
                        "_id": "66b6cd18b9ad87dfa985f190",
                        "name": "认证管理",
                        "path": "/auth",
                        "permission": "66b9ad528554e602536acc84",
                        "createdAt": "2024-08-10T02:14:48.819Z",
                        "updatedAt": "2024-08-12T10:30:50.749Z",
                        "__v": 0,
                        "icon": "SecurityScanOutlined"
                    },
                    "permission": {
                        "_id": "66b6d48bb9ad87dfa985f4e7",
                        "name": "查看菜单",
                        "path": "/menus",
                        "action": "GET",
                        "permissionGroup": "66b6d2ddb9ad87dfa985f362",
                        "createdAt": "2024-08-10T02:46:35.896Z",
                        "updatedAt": "2024-08-10T08:03:13.698Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:18:10.776Z",
                    "updatedAt": "2024-08-12T10:30:56.693Z",
                    "__v": 0,
                    "icon": "MenuFoldOutlined",
                    "children": []
                },
                {
                    "_id": "66b6cdfcb9ad87dfa985f244",
                    "name": "权限管理",
                    "path": "/auth/permissions",
                    "parent": {
                        "_id": "66b6cd18b9ad87dfa985f190",
                        "name": "认证管理",
                        "path": "/auth",
                        "permission": "66b9ad528554e602536acc84",
                        "createdAt": "2024-08-10T02:14:48.819Z",
                        "updatedAt": "2024-08-12T10:30:50.749Z",
                        "__v": 0,
                        "icon": "SecurityScanOutlined"
                    },
                    "permission": {
                        "_id": "66b1c55141364c27c464f858",
                        "name": "查看权限",
                        "path": "/permissions",
                        "action": "GET",
                        "permissionGroup": "66b1b00bb5d937a0aef34034",
                        "createdAt": "2024-08-06T06:40:17.991Z",
                        "updatedAt": "2024-08-10T08:03:27.245Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:18:36.390Z",
                    "updatedAt": "2024-08-10T02:18:36.390Z",
                    "__v": 0,
                    "children": []
                },
                {
                    "_id": "66b6ce29b9ad87dfa985f261",
                    "name": "权限组管理",
                    "path": "/auth/permission-groups",
                    "parent": {
                        "_id": "66b6cd18b9ad87dfa985f190",
                        "name": "认证管理",
                        "path": "/auth",
                        "permission": "66b9ad528554e602536acc84",
                        "createdAt": "2024-08-10T02:14:48.819Z",
                        "updatedAt": "2024-08-12T10:30:50.749Z",
                        "__v": 0,
                        "icon": "SecurityScanOutlined"
                    },
                    "permission": {
                        "_id": "66b6d52cb9ad87dfa985f546",
                        "name": "查看权限组",
                        "path": "/permission-groups",
                        "action": "GET",
                        "permissionGroup": "66b6d314b9ad87dfa985f3a7",
                        "createdAt": "2024-08-10T02:49:16.624Z",
                        "updatedAt": "2024-08-10T08:03:09.517Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:19:21.424Z",
                    "updatedAt": "2024-08-12T06:37:05.295Z",
                    "__v": 0,
                    "children": []
                },
                {
                    "_id": "66b6ce41b9ad87dfa985f280",
                    "name": "数据权限管理",
                    "path": "/auth/data-permissions",
                    "parent": {
                        "_id": "66b6cd18b9ad87dfa985f190",
                        "name": "认证管理",
                        "path": "/auth",
                        "permission": "66b9ad528554e602536acc84",
                        "createdAt": "2024-08-10T02:14:48.819Z",
                        "updatedAt": "2024-08-12T10:30:50.749Z",
                        "__v": 0,
                        "icon": "SecurityScanOutlined"
                    },
                    "permission": {
                        "_id": "66b6d586b9ad87dfa985f592",
                        "name": "查看数据权限",
                        "path": "/data-permissions",
                        "action": "GET",
                        "permissionGroup": "66b6d2fdb9ad87dfa985f38e",
                        "createdAt": "2024-08-10T02:50:46.780Z",
                        "updatedAt": "2024-08-10T08:03:04.925Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:19:45.054Z",
                    "updatedAt": "2024-08-12T08:23:19.027Z",
                    "__v": 0,
                    "children": []
                }
            ]
        },
        {
            "_id": "66b6ce76b9ad87dfa985f2a1",
            "name": "材料类目",
            "path": "/material-categories",
            "permission": {
                "_id": "66b6d7d0b9ad87dfa985f782",
                "name": "查看材料类目",
                "path": "/material-categories",
                "action": "GET",
                "permissionGroup": "66adec30d647a4fde5546b1c",
                "createdAt": "2024-08-10T03:00:32.932Z",
                "updatedAt": "2024-08-10T08:02:59.634Z",
                "__v": 0
            },
            "createdAt": "2024-08-10T02:20:38.550Z",
            "updatedAt": "2024-08-12T09:58:32.426Z",
            "__v": 0,
            "icon": "UsergroupAddOutlined",
            "children": []
        }
    ]
}

看到这里的数据结构了吗：

主要是 name children 这些比较重要，name 是显示出来的，children 是层级结构

当然还有 icon 之类的 还有 path ，也是要的，毕竟菜单要有路径的。

那后端如何实现呢：

// @desc Get permission menus
// @route GET /api/menus/fetch
// @access Private
const fetchMenus = handleAsync(async (req: RequestCustom, res: Response) => {
  const query = buildQuery(req.query);

  const menus = await Menu.find(query)
    .populate('parent')
    .populate('permission');

  const menusWithChildren = await Promise.all(
    menus.map(async (menu) => {
      const menuWithChildren = menu.toObject();
      menuWithChildren.children = await getChildren(menu._id);
      return menuWithChildren;
    }),
  );

  res.json({
    success: true,
    data: checkMenu(menusWithChildren, req.user),
  });
});

只要你的后端能返回出这样的数据就行。

那前端呢：

app.tsx

menu: {
      // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
      params: {
        userId: initialState?.currentUser?._id,
      },
      request: async () => {
        // initialState.currentUser 中包含了所有用户信息
        const { data, success } = await fetchMenuData();
        console.log('data', data);
        if (success) {
          console.log('loopMenuItem(data)', loopMenuItem(data));
          return loopMenuItem(data);
        } else {
          return [];
        }
      },
    },

这里还有 icon 的使用：

const iconEnum: { [key: string]: ReactElement<any, any> } = {
  UsergroupAddOutlined: <UsergroupAddOutlined />,
  SmileOutlined: <SmileOutlined />,
  HeartOutlined: <HeartOutlined />,
  GlobalOutlined: <GlobalOutlined />,
  MenuFoldOutlined: <MenuFoldOutlined />,
  TeamOutlined: <TeamOutlined />,
  DatabaseOutlined: <DatabaseOutlined />,
  GatewayOutlined: <GatewayOutlined />,
  SecurityScanOutlined: <SecurityScanOutlined />,
};

console.log('iconEnum', iconEnum);

const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] =>
  menus.map(({ icon, children, ...item }) => {
    return {
      ...item,
      icon: icon && iconEnum[icon as string],
      children: children && loopMenuItem(children),
    };
  });

完整代码是这样的：

import { Footer, SelectLang, AvatarDropdown, AvatarName } from '@/components';
import {
  DatabaseOutlined,
  GatewayOutlined,
  GlobalOutlined,
  HeartOutlined,
  LinkOutlined,
  MenuFoldOutlined,
  SecurityScanOutlined,
  SmileOutlined,
  TeamOutlined,
  UsergroupAddOutlined,
} from '@ant-design/icons';
import type { Settings as LayoutSettings, MenuDataItem } from '@ant-design/pro-components';
import { SettingDrawer } from '@ant-design/pro-components';
import type { RunTimeLayoutConfig } from '@umijs/max';
import { history, Link } from '@umijs/max';
import defaultSettings from '../config/defaultSettings';
import { errorConfig } from './requestErrorConfig';
import { fetchMenuData, currentUser as queryCurrentUser } from '@/services/ant-design-pro/api';
import React, { ReactElement } from 'react';
const isDev = process.env.NODE_ENV === 'development';
const loginPath = '/user/login';

const iconEnum: { [key: string]: ReactElement<any, any> } = {
  UsergroupAddOutlined: <UsergroupAddOutlined />,
  SmileOutlined: <SmileOutlined />,
  HeartOutlined: <HeartOutlined />,
  GlobalOutlined: <GlobalOutlined />,
  MenuFoldOutlined: <MenuFoldOutlined />,
  TeamOutlined: <TeamOutlined />,
  DatabaseOutlined: <DatabaseOutlined />,
  GatewayOutlined: <GatewayOutlined />,
  SecurityScanOutlined: <SecurityScanOutlined />,
};

console.log('iconEnum', iconEnum);

const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] =>
  menus.map(({ icon, children, ...item }) => {
    return {
      ...item,
      icon: icon && iconEnum[icon as string],
      children: children && loopMenuItem(children),
    };
  });

/**
 * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
 * */
export async function getInitialState(): Promise<{
  settings?: Partial<LayoutSettings>;
  currentUser?: API.CurrentUser;
  loading?: boolean;
  fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
}> {
  const fetchUserInfo = async () => {
    try {
      const response = await queryCurrentUser({
        skipErrorHandler: true,
      });
      return response.data;
    } catch (error) {
      history.push(loginPath);
    }
    return undefined;
  };
  // 如果不是登录页面，执行
  const { location } = history;
  if (location.pathname !== loginPath) {
    const currentUser = await fetchUserInfo();
    return {
      fetchUserInfo,
      currentUser,
      settings: defaultSettings as Partial<LayoutSettings>,
    };
  }
  return {
    fetchUserInfo,
    settings: defaultSettings as Partial<LayoutSettings>,
  };
}

// ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  return {
    actionsRender: () => [<SelectLang key="SelectLang" />],
    avatarProps: {
      src: initialState?.currentUser?.avatar,
      title: <AvatarName />,
      render: (_, avatarChildren) => {
        return <AvatarDropdown>{avatarChildren}</AvatarDropdown>;
      },
    },
    menu: {
      // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
      params: {
        userId: initialState?.currentUser?._id,
      },
      request: async () => {
        // initialState.currentUser 中包含了所有用户信息
        const { data, success } = await fetchMenuData();
        console.log('data', data);
        if (success) {
          console.log('loopMenuItem(data)', loopMenuItem(data));
          return loopMenuItem(data);
        } else {
          return [];
        }
      },
    },
    waterMarkProps: {
      content: '',
    },
    footerRender: () => <Footer />,
    onPageChange: () => {
      const { location } = history;
      // 如果没有登录，重定向到 login
      if (!initialState?.currentUser && location.pathname !== loginPath) {
        history.push(loginPath);
      }
    },
    links: isDev
      ? [
          <Link key="openapi" to="/umi/plugin/openapi" target="_blank">
            <LinkOutlined />
            <span>OpenAPI 文档</span>
          </Link>,
        ]
      : [],
    menuHeaderRender: undefined,
    // 自定义 403 页面
    // unAccessible: <div>unAccessible</div>,
    // 增加一个 loading 的状态
    childrenRender: (children) => {
      // if (initialState?.loading) return <PageLoading />;
      return (
        <>
          {children}
          {isDev && (
            <SettingDrawer
              disableUrlParams
              enableDarkTheme
              settings={initialState?.settings}
              onSettingChange={(settings) => {
                setInitialState((preInitialState) => ({
                  ...preInitialState,
                  settings,
                }));
              }}
            />
          )}
        </>
      );
    },
    ...initialState?.settings,
  };
};

/**
 * @name request 配置，可以配置错误处理
 * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
 * @doc https://umijs.org/docs/max/request#配置
 */
export const request = {
  baseURL: `${process.env.UMI_APP_API_URL}/api`,
  ...errorConfig,
};


export async function fetchMenuData() {
  return request<menuResponse>('/menus/fetch', {
    method: 'GET',
  });
}

这样就可以弄好动态菜单的：

我们拥有 12 年建站编程经验

  1. 虚拟产品交易平台定制开发
  2. WordPress 外贸电商独立站建站

我的网站

程序员随风
关注
专栏目录
Ant Design Pro 菜单自定义 icon
钬码狼酷的博客
05-23 2万+
Ant Design Pro 官方文档说明在菜单中使用自定义的 icon 由于 umi 的限制，在router.config.js是不能直接只是用组件的，Pro 中暂时支持 使用ant.design本身的 icon type，和传入一个 img 的 url。只需要直接在 icon 属性上配置即可，如果是个 url，Pro 会自动处理为一个 img 标签。 如果这样还不能满足需求，可以...
ant design pro v5 - 03 动态菜单 动态路由（配置路由 动态登录路由 登录菜单）
haiyabtx
10-17 9081
React + TypeScript + Ant Design Pro V5.2 开箱即用的中台前端/设计解决方案。动态菜单 动态路由 （配置路由+动态登录路由）
ant design pro新版本动态菜单
12-26
基于12月版本的ant design pro开源项目的动态菜单生成的完整方法附代码，粘贴就可使用，简单方便。内含解说。直接能用，本人亲测，非诚勿扰！！！
Ant Design Pro 实现动态菜单
SongZhengxing_的博客
05-21 876
当我们使用了动态返回的菜单时，图标就不出现了，这时需要手动映射icon图标，可参考。中不存在的路由信息，页面将会无法访问，具体问题可参考（最终实现的效果，先给管理员和普通和用户分配不同的菜单。前提说明：实现动态路由时，所有的路由都必须提前在。的 layout 方法，在配置中添加。切换登录不同角色的用户，会显示不同的菜单。实现过程中遇到的问题以及解决方法。接口返回的data菜单格式和。这里二级菜单的图标没有，官方是。中注册好，如果动态返回了。属性即可实现动态菜单。
ant design pro动态菜单
10-08
自己写的ant design pro动态菜单，不足请指正，互相学习借鉴！
Ant Design Pro 动态菜单 V2 版本以上都适用的简单三步操作 Ant Design
03-26
Ant Design Pro 动态菜单 V2 版本以上都适用的简单三步操作 Ant Design 最近用Ant Design Pro，本版本V2.3.0 ，适应于版本V2.0以上的动态菜单，这样就可以请求后台返回菜单了。超级简单，自研究的，只需三步操作很棒很nice。
Ant Design Pro自定义菜单图标
Misnice的博客
04-30 529
Ant Design Pro自定义菜单icon图标
浅谈Ant Design Pro 菜单自定义 icon
01-18
Ant Design Pro 官方文档说明 在菜单中使用自定义的 icon 由于 umi 的限制，在 router.config.js 是不能直接只是用组件的，Pro 中暂时支持 使用 ant.design 本身的 icon type，和传入一个 img 的 url。只需要直接在 ...
ant design pro 二级菜单_ant design pro 详情页面包屑保持路由层级并显示，菜单不显示...
weixin_36240211的博客
01-26 2095
ant design pro 详情页面包屑保持路由层级并显示，菜单不显示新项目中使用antd-pro框架，所以接下来会写一些关于antd-pro的踩坑详情页(修改页/添加页)和列表页在路由层级上通常是处在同一层的，这样可以渲染在同一位置，但是在面包屑的展示上给用户的感觉是详情页应该在列表页的下面,在antd-pro项目中并没有直接的方法，所以需要对menu.js文件做一下修改，下面是实现：//角色...
ant design pro v5 动态菜单
啊彬(Net)
04-22 1834
1.添加获取菜单请求（services/api.ts） export async function currentUserMenus() { return request<MenuDataItem[]>('/api/org/getUserMenus', { method: 'GET', }); } 2.修改app.tsx文件 1）修改getInitialState方法 export async function getInitialState(): Promise<{
vue3项目中动态antd中自带的icon
LFxiaosu的博客
10-13 1294
因为antd的icon使用的时候大多是先引入想要使用的icon， 然后再以标签的形式再去使用。如果是动态的使用antd自带的icon，则需要全局引入，
Ant Design Pro V5 动态菜单
JokerPan的博客
04-23 1916
记录一次Ant Design Pro V5动态菜单实现以及解决图标问题的过程
antd pro 之动态渲染菜单
baidu_33558407的博客
08-18 1956
antd pro 动态渲染菜单
antd pro 动态菜单实现及icon图标不显示问题
最新发布
lanjingmao的博客
06-28 431
antd pro 动态菜单 及 icon不显示实现
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程（33 个视频）
求知久久编程学院
12-08 960
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程（33 个视频） 很多人问如何获取动态菜单的，所以在 antd prov 5 来讲一下角色管理的。从最基础的用户管理，角色管理讲起，讲解权限管理、分配角色、分配权限、远程拉取动态菜单，涉及 antd pro v5 全方面后台操作流程，是国内仅有的关于 antd pro v5 动态菜单的视频教程。 Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程 #01 课程介绍 Ant Design Pro v5 获取动态
ant design pro + umi4的动态菜单与动态路由
猜测
04-07 5095
参考：https://blog.csdn.net/weixin_43294560/article/details/107447241。之后还将子路由routes为[]时，把父结点也清除的数据处理，以及使用patchClientRoutes来修改默认路由跳转，而原本routes.ts配置的路转就可以删除了。先说说我浪费了大量时间使用的处理方式：因为曾经的项目是umi3的，所以我就想原样搬过来，结果发现，布局页BasicLayout的子children不见了！
antdesign pro实现动态路由的菜单
04-02
Ant Design Pro 是一个企业级的中后台前端/设计解决方案，它提供了丰富的组件和模板，使得开发者可以快速构建高质量的中后台应用。Ant Design Pro 中的动态路由菜单可以根据用户的权限动态生成菜单，从而提高应用的灵活性和实用性。 下面是实现 Ant Design Pro 动态路由菜单的步骤： 1. 在路由配置文件中设置动态路由： ``` const routerConfig = [ { path: '/home', component: './Home', routes: [ { path: '/home/page1', component: './Page1', name: 'Page1', authority: ['admin'], }, { path: '/home/page2', component: './Page2', name: 'Page2', authority: ['user'], }, ], }, ]; ``` 在上面的路由配置中，我们设置了两个子路由，分别是 `/home/page1` 和 `/home/page2`。除了设置路由的路径和组件之外，我们还设置了菜单的名称 `name` 和权限 `authority`。`authority` 属性用于控制该菜单项的显示权限，只有具备相应权限的用户才能看到该菜单项。 2. 在菜单配置文件中生成动态菜单： ``` const menuConfig = { routes: [ { path: '/home', name: 'Home', icon: 'home', authority: ['admin', 'user'], children: [ { path: '/home/page1', name: 'Page1', authority: ['admin'], }, { path: '/home/page2', name: 'Page2', authority: ['user'], }, ], }, ], }; ``` 在上面的菜单配置中，我们根据路由配置中设置的 `name` 和 `authority` 属性生成了动态菜单。如果用户具备相应的权限，他们就能看到对应的菜单项。 3. 在页面中加载菜单组件： ``` import { getMenuData } from '@ant-design/pro-layout'; class Page extends React.Component { render() { const { routes } = this.props; const menuData = getMenuData(routes); return ( <div> <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}> {menuData.map(item => this.renderMenuItem(item))} </Menu> </div> ); } renderMenuItem(menuItem) { if (menuItem.children) { return ( <SubMenu key={menuItem.path} title={menuItem.name}> {menuItem.children.map(item => this.renderMenuItem(item))} </SubMenu> ); } else { return ( <Menu.Item key={menuItem.path}> <Link to={menuItem.path}>{menuItem.name}</Link> </Menu.Item> ); } } } ``` 在上面的代码中，我们使用 `getMenuData` 函数从路由配置文件中获取动态菜单数据，并使用 Ant Design Pro 的 `Menu` 组件渲染出菜单。如果菜单项包含子菜单项，我们使用 `SubMenu` 组件渲染子菜单，否则使用 `Menu.Item` 组件渲染菜单项。 通过以上步骤，我们就可以实现 Ant Design Pro 动态路由菜单了。通过设置路由配置文件和菜单配置文件，我们可以根据用户的权限动态生成菜单，从而提高应用的灵活性和实用性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序员随风

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

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

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

打赏作者

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

抵扣说明：

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

余额充值