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

最新推荐文章于 2025-11-14 01:35:44 发布

An_s

最新推荐文章于 2025-11-14 01:35:44 发布

阅读量901

点赞数

CC 4.0 BY-SA版权

分类专栏： umi3+egg中台实战项目文章标签： reactjs typescript umi

本文链接：https://blog.youkuaiyun.com/echo_Ae/article/details/111405137

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

32 篇文章 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

该博客总结了使用umi框架对接API的过程，包括网络请求封装、防抖节流功能、动态路由与布局获取用户信息、登录模块的实现。特别强调了umi框架中登录模块的正确流程，即先获取token再刷新页面请求用户信息和路由菜单。此外，还涵盖了菜单、角色和管理员的CURD操作。

我们对接完api了实现了

网络请求封装（记录路由（返回上一页）- 登录成功使用）
防抖节流睡眠功能封装
动态路由（菜单）以及layout布局获取用户信息
登录模块
菜单模块
角色模块
管理员模块

网络请求封装

src - app.tsx

/ 网络请求封装
export const request: RequestConfig = {
   
   
  prefix: 'xxxx', // 域名设置
  headers

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

An_s

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

react-umi-对接Api-4.管理员模块

echo_Ae的博客

12-19

378

管理员登陆演示本篇看点：管理员的CURD src - pages - authority - adminUser index.tsx import React, { useRef, useState } from 'react'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { Button, Tag, Popconfirm, message, Badge, Tooltip } from 'antd';..

react-umi-对接Api.网络请求封装以及Layout布局获取用户信息（动态路由）返回记录路由以及防抖节流睡眠功能实现

echo_Ae的博客

12-19

1103

本篇看点字符串component转成函数component antd4 动态Icon 网络请求封装 Layout布局获取用户信息（动态路由以及动态菜单）记录路由（返回上一页）防抖节流睡眠功能实现 app.tsx import React from 'react'; import { history } from 'umi'; import { message } from 'antd'; import qs from 'qs'; import { encode } from 'js-base64'

2 条评论您还未登录，请先登录后发表或查看评论

dumi：组件库开发的静态站点生成器

最新发布

gitblog_00896的博客

11-14

452

在现代前端开发中，组件库扮演着至关重要的角色，它能够提高开发效率，统一项目规范。dumi 作为一个专注于组件库开发的静态站点生成器，旨在帮助开发者快速搭建功能丰富的组件文档和示例展示页面。它不仅提供了丰富的文档编写功能，还支持Markdown编写模式，让开发者能够轻松上手。 ## 项目技术分析 dumi 基于React进行开发，利用了React的组件化思想，使其在处理组件库的文档和示例展示上更

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

echo_Ae的博客

12-19

1011

本篇看点：我们设计了一个很漂亮的登录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

前端框架（react+umi+dva+ant design pro ）攻克: 一、typescript接口(三）

热水钟博客

01-08

597

接口一、接口在typescript中定义的本质是：定义好对象的属性及类的具体结构，即约束他们的类型检查，从而增加代码可拓展性和可维护性。简单总结就是：代码合规性的契约定义。二、接口如何定义，即接口在各个场景是的应用举例：（一）定义对象的外形，约定对象必须有哪些属性（1）最常见的： interface LabelledValue { label: string; } （2）可选属性定义：可选属性名字定义的后面加一个?符号。 interface ...

umi官方文档中的常见API

你是我修复不了的bug，但我会用一生去维护

05-24

3466

umi官方文档中的常见API 基本API dynamic 动态加载组件常见使用场景：组件体积太大，不适合直接计入bundle中，以免影响首屏加载速度。例如：某组件HugeA包含巨大的实现/依赖了巨大的三方库，且该组件HugeA的使用不在首屏显示范围内，可被单独拆出。这时候，dynamic就该上场了为什么使用dynamic：封装了使用一个异步组件需要做的状态维护工作，开发者可以更加专注于自己的业务组件开发，而不必关心code spliting、async module loading等等技术细节通常搭配

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

echo_Ae的博客

12-19

352

分配权限树演示本篇看点：角色的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..

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

echo_Ae的博客

12-07

612

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..

前端项目中react-umi框架的简单用法

lzfengquan的博客

01-26

6677

做完最近项目目发现umi是个好东西，但是没有用过，（目前写的react项目时原生的写法）现在尝试用umi做个简单的项目页面，如果大家有更好的信息技术可以咱们交流一下共同提高。 umi官网地址：https://umijs.org/zh-CN/docs/getting-started dva地址： https://dvajs.com/ 先简单了解一下什么是umi： Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能

使用UmiJS封装请求umi-request

与世无争的垃圾

05-11

6416

根据umi-request文档做了一个极简单的封装，错误处理，中间件可以根据文档自行添加请求代理在.umirc.js中配置proxy // request.js import { extend } from "umi-request"; const errmsgMap = { } const HttpRequest = function ({url, method, params}) { let config = { method, // 请求方式

umi call 后端 api

weixin_66886617的博客

03-28

1666

主思路使用 umi request包装的service api，并且做好参数交换。

react,umi,antd-pro的layout封装过程

Coralpapy的博客

12-09

1709

import React from 'react'; import { Layout, Form, Icon } from 'antd'; import isEqual from 'lodash/isEqual'; //深度比较对象 import memoizeOne from 'memoize-one'; //降低渲染的函数复杂度，提高性能 import { history, connect } from 'umi'; import { ContainerQuery } from 'react-co..

ant design pro v5拦截器配置token类比axios拦截

o__o__o__o的博客

05-05

4824

ant design pro v5拦截器配置token和axios拦截

UmiJS介绍--api（八）

热门推荐

eunice_sytin的博客

10-31

1万+

1.路由 1.1 umi/link 通过声明的方式做路由跳转。 import Link from 'umi/link'; export default () => { <div> /* 普通使用 */ <Link to="/list">Go to list page</Link> /* 带参数 */ <Link...

react与umi

weixin_30762087的博客

09-26

1597

我们知道umi 是一个编译工具，但它同时也是一个前端框架。它对社区的 webpack，react-router 等进行的封装，使得我们可以基于它快速搭建一个 React 项目。第一步：安装umi 第二步：创建目录，并写入配置在 umi 中，约定的存放页面代码的文件夹是 pages，是复数，不过我们可以添加 singular 为 true 来让 page 变为约定的文件夹。接下来让我们...

react+umi项目踩坑记

旺旺旺小小苏的博客

07-20

2576

在react项目中添加umi-plugin-react插件之后发现运行不起来了，报错提示如下：解决方法如下： 1、检查umi的版本，如果是3.0以上的那么需要Node 10.13或以上，如果版本没问题的话 2、升级umi-plugin-react为@umijs/preset-react 在pageage.json中修改依赖将umi-plugin-react修改为@umijs/preset-react 然后删除node_modules文件重新安装依赖即可 ...

使用 umi + dva 开发配置接口环境

冲锋

08-11

7677

乌米文档，创建项目模板啥的就不说了关于选择project，自定义开发的话，选择 app 选项，其它不多说了之后会问你选择 ts 吗？，是否使用antd， dva， code spliting ，dll，可选的，自己决定最后，启动项目，打开控制台，一堆警告，和错误提示，关于警告，就是react 钩子在新版本已经换名字了，现在的这些以后会过时了，都是 .umi 文件报的，并...

umi --api

qq_36303110的博客

01-25

594

API 基本API dynamic动态加载组件(通常搭配import语法) 使用场景：组件体积太大，不适合直接计入bundle，以免影响首屏加载速度。例如：某组件 HugeA 包含巨大的实现 / 依赖了巨大的三方库，且该组件 HugeA 的使用不在首屏显示范围内，可被单独拆出。这时候，dynamic 就该上场了。 // 封装异步组件 AsyncHugeA import { dynamic } from 'umi'; export default dynamic({ loader: async fu

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

echo_Ae的博客

12-08

4986

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

React umi 请求完整接口路径

09-18

根据引用[2]和[3]，我们知道Umi是一个基于React的企业级前端框架，提供了开箱即用的功能，包括请求库（通常是Umi自带的request）和路由配置等。在Umi中，通常使用内置的`request`方法进行网络请求。此外，Umi也...