五年React手,竟被一个用Ruoyi的Java佬给秒了,这不完了么

被秒了

一个Java摸鱼手,随便用用若依就搞出来一个交互良好,功能强大的管理后台,这让我这个一直用React写管理后台的前端工,很尴尬啊,一下就变小丑了,不行我得抗一波线,用React好好写一个既能对接若依,又可灵活扩展,比Antd Pro轻,用起来快乐的管理后台。

实现登陆页

登陆页,不用多复杂,但得简约,大气,最好是那种有美景的。

img

移动端简单适配一下即可

img

嗯,不错,可以了。

路由系统

约定式路由

约定式策略来实现路由已经被相当广泛的应用了,比如Nextjs,简单说就是文件结构决定路由数据。

img

那么为了实现这个策略,那就需要把路由数据拆分清晰,这样,才能保证约定的准确执行

所以,我把路由数据按照职责分为了三要素:

  • 路由id
  • 路由配置数据
  • 路由结构

img

而真正决定路由结构的交给路由系统去实现约定式路由的生成

img

其中我实现完备的Ts支持,使三要素相互关联紧密,这样防止写错。

img

路由自动创建

我知道,代码写的再好,也没有不写代码简洁,或者某种意义说,你代码写的好就是为了不写

img

全自动化的操作,你仅仅点点按钮,输入关键信息,其余交给自动化吧。

导航系统

导航系统包括菜单和Tabs,以及面包屑。

菜单

你知道若依的权限管理的策略?这么说吧,非常经典,无脑冲,一笔不改,但可以扩展啊。

如何扩展呢?其实说起来非常简单,远远比描述具体实现要容易的多。

通俗的,希望你懂的方式来说:

菜单是通往路由的入口之一,若依后端配置的便是菜单权限,只不过ta绑定了组件名称,路径等信息。

而这些数据对于前端来说是足够用了,而且还有点多,我其实仅仅就获取两个信息即可。

一个便是菜单数据的Three结构信息而另一个便是每个菜单数据绑定的组件名称,还记得我把路由分成三要素,其中便有路由id,直接在Ruoyui端配置即可。

img

那么核心的策略就变成了:

后端为主,前端为辅, 后端给出权限,前端给出资源, 后端给资源配置权限,前端为权限之外补充内容(也就是没被配置权限的,前端自行控制)

这种协调,兼容的策略。

img

Tabs

菜单大家都熟悉,但是Tabs对应每一个使用Antd pro管理后台的小伙伴来说都是隐隐约约的痛,即使有方案,也是需要折腾一番的,确实没法跟浑然一体来的实际,用起来痛快。

基本联动

独立管理Tab数据,响应路由变化,支持删除。

整个导航系统联动起来,一同与路由系统绑定。

img

支持拖动排序,且抗刷新

使用DndKit,性能相当不错。

拖拽有丝滑的动画效果。

拖拽顺序,支持浏览器刷洗记忆,刷新不丢失。

img

与KeepAlive相得益彰

项目里实现了KeepAlive,而且是改良版的方案,并不是一般的切换显示隐藏的方案,仅仅存在当前页面的dom。性能相当ok。

img

光拖拽就够了?拖出来当窗口吧

拖拽支持向下拖出,成为独立窗口,这个功能对于有跨路由显示页面或者分屏的小伙伴,有大用。

img

光拖拽怎么行,加上右键菜单。

img

设置系统

提供设置页面,可以针对项目中的功能制定设置项,可以通过设置生成设置文件。

img

项目设置

设置项目的名称,log,icon等关键信息,后续可以自行扩展。

img

主题设置

由配色和布局组成,配色分为“日”和“月”,组成了“明”,布局会根据不同配置提供对应效果的预览。

img

img

其他设置

可以设置路由的动画效果,提供了几种动画预设,并且可以设置为空。

img

状态系统

支撑整个业务功能体系的核心,通过该体系,大大降低了代码的耦合度,将数据+业务+UI清晰有效的分层,让业务可以尽可能的脱离UI的粘连,集中有效的流转,UI仅仅做触发。为此我指定

img

配套文档地址

这是一套状态管理策略,恰巧遇见了Redux

通过搬砖的痛点的深入理解,得出的一种可以深层次改善整个搬砖处境的策略。

  • 迭代项目,尤其是迭代组件库,React最新版本,会陷入苦战。
  • 业务流转混乱,业务到底在哪写心里没有个数,模棱两可的地方过多。
  • Ts开发,类型定义位置无法无天,想在哪写在哪写,完全失去了对Ts类型的管理。
  • 同样的业务实现的模式居然有多种,不够统一,很难找寻规律。维护成本指数上升。
  • 项目逻辑几乎不分层,导致有用的没用的代码一堆,做不到心中有数。
  • 跨组件的通信全靠吼,完全失去了优雅可言。
  • 等等了

