被秒了
一个Java摸鱼手,随便用用若依就搞出来一个交互良好,功能强大的管理后台,这让我这个一直用React写管理后台的前端工,很尴尬啊,一下就变小丑了,不行我得抗一波线,用React好好写一个既能对接若依,又可灵活扩展,比Antd Pro轻,用起来快乐的管理后台。
实现登陆页
登陆页,不用多复杂,但得简约,大气,最好是那种有美景的。
移动端简单适配一下即可
嗯,不错,可以了。
路由系统
约定式路由
约定式策略来实现路由已经被相当广泛的应用了,比如Nextjs,简单说就是文件结构决定路由数据。
那么为了实现这个策略,那就需要把路由数据拆分清晰,这样,才能保证约定的准确执行
所以,我把路由数据按照职责分为了三要素:
- 路由id
- 路由配置数据
- 路由结构
而真正决定路由结构的交给路由系统去实现约定式路由的生成
其中我实现完备的Ts支持,使三要素相互关联紧密,这样防止写错。
路由自动创建
我知道,代码写的再好,也没有不写代码简洁,或者某种意义说,你代码写的好就是为了不写。
全自动化的操作,你仅仅点点按钮,输入关键信息,其余交给自动化吧。
导航系统
导航系统包括菜单和Tabs,以及面包屑。
菜单
你知道若依的权限管理的策略?这么说吧,非常经典,无脑冲,一笔不改,但可以扩展啊。
如何扩展呢?其实说起来非常简单,远远比描述具体实现要容易的多。
通俗的,希望你懂的方式来说:
菜单是通往路由的入口之一,若依后端配置的便是菜单权限,只不过ta绑定了组件名称,路径等信息。
而这些数据对于前端来说是足够用了,而且还有点多,我其实仅仅就获取两个信息即可。
一个便是菜单数据的Three结构信息而另一个便是每个菜单数据绑定的组件名称,还记得我把路由分成三要素,其中便有路由id,直接在Ruoyui端配置即可。
那么核心的策略就变成了:
后端为主,前端为辅, 后端给出权限,前端给出资源, 后端给资源配置权限,前端为权限之外补充内容(也就是没被配置权限的,前端自行控制)
这种协调,兼容的策略。
Tabs
菜单大家都熟悉,但是Tabs对应每一个使用Antd pro管理后台的小伙伴来说都是隐隐约约的痛,即使有方案,也是需要折腾一番的,确实没法跟浑然一体来的实际,用起来痛快。
基本联动
独立管理Tab数据,响应路由变化,支持删除。
整个导航系统联动起来,一同与路由系统绑定。
支持拖动排序,且抗刷新
使用DndKit,性能相当不错。
拖拽有丝滑的动画效果。
拖拽顺序,支持浏览器刷洗记忆,刷新不丢失。
与KeepAlive相得益彰
项目里实现了KeepAlive,而且是改良版的方案,并不是一般的切换显示隐藏的方案,仅仅存在当前页面的dom。性能相当ok。
光拖拽就够了?拖出来当窗口吧
拖拽支持向下拖出,成为独立窗口,这个功能对于有跨路由显示页面或者分屏的小伙伴,有大用。
光拖拽怎么行,加上右键菜单。
设置系统
提供设置页面,可以针对项目中的功能制定设置项,可以通过设置生成设置文件。
项目设置
设置项目的名称,log,icon等关键信息,后续可以自行扩展。
主题设置
由配色和布局组成,配色分为“日”和“月”,组成了“明”,布局会根据不同配置提供对应效果的预览。
其他设置
可以设置路由的动画效果,提供了几种动画预设,并且可以设置为空。
状态系统
支撑整个业务功能体系的核心,通过该体系,大大降低了代码的耦合度,将数据+业务+UI清晰有效的分层,让业务可以尽可能的脱离UI的粘连,集中有效的流转,UI仅仅做触发。为此我指定
配套文档地址
这是一套状态管理策略,恰巧遇见了Redux
通过搬砖的痛点的深入理解,得出的一种可以深层次改善整个搬砖处境的策略。
- 迭代项目,尤其是迭代组件库,React最新版本,会陷入苦战。
- 业务流转混乱,业务到底在哪写心里没有个数,模棱两可的地方过多。
- Ts开发,类型定义位置无法无天,想在哪写在哪写,完全失去了对Ts类型的管理。
- 同样的业务实现的模式居然有多种,不够统一,很难找寻规律。维护成本指数上升。
- 项目逻辑几乎不分层,导致有用的没用的代码一堆,做不到心中有数。
- 跨组件的通信全靠吼,完全失去了优雅可言。
- 等等了
相信搬砖到一定程度的朋友,都会遇到这些问题,也会有一些思考,但是真正做出改变的人不多,毕竟总是在重复的任务中,从零开始,毫无沉淀,无法形成积累,自然就没有了复利。但是这件事只要你不着急,慢慢的思考怎么能事情变好一点,没事研究,自然也就能积累出一套打法,这样,工作的体验更多,最主要的是摸鱼的时间就变多了,自由无价。
当我研究出了这一套策略,恰巧,我觉得Redux比较经典,支撑我策略实现的基础功能都有,那就先用Redux做一波,有时间可以用Zustand再来一波。
整合Redux,只想说,爱你不容易
Redux除了不好用,其他的都好爆了,为啥这么说,功能多到爆炸,api全面,文档齐全,但上手难度,太高了,按照他的官方写法写出来的代码,就跟生肉一样,难以下咽。
但至少有一点,让我没觉得Redux得整,毕竟海外的外包喜欢的技术栈就是React经典全家桶:Redux就是其中之一, 好好好,客户要Redux,那就有必要折腾。
前端开发中状态管理的理念之争
理念之争这件事,经常发生。
- 有不少人认为,可以彻底不用状态管理库。
- 有很少一部分人觉得,完全用状态管理库,一点不用组件状态。
- 很大一部分人觉得,一些跨组件使用的状态用状态管理库,大部分用组件状态。
对于以上方案都用过的我而言,我是怎么做的?
首先我肯定是要坚定使用状态库的,N0.1策略就被pass了。
然后我在2和3中选,但是也都不符合我的需求,于是为了实现我心中理想,我制定了一个中庸的方案,那便是:
状态管理为主,组件状态尽量少用的方式
状态管理策略,直接决定了潜力
我至于这么选,并不是说,我这个就是最对的,而是他是我经过对此的搬砖中痛苦折磨所摸索出来的一种对称。
捞干的说,代码开发来开发去,最终都要落实到看的懂,那么究竟要看懂是什么?
我觉得要看懂就是两字 ”流转“,即业务的运转流程。
而流转的关键信息往往“藏”在了组件的关系上,通过一层一层的参数传递里。
随着组件的复杂度越来越高,那么拆分的程度也会越来越高, 相对应的参数传递的脉络就会越来越长,理解和维护的成本越来越大,或者说这阻碍了项目的发展,而且重构的难度更是难上加难,积重难返,这是不利于搬砖的。
所以,一种可以根治参数传递地狱,有效改善项目发展潜力的的需求,就变得非常的迫切。
所以,我潜心制定了这个Redux Eazy的整合方案,为的就是能够让项目变得更易于维护,大大的提升了项目的发展空间,就算换组件库都像换衣服一下Eazy,其具备的灵活性为项目注入了活力。
插件系统
得益于Redux Eazy策略带来的活力,让项目能够以一种组合的方式进行发展,那便是插件系统,通过插件系统,任何人都可以把自己的业务封装成插件,通过安装和卸载的方式管理功能模块,大大的增强了扩展性。
主题插件
配色插件
布局插件
功能插件
pdf插件
一个支持预览PDF插件,直接安装,即可支持PDF显示功能。
不用了可以卸载。
winbox插件
支持多窗口的插件
- 响应主题变换
- 对窗口进行了管理,可以函数方式创建和关闭
- 可更改主题
markdown插件
rive插件
想制作一个灵动的动画,那么Rive非常适合你。
社区插件
播放器插件
一个音乐播放器,非常的酷炫,如果你要问为啥管理后台要有播放器?那你得问深红老师
感谢深红老师的为Dland打上的花火。
Ai插件-shiki
一键搭建属于自己的Gpt网站
- 代码高亮
- 轻量的代码编辑器
- 灵动的光标
- 流式的现实
github项目地址
一个非常酷炫的Ai项目就这么搭建起来了,你想问这个项目怎么自定义,那你得问注定成为大法师 的一介同学
以后我就让Ai帮我写代码了,我说的。
战役才刚刚打响,接下来该怎么打
用Mui打造Nextjs+Mui,打造一个管理后台
我是这么想的,首先Antd的组件库,太“丑”了,这不是我说的,这是客户说的,丑也不是不好看,而是西方客户的审美主要是Material风格,自然客户不接受,所以
使用MUI组件库,打造一个Nextjs+Mui的面向客户的管理后台,就搬上日程了。
正好,我之前搬砖的时候,顺手实现了一个基于Mui捶打出的一套开发友好的组件库Mui Eazy
该组件库,目前已经投入到一个Nextjs生产项目,运行良好。 其中最核心的功能就是,实现表单的功能。
可以毫不费力的通过配置数据,直接创建出复杂的表单,为之后的自动生成提供基础。
并且提供了
不断探索Ai,为实现高效搬砖,提升摸鱼时间,不懈奋斗
代码生成是个好东西,我觉得代码生成可比可视化拖拖拽拽要实际,我觉得拖拖拽拽是设计更需要一些,至于编程,尽量还是靠代码生成,那么ts我觉得是天生的好苗子,因为你在写ts类型的时候就是在写注释,那么这个注释就可以跟Ai做沟通,生成代码的路子就会变得异常容易。
项目地址和预览地址
还有好多功能细节,玩法技巧,这里就不作赘述,有兴趣的朋友可以自行探索。
预览地址
源码已经开源,前端和java都放在一起了,java用的就是Ruoyi芋道作为后端例子,有兴趣的可以自行运行起来。
前端是一个Monorepo,放在了根目录下的frontend文件夹下,直接运行npm run start
即可运行。
项目地址
浪漫的事情,就是一起反卷
什么是反卷呢?
我这么跟你说,你看看能不能理解,就是外面全是野兽,我呢,想在世外找一个岛,建立一个避难所,我不停的建围墙,架武器来守卫,守护那一份珍贵的宁静。
引用一下泰戈尔说过的,“要活的像光一样,因为你不知道,谁会借着你的光走出黑暗”
我是真心希望内心光明,不想成为野兽的朋友,来闲D岛度度假,群号是551406017,这里有许多发光的人,可以为你注入能量,照亮一下前方的路。
未来有机会也可以一起做做项目赚赚刀乐,另外如果是小姐姐,咖啡福利必须安排上。
ok,就说这么多,如果你对这个搬砖项目感兴趣,有任何疑问都可以评论或者私信我,欢迎交流。