基于资源能力中心的低代码界面配置方法及存储介质

技术领域

本发明涉及信息管理技术领域，具体地说是一种基于资源能力中心的低代码界面配置方法及存储介质。

背景技术

前端技术在经历了十几年的发展后，前端开发变得越来越复杂，技术门槛也越来越高，要使用当前流行的UI组件库，技术人员必须懂npm、webpack、react/vue，必须熟悉ES6语法等，光入门都很费劲，而入门以后还会发现它还有巨大的生态系统，大量相关的组件库。然而前端技术的发展不会停滞不前，等学完以后可能会发现已掌握的技术已经被新的技术取代了。

使用前端UI组件库实现用于信息管理的普通的增删改查界面，有大量的细节功能需要处理，比如：可以对数据做筛选、按某列排序、可以隐藏某些列、可以调整列顺序、可以调整列宽、编辑单行数据、批量修改和删除数据、表格有分页功能等等。全部实现这些功能需要大量的编码工作，而且每个数据模型实现一套界面，工作量又被放大的n倍，后续的维护工量更是巨大的难以想象。

ElementUI是一套基于Vue的前端组件库，与大部分UI框架一样，都只有最通用的组件，如果遇到一些稍微不常用的组件，就得开发自定义组件，而自定义组件的开发门槛高，开发工作量大。

在要管理的数据模型急剧增加的情况下，如何快速生成增删改查界面，彻底摆脱原有一个模型开发一套增删改查界面，工作量巨大且代码重复度高的弊端是目前亟待解决的技术问题。

发明内容

本发明的技术任务是提供一种基于资源能力中心的低代码界面配置方法及存储介质，来解决原有一个模型开发一套增删改查界面，工作量巨大且代码重复度高的问题。

本发明的技术任务是按以下方式实现的，一种基于资源能力中心的低代码界面配置方法，该方法是基于资源能力中心通过JSON配置生成增删改查界面，在增删改查界面渲染过程中，将JSON转换成对应的Vue组件，通过JSON配置中节点的type信息，在组件池中找到对应的组件实现(Component)，把当前节点转给对应组件渲染，再把其他属性作为props传递过去完成渲染。

作为优选，增删改查界面分别对应查询方案、新增方案、编辑方案以及删除方案四种不同的JSON配置方案；

其中，查询方案包括查询条件属性配置及展示结果属性配置；

新增方案和编辑方案包括新增属性配置和编辑属性配置；

删除方案包括级联模型删除验证关系配置。

更优地，新增方案包括如下属性：

①、name属性：用于存储方案名称；

②、form属性：用于存储表单配置；

③、form.formItems属性：用于存储新增表单的所有表单项信息；

④、formItem.name属性：用于存储表单项英文名；

⑤、formItem.alias属性：用于存储表单项中文名；

⑥、formItem.type属性：用于存储渲染该表单项使用的Vue组件类型；

⑦、formItem.relatedDict属性：用于存储枚举选择组件的枚举值；

⑧、formItem.relatedTrans属性：用于存储关联翻译组件对应的模型英文名。

更优地，Vue组件类型包括Text、Dict和Trans；

其中，Text表示文本输入组件，Dict表示枚举选择组件，Trans表示关联翻译组件。

更优地，文本输入组件采用Text文本组件ToyInput，基于el-input二次开发，具体逻辑如下：

①、将value属性绑定到el-input的value属性；

②、将itemProps属性解构后绑定到el-input上；

③、监听el-input的change事件，并抛出change事件。

更优地，枚举选择组件采用Dict字典组件ToyDict，基于el-select二次开发，具体逻辑如下：

①、将value属性绑定到el-select的value属性；

②、将itemProps属性解构后绑定到el-select上；

③、监听el-select的change事件，并抛出change事件；

④、使用v-for循环枚举列表(itemProps.relatedDict)生成el-option列表，将relatedDict的value绑定到el-option的key、value属性，将relatedDict的label绑定到el-option的label属性。

更优地，关联翻译组件采用Trans翻译组件ToyTrans，基于el-autocomplete二次开发，具体逻辑如下：

①、将value属性绑定到el-autocomplete的value属性；

②、将itemProps属性解构后绑定到el-autocomplete上；

③、监听el-autocomplete的select事件，并抛出change事件；

④、将异步数据查询函数querySearchAsync函数绑定到el-autocomplete的fetch-suggestions属性，querySearchAsync函数调用资源能力中心通用查询接口，使用模型英文名(itemProps.relatedTrans)及用户输入(queryString)作为查询条件，将查询结果通过回调函数cb返回给el-autocomplete。