相信搬砖到一定程度的朋友,都会遇到这些问题,也会有一些思考,但是真正做出改变的人不多,毕竟总是在重复的任务中,从零开始,毫无沉淀,无法形成积累,自然就没有了复利。但是这件事只要你不着急,慢慢的思考怎么能事情变好一点,没事研究,自然也就能积累出一套打法,这样,工作的体验更多,最主要的是摸鱼的时间就变多了,自由无价。

当我研究出了这一套策略,恰巧,我觉得Redux比较经典,支撑我策略实现的基础功能都有,那就先用Redux做一波,有时间可以用Zustand再来一波。

整合Redux,只想说,爱你不容易

Redux除了不好用,其他的都好爆了,为啥这么说,功能多到爆炸,api全面,文档齐全,但上手难度,太高了,按照他的官方写法写出来的代码,就跟生肉一样,难以下咽。

但至少有一点,让我没觉得Redux得整,毕竟海外的外包喜欢的技术栈就是React经典全家桶:Redux就是其中之一, 好好好,客户要Redux,那就有必要折腾。

前端开发中状态管理的理念之争

理念之争这件事,经常发生。

  1. 有不少人认为,可以彻底不用状态管理库。
  2. 有很少一部分人觉得,完全用状态管理库,一点不用组件状态。
  3. 很大一部分人觉得,一些跨组件使用的状态用状态管理库,大部分用组件状态。

对于以上方案都用过的我而言,我是怎么做的?

首先我肯定是要坚定使用状态库的,N0.1策略就被pass了。

然后我在2和3中选,但是也都不符合我的需求,于是为了实现我心中理想,我制定了一个中庸的方案,那便是:

状态管理为主,组件状态尽量少用的方式

状态管理策略,直接决定了潜力

我至于这么选,并不是说,我这个就是最对的,而是他是我经过对此的搬砖中痛苦折磨所摸索出来的一种对称。

捞干的说,代码开发来开发去,最终都要落实到看的懂,那么究竟要看懂是什么?

我觉得要看懂就是两字 ”流转“,即业务的运转流程。

而流转的关键信息往往“藏”在了组件的关系上,通过一层一层的参数传递里。

随着组件的复杂度越来越高,那么拆分的程度也会越来越高, 相对应的参数传递的脉络就会越来越长,理解和维护的成本越来越大,或者说这阻碍了项目的发展,而且重构的难度更是难上加难,积重难返,这是不利于搬砖的。

所以,一种可以根治参数传递地狱,有效改善项目发展潜力的的需求,就变得非常的迫切。

所以,我潜心制定了这个Redux Eazy的整合方案,为的就是能够让项目变得更易于维护,大大的提升了项目的发展空间,就算换组件库都像换衣服一下Eazy,其具备的灵活性为项目注入了活力。

插件系统

得益于Redux Eazy策略带来的活力,让项目能够以一种组合的方式进行发展,那便是插件系统,通过插件系统,任何人都可以把自己的业务封装成插件,通过安装和卸载的方式管理功能模块,大大的增强了扩展性。

主题插件

配色插件

img

布局插件

img

功能插件

pdf插件

一个支持预览PDF插件,直接安装,即可支持PDF显示功能。

不用了可以卸载。

img

winbox插件

支持多窗口的插件

  • 响应主题变换
  • 对窗口进行了管理,可以函数方式创建和关闭
  • 可更改主题

img

markdown插件

img

rive插件

想制作一个灵动的动画,那么Rive非常适合你。

img

社区插件

播放器插件

一个音乐播放器,非常的酷炫,如果你要问为啥管理后台要有播放器?那你得问深红老师

img

感谢深红老师的为Dland打上的花火。

Ai插件-shiki

一键搭建属于自己的Gpt网站

  • 代码高亮
  • 轻量的代码编辑器
  • 灵动的光标
  • 流式的现实

github项目地址

一个非常酷炫的Ai项目就这么搭建起来了,你想问这个项目怎么自定义,那你得问注定成为大法师 的一介同学

img

以后我就让Ai帮我写代码了,我说的。

战役才刚刚打响,接下来该怎么打

用Mui打造Nextjs+Mui,打造一个管理后台

