CN111124477A - 一种前端配置方法、系统及电子设备 - Google Patents

Abstract

本发明提供了一种前端配置方法、系统及电子设备，该前端配置方法包括：S1、预先在组件库中定义出包含属性配置的组件配置；S2、通过嵌套前端编辑器的前端编辑页面接收前端配置业务请求，自组件库获取与组件配置匹配的组件；S3、前端编辑页面中使用高阶组件调用后端服务资源库中与所述组件匹配的页面配置数据，渲染形成前端。本发明所揭示的前端配置方法、前端配置系统及电子设备实现了业务代码分离和代码复用，显著地提高了形成前端的代码的复用性与可读性，避免了开发人员在子类和基类之间作频繁切换，降低了开发人员对前端的开发难度，从而显著地提高了对前端的开发效率。

Description

一种前端配置方法、系统及电子设备

技术领域

本发明涉及计算机技术领域，尤其涉及一种前端配置方法、系统及电子设备。

背景技术

前端用于向用户显示或者推送页面或者包含数据的页面，页面嵌布于计算机装置中运行，而后端则是形成前端的底层代码，并由开发人员通过代码编写而成。前端通常被理解为页面、嵌布页面的一种应用或者能够被用户远程调用的具有GUI(用户图形界面)的计算机程序。

目前，前端开发的主流技术是基于React应用程序。React是一个用于构建用户图形界面的JavaScript库。在React应用程序中，通常采用使用组件的嵌套和组合，通过对页面进行区域模块拆分，来进行前端的开发。页面根据功能和展示特点，划分为不同的组件，每个组件用来展示不同的视图和数据，开发人员通过将不同的组件进行组合嵌套来实现页面的开发。各个组件具有很高的独立性和可插拔性，并具有代码简单、业务逻辑单一、复用性强等诸多优点。

然而，在实际开发中，前端开发人员也会用到基类继承的方法来开发页面。在基类中，定义通用性的函数方法来处理数据，并且提供渲染方法。开发人员在开发页面时，页面继承基类并通过重载基类中的函数来实现特殊的业务需求，根据重载的方法，来影响基类中的渲染，在计算机装置中展示出满足页面需求的视图。

目前，虽然可通过组件的组合嵌套实现组件的强复用性和可插拔性，但是对于页面复杂、组件间交互频繁的场景，会造成组件耦合严重的情况。有时还会出现某一组件只在特定场景下使用，从而失去了复用性的本质。另外，对于页面相似度很高的项目，各个页面需要自己组装嵌套组件，页面之间重复代码增多，影响开发效率。同时，针对某一页面进行的组件的修改，也可能会产生全局性的显示问题。如果采用基类继承的方法，在页面相似度很高的项目中，可以简化各个页面的代码，将重复的组件提取出来在基类实现，各个页面可以按需进行重载。但是继承作为不被React应用程序推荐的方式。因为，在大型的项目或者软件场景中，会出现维护困难的情况，并且为了通用性，很容易出现巨无霸式的基类，造成代码可读性很差。而且在开发过程中，开发人员不得不在子类和基类之间进行频繁切换来确定如何重载，由此极大地降低了前端的开发效率。在缺乏对应代码规范的情况下，采用基类继承的方式对缺乏开发经验的开发人员而言也较为困难。

随着云计算及大数据中前后端开发的分离和后端微服务的发展，前端开始承载越来越多的业务逻辑和数据处理的工作，因此在前端开发场景中亟待如何解决业务代码分离和代码复用的问题。

有鉴于此，有必要对现有技术中对用户推送页面和/或应用的前端的配置方法予以改进，以解决上述问题。

发明内容

本发明的目的在于揭示一种前端配置方法以及运行该前端配置方法的一种电子设备，用以解决现有技术中基于React应用程序对前端进行开发过程中所存在的诸多缺陷，尤其是为了在前端开发过程中实现业务代码分离和代码复用，提高形成前端的代码的复用性与可读性，避免开发人员在子类和基类之间作频繁切换，降低对前端的开发难度并提高对前端的开发效率。