更优地，新增方案的渲染组件ToyAddForm，基于el-form二次开发，具体逻辑如下：

①、根组件使用el-form，并将表单数据对象formModel绑定到el-form的model属性；

②、使用v-for循环新增方案JSON中的表单项配置schemaJson.form.for mItems，生成表单项组件el-form-item列表，将表单项配置的中文名alias绑定到el-form-item的label属性；

③、根据表单项配置的类型(type)属性的值，决定使用的渲染组件：

type等于Text时，使用文本组件ToyInput；

type等于Dict时，使用字典组件ToyDict；

type等于Trans时，使用翻译组件ToyTrans；

④、使用v-model将表单数据对象formModel对应的属性值(formModel[item.name])绑定到对应渲染的组件，将表单项配置本身绑定到对应渲染组件的itemProps属性；

⑤、监听渲染组件的change事件，并抛出change事件。

一种电子设备，包括：存储器和至少一个处理器；

其中，所述存储器上存储有计算机程序；

所述至少一个处理器执行所述存储器存储的计算机程序，使得所述至少一个处理器执行如上述的基于资源能力中心的低代码界面配置方法。

一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，所述计算机程序可被处理器执行以实现如上述的基于资源能力中心的低代码界面配置方法。

其中，基于JSON格式是一种轻量级的数据交换格式，基于ECMAScript(EuropeanComputer Manufacturers Association,欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据，简洁和清晰的层次结构使得JSON成为理想的数据交换语言，易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

本发明的基于资源能力中心的低代码界面配置方法及存储介质具有以下优点：

(一)本发明能够用于信息管理的增删改查界面的低代码前端框架，。通过本发明在支持Vue的前端框架中，使用JSON配置来生成增删改查界面，可以减少界面开发工作量，极大提升前端增删改查界面开发效率；

(二)本发明解决了在信息管理领域，要管理的数据模型急剧增加的情况下，解决原有一个模型开发一套增删改查界面，工作量巨大且代码重复度高的问题，提供一种基于JSON配置来生成增删改查界面的实现方法和解决方案，同时解决了信息管理领域需要快速生成增删改查界面的现实性问题；

(三)本发明通过使用JSON配置生成增删改查界面，成功解决了在信息管理领域，管理的数据模型急剧增加的情况下,原有一个模型开发一套增删改查界面，工作量巨大且代码重复度高的问题，同时降低了增删改查界面的开发成本，提高了增删改查界面的开发效率。

附图说明

下面结合附图对本发明进一步说明。

附图1为查询方案的界面截图；

附图2为新增方案的界面截图；

附图3为编辑方案的界面截图；

附图4为删除方案的界面截图。

具体实施方式

参照说明书附图和具体实施例对本发明的基于资源能力中心的低代码界面配置方法及存储介质作以下详细地说明。

实施例1：

本实施例提供了一种基于资源能力中心的低代码界面配置方法，该方法是基于资源能力中心通过JSON配置生成增删改查界面，在增删改查界面渲染过程中，将JSON转换成对应的Vue组件，通过JSON配置中节点的type信息，在组件池中找到对应的组件实现(Component)，把当前节点转给对应组件渲染，再把其他属性作为props传递过去完成渲染。

本实施例中的增删改查界面分别对应查询方案、新增方案、编辑方案以及删除方案四种不同的JSON配置方案；

其中，如附图1所示，查询方案包括查询条件属性配置及展示结果属性配置；

如附图2和3所示，新增方案和编辑方案包括新增属性配置和编辑属性配置；

如附图4所示，删除方案包括级联模型删除验证关系配置。

本实施例中的新增方案包括如下属性：

①、name属性：用于存储方案名称；

②、form属性：用于存储表单配置；

③、form.formItems属性：用于存储新增表单的所有表单项信息；

④、formItem.name属性：用于存储表单项英文名；

⑤、formItem.alias属性：用于存储表单项中文名；

⑥、formItem.type属性：用于存储渲染该表单项使用的Vue组件类型；

⑦、formItem.relatedDict属性：用于存储枚举选择组件的枚举值；

⑧、formItem.relatedTrans属性：用于存储关联翻译组件对应的模型英文名。

新增方案JSON配置示例关键代码如下：

/>

本实施例中的Vue组件类型包括Text、Dict和Trans；

其中，Text表示文本输入组件，Dict表示枚举选择组件，Trans表示关联翻译组件。

本实施例中的文本输入组件采用Text文本组件ToyInput，基于el-input二次开发，具体逻辑如下：

①、将value属性绑定到el-input的value属性；

②、将itemProps属性解构后绑定到el-input上；

③、监听el-input的change事件，并抛出change事件。

Text文本组件示例关键代码如下：

/>

/>

本实施例中的枚举选择组件采用Dict字典组件ToyDict，基于el-select二次开发，具体逻辑如下：

①、将value属性绑定到el-select的value属性；

②、将itemProps属性解构后绑定到el-select上；

③、监听el-select的change事件，并抛出change事件；

④、使用v-for循环枚举列表(itemProps.relatedDict)生成el-option列表，将relatedDict的value绑定到el-option的key、value属性，将relatedDict的label绑定到el-option的label属性。

Dict字典组件示例关键代码如下：

/>

本实施例中的关联翻译组件采用Trans翻译组件ToyTrans，基于el-autocomplete二次开发，具体逻辑如下：

①、将value属性绑定到el-autocomplete的value属性；

②、将itemProps属性解构后绑定到el-autocomplete上；

③、监听el-autocomplete的select事件，并抛出change事件；

④、将异步数据查询函数querySearchAsync函数绑定到el-autocomplete的fetch-suggestions属性，querySearchAsync函数调用资源能力中心通用查询接口，使用模型英文名(itemProps.relatedTrans)及用户输入(queryString)作为查询条件，将查询结果通过回调函数cb返回给el-autocomplete。

Trans翻译组件示例关键代码如下：

/>

本实施例中的新增方案的渲染组件ToyAddForm，基于el-form二次开发，具体逻辑如下：

①、根组件使用el-form，并将表单数据对象formModel绑定到el-form的model属性；

②、使用v-for循环新增方案JSON中的表单项配置schemaJson.form.for mItems，生成表单项组件el-form-item列表，将表单项配置的中文名alias绑定到el-form-item的label属性；

③、根据表单项配置的类型(type)属性的值，决定使用的渲染组件：

type等于Text时，使用文本组件ToyInput；

type等于Dict时，使用字典组件ToyDict；

type等于Trans时，使用翻译组件ToyTrans；

④、使用v-model将表单数据对象formModel对应的属性值(formModel[item.name])绑定到对应渲染的组件，将表单项配置本身绑定到对应渲染组件的itemProps属性；

⑤、监听渲染组件的change事件，并抛出change事件。新增方案渲染组件示例关键代码如下：

/>

实施例2：

本实施例还提供了一种电子设备，包括：存储器和处理器；

其中，存储器存储计算机执行指令；

处理器执行所述存储器存储的计算机执行指令，使得处理器执行本发明任一实施例中的基于资源能力中心的低代码界面配置方法。

处理器可以是中央处理单元(CPU)，还可以是其他通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通过处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

存储器可用于储存计算机程序和/或模块，处理器通过运行或执行存储在存储器内的计算机程序和/或模块，以及调用存储在存储器内的数据，实现电子设备的各种功能。存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据终端的使用所创建的数据等。此外，存储器还可以包括高速随机存取存储器，还可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，只能存储卡(SMC)，安全数字(SD)卡，闪存卡、至少一个磁盘存储期间、闪存器件、或其他易失性固态存储器件。

实施例3：

本发明实施例还提供了一种计算机可读存储介质，其中存储有多条指令，指令由处理器加载，使处理器执行本发明任一实施例中的基于资源能力中心的低代码界面配置方法。具体地，可以提供配有存储介质的系统或者装置，在该存储介质上存储着实现上述实施例中任一实施例的功能的软件程序代码，且使该系统或者装置的计算机(或CPU或MPU)读出并执行存储在存储介质中的程序代码。

在这种情况下，从存储介质读取的程序代码本身可实现上述实施例中任何一项实施例的功能，因此程序代码和存储程序代码的存储介质构成了本发明的一部分。

用于提供程序代码的存储介质实施例包括软盘、硬盘、磁光盘、光盘(如CD-ROM、CD-R、CD-RW、DVD-ROM、DVD-RYM、DVD-RW、DVD+RW)、磁带、非易失性存储卡和ROM。可选择地，可以由通信网络从服务器计算机上下载程序代码。

此外，应该清楚的是，不仅可以通过执行计算机所读出的程序代码，而且可以通过基于程序代码的指令使计算机上操作的操作系统等来完成部分或者全部的实际操作，从而实现上述实施例中任意一项实施例的功能。

此外，可以理解的是，将由存储介质读出的程序代码写到插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展单元中设置的存储器中，随后基于程序代码的指令使安装在扩展板或者扩展单元上的CPU等来执行部分和全部实际操作，从而实现上述实施例中任一实施例的功能。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。