react-umi-对接Api-2.菜单模块

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 400+累计阅读 458平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄10年

关注

原创最新推荐文章于 2026-05-20 09:02:08 发布 458 阅读 AI 写同款· GEO 优化 ›

umi3+egg中台实战项目专栏收录该内容

¥59.90 ¥99.00

32篇文章

订阅专栏

超级会员免费看

在这里插入图片描述

菜单结构树拖拽演示

在这里插入图片描述
本篇看点：

菜单模块的CURD
菜单结构树的拖拽

src - pages - menu

index.tsx

import React, {
   
    useState, useRef } from

了解本专栏

订阅专栏解锁全文

超级会员免费看

收录于

当前文章被以下社区和专栏收录：

标签

#reactjs #typescript #umi

Umi4 + React + Antdesign实现动态菜单动态路由· 在umi框架中规定，子路由的path必须时父路由下面的的比如：父path: '/monitor', 子路由path必须以/monitor开头：/monitor/list!!!添加菜单的时候要按照强制这个规则。code: 200,msg: '请求成功',data: [menuName: '父级',menuName: '子级',},},],}, 阅读详情

相关推荐

react-umi-对接Api-5.总结篇

我们对接完api了实现了网络请求封装（记录路由（返回上一页）- 登录成功使用）防抖节流睡眠功能封装动态路由（菜单）以及layout布局获取用户信息登录模块菜单模块角色模块管理员模块网络请求封装 src - app.tsx / 网络请求封装 export const request: RequestConfig = { prefix: 'xxxx', // 域名设置 headers: { 'Content-Type': 'application/x-www-form-url

echo_Ae的博客 944

react-umi-对接Api-1.登录模块

本篇看点：我们设计了一个很漂亮的登录UI ProForm组件的使用跳转记录路由提交前使用md5加密 src - pages - login index.tsx import React, { FC } from 'react'; import { history } from 'umi'; import { message } from 'antd'; import ProForm, { ProFormText } from '@ant-design/pro-form'; import { Use

echo_Ae的博客 1087

react-umi-对接Api-3.角色模块

分配权限树演示本篇看点：角色的CURD 分配权限树实现 src - pages - authority - adminRole index.tsx import React, { useRef, useState } from 'react'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { Button, Tag, Popconfirm, message, Badge, Modal, Tree } fr..

echo_Ae的博客 384

react-umi-2-5.菜单列表

index.tsx import React, { useState } from 'react'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { Button, Tooltip, Tag, Popconfirm, message, Badge, Modal, Tree } from 'antd'; import { QuestionCircleOutlined, HomeOutlined, PlusOut..

echo_Ae的博客 649

react-umi-2.8使用umi块(umi ui)部署首页

效果图： umi2.x版本之前安装都是这样安装的可是umi3.x版本之后你会发现文档没有块这文档，反而只有一个使用 umi UI 哈哈哈，没错如果我们要使用umi提供的块模板，只能通过umi UI 来进行安装，下面开始介绍umi ui如何安装 yarn add @umijs/preset-ui -D 耐心等待一段时间... 安装完成之后，你肯定会一头雾水文档写的是执行 UMI_UI=1 umi dev 哈哈哈，其实这时候我们直接执行 yarn start 或者 ..

echo_Ae的博客 2150

react-umi-3-1.动态路由实现并实现路由权限

效果图：这时候让我们先把 pages 下面的 index.ts、index.less 删除掉这样看起来就整洁了很多好了开始正文。其实动态路由非常简单~实用umi框架之后，小伙伴们先来到umi文档运行时配置来让我们来实现 .umirc.ts import { defineConfig } from 'umi'; export default defineConfig({ nodeModulesTransform: { type: 'none', },

echo_Ae的博客 5052

Umi3（Umi）

Umi 是什么？ Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。 Umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户

echo_Ae的博客 1439

react-umi-2-7.权限管理之角色列表

效果图： pages - authority - adminRole index.tsx import React, { useState } from 'react'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { Button, Tag, Popconfirm, message, Badge, Modal, Tree } from 'antd'; import { PlusOutlined, Ed

echo_Ae的博客 714

易语言动态提示组件

易语言动态提示组件源码,动态提示组件

从零开始：手把手教你规划与部署华为FusionCompute虚拟化平台（含网络规划避坑指南）

本文详细介绍了华为FusionCompute虚拟化平台的规划与部署流程，特别针对网络规划中的常见问题提供了避坑指南。从硬件软件清单检查、网络平面配置到VRM部署方案选择，帮助用户高效完成部署并优化性能，适用于云计算环境中的虚拟化平台搭建。

weixin_28693447的博客 243

【DeepSeek+Office/WPS】智能办公新时代的全新利器

DeepSeek是一家专注于通用人工智能技术研发的中国科技公司，其核心产品DeepSeek-R1是一款开源的推理大模型，专注于复杂任务的高效处理，支持智能对话、文本生成、语义理解、计算推理、代码生成与补全等多种应用场景。作为国产、免费、开源且强大的AI平台，DeepSeek不仅致力于为终端用户提供高质量的智能服务，还为开发者提供了一整套完善的技术解决方案，帮助他们快速构建和部署自己的智能应用。

2303_77200324的博客 2791

【Qt笔记】1.VSCode搭建Qt运行环境

Qt6之后已经抛弃qmake，使用cmake。cmake相对qmake来说只有优点没有缺点。使用VSCode搭建完Qt的运行环境就能开开心心debug了.vscode需要使用的插件:2.Qt tools3.CMakec++插件可以不关注,缺啥都会提醒你.正常安装即可。

没有手牌的博客 2万+

SpringBoot实战——仿b站项目（一）

热部署就是当应用程序这种运行的时候升级冉家或者修改某一部分代码、配置文件时，无需手动启动应用，即可修改的部分生效工具 + IDEA配置。

weixin_52880572的博客 3455

不刷机！Jetson AGX Orin无损更新内核与设备树的两种安全方法（附备份恢复脚本）

本文详细介绍了Jetson AGX Orin在不刷机的情况下安全更新内核与设备树的两种方法，包括extlinux.conf动态加载和分区精准刷新方案。通过备份恢复脚本和工业级灾备方案，确保零数据丢失，适用于边缘AI和机器人等关键场景。

weixin_40192258的博客 307

电路中的DGND、GROUND、GROUND_REF的区别，VREF、VCC、VDD、VEE和VSS的区别？

DGND是数字地，是数字电路部分的公共基准端，用于连接数字电路的接地。