CN108733375A - web前端配置化开发方法、装置、存储介质及计算机设备 - Google Patents

Abstract

本发明公开了web前端配置化开发方法、装置、存储介质及计算机设备。所公开的web前端配置化开发方法，包括：获取用于自动生成web前端的配置信息；根据配置信息自动生成web前端的页面结构、页面组件对应的变量或静态数据、页面组件对应的事件、事件触发的操作；将web前端的页面结构、页面组件自动转换成react能够渲染的格式数据，将页面组件对应的变量或静态数据、页面组件对应的事件、事件触发的操作自动转换成react能够识别的格式数据。所公开的技术方案能够根据配置信息自动生成具有复杂逻辑的html前端应用。

Description

web前端配置化开发方法、装置、存储介质及计算机设备

技术领域

本发明涉及web前端开发领域，尤其涉及web前端配置化开发方法、装置、存储介质及计算机设备。

背景技术

web前端开发从网页制作演变而来，随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

随着web2.0开发技术的飞速发展，开发者们越来越重视前端开发的效率问题，前后端分离的web系统也越来越多，如何快速、高效地对前端进行开发和构建、编写和封装具有良好性能的前端交互组件成为关键问题。

在现有技术中，已经存在诸如使用react能够识别和渲染的配置文件来自动生成需要的html模板的技术方案。然而，这些技术方案却不能自动生成与后端之间的交互、与前端应用自身的内部事件联动、以及与外部应用之间的交互等操作相关的功能，并且react的学习和使用成本都较高，对前端技术人员来说难以实现快捷高效输出所需要的前端页面。

JSON(Java Script Object Notation)是一种轻量级的数据交换格式，其简洁和清晰的层次结构使得JSON成为理想的数据交换语言，易于开发人员的阅读和编写，同时也易于机器解析和生成，能够有效地提升网络传输效率。

如何利用JSON来实现前端html页面自动生成，并且实现与后端之间的交互、与前端应用自身的内部事件联动、以及与外部应用之间的交互成为了关键问题。

因此，需要提出新的技术方案来解决上述问题。

发明内容

根据本发明的web前端配置化开发方法，包括：

获取用于自动生成web前端的配置信息；

根据配置信息自动生成web前端的页面结构、页面组件对应的变量或静态数据、页面组件对应的事件、事件触发的操作；

将web前端的页面结构、页面组件自动转换成react能够渲染的格式数据，将页面组件对应的变量或静态数据、页面组件对应的事件、事件触发的操作自动转换成react能够识别的格式数据。

根据本发明的web前端配置化开发方法，其配置信息包括：页面结构名称或标识、组件参数集合或组件及组件的子组件的参数集合。

根据本发明的web前端配置化开发方法，其组件或子组件的参数包括：组件或子组件的名称或标识、组件或子组件对应的变量名称或标识或静态数据、组件或子组件对应的事件名称或标识、事件名称或标识触发的操作的执行函数。

根据本发明的web前端配置化开发方法，其执行函数包括：用于与后端进行交互的函数、用于与web前端的页面进行交互的函数、用于与web前端的应用之外的其他应用交互的函数。

根据本发明的web前端配置化开发方法，其配置信息是JSON格式的文本信息。

根据本发明的web前端配置化开发方法，其获取用于自动生成web前端的配置信息的步骤包括：

解析web前端的配置信息，将解析结果转成dom树。

根据本发明的web前端配置化开发装置，包括：

配置信息获取模块，用于获取用于自动生成web前端的配置信息；

web前端自动生成模块，用于根据配置信息自动生成web前端的页面结构、页面组件对应的变量或静态数据、页面组件对应的事件、事件触发的操作；

格式转换模块，用于将web前端的页面结构、页面组件自动转换成react能够渲染的格式数据，将页面组件对应的变量或静态数据、页面组件对应的事件、事件触发的操作自动转换成react能够识别的格式数据。

根据本发明的web前端配置化开发装置，其配置信息获取模块包括：

配置解析转换子模块，用于解析web前端的配置信息，将解析结果转成dom树，发送给web前端自动生成模块。

根据本发明的计算机可读存储介质，存储介质上存储有计算机程序，程序被处理器执行时实现上文所述方法的步骤。

根据本发明的计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现上文所述方法的步骤。

根据本发明的上述技术方案，能够根据配置信息自动生成具有复杂逻辑的html前端应用。

附图说明

并入到说明书中并且构成说明书的一部分的附图示出了本发明的实施例，并且与相关的文字描述一起用于解释本发明的原理。在这些附图中，类似的附图标记用于表示类似的要素。下面描述中的附图是本发明的一些实施例，而不是全部实施例。对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，可以根据这些附图获得其他的附图。

图1示例性地示出了根据本发明的web前端配置化开发方法的示意流程图。