我是这么想的,首先Antd的组件库,太“丑”了,这不是我说的,这是客户说的,丑也不是不好看,而是西方客户的审美主要是Material风格,自然客户不接受,所以

使用MUI组件库,打造一个Nextjs+Mui的面向客户的管理后台,就搬上日程了。

正好,我之前搬砖的时候,顺手实现了一个基于Mui捶打出的一套开发友好的组件库Mui Eazy

img

该组件库,目前已经投入到一个Nextjs生产项目,运行良好。 其中最核心的功能就是,实现表单的功能。

img

可以毫不费力的通过配置数据,直接创建出复杂的表单,为之后的自动生成提供基础。

img

并且提供了

不断探索Ai,为实现高效搬砖,提升摸鱼时间,不懈奋斗

代码生成是个好东西,我觉得代码生成可比可视化拖拖拽拽要实际,我觉得拖拖拽拽是设计更需要一些,至于编程,尽量还是靠代码生成,那么ts我觉得是天生的好苗子,因为你在写ts类型的时候就是在写注释,那么这个注释就可以跟Ai做沟通,生成代码的路子就会变得异常容易。

项目地址和预览地址

还有好多功能细节,玩法技巧,这里就不作赘述,有兴趣的朋友可以自行探索。

预览地址

源码已经开源,前端和java都放在一起了,java用的就是Ruoyi芋道作为后端例子,有兴趣的可以自行运行起来。

前端是一个Monorepo,放在了根目录下的frontend文件夹下,直接运行npm run start即可运行。

项目地址

浪漫的事情,就是一起反卷

什么是反卷呢?

我这么跟你说,你看看能不能理解,就是外面全是野兽,我呢,想在世外找一个岛,建立一个避难所,我不停的建围墙,架武器来守卫,守护那一份珍贵的宁静。

引用一下泰戈尔说过的,“要活的像光一样,因为你不知道,谁会借着你的光走出黑暗”

我是真心希望内心光明,不想成为野兽的朋友,来闲D岛度度假,群号是551406017,这里有许多发光的人,可以为你注入能量,照亮一下前方的路。

未来有机会也可以一起做做项目赚赚刀乐,另外如果是小姐姐,咖啡福利必须安排上。

ok,就说这么多,如果你对这个搬砖项目感兴趣,有任何疑问都可以评论或者私信我,欢迎交流。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/347117.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何愉快地实施数仓模型,对比下厨做饭

一般我们建设数仓,有一个链路: 比如这样的 数据从原始层到DWD、DWS层、然后ADS层。 嘿,未来的大数据专家们!当我们开始实施数据模型时,不妨参考《大数据之路》这本宝藏书。 让我们一起简化流程,注重细节…

万界星空科技定制化MES系统,实现数字化生产

一、MES生产管理系统强调三个方面: 1、MES是对整个车间制造过程的优化,而不是单一的解决某个生产瓶颈。 2、MES必须提供实时收集生产过程中数据的功能,并作出相应的分析和处理。 3、MES需要与计划层和控制层进行信息交互,通过企业…

项目-基于LangChain的ChatPDF系统

问答系统需求文档 一、项目概述 本项目旨在开发一个能够上传 PDF 文件,并基于 PDF 内容进行问答互动的系统。用户可以上传 PDF 文件,系统将解析 PDF 内容,并允许用户通过对话框进行问答互动,获取有关 PDF 文件内容的信息。 二、…

Linux - 深入理解/proc虚拟文件系统:从基础到高级

文章目录 Linux /proc虚拟文件系统/proc/self使用 /proc/self 的优势/proc/self 的使用案例案例1:获取当前进程的状态信息案例2:获取当前进程的命令行参数案例3:获取当前进程的内存映射案例4:获取当前进程的文件描述符 /proc中进程…

【Linux】信号(二)

上一章节我们进行了信号产生的讲解。 本节将围绕信号保存展开。 目录 信号保存:信号的一些概念:关于信号保存的接口:sigset_t的解释:对应的操作接口:sigprocmask:sigpending:代码实践&#xf…

怎么将3d的模型同比例缩放?---模大狮模型网

在展览3d模型设计过程中,经常需要对3d模型进行缩放以满足不同的需求。然而,有时候缩放操作可能会导致模型失去比例,造成不必要的麻烦。模大狮将介绍如何将展览3D模型按比例缩放,帮助展览设计师们更好地掌握这一关键的模型设计技巧…

我要成为算法高手-双指针篇

目录 什么是双指针?问题1:移动零问题2:复写零问题3:快乐数问题4:盛最多水的容器问题5:有效三角形个数问题6:查找总价格和为目标值的两个商品(两数之和)问题7:三数之和问题8:四数之和…

