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

最新推荐文章于 2024-07-02 21:44:17 发布
最新推荐文章于 2024-07-02 21:44:17 发布
阅读量735 收藏
点赞数
分类专栏： umi3+egg中台实战项目 文章标签： reactjs typescript umi
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/echo_Ae/article/details/111405137
版权
该博客总结了使用umi框架对接API的过程，包括网络请求封装、防抖节流功能、动态路由与布局获取用户信息、登录模块的实现。特别强调了umi框架中登录模块的正确流程，即先获取token再刷新页面请求用户信息和路由菜单。此外，还涵盖了菜单、角色和管理员的CURD操作。
摘要由CSDN通过智能技术生成

我们对接完api了实现了

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

网络请求封装

src - app.tsx

/ 网络请求封装
export const request: RequestConfig = {
   
  prefix: 'xxxx', // 域名设置
  headers: {
   
    'Content-Type':</
了解本专栏 订阅专栏 解锁全文 超级会员免费看
An_s
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
订阅专栏
react-umi-对接Api-4.管理员模块
echo_Ae的博客
12-19 273
管理员登陆演示 本篇看点： 管理员的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 944
本篇看点 字符串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'
在非 antd pro 项目中使用 umi OpenAPI
weixin_52258854的博客
07-02 646
大家好，我是松柏。自从跟着鱼皮哥使用了中的OpenAPI插件之后，我已经无法忍受自己写请求后端接口的方法了，所以这篇文章记录一下如何在非项目中使用OpenAPI。
前端框架（react+umi+dva+ant design pro ）攻克: 一、typescript接口(三）
热水钟博客
01-08 517
接口 一、接口在typescript中定义的本质是： 定义好对象的属性及类的具体结构，即约束他们的类型检查，从而增加代码可拓展性和可维护性。 简单总结就是：代码合规性的契约定义。 二、接口如何定义，即接口在各个场景是的应用举例： （一）定义对象的外形，约定对象必须有哪些属性 （1）最常见的： interface LabelledValue { label: string; } （2）可选属性定义：可选属性名字定义的后面加一个?符号。 interface ...
react-umi-对接Api-1.登录模块
echo_Ae的博客
12-19 872
本篇看点： 我们设计了一个很漂亮的登录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
umi官方文档中的常见API
你是我修复不了的bug，但我会用一生去维护
05-24 3075
umi官方文档中的常见API 基本API dynamic 动态加载组件 常见使用场景：组件体积太大，不适合直接计入bundle中，以免影响首屏加载速度。例如：某组件HugeA包含巨大的实现/依赖了巨大的三方库，且该组件HugeA的使用不在首屏显示范围内，可被单独拆出。这时候，dynamic就该上场了 为什么使用dynamic：封装了使用一个异步组件需要做的状态维护工作，开发者可以更加专注于自己的业务组件开发，而不必关心code spliting、async module loading等等技术细节 通常搭配
使用umiJs框架搭建的react项目react-umi-master.zip
最新发布
07-03
使用umiJs框架搭建的react项目react-umi-master.zip
react-map:使用React实现Google Maps API
05-07
带有React的Google Maps 现场演示： : 图书馆 特征 绘制多边形 绘制折线 查找两个坐标之间的路线 获取两个坐标之间的路径 可用脚本 克隆后，可以在项目目录中运行以下命令： yarn install 安装运行该项目所需的...
react-native-geolocation：React Native的地理位置API
02-03
@react-native-community/geolocation Geolocation API扩展了。 当前，在Android上，它使用 。 Google不推荐使用此API，因为它不如推荐的准确和慢。 这是我们希望在不久的将来更改的内容 。 为了将新的与React ...
react-umi可插拔的企业级react应用框架
08-14
React Umi 是一个高度可插拔的企业级 React 应用框架，它旨在简化大型复杂项目的构建过程，同时提供丰富的功能和灵活性。Umi 由阿里系的 umijs 团队开发，它以路由为中心，借鉴了 Next.js 的一些设计理念，如约定式...
React-dnd js库学习
06-01
总结来说，React-DND是一个强大的工具，它简化了在React应用中实现拖放功能的过程。通过理解其基本概念、安装步骤和使用方法，开发者可以轻松地在项目中集成拖放交互，提升用户体验。在实际开发中，不断探索和实践...
前端项目中react-umi框架的简单用法
lzfengquan的博客
01-26 6282
做完最近项目目发现umi是个好东西，但是没有用过，（目前写的react项目时原生的写法）现在尝试用umi做个简单的项目页面，如果大家有更好的信息技术可以咱们交流一下共同提高。 umi官网地址 ：https://umijs.org/zh-CN/docs/getting-started dva地址： https://dvajs.com/ 先简单了解一下什么是umi： Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能
umi call 后端 api
weixin_66886617的博客
03-28 1505
主思路 使用 umi request包装的service api，并且做好参数交换。
react,umi,antd-pro的layout封装过程
Coralpapy的博客
12-09 1560
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 4349
ant design pro v5拦截器配置token和axios拦截
UmiJS介绍--api（八）
eunice_sytin的博客
10-31 9949
1.路由 1.1 umi/link 通过声明的方式做路由跳转。 import Link from 'umi/link'; export default () =&gt; { &lt;div&gt; /* 普通使用 */ &lt;Link to="/list"&gt;Go to list page&lt;/Link&gt; /* 带参数 */ &lt;Link...
umi3 useRequest 配置
qq_37942845的博客
07-23 3465
1,在app.ts中写入: import { RequestConfig } from 'umi'; import config from "@/config" import errorHandler from "@/util/errorHandle" export const request: RequestConfig = { prefix: process.env.NODE_ENV === "production" ? config.baseurl :'api/', credenti
React-Native入门与实战：打造原生体验的跨平台应用
"React-Native技术分享，涵盖了React-Native的诞生背景、开发特点、开发模式以及实践应用，适合React-Native初级开发者学习基础概念。" React-Native是由Facebook开源的跨平台UI开发框架，旨在提供原生应用的交互...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

An_s

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

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

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

打赏作者

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

抵扣说明：

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

余额充值