Umi3(Umi)

本文介绍了 Umi3,一个由蚂蚁金服开发的可扩展前端应用框架,详细讲解了其路由、插件体系和在企业级项目中的应用。通过学习本专栏,读者将掌握使用 react-umi3 和 TypeScript 构建前端项目,以及 node-egg 进行后端架构的方法。此外,还将涉及前端动态路由、动态菜单、登录权限等高级功能,后端接口验证、JWT 实现等实践内容。
摘要由CSDN通过智能技术生成

Umi 是什么?

Umi,中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。

Umi 是蚂蚁金服的底层前端框架,已直接或间接地服务了 3000+ 应用,包括 java、node、H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户,同时希望他也能服务好外部用户。

它主要具备以下功能:

🎉 可扩展,Umi 实现了完整的生命周期,并使其插件化,Umi 内部功能也全由插件完成。此外还支持插件和插件集,以满足功能和垂直域的分层需求。
📦 开箱即用,Umi 内置了路由、构建、部署、测试等,仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集,内涵丰富的功能,可满足日常 80% 的开发需求。
🐠 企业级,经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证,值得信赖。
🚀 大量自研,包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等,满足日常项目的周边需求。
🌴 完备路由,同时支持配置式路由和约定式路由,同时保持功能的完备性,比如动态路由、嵌套路由、权限路由等等。
🚄 面向未来,在满足需求的同时,我们也不会停止对新技术的探索。比如 dll 提速、modern mode、webpack@5、自动化 external、bundler less 等等。

本专栏的技术栈

前端:react-umi3框架配合typeScript
后端:node-egg框架

看购买专栏力度,如果很多小伙伴购买了的话我会继续出:
vue版本的前端
php版本的后端、python版本的后端、go版本的后端、java版本的后端

本专栏合适什么人进行学习?

合适想直接开发前端或者后端的人,或者对前端或者后端感兴趣的,这项目也可以直接做为中台系统进行业务开发。

本专栏有什么技术要求?

没有要求,感兴趣即可

学习完本专栏有什么效果?

前端:可以快速基于react-umi框架进行前端项目架构,完全熟悉一个前端项目是如何从零开始架构的。

后端:可以快速基于node-egg框架进行后端项目架构,完全熟悉一个后端项目是如何从零开始架构的。

项目功能介绍以及演示

前端:动态路由、动态菜单、动态Icon、动态组件、路由权限、记录路由(返回上一页)、网络请求封装、防抖节流睡眠、Layout快速布局、高级组件(ProComponents降低在中后台实现
CRUD 的成本而研发,其思路是减少必要的状态维护,更专注于业务)、登录模块、菜单模块、角色模块、管理员模块…

后端:手动实现JWT、接口参数验证、登录登出Api、菜单模块Api、管理员模块Api、角色模块Api、异常处理、日志处理…

数据库:mysql、redis

项目演示

登录模块:实现了用户账号密码登录,返回记录路由(上一页),Layout组件获取用户信息并动态添加路由(菜单)以及动态生成组件、icon…

在这里插入图片描述

登出模块

在这里插入图片描述

菜单模块:实现了CURD

在这里插入图片描述

菜单结构(可拖拽进行嵌套):无限极嵌套菜单生成。

在这里插入图片描述

角色模块:实现了CURD

在这里插入图片描述

分配权限:实现了该角色拥有什么菜单

在这里插入图片描述

管理员模块:实现了CURD

在这里插入图片描述

管理员登录:实现了权限控制

在这里插入图片描述

路由权限

在这里插入图片描述

Api演示

Api多达20个,还手动实现JWT(编写JWT插件)、接口参数验证、SQL链表、如何生成无限极菜单树…

在这里插入图片描述在这里插入图片描述
欢迎━(`∀´)ノ亻!小伙伴购买本专栏

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

An_s

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

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

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

打赏作者

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

抵扣说明:

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

余额充值