为实现上述第一个发明目的，本发明首先提供了一种前端配置方法，包括以下步骤：

S1、预先在组件库中定义出包含属性配置的组件配置；

S2、通过嵌套前端编辑器的前端编辑页面接收前端配置业务请求，自组件库获取与组件配置匹配的组件；

S3、前端编辑页面中使用高阶组件调用后端服务资源库中与所述组件匹配的页面配置数据，渲染形成前端。

作为本发明的进一步改进，所述步骤S1中的组件配置包括组件的属性和方法。

作为本发明的进一步改进，所述步骤S2中自组件库获取与组件配置匹配的组件之后，还包括：

对与组件配置匹配的组件予以可视化展示。

作为本发明的进一步改进，所述前端编辑器选自ATOM编辑器、Brackets编辑器、Hbuilder编辑器、WebStorm编辑器或者VS Code编辑器。

作为本发明的进一步改进，所述步骤S3具体为：在前端编辑页面中使用高阶组件调用后端服务资源库中与组件所对应的后端服务名称、地址或者端口信息中至少一种描述对象，以在后端服务资源库查找是否存在与组件匹配的页面配置数据；

若存在，由高阶组件调用并运行后端服务名称、地址以及端口信息所展现的页面配置数据，渲染形成前端；

若不存在，由后端服务资源库通知高阶组件触发配置信息错误定义事件。

作为本发明的进一步改进，当前端编辑页面接收至少两个前端配置业务请求时，使用高阶组件通过反向继承方式复用多个前端配置业务请求中所包含的至少一个属性和/或函数，调用后端服务资源库中与所述组件相匹配的页面配置数据。

作为本发明的进一步改进，由后端服务资源库通知高阶组件触发配置信息错误定义事件包括：告警事件、通知提醒事件、对话框事件、文本提示框事件、标签弹出事件、全局提示事件。

作为本发明的进一步改进，当后端服务资源库存在与组件匹配的页面配置数据时，高阶组件触发根据组件的组件配置对与前端配置业务请求所对应的页面配置执行二次编辑事件，所述二次编辑事件包括：排序事件、筛选事件或者删除事件。

作为本发明的进一步改进，根据组件的组件配置执行配置信息错误定义和/或页面配置数据的二次编辑后还包括：

对未执行的前端配置业务请求，通过高阶组件以反向继承方式复用已经被执行的前端配置业务请求中所包含的至少一个属性和/或函数，然后调用后端服务资源库中与所述组件匹配的页面配置数据，渲染形成前端。

作为本发明的进一步改进，所述组件库中的组件配置对高阶组件予以暴露。

基于相同发明思想，本发明还揭示一种前端配置系统，包括：

业务需求配置模块，组件库，渲染模块，高阶组件及后端服务资源库；

业务需求配置模块接收前端配置请求，组件库保存被预先定义出的包含属性配置的组件配置，通过嵌套前端编辑器的前端编辑页面接收前端配置业务请求，自组件库获取与组件配置匹配的组件，前端编辑页面中使用高阶组件调用后端服务资源库中与所述组件匹配的页面配置数据，通过渲染模块渲染形成前端。

作为本发明的进一步改进，所述前端编辑页面形成于业务需求配置模块所形成的可视化界面中，所述组件库中的组件配置对高阶组件予以暴露。

最后，本发明还揭示了一种电子设备，包括：

至少一个处理器，至少一个存储器，总线和I/O设备；所述处理器和存储器及I/O设备通过所述总线完成相互间的通信；所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行如上述任一项发明创造所揭示的前端配置方法。

与现有技术相比，本发明的有益效果是：