图2示例性地示出了根据本发明的web前端配置化开发装置的示意框图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互任意组合。

图1示例性地示出了根据本发明的web前端配置化开发方法的示意流程图。

如图1所示，根据本发明的web前端配置化开发方法包括：

步骤S102：获取用于自动生成web前端的配置信息；

步骤S104：根据配置信息自动生成web前端的页面结构、页面组件对应的变量或静态数据、页面组件对应的事件、事件触发的操作；

步骤S106：将web前端的页面结构、页面组件自动转换成react能够渲染的格式数据，将页面组件对应的变量或静态数据、页面组件对应的事件、事件触发的操作自动转换成react能够识别的格式数据。

例如，配置信息可以被包含在配置文件中。用户可以根据需要选择所要开发的前端应用所需要的组件(包括页面结构/布局组件、非页面结构/布局组件)、接口(包括变量、数据、函数)、事件等，并将相关配置信息写入配置文件中。

例如，前端应用所需要的组件、接口、事件等可以是现有技术中已经存在的组件，也可以是用户自定义的组件、接口、事件等。变量和数据包括全局变量和数据，全局变量和数据可以与组件中的变量关联。

例如，在步骤S102中，可以通过专用(解析)引擎来自动获取上述配置信息。即，可以把组件、外部接口等配置信息写入解析引擎、使用引擎保存和解析用户配置的组件等配置信息。

可选地，上述配置信息包括：页面结构名称或标识、组件参数集合或组件及组件的子组件的参数集合。

可选地，上述组件或子组件的参数包括：组件或子组件的名称或标识、组件或子组件对应的变量名称或标识或静态数据、组件或子组件对应的事件名称或标识、事件名称或标识触发的操作的执行函数。

可选地，上述执行函数包括：用于与后端进行交互的函数、用于与web前端的页面进行交互的函数、用于与web前端的应用之外的其他应用交互的函数。

可选地，上述配置信息是JSON格式的文本信息。

可选地，步骤S102包括(在图1中未示出)：

解析web前端的配置信息，将解析结果转成dom树。

例如，在步骤S104中，可以根据页面结构名称或标识、组件参数集合或组件及组件的子组件的参数集合等具体配置信息来生成web前端的页面结构、页面组件对应的变量或静态数据、页面组件对应的事件、事件触发的操作。

例如，步骤S104可以包括以下具体步骤：

根据配置信息生成对应的数据流函数(例如，用于与web前端的页面、后端、或其他应用进行交互的函数)；

根据配置信息生成对应的请求函数(例如，用于与web前端的页面进行交互的函数)；

根据配置信息生成全局变量(即，将全局变量和数据与组件中的变量关联)；

根据配置信息生成对应的页面结构；

根据配置信息生成表单的规则；

根据配置信息把静态数据或变量赋值给表单(即，表单数据映射)；

根据配置信息把事件绑定在页面上；

根据配置信息中的接口配置信息把外部数据映射到页面上(即，接口数据映射)；

根据配置信息中的事件配置信息生成对应的数据监听事件；

生成最终的用户配置结果(即，待渲染结果或数据)。

例如，在步骤S106中，可以基于上述用户配置结果(即，待渲染结果或数据)，将web前端的页面结构、页面组件自动转换成react能够渲染的格式数据，将页面组件对应的变量或静态数据、页面组件对应的事件、事件触发的操作自动转换成react能够识别的格式数据，从而通过react实现页面渲染。

图2示例性地示出了根据本发明的web前端配置化开发装置200的示意框图。

如图2所示，web前端配置化开发装置200包括：

配置信息获取模块201，用于获取用于自动生成web前端的配置信息；

web前端自动生成模块203，用于根据配置信息自动生成web前端的页面结构、页面组件对应的变量或静态数据、页面组件对应的事件、事件触发的操作；

格式转换模块205，用于将web前端的页面结构、页面组件自动转换成react能够渲染的格式数据，将页面组件对应的变量或静态数据、页面组件对应的事件、事件触发的操作自动转换成react能够识别的格式数据。

例如，配置信息获取模块201可以包括解析模块和监听模块(watch)(在图2中未示出)。

例如，解析模块用以解析(例如，用户写入的)配置信息(例如，JSON格式)，能够将用于描述不同功能(包括结构、事件、变量、数据、函数等)的配置信息解析出来。然后将解析结果发送给web前端自动生成模块203，web前端自动生成模块203根据解析结果自动生成可以使用的具体功能，并将各个功能联系起来，最终产生一个可以和后端交互(例如，通过与后端进行交互的函数的调用的形式)、自身交互(例如，通过与web前端的页面进行交互的函数的调用的形式)、外部交互(例如，通过与web前端的应用之外的其他应用交互的函数的调用的形式)、数据灵活变动的前端应用(例如，通过灵活的外部数据接口定义的形式)。

