阅读 1941

开发一个前端系统生成工具的实现思路

最近两三个月的时间,老大一直带着我们进行前端系统生成工具的开发任务,目前在开发2.0的版本,1.0版本只是简陋的跑起来了,并且上线了一个项目,细节和功能还很不完善。2.0的版本基本完成80%左右。

期间一直想记录实现一个生成工具的开发的过程,但前期从0~1的开发过程中,我们并不是在开发前就设计好了所有的功能模块,而是在使用的过程中不断的补充和迭代,代码实现上不断地重构和修改,导致了1.0版本的冗余和高耦合,以至于我们从2.0开始要重构整个应用😱。

经过1.0版本的迭代,我们的开发思路还是很清晰的😘,趁着这个周末,正好来写一下大概的功能点,记录一下思路。

我们先来简单介绍一下,我们这个生成工具到底完成了什么样的工作。

node对接SSO和RBAC,JWT认证。

公司内部有一套很完整SSO和RBAC系统,很多业务系统都在使用 ,但是每新增一个业务系统,就需要单独开发一套该系统的会话、对接SSO与RBAC的功能。于是我们把会话、对接SSO与RBAC的功能抽象到Node层,单独的Node应用对接SSO与RBAC,Node应用与各业务系统使用使用非对称加密RAS进行通讯,并带上用户的登录信息,这样就省去了各个业务系统间重复的功能,业务系统只需要开发RAS解密的功能就可以了,通常情况下也可以复用,后期我们可以准备各个业务使用的开发语言解密模板,直接扔上去模板换秘钥就可以了。 实现细节见《Node.js 使用JWT对接SSO》

多域名的接口转发

越来越多的业务系统使用微服务的架构,目前在前端的影响只是把不同功能接口发送到不同的域名下,我们在项目创建的时候可以录入多个域名。

拖拽组件生成页面

现在有很多优秀和成熟的前端UI框架,但是要做到业务系统间的复用,势必要对其进行封装,改造成各个业务系统间可复用的组件。我们通过拖拽业务组件,能够快捷的生成页面布局,这个模块要对外暴露收藏、删除、选中和排序修改的接口,下面是2.0的预览效果图。 实现细节见《React无门槛实现拖拽布局、表单设计器 》

属性面板的动态修改。

仅仅生成页面布局,还算不上是一个生成工具,每个组件都有它们不同的属性,都有不同的入参配置。必须保证每个组件的每个属性可灵活配置。我们根据常用的js数据类型抽象出一套可灵活修改的属性机制。在拖拽进入画布时生成默认属性数据,点击选中组件可以进行属性的配置,比较简单的数据类型我们比较好处理,比如字符串、数字、日期下拉菜单等。我们可以根据不同的数据类型展示对应的输入框,日期选择框,下拉框就可以了。比较复杂的是数组和对象类型,就像一个json编辑器,可以无限极的把数据延伸下去。

组件间的通讯机制。

在完成组件和配置可以在动态修改以后,剩下的就是让各个组件间通信起来了,我们可以动态的创建作用域和绑定事件,这样一个页面就可以通过拖拽布局、配置属性、配置事件和作用域变成一个功能模块了。

代码生成和发布

还有一个很重要的事情,代码必须要跑起来,可发布到不同的环境,在页面配置完成后,点击生成按钮,会根据页面的数据生成一个路由和页面到前端项目中目录中,并提交至git服务器,git服务器就通过hook结合docker发布到不同的环境了。

上面的内容仅仅是说了一下我们实现的功能和大体思路,参与一个这样的项目,在团队中学到了很多东西,本来今天想写完拖拽功能的实现的细节,在自己的电脑上安装mongo耗了点时间就到下午了,还是骑着我的骑小摩托出去浪一会儿吧,具体的细节实现以后有时间再补充吧😂。