在本申请中，获取页面配置数据的逻辑及执行过程由与后端服务资源库在逻辑上独立的高阶组件中实现，页面不需要定义或者调用函数，只需要配置页面配置数据的参数即可，因此开发人员不需要在前端配置过程加入复杂的业务逻辑，后端服务资源库仅与高阶组件交互，因此，在对后端代码维护和bug排查时，极大地简化了前端配置的流程并降低了对前端的配置及维护难度。通过本申请所揭示的前端配置方法、前端配置系统及电子设备实现了业务代码分离和代码复用，显著地提高了形成前端的代码的复用性与可读性，避免了开发人员在子类和基类之间作频繁切换，降低了开发人员对前端的开发难度，并显著地提高了对前端的开发效率。

附图说明

图1为本发明一种前端配置方法的整体流程图；

图2为本发明一种前端配置系统运行前端配置方法的示意图；

图3为前端编辑页面形成于业务需求配置模块所形成的可视化界面的示意图；

图4为本发明一种电子设备的拓扑图。

具体实施方式

下面结合附图所示的各实施方式对本发明进行详细说明，但应当说明的是，这些实施方式并非对本发明的限制，本领域普通技术人员根据这些实施方式所作的功能、方法、或者结构上的等效变换或替代，均属于本发明的保护范围之内。

在详细阐述本申请各个实施例之前，对本申请中所涉及的主要技术术语予以定义。本领域技术人员均知，此种定义仅仅是基于本实施例所涉及的应用场景或者开发环境而言的。

术语“子类”是指：继承于基类的类组件，通过重载基类中的函数和渲染方法，实现自身特殊的业务需求。同时，“子类组件”与“子类”在本申请中具等同技术含义。

术语“基类”是指：具有一些通用函数和渲染方法的类组件，可以被其他组件继承并重载某些函数，以满足子类组件特殊的业务和展示需求。同时，“基类”与“父类”(baseclass)在本申请中具等同技术含义。

术语“业务”是指：前端响应用户发起的访问、调用等请求所展现的计算机程序、控件、插件或者应用。

术语“后端”是指：与背景技术所提及的术语“前端”相对的技术概念，泛指在云计算服务、云平台等应用场景中，通过CSS、HTML、JavaScript等前端构建技术对前端(通常展示为User Interface，UI)实施部署、编辑等操作的计算机介质中。

下文通过多个实施例对发明之核心要义予以详细阐述。

实施例一：

如图1所示，本实施例揭示了一种前端配置方法，包括如下步骤。

首先，执行步骤S1、预先在组件库中定义出包含属性配置的组件配置。

步骤S1中的组件配置包括组件的属性和方法。组件在本实施例中可被理解为能够被形成可视化控件并由代码编写而成的具有一定功能的对象，一个或者多个对象构成前端，组件具体为文字、线条、对话框、复选开关、滑动块、折叠面板或者导航栏等。组件的属性则表示为文字的颜色、文字的大小、文字的显示效果等。组件的方法可表现为组件的调用方法、组件的处理方法等。结合图2所示，从事前端开发或者维护的开发人员无需知悉组件库42中已经存在的包含属性配置的组件配置。

在实施例中，组件库42中的组件配置对高阶组件44予以暴露(备注：此种暴露并不意味着组件库42与高阶组件44存在数据收发与调用的关系)，因此不具有专业知识的前端开发人员即使不知道或者不精通组件库42中所保存的包含属性配置的组件配置中所含的逻辑，即可通过文字描述的方式，向组件库42中调用前端开发人员所需的组件配置。同时，组件库42对外提供配置文档，即使非前端的开发人员或者不知悉组件逻辑的开发人员也可通过该配置文档的介绍，对组件配置按照自己的习惯进行自定义，并在后续的前端配置过程中，按照自定义的缩略语调用包含属性配置的组件配置。例如，如果在前端中显示“红色线条”，开发人员可自定义缩略语“RL”代表“红色线条”，也可自定义缩略语“123”代表“红色线条”。