例如，上述解析模块可以包括以下子模块：请求解析子模块(models)、配置解析转换子模块(layout)、数据流解析子模块(functions)、表单组件解析子模块(rules)、全局变量解析子模块(global)、模态框解析子模块(modals)。

请求解析子模块，用于解析所有请求方法(例如，对应于用于与web前端的页面进行交互的函数)，此模块的功能可以由配置解析转换子模块(参见下文)生成的模板触发，从而和后端进行数据交互，将后端的数据(例如，通过用于与后端进行交互的函数的调用的方式获得的)映射到由配置解析转换子模块生成的同一模板。

配置解析转换子模块，用于解析用户配置(即，上述配置信息)，将解析结果转成(例如，react的)dom树(发送给web前端自动生成模块203，供其使用)，此模块具有以下功能：

1.触发请求解析子模块里面的请求方法

2.触发数据流解析子模块里的数据流函数

3.改变模板自身数据功能

即，可选地，配置信息获取模块201可以包括(在图2中未示出)：

配置解析转换子模块，用于解析web前端的配置信息，将解析结果转成dom树，发送给web前端自动生成模块203。

例如，需要解析和转换的用户配置(即，上述配置信息)可以是数组的形式，每个数组元素对应一个不同的用户配置(项)。配置解析转换子模块会依次解析数组中的每一个配置项。然后，按照顺序排列。

配置解析转换子模块所要解析和转换的每一个配置项包含有如下配置信息：name(页面结构名称或标识)、组件参数集合或组件及组件的子组件的参数集合。每一个配置项都会根据具体配置信息生成一个对应的(页面)结构。

例如，组件参数集合或组件及组件的子组件的参数集合可以包含以下信息：component(组件名称或标识)、children(组件下的子组件的名称或标识，配置方式和配置解析转换子模块一致)、props(组件的属性)、text(组件的文本内容)、state(组件的变量)。

使用配置解析转换子模块提供的解析结果(例如，JSON格式)，就能够表达出组件的结构。然后，还需要增加现有技术所不支持的事件监听和数据的联动。

在props里面配置的组件属性是可以写入固定值或者是在其他模块(例如，全局变量解析子模块、数据流解析子模块、请求解析子模块)里面的动态变量(即，变量名称)。

例如，我们在全局变量解析子模块里面规定了一个叫demo的变量，要传入组件的props，只需要在props里面使用$demo引用即可。

在数据流解析子模块和请求解析子模块里规定的函数和请求方法，需要调用的话也只需要在方法前加一个*号即可。例如有个函数叫change()，需要绑定在按钮的onChange事件上的话，只需在props里面配置onChange：*change()即可。

text的配置是用来定义组件的文本内容，可以写入固定值(即，静态数据)或者全局变量解析子模块的动态变量(即，变量名称)。也是用$作为取值标识。

state是声明组件变量的一个配置。例如，一个名称为test的组件在state里面规定了一个value的属性设置为1，那么全局变量解析子模块里面就会有test的对象，对象里面有个value其值就是1。定义完之后其他组件都可以通过$取值标识去获取该值。

数据流解析子模块，用于解析数据流函数，此模块生成的数据流函数可以由配置解析转换子模块生成的模板触发从而改变配置解析转换子模块里面的数据。

表单组件解析子模块，用于解析配置解析转换子模块里面所有表单组件的rule，此模块可以将配置解析转换子模块里面的表单配置收集起来，可选的，表单组件解析子模块可将收集的表单配置发送至后端供其他系统存储和使用。

全局变量解析子模块，用于解析配置解析转换子模块里面的全局变量，此模块可以将解析出的全局变量数据写到配置解析转换子模块生成的模板里面，模板也可以通过触发请求解析子模块或数据流解析子模块改变全局变量解析子模块的数据，然后改变配置解析转换子模块的数据。

模态框解析子模块，用于解析请求解析子模块里面的模态框数据，并将其整合到配置解析转换子模块里面，此模块可以生成模态框，并写入页面结构里，由数据流解析子模块里的函数控制其显示和隐藏。

例如，监听模块用于声明监听全局变量解析子模块的数据，当数据发生变动之后做出相应的动作，从而影响到配置解析转换子模块里面的数据或触发模态框解析子模块里的请求方法或触发数据流解析子模块里的数据流函数。

例如，格式转换模块205可以被包含在组件渲染挂载系统中。前端应用需要使用(渲染)引擎做部分页面渲染的话，只需要安装引擎，写入需要使用的地方，然后把相关的配置(例如，JSON格式)写入即可。

可选地，web前端配置化开发装置200还包括(在图2中未示出)：

组件接口扩展模块(或系统)，用于实现(例如，通过根据本发明的上述方法自动配置出来的)页面对外部数据的引用。

例如，可以将@定义为用于标识引用外部数据的起始标识符。假如外部有一个叫demo的数据需要传入配置生成出来的应用，只需要在组件(例如，yaka组件)接口上定义demo这个字段。在配置里面需要用到的话，就用@demo去获取。

可选地，web前端配置化开发装置200还包括(在图2中未示出)：

协议配置模块(或系统)，用于简便快捷地实现与web服务相关的协议的配置。

结合根据本发明的上述方法和装置，还提出了一种计算机可读存储介质，存储介质上存储有计算机程序，程序被处理器执行时实现上文所述的方法的步骤。

结合根据本发明的上述方法和装置，还提出了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现上文所述的方法的步骤。

根据本发明的上述技术方案，能够根据配置信息(例如，JSON格式)自动生成具有复杂逻辑的html前端应用。

更具体地，根据本发明的上述技术方案，能够根据配置信息自动实现以下操作：1)关联数据流函数；2)生成页面结构；3)将配置信息中定义的事件绑定在页面组件上；4)关联请求函数(例如，用于与web前端的页面或后端数据库进行交互的函数)；5)关联外部数据(例如，通过与web前端应用之外的其他应用进行交互的函数的方式访问的外部数据)；6)生成数据监听。

例如，这种html前端应用具有旧的生成方式不具有的以下优点：不仅能够自动生成静态的页面结构，而且能够自动生成与后端之间的交互、与前端应用自身的内部事件联动、以及与外部应用之间的交互等操作相关的功能。

因此，基于根据本发明的上述技术方案，开发人员可以无需学习前端开发语言，而只需要了解JSON配置方法和组件功能，即可开发出具有复杂逻辑的html应用。大大降低了对开发人员的技术要求。

上面描述的内容可以单独地或者以各种方式组合起来实施，而这些变型方式都在本发明的保护范围之内。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、装置中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。某些组件或所有组件可以被实施为由处理器，如数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于RAM、ROM、EEPROM、闪存或其他存储器技术、CD-ROM、数字多功能盘(DVD)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据，并且可包括任何信息递送介质。

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

Claims (10)

1.一种web前端配置化开发方法，其特征在于，包括：

获取用于自动生成所述web前端的配置信息；

根据所述配置信息自动生成所述web前端的页面结构、页面组件对应的变量或静态数据、页面组件对应的事件、事件触发的操作；

将所述web前端的页面结构、所述页面组件自动转换成react能够渲染的格式数据，将所述页面组件对应的变量或静态数据、所述页面组件对应的事件、所述事件触发的操作自动转换成react能够识别的格式数据。

2.如权利要求1所述的web前端配置化开发方法，其特征在于，所述配置信息包括：页面结构名称或标识、组件参数集合或组件及组件的子组件的参数集合。

3.如权利要求2所述的web前端配置化开发方法，其特征在于，所述组件或所述子组件的参数包括：组件或子组件的名称或标识、组件或子组件对应的变量名称或标识或静态数据、组件或子组件对应的事件名称或标识、事件名称或标识触发的操作的执行函数。

4.如权利要求3所述的web前端配置化开发方法，其特征在于，所述执行函数包括：用于与后端进行交互的函数、用于与所述web前端的页面进行交互的函数、用于与所述web前端的应用之外的其他应用交互的函数。

5.如权利要求1或2所述的web前端配置化开发方法，其特征在于，所述配置信息是JSON格式的文本信息。

6.如权利要求1或2所述的web前端配置化开发方法，其特征在于，所述获取用于自动生成所述web前端的配置信息的步骤包括：

解析所述web前端的配置信息，将解析结果转成dom树。

7.一种web前端配置化开发装置，其特征在于，包括：

配置信息获取模块，用于获取用于自动生成所述web前端的配置信息；

web前端自动生成模块，用于根据所述配置信息自动生成所述web前端的页面结构、页面组件对应的变量或静态数据、页面组件对应的事件、事件触发的操作；

格式转换模块，用于将所述web前端的页面结构、所述页面组件自动转换成react能够渲染的格式数据，将所述页面组件对应的变量或静态数据、所述页面组件对应的事件、所述事件触发的操作自动转换成react能够识别的格式数据。

8.如权利要求7所述的web前端配置化开发装置，其特征在于，所述配置信息获取模块包括：

配置解析转换子模块，用于解析所述web前端的配置信息，将解析结果转成dom树，发送给所述web前端自动生成模块。

9.一种计算机可读存储介质，其特征在于，所述存储介质上存储有计算机程序，所述程序被处理器执行时实现权利要求1至6中任意一项所述方法的步骤。

10.一种计算机设备，其特征在于，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现权利要求1至6中任意一项所述方法的步骤。