最近两三个月的时间，老大一直带着我们进行前端系统生成工具的开发任务，目前在开发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耗了点时间就到下午了，还是骑着我的骑小摩托出去浪一会儿吧，具体的细节实现以后有时间再补充吧😂。