德克萨斯大学奥斯汀分校自然语言处理硕士课程汉化版(第六周) - 预训练模型

预训练模型 1. 预训练模型介绍 1.1. ELMo1.2. GPT1.3. BERT 2. Seq2Seq 2.1. T52.2. BART 3. Tokenization 1. 预训练模型介绍 在预训练语言模型出现之前,统计语言模型(如N-gram模型)是主流方法。这些模型利用统计方法来预测文本中的下一个…

Docker系列.Docker Desktop中如何启用Kubernetes

Docker技术概论 Docker Desktop中如何启用Kubernetes - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.…

【wiki知识库】06.文档管理接口的实现--SpringBoot后端部分

目录 一、🔥今日目标 二、🎈SpringBoot部分类的添加 1.调用MybatisGenerator 2.添加DocSaveParam 3.添加DocQueryVo 三、🚆后端新增接口 3.1添加DocController 3.1.1 /all/{ebokId} 3.1.2 /doc/save 3.1.3 /doc/delete/{idStr} …

嵌入式系统概述

嵌入式系统是为了特定应用而专门构建的计算机系统,其嵌入式软件的架构设计与嵌入式系统硬件组成紧密相关。 1.嵌入式系统发展历程 嵌入式系统的发展大致经历了五个阶段: 第一阶段:单片微型计算机(SCM),及…

贷款业务——LPR、APR、IRR

文章目录 LPR(Loan Prime Rate)贷款市场报价利率APR(Annual Percentage Rate)年化百分比利率IRR(Internal Rate of Return)内部收益率 LPR、APR 和 IRR 是三个不同的金融术语,LPR 是一种市场利率…

干货分享!2024年Instagram营销必备插件

Instagram是营销人员常用的社交媒体平台,通过提升品牌知名度来推动业务增长。今天给大家分享一些超实用的Instagram营销插件,无论是下载图片视频,还是预先发布帖子,这些工具都可以是你的得力助手,让你的INS运营效率蹭蹭…

Unity2D游戏制作入门 | 12(之人物受伤和死亡的逻辑动画)

上期链接:Unity2D游戏制作入门 | 11(之人物属性及伤害计算)-CSDN博客 上期我们聊到了人物的自身属性和受伤时的计算,我们先给人物和野猪挂上属性和攻击属性的代码,然后通过触发器触发受伤的事件。物体(人物也好敌人也行&#xff…

如何使用免费的 Instant Data Scraper快速抓取网页数据

Instant Data Scraper 是一款非常简单易用的网页数据爬虫工具,你不需要任何代码知识,只需要点几下鼠标,就可以把你想要的数据下载到表格里面。以下是详细的使用步骤: 第一步:安装 Instant Data Scraper 打开谷歌浏览…

基于蚁群算法的二维路径规划算法(matlab)

微♥关注“电击小子程高兴的MATLAB小屋”获得资料 一、理论基础 1、路径规划算法 路径规划算法是指在有障碍物的工作环境中寻找一条从起点到终点、无碰撞地绕过所有障碍物的运动路径。路径规划算法较多,大体上可分为全局路径规划算法和局部路径规划算法两大类。其…

js之简单轮播图

今天给大家封装一个简单的轮播图,可以点击下一张上一张以及自动轮播 <!DOCTYPE html> <html><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>走马…

catia零件装配中通过指南针移动零件

1 将零件导入进来后 2 把指南针移动到零件上 具体移动哪个可以通过模型树点击选中&#xff0c;选中那个就可以移动那个。 这种情况需要注意的是 需要双击选择要移动零件的父节点 如下图&#xff0c;Product2蓝色表示是激活的&#xff0c;这样才可以单击选中下面的零件后通过…

线程介绍及其Java如何用Thread 类创建线程和操作线程方法

目录 一、进程和线程1.1 进程特征 2.2 线程特征 2.3 区别 二、利用Thread类创建线程2.1 通过创建Thread子类&#xff0c;重写run()方法2.2 通过实现Runnable接口&#xff0c;重写run()方法2.3. Callable接口 FutureTask 创建线程2.3 三种方法区别1. 通过创建Thread子类&#x…

Interview preparation--RabbitMQ

AMQP AMQP(Advanced Message Queueing protocol). 高级消息队列协议&#xff0c;是进程之间床底一步新消息的网络协议AMQP工作原理如下&#xff1a; 发布者&#xff08;Publisher&#xff09;发布消息&#xff08;Message&#xff09;经过交换机&#xff08;Exchange&#xff…