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

最新推荐文章于 2024-01-04 20:52:51 发布
最新推荐文章于 2024-01-04 20:52:51 发布
阅读量378 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： umi3+egg中台实战项目 文章标签： reactjs typescript umi
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/echo_Ae/article/details/111404512
本文介绍了如何在React项目中，使用Umi框架和TypeScript实现管理员模块的CURD操作。重点在于管理员的登录功能及其与API的对接。

在这里插入图片描述

管理员登陆演示

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

  1. 管理员的CURD

src - pages - authority - adminUser

index.tsx
import React, {
   
    useRef, useState } from
了解本专栏 订阅专栏 解锁全文 超级会员免费看
react-umi-对接Api-5.总结篇
echo_Ae的博客
12-19 901
我们对接完api了实现了 网络请求封装（记录路由（返回上一页）- 登录成功使用） 防抖节流睡眠功能封装 动态路由（菜单）以及layout布局获取用户信息 登录模块 菜单模块 角色模块 管理员模块 网络请求封装 src - app.tsx / 网络请求封装 export const request: RequestConfig = { prefix: 'xxxx', // 域名设置 headers: { 'Content-Type': 'application/x-www-form-url
react-umi-2-6.权限管理之管理员列表
echo_Ae的博客
12-08 596
效果图： pages - authority - adminUser index.tsx import React, { useState } from 'react'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { Button, Tag, Popconfirm, message, Badge } from 'antd'; import { PlusOutlined, EditOutlined,
umi-admin：基于Ant蚁金服umi可插拔的企业级react应用框架开发的Admin。最核心特征：对部署开发人员友好
02-06
由于antd和umi大版本更新，本仓库已不再进行更新了
react-MinAdmin基于dva框架antd的React后台模板
08-15
Min-Admin 基于dva框架 antd的React后台模板
获取umi3+egg中台实战项目代码
echo_Ae的博客
12-19 665
购买了专栏小伙伴记得看这个专栏哈，文章写的可能不是很清晰，所以我建议是先拿到代码，然后对着文章来看，并自行编写代码。 后端： git clone https://github.com/Ans1998/egg-middleground.git 后端拉了代码，记得把public里面的sql文件导入到你的数据库，还要开启redis 前端 git clone https://github.com/Ans1998/umi3-middleground.git 还有就是要添加我微信好友，我拉你进仓库 加我的格.
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-对接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-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-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 Admin 前端脚手架之ant-design-pro
最新发布
西京刀客
01-04 3495
Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
React+Umi+Dva+Antd后台管理系统——开篇搭环境
原来你来过
02-28 1369
搭建环境 工具 ： create-umi 环境： node v14.16.0 umi 3.3.9 yarn 1.22.10 全局安装umi插件 # umi ## 全局安装umi，并确保版本是2.0.0或以上 $ yarn global add umi 通过脚手架创建项目 介绍 create-umi umi 通过 create-umi 提供脚手架能力，包含： project，通用项目脚手架，支持选择是否启用 TypeScript，以及 umi-plugin-react 包含的功能 ant-design
React框架Umi实战(2)整合dva开发后台管理系统
weixin_34268310的博客
01-11 1221
umi官方推荐结合dva使用更配哦，其实他们都是同一位开发者开发的，属于阿里内部开源框架。 1 修改.umirc.js，开启dva支持 // ref: https://umijs.org/config/ export default { plugins: [ // ref: https://umijs.org/plugin/...
记一次umi开发后台管理系统的基础使用
xiaocuige007的博客
03-22 7463
先介绍一个umi,阿里开源的一个企业级可插拔的react脚手架, umi相对比react官方推荐的脚手架更加的简单,更贴近vue-cli的使用感受,而本文仅仅介绍基础使用方法,高手请绕行 开发展示 仿叮咚买菜后台管理系统预览: http://dingdong-admin.nodebook.top/ 仿叮咚买菜 前台页面: http://dingdong.nodebook.top/ 叮咚买菜后台管理...
使用 umi + dva 开发配置接口环境
冲锋
08-11 7677
乌米文档，创建项目模板啥的就不说了 关于选择project， 自定义开发的话， 选择 app 选项，其它不多说了 之后会问你选择 ts 吗？ ，是否使用antd， dva， code spliting ，dll，可选的，自己决定 最后，启动项目，打开控制台，一堆警告，和错误提示，关于警告，就是react 钩子在新版本已经换名字了，现在的这些以后会过时了，都是 .umi 文件报的，并...
开源」React-Admin终极后台管理项目解决方案
热门推荐
chenshiyang198959的博客
01-29 2万+
功能模块 首页 完整布局 换肤(全局功能，暂时只实现了顶部导航的换肤，后续加上其他模块) 导航菜单 顶部导航(菜单伸缩，全屏功能) 左边菜单(增加滚动条以及适配路由的active操作) UI模块 按钮(antd组件) 图标(antd组件并增加彩色表情符) 加载中(antd组件并增加顶部加载条) 通知提醒框(antd组件) 标签页(antd组件) 轮播图(ant动效组件) ...
react-umi-2-4.登录页
echo_Ae的博客
12-07 720
(⊙o⊙)…也确实没有设计天赋。。。登录页有点丑。 index.tsx import React from 'react'; import { history } from 'umi'; import { message } from 'antd'; import ProForm, { ProFormText } from '@ant-design/pro-form'; import { UserOutlined, LockOutlined } from '@ant-design/icons';
Umi + Dva + Antd的React项目实践
weixin_30550081的博客
07-10 2467
记录一下最近项目所用到的技术React + Dva + Antd + umi ，以免忘记。之前没有用过它们其中一个，也是慢慢摸索，了解数据整个流程。 先了解下概念 React 不多说，3大框架之一； Dva 是由阿里架构师 sorrycc 带领 team 完成的一套前端框架，在作者的 github 里是这么描述它的：“dva 是 react 和 redux 的最佳实践”。现在已经有...
dva+umi+Ant Design的react项目 + java 前后端分离
杨小猪 的博客
01-18 3604
参考链接： Umi dva react的详细介绍：https://www.cnblogs.com/lucas27/p/9292058.html 附带参考：https://www.jianshu.com/p/69f13e9123d9
源码共读-UMI-3
https://github.com/xiaohuoni
05-07 1399
接上一个博客源码共读-UMI-2，接下来，我们来继续执行 umi generate 从第一个博客中我们知道，执行umi generate 会执行lib/scripts/ generate.js lib/scripts/generate.js import yParser from 'yargs-parser'; import generate from '../generate'; ...
基于React的后台管理系统模板
然而，marmelab的react-admin与常见的国内“react admin template”有所不同，后者更多指基于Dva、Umi、Ant Design Pro等阿里系技术栈构建的管理系统脚手架。因此，需进一步查看文件内部结构才能确定具体技术路线。 ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

An_s

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

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

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

打赏作者

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

抵扣说明：

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

余额充值