然后，执行步骤S2、通过嵌套前端编辑器的前端编辑页面接收前端配置业务请求，自组件库42获取与组件配置匹配的组件。优选的，在本实施例中，步骤S2中自组件库42获取与组件配置匹配的组件之后，还包括：对与组件配置匹配的组件予以可视化展示，由此使得开发人员能够知悉其所调用的组件的显示效果是否为其预想的显示效果或者预想的组件种类，从而在一定程度上减低了前端开发过程中的开发难度，更适合非前端的开发人员从事前端开发工作。同时，本实施例中的前端编辑器选自ATOM编辑器、Brackets编辑器、Hbuilder编辑器、WebStorm编辑器或者VS Code编辑器，并最优选为WebStorm编辑器。

前端编辑页面可展现为图3中的UI。前端编辑器在前端开发过程中可实现诸如主题选择、颜色修改、插件管理、页面布局等多种操作。图3中的UI中以可视化的方式显示一操作区域51(ActionComponent)、一查询区域52(SearchComponent)以及一展示区域53(ViewComponent)；具体的，操作区域51中配置三个控件，即创建511、删除512和编辑513；查询区域52包含查询521(一种控件)以及键入框522，开发人员可在该键入框522中键入步骤S1中的页面配置数据或者前文所提及的自定义的缩略语等。

以下示出了操作区域51的代码实例。

以下示出了查询区域52的代码实例。

以下示出了展示区域53的代码实例。

结合图3所示，开发人员在前端开发过程中，无需了解操作区域51、查询区域52及展示区域53之间所具有的函数关系或者逻辑。具体而言，展示区域53用于显示自组件库42获取与组件配置匹配的组件的不同显示效果，以向开发人员展示同一组件的不同组件属性，或者不同组件的同一组件属性，或者不同组件的不同组件属性，即图3中的所呈现的展示属性一531、展示属性二532至展示属性n53n所对应的展示区域，其中，参数n取大于或者等于1的正整数。

尤其需要说明的是，在本实施例中，通过该步骤S2，避免了现有技术中在前端开发过程中需要定义组件所包含的组件属性(props)，并基于组件属性(props)调用组件以封装成前端过程中复用性差的缺陷。此种技术优势在多个具有相似页面显示效果的前端开发过程中，不需要要求开发人员熟知JSX语法及JavaScripts的开发经验。因此，开发人员可忽略已经保存在组件库42中的组件所具有的组件属性，而仅通过文字或者自定义的缩略语的形式从组件库42中调用开发人员所需要的组件，且无需破坏组件对应的函数所具有的逻辑，从而提高了代码的复用性，避免编写两个耦合很多的页面级组件。具体而言，例如在Web页面上如何显示一个具有特定位置、颜色、形状或者大小按钮，则位置、颜色、形状或者大小组件属性，如何形成开发人员所预想的具有特定位置、颜色、形状或者大小按钮的业务逻辑则体现为组件。

最后，执行步骤S3、前端编辑页面中使用高阶组件44调用后端服务资源库中与所述组件匹配的页面配置数据，渲染形成前端。

与组件所具有的组件属性不同的是，前端的开发过程中的业务请求中所对应的业务所包含的逻辑通过函数来实现，然而在本实施例中，为前端封装逻辑的处理由高阶组件44来实现。高阶组件44负责页面配置数据的定义与调用，并由高阶组件44调用后端服务资源库45中与开发人员所需要的组件所对应的后端服务名称、地址或者端口信息中至少一种描述对象。具体而言，当开发人员所需要的组件在逻辑上位于一个物理服务器或者虚拟服务器集群时，可仅仅以后端服务名称作为描述对象，以从后端服务资源库45中调用开发人员所需要的组件；若开发人员所调用的组件分布于多个物理服务器或者虚拟服务器集群，则可同时基于后端服务名称、地址或者端口信息这三种描述对象调用组件。在本实施例所示出的上述多个实例中，此种对象可是一种实体数据，也可是一种进程，一种调用关系，一种变量，或者一种架构。

同时，高阶组件44调用后端服务资源库45中与所述组件匹配的页面配置数据在基于图3所示出的可视化界面(UI)的代码实例如下：

在本实施例中，该步骤S3具体为：在前端编辑页面(即图3中的UI)中使用高阶组件44调用后端服务资源库45中与组件所对应的后端服务名称、地址或者端口信息中至少一种描述对象，以在后端服务资源库45查找是否存在与组件匹配的页面配置数据；

若存在，由高阶组件44调用并运行后端服务名称、地址以及端口信息所展现的页面配置数据，渲染形成前端；优选的，当前端编辑页面接收至少两个前端配置业务请求时，使用高阶组件44通过反向继承方式复用多个前端配置业务请求中所包含的至少一个属性和/或函数，调用后端服务资源库中与所述组件相匹配的页面配置数据。高阶组件44参数为组件，返回值为新组件的函数。构建前端过程中，用高阶组件44(属性代理模式)实现了装饰模式。开发人员在编写某个业务时，可以在之前的组件的基础上，额外进行一些修饰，用装饰器的方式节省代码的输入，因此非常适用于大型项目或者具有多个相似页面的前端开发场景。

若不存在，由后端服务资源库45通知高阶组件44触发配置信息错误定义事件。具体的，由后端服务资源库45通知高阶组件44触发配置信息错误定义事件包括：告警事件、通知提醒事件、对话框事件、文本提示框事件、标签弹出事件、全局提示事件。

当后端服务资源库45存在与组件匹配的页面配置数据时，高阶组件44触发根据组件的组件配置对与前端配置业务请求所对应的页面配置执行二次编辑事件，所述二次编辑事件包括：排序事件、筛选事件或者删除事件。触发并执行二次编辑事件，实现了对后端服务资源库45存在与组件匹配的页面配置数据进行进一步修改，从而使得从后端服务资源库45中所调用的页面配置数据的进一步修改，以实现对页面配置数据编辑的灵活性及对业务描述的准确性。

结合图2所示，如果存在未执行的前端配置业务请求，则在实施例中不需要重复执行步骤S1与步骤S2，而仅需要通过高阶组件44以反向继承方式复用已经被执行的前端配置业务请求中所包含的至少一个属性和/或函数，然后调用后端服务资源库45中与所述组件匹配的页面配置数据，并通过图2所示出的渲染模块43渲染形成前端。但是，无论是何种情形，最终所形成的前端所展现的页面48均是由视图渲染输出46与业务逻辑输出47共同配置形成的。

需要说明的是，在本实施例所揭示的该前端配置方法中，不需要采用现有技术中在子类和基类之间切换来知悉基类所含的逻辑以实现子类的函数，不需要子类与基类之间相互继承的方式配置前端，使得前端配置过程更为简单。同时，本实施例所揭示的一种前端配置方法，获取页面配置数据的逻辑及执行过程由与后端服务资源库45在逻辑上独立的高阶组件44中实现，页面不需要定义或者调用函数，只需要配置页面配置数据的参数即可，因此开发人员不需要在前端配置过程加入复杂的业务逻辑，后端服务资源库45仅与高阶组件44交互，极大地简化了前端配置的流程并降低了对前端的配置及维护难度。

实施例二：

本实施例示出了一种前端配置方法的一种变形例，且与实施例一所揭示的前端配置方向相比，其主要区别在于，在本实施例中，根据组件的组件配置执行配置信息错误定义和/或页面配置数据的二次编辑后还包括：

对未执行的前端配置业务请求，通过高阶组件44以反向继承方式复用已经被执行的前端配置业务请求中所包含的至少一个属性和/或函数，然后调用后端服务资源库45中与组件匹配的页面配置数据，渲染形成前端。

实施例二所揭示的前端配置方法在高阶组件44接收前端配置请求出现未知错误或者形成该后端服务资源库45的服务器或者虚拟服务器集群响应超时或者意外断电等场景中导致渲染模块43出现页面渲染错误时，能够确保高阶组价42在形成该后端服务资源库45的服务器或者虚拟服务器集群恢复时，无需再次通知高阶组件44，由此避免了重复执行步骤S1与步骤S2，从而取得了能够有效地避免页面渲染出现阻塞的技术效果。

本实施例与实施例一中相同部分的技术方案，请参实施例一所述，在此不再赘述。

实施例三：

结合图2所示，其示出了本发明一种前端配置系统的一种具体实施方式。

在本实施例所揭示的前端配置系统运行如实施例一所示的前端配置方法所示出的技术方案，并具有相似的发明思想。

具体的，该前端配置系统，包括：

业务需求配置模块41，组件库42，渲染模块43，高阶组件44及后端服务资源库45。

业务需求配置模块41接收前端配置请求(即图2中的业务配置411至业务配置41m，参数m取大于或者等于1的正整数)，该前端配置请求由开发人员在图3所示出的UI输入。而一个具体的业务配置，例如业务配置411则对应开发人员向该前端配置系统所发出的一个前端配置业务请求。

组件库42保存被预先定义出的包含属性配置的组件配置，通过嵌套前端编辑器的前端编辑页面接收前端配置业务请求，自组件库42获取与组件配置匹配的组件，前端编辑页面中使用高阶组件44调用后端服务资源库45中与所述组件匹配的页面配置数据，通过渲染模块43渲染形成前端，并由视图渲染输出46与业务逻辑输出47共同配置形成前端所包含的一个或者多个页面48。前端编辑页面可展现为图3中的UI。前端编辑器在前端开发过程中可实现诸如主题选择、颜色修改、插件管理、页面布局等多种操作。图3中的UI中以可视化的方式显示一操作区域51(ActionComponent)、一查询区域52(SearchComponent)以及一展示区域53(ViewComponent)；具体的，操作区域51中配置三个控件，即创建511、删除512和编辑513；查询区域52包含查询521(一种控件)以及键入框522，开发人员可在该键入框522中键入步骤S1中的页面配置数据或者前文所提及的自定义的缩略语等。前端编辑页面形成于业务需求配置模块41所形成的可视化界面(参图3所示出的UI)中，所述组件库42中的组件配置对高阶组件44予以暴露。该前端配置系统可运行于计算机装置或者诸如实施例三所揭示的电子设备100中。

本实施例所揭示的前端配置系统与实施例一和/或实施例二中相同部分的技术方案，请参实施例一所述，在此不再赘述。

实施例四：

参图4所示，本实施例揭示了一种电子设备100，其包括至少一个处理器10，至少一个存储器20，总线11和I/O设备30。处理器10和存储器20及I/O设备30通过所述总线11完成相互间的通信。存储器20存储有可被所述处理器10执行的程序指令，处理器10调用所述程序指令能够执行如实施例一所揭示的一种前端配置方法。需要说明的是，本实施例中所揭示的I/O设备30在计算机范畴内可被理解为一种显示器或者一种能够嵌入运行浏览器或者编辑工具的界面，或者至少能显示如图3所揭示的UI，开发人员能够通过I/O设备30键入指令，以通过该电子设备100运行实施例一所揭示的前端配置方法的具体实现过程。用户可直接访问或者远程访问该电子设备100。

同时，本实施例中的I/O设备30可被理解为实施例二中所揭示的前端编辑页面形成于业务需求配置模块41所形成的可视化界面(UI)。在实际场景中，该电子设备100可为计算机、服务器、服务器集群、数据中心或者至少能够被配置一个云主机的装置和/或系统。

本实施例所揭示的电子设备100中所包含的前端配置方法与实施例一和/或实施例二中具相同部分的技术方案，请参实施例一所述，在此不再赘述。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

上文所列出的一系列的详细说明仅仅是针对本发明的可行性实施方式的具体说明，它们并非用以限制本发明的保护范围，凡未脱离本发明技艺精神所作的等效实施方式或变更均应包含在本发明的保护范围之内。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。

此外，应当理解，虽然本说明书按照实施方式加以描述，但并非每个实施方式仅包含一个独立的技术方案，说明书的这种叙述方式仅仅是为清楚起见，本领域技术人员应当将说明书作为一个整体，各实施例中的技术方案也可以经适当组合，形成本领域技术人员可以理解的其他实施方式。

Claims (13)

1.一种前端配置方法，其特征在于，包括以下步骤：

S1、预先在组件库中定义出包含属性配置的组件配置；

S2、通过嵌套前端编辑器的前端编辑页面接收前端配置业务请求，自组件库获取与组件配置匹配的组件；

S3、前端编辑页面中使用高阶组件调用后端服务资源库中与所述组件匹配的页面配置数据，渲染形成前端。

2.根据权利要求1所述的前端配置方法，其特征在于，所述步骤S1中的组件配置包括组件的属性和方法。

3.根据权利要求1所述的前端配置方法，其特征在于，所述步骤S2中自组件库获取与组件配置匹配的组件之后，还包括：

对与组件配置匹配的组件予以可视化展示。

4.根据权利要求1所述的前端配置方法，其特征在于，所述前端编辑器选自ATOM编辑器、Brackets编辑器、Hbuilder编辑器、WebStorm编辑器或者VS Code编辑器。

5.根据权利要求1所述的前端配置方法，其特征在于，所述步骤S3具体为：在前端编辑页面中使用高阶组件调用后端服务资源库中与组件所对应的后端服务名称、地址或者端口信息中至少一种描述对象，以在后端服务资源库查找是否存在与组件匹配的页面配置数据；

若存在，由高阶组件调用并运行后端服务名称、地址以及端口信息所展现的页面配置数据，渲染形成前端；

若不存在，由后端服务资源库通知高阶组件触发配置信息错误定义事件。

6.根据权利要求5所述的前端配置方法，其特征在于，当前端编辑页面接收至少两个前端配置业务请求时，使用高阶组件通过反向继承方式复用多个前端配置业务请求中所包含的至少一个属性和/或函数，调用后端服务资源库中与所述组件相匹配的页面配置数据。

7.根据权利要求6所述的前端配置方法，其特征在于，由后端服务资源库通知高阶组件触发配置信息错误定义事件包括：告警事件、通知提醒事件、对话框事件、文本提示框事件、标签弹出事件、全局提示事件。

8.根据权利要求5至7中任一项所述的前端配置方法，其特征在于，当后端服务资源库存在与组件匹配的页面配置数据时，高阶组件触发根据组件的组件配置对与前端配置业务请求所对应的页面配置执行二次编辑事件，所述二次编辑事件包括：排序事件、筛选事件或者删除事件。

9.根据权利要求8所述的前端配置方法，其特征在于，根据组件的组件配置执行配置信息错误定义和/或页面配置数据的二次编辑后还包括：

对未执行的前端配置业务请求，通过高阶组件以反向继承方式复用已经被执行的前端配置业务请求中所包含的至少一个属性和/或函数，然后调用后端服务资源库中与所述组件匹配的页面配置数据，渲染形成前端。

10.根据权利要求1所述的前端配置方法，其特征在于，所述组件库中的组件配置对高阶组件予以暴露。

11.一种前端配置系统，其特征在于，包括：

业务需求配置模块，组件库，渲染模块，高阶组件及后端服务资源库；

业务需求配置模块接收前端配置请求，组件库保存被预先定义出的包含属性配置的组件配置，通过嵌套前端编辑器的前端编辑页面接收前端配置业务请求，自组件库获取与组件配置匹配的组件，前端编辑页面中使用高阶组件调用后端服务资源库中与所述组件匹配的页面配置数据，通过渲染模块渲染形成前端。

12.根据权利要求11所述的前端配置系统，其特征在于，所述前端编辑页面形成于业务需求配置模块所形成的可视化界面中，所述组件库中的组件配置对高阶组件予以暴露。

13.一种电子设备，其特征在于，包括：

至少一个处理器，至少一个存储器，总线和I/O设备；所述处理器和存储器及I/O设备通过所述总线完成相互间的通信；所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行如权利要求1至10中任一所述的前端配置方法。

Images