CN113126990A - 一种页面开发方法、装置、设备及存储介质 - Google Patents

Abstract

本发明实施例公开了一种页面开发方法、装置、设备及存储介质。该方法包括：获取用户基于交互界面选择输入的至少一个页面组件及各所述页面组件分别对应的元素参数数据；基于各所述页面组件分别对应的元素参数数据，生成当前页面对应的抽象语法树；基于所述抽象语法树，分别确定所述当前页面对应的内容模板和JS逻辑数据，并基于所述内容模板和JS逻辑数据，确定所述当前页面对应的页面开发文件。本发明实施例通过预先配置页面组件的元素参数数据，在用户自定义页面组件后，基于元素参数数据生成页面开发文件，解决了页面开发文件需要手动编写的问题，提高了页面开发的效率。

Description

一种页面开发方法、装置、设备及存储介质

技术领域

本发明实施例涉及页面开发技术领域，尤其涉及一种页面开发方法、装置、设备及存储介质。

背景技术

随着前端框架的流行，它的生态环境所包含的资源越来越丰富。以电子商务toB业务为例，页面开发的类型可以归结为门户页、查询页、表单页、详情页和图表页等等。现有的页面开发主要采用静态模板页的方式，开发人员在静态模板页的基础上，根据业务需求进行业务代码内容的补充。

在实现本发明的过程中，发现现有技术中至少存在以下技术问题：

静态模板页只能提供一个很基础的框架，页面开发过程中的内容模板(template)和JS(JavaScript)代码仍需要开发人员手动编写，导致页面开发的效率仍很低。

发明内容

本发明实施例提供了一种页面开发方法、装置、设备及存储介质，以提高页面开发的效率。

第一方面，本发明实施例提供了一种页面开发方法，该方法包括：

获取用户基于交互界面选择输入的至少一个页面组件及各所述页面组件分别对应的元素参数数据；

基于各所述页面组件分别对应的元素参数数据，生成当前页面对应的抽象语法树；

基于所述抽象语法树，分别确定所述当前页面对应的内容模板和JS逻辑数据，并基于所述内容模板和JS逻辑数据，确定所述当前页面对应的页面开发文件。

第二方面，本发明实施例还提供了一种页面开发装置，该装置包括：

页面组件搭建模块，用于获取用户基于交互界面选择输入的至少一个页面组件及各所述页面组件分别对应的元素参数数据；

抽象语法树生成模块，用于基于各所述页面组件分别对应的元素参数数据，生成当前页面对应的抽象语法树；

页面开发文件生成模块，用于基于所述抽象语法树，分别确定所述当前页面对应的内容模板和JS逻辑数据，并基于所述内容模板和JS逻辑数据，确定所述当前页面对应的页面开发文件。

第三方面，本发明实施例还提供了一种电子设备，该电子设备包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现上述所涉及的任一所述的页面开发方法。

第四方面，本发明实施例还提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行上述所涉及的任一所述的页面开发方法。

上述发明中的实施例具有如下优点或有益效果：

本发明实施例通过预先配置页面组件的元素参数数据，在用户基于交互界面自定义页面组件后，基于页面组件的元素参数数据生成抽象语法树，并基于抽象语法树分别确定当前页面对应的内容模板和JS逻辑数据，基于内容模板和JS逻辑数据，确定当前页面对应的页面开发文件，解决了页面开发文件需要手动编写的问题，提高了页面开发的效率。

附图说明

图1是本发明实施例一提供的一种页面开发方法的流程图；

图2是本发明实施例一提供的一种内容模板的生成方法的流程图；

图3是本发明实施例二提供的一种页面开发方法的流程图；

图4是本发明实施例二提供的一种页面开发方法的具体实例的示意图；

图5是本发明实施例三提供的一种页面开发装置的示意图；

图6是本发明实施例四提供的一种电子设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图1是本发明实施例一提供的一种页面开发方法的流程图，本实施例可适用于对页面进行开发的情况，尤其适用于基于vue架构进行页面开发的情况。该方法可以由页面开发装置来执行，该装置可采用软件和/或硬件的方式实现，该装置可以配置于终端设备中，示例性的，终端设备可以是移动终端、笔记本电脑、台式机、服务器和平板电脑等智能终端。具体包括如下步骤：

S110、获取用户基于交互界面选择输入的至少一个页面组件及各页面组件分别对应的元素参数数据。

其中，示例性的，交互界面上显示至少一个可供用户执行拖拽操作的页面组件。具体的，页面组件是对数据和方法的封装，每个页面组件相当于一个页面对象，有对应的属性和方法。示例性的，页面组件的类型包括但不限于文本框组件、下拉菜单组件、按钮组件、图表组件和表格组件等等。

其中，具体的，用户通过交互界面选择输入至少一个页面组件，各页面组件构成至少一个业务模块，各业务模块共同构成一个页面。其中，示例性的，交互界面可以是基于fastcode代码生成可视化平台提供的。

其中，具体的，元素参数数据满足schema数据结构，在schema数据结构中包含至少一个元素参数数据。在一个实施例中，可选的，元素参数数据包括但不限于组件ID(tagId)、组件标签名(tag)、props支撑参数(__props)、slots插槽参数(__slots)、容器参数(canDrag)和children参数。

S120、基于各页面组件分别对应的元素参数数据，生成当前页面对应的抽象语法树。

抽象语法树(abstract syntax code，AST)是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构，之所以说是抽象的，是因为抽象语法树并不会表示出源代码中的每一个细节，如嵌套括号被隐含在树结构中，并没有以节点的形式呈现。在本实施例中，一个页面组件对应抽象语法树中的一个节点。

在页面开发的初始化时，抽象语法树是一个空的数组树，在用户执行页面组件的拖拽操作时，抽象语法树通过clone钩子函数克隆页面组件对应的schema数据结构，添加到数组列表中，从而构建抽象语法树对应的schema数据结构。如果当前页面组件属于容器组件，且当前页面组件包含子页面组件，则在当前页面组件的元素参数数据的children参数中增加子页面组件的schema数据结构，从而建立一个抽象语法树。

S130、基于抽象语法树，分别确定当前页面对应的内容模板和JS逻辑数据，并基于内容模板和JS逻辑数据，确定当前页面对应的页面开发文件。

其中，具体的，Template内容模板是一种保护客户端内容的机制，其作用是模板占位符，用于包裹元素，但在循环遍历的过程中，Template内容模板不会被渲染到页面上。其中，JS逻辑数据表示JS代码，JavaScript(JS)是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。

在一个实施例中，可选的，基于抽象语法树，分别确定当前页面对应的内容模板和JS逻辑数据，包括：通过调用内容模板创建函数，基于抽象语法树中各页面节点分别对应的元素参数数据，生成当前页面对应的内容模板；通过调用JS创建函数，基于抽象语法树中各页面节点分别对应的元素参数数据，生成当前页面对应的JS逻辑数据。

其中，具体的，createTemplate内容模板创建函数可用于生成内容模板，JS创建函数createJS可用于生成JS逻辑数据。其中，抽象语法树中的每个页面节点分别对应一个页面组件。每个页面节点对应的结构数据为schema数据结构。

在一个实施例中，可选的，基于抽象语法树中各页面节点分别对应的元素参数数据，生成当前页面对应的内容模板，包括：针对抽象语法树中的每个页面节点，通过调用节点创建函数，基于页面节点对应的元素参数数据，生成与页面节点对应的字符串节点；其中，字符串节点对应的结构数据为语法字符串参数数据；通过调用stringify字符串函数，基于各字符串节点分别对应的语法字符串参数数据，生成当前页面对应的内容模板。

其中，字符串节点是相对于抽象语法树中的页面节点而言的节点。具体的，调用createElement节点创建函数，createElement节点创建函数会创建一个空的字符串节点，并基于页面节点对应的元素参数数据对字符串节点对应的结构数据进行赋值。其中，语法字符串参数数据的数据结构为html-parse-stringify。

在一个实施例中，可选的，语法字符串参数数据包括但不限于attrs属性参数、元素类型、元素标签名、children子元素参数和voidElement空元素参数。

在一个实施例中，可选的，基于页面节点对应的元素参数数据，生成与页面节点对应的字符串节点，包括：将页面节点对应的元素参数数据中的组件标签名、props支撑参数和子元素参数分别赋值给字符串节点对应的语法字符串参数数据中的元素标签名、attrs属性参数和子元素参数；基于元素参数数据中的表单项元素参数和行内元素参数，生成与字符串节点对应的追加子元素参数，并将追加子元素参数添加到语法字符串参数数据中的子元素参数中。

其中，具体的，将元素参数数据中的props支撑参数赋值给attrs元素属性，将元素参数数据中的组件标签名(tag)赋值给元素标签名，将元素参数数据中的children子元素参数赋值给语法字符串参数数据中的children子元素参数。语法字符串参数数据中的元素类型默认为“tag”，voidElement空元素参数默认为“false”。

其中，具体的，props支撑参数包括prop属性值或attribute属性值。其中，prop属性值表示父元素向子元素传递的属性，attribute属性值表示子元素的原生属性。其中，示例性的，如果props支撑参数是字符串，则判断元素参数数据是否包含data数据参数，如果包含，则将data数据参数赋值给attrs元素属性，如果不包含，则将props支撑参数赋值给attrs元素属性。如果props支撑参数属于可选择对象，则将props支撑参数对应的value值赋值给attrs元素属性。

其中，具体的，表单项元素为页面中负责数据采集的页面组件，示例性的，表单项元素可以为列表框组件、文本数据框组件、密码输入框组件和复选框组件等等。行内元素是基于语义级的基本元素，可用于描述高度和宽度不能改变的页面组件。

在一个实施例中，可选的，基于元素参数数据中的表单项元素参数和行内元素参数，生成与字符串节点对应的追加子元素参数，包括：基于表单项元素参数和行内元素参数，分别判断页面组件是否属于表单项元素或是否属于行内元素；如果页面组件属于表单项元素，则通过调用creatFormItemCol表单项创建函数，生成与字符串节点对应的追加子元素参数；如果页面组件属于行内元素，则通过调用creatDisplayInline行内元素创建函数，生成与字符串节点对应的追加子元素参数。

其中，具体的，根据表单项元素参数(isFormItem)判断页面组件是否属于表单项元素，如果是，则调用creatFormItemCol表单项创建函数。creatFormItemCol表单项创建函数用于在外层包裹el-form-item表单项元素节点，其中，外层包裹是指在原有的父子关系上增加一层父元素，举例而言，原有的父子关系是A是B的父元素，增加一个C元素来包裹B，则变成A是C的父元素，C是B的父元素。实现方法为：C.children＝[B]；A.children.push(C)。creatFormItemCol表单项创建函数还用于根据元素参数数据中的组件栅格参数(__parentsConfig)判断元素的栅格是否小于预设数值，如果是，则在外层包裹el-col列节点。其中，el-col是element-ui组件库中的列组件，element-ui是vue框架中的一种基础组件库。

其中，具体的，根据行内元素参数(eleDisplay)判断页面组件是否属于行内元素，如果是，则调用creatDisplayInline行内元素创建函数。creatDisplayInline行内元素创建函数用于返回赋值后的语法字符串参数数据，不作其他处理，即追加子元素参数为空。

在上述实施例的基础上，可选的，方法还包括：如果页面组件不属于表单项元素且不属于行内元素，则判断抽象语法树是否仅包含一个属于表单项元素的容器组件；如果是，则通过调用creatInsertFrom嵌入表单创建函数，生成与字符串节点对应的追加子元素参数；如果否，则通过调用creatSingleCol单元素创建函数，生成与字符串节点对应的追加子元素参数。

其中，具体的，对抽象语法树进行遍历，判断抽象语法树是否仅包含一个属于表单项元素的容器组件，如果是，则将$$creatInsertForm的参数值设置为“true”，如果抽象语法树包含多个表单项元素的容器组件，则将$$creatInsertForm的参数值设置为“false”，通过判断$$creatInsertForm的参数值，确定抽象语法树是否仅包含一个属于表单项元素的容器组件。

如果$$creatInsertForm的参数值为“true”，则调用creatInsertFrom嵌入表单创建函数，creatInsertFrom嵌入表单创建函数用于在外层包裹el-form表单元素节点。如果$$creatInsertForm的参数值为“false”，则调用creatSingleCol单元素创建函数，creatSingleCol单元素创建函数用于根据元素参数数据中的组件栅格参数(__parentsConfig)判断元素的栅格是否小于预设数值，如果是，则在外层包裹el-col列节点。

图2是本发明实施例一提供的一种内容模板的生成方法的流程图，具体的，调用createTemplate内容模板创建方法中提供的createElement节点创建函数，创建字符串节点。判断页面组件是否属于表单项元素，如果是，则调用creatFormItemCol表单项创建函数生成追加子元素参数，如果否，则判断页面组件是否属于行内元素。如果是，则调用creatDisplayInline行内元素创建函数生成追加子元素参数，如果否，则判断$$creatInsertForm的参数值是否为“True”，如果是，则creatInsertFrom嵌入表单创建函数生成追加子元素参数，如果否，则调用creatSingleCol单元素创建函数生成追加子元素参数。将生成的追加子元素参数添加到赋值后的语法字符串参数数据中的children子元素参数中，调用stringify字符串函数生成当前页面对应的Template内容模板。

在上述实施例的基础上，可选的，基于抽象语法树中各页面节点分别对应的元素参数数据，生成当前页面对应的JS逻辑数据，包括：针对抽象语法树中的每个页面节点，基于页面节点对应的元素参数数据中的组件类型参数，判断页面节点对应的页面组件是否属于外部引入组件；如果是，则基于元素参数数据中的数据参数、生命周期参数、methods方法参数和引入地址参数，生成与页面节点对应的子JS逻辑数据；如果否，则基于元素参数数据中的数据参数、生命周期参数和methods方法参数，生成与页面节点对应的子JS逻辑数据；基于各页面节点分别对应的子JS逻辑数据，生成当前页面对应的JS逻辑数据。

其中，组件类型参数(compType)用于表征页面组件的类型。示例性的，组件类型参数默认为无，当组件类型参数为“common”时表示页面组件属于局部组件，当组件类型参数为“outlink”时表示页面组件属于外部引入组件。

其中，具体的，JS创建函数createJS用于将data数据参数拼接到子JS逻辑数据中的data模块中，将生命周期参数拼接到子JS逻辑数据中的生命周期模块中，将methods方法参数拼接到子JS逻辑数据中的methods方法中。将引入地址参数和生成的变量名作为components属性，拼接到子JS逻辑数据中。

其中，具体的，将Template内容模板和JS逻辑数据进行拼接后，通过调用file文件处理方法生成当前页面对应的页面开发文件。其中，具体的，页面开发文件的文件格式包括“.vue”。其中，vue是一套用于构建用户界面的渐进式JavaScript框架。

本实施例的技术方案，通过预先配置页面组件的元素参数数据，在用户基于交互界面自定义页面组件后，基于页面组件的元素参数数据生成抽象语法树，并基于抽象语法树分别确定当前页面对应的内容模板和JS逻辑数据，基于内容模板和JS逻辑数据，确定当前页面对应的页面开发文件，解决了页面开发文件需要手动编写的问题，提高了页面开发的效率。

实施例二

图3是本发明实施例二提供的一种页面开发方法的流程图，本实施例的技术方案是上述实施例的基础上的进一步细化。可选的，所述方法还包括：针对每个所述页面组件，通过调用渲染函数，基于所述页面组件对应的元素参数数据，生成所述页面组件对应的虚拟节点；其中，所述元素参数数据包括组件标签名和props支撑参数；基于各所述页面组件分别对应的虚拟节点，生成当前页面对应的渲染页面，并将所述渲染页面在交互界面上进行展示。

S210、获取用户基于交互界面选择输入的至少一个页面组件及各页面组件分别对应的元素参数数据。

S220、针对每个页面组件，通过调用渲染函数，基于页面组件对应的元素参数数据，生成页面组件对应的虚拟节点。

其中，具体的，InnerRender是一个函数式组件，用于对组件进行包装。这个组件中的render渲染函数获取元素参数数据后，通过调用createElement节点创建函数，生成与页面组件对应的虚拟节点。其中，render渲染函数是用于生成虚拟DOM的，虚拟DOM是一个用于表示真实DOM结构和属性的JavaScript对象，由至少一个虚拟节点Vnode构成。

在本实施例中，元素参数数据包括组件标签名和props支撑参数。其中，具体的，props支撑参数包括prop属性值或attribute属性值。其中，prop属性值表示父元素向子元素传递的属性，attribute属性值表示子元素的原生属性。其中，具体的，在获取props支撑参数后，需要将props支撑参数赋值给节点创建函数，也就是在调用节点创建函数之前对props支撑参数进行格式化处理。

其中，示例性的，如果props支撑参数是字符串，则判断元素参数数据是否包含data数据参数，如果包含，则将data数据参数作为节点创建函数的函数参数，如果不包含，则将props支撑参数作为节点创建函数的函数参数。其中，具体的，在赋值之前，判断props支撑参数或data数据参数是否是以“：”开头的，如果是，则将“：”去除后再进行赋值。如果props支撑参数属于可选择对象，则将props支撑参数对应的value值作为节点创建函数的函数参数。

在上述实施例的基础上，可选的，基于页面组件对应的元素参数数据，生成页面组件对应的虚拟节点，包括：判断元素参数数据中是否存在slots插槽参数；如果存在，则通过调用节点创建函数，基于组件标签名、props支撑参数和slots插槽参数，生成与页面组件对应的虚拟节点；如果不存在，则通过调用节点创建函数，基于组件标签名和props支撑参数，生成与页面组件对应的虚拟节点。

其中，具体的，插槽是对页面组件中的内容进行分发，在vue框架中slots插槽参数可以定义到页面组件的任意位置，如通过slots插槽参数为页面组件增加一个头部信息或尾部信息等。这样设置的好处在于，为页面组件追加插槽元素以丰富页面组件的渲染效果。

在上述实施例的基础上，可选的，元素参数数据还包括容器参数，相应的，在基于页面组件对应的元素参数数据，生成页面组件对应的虚拟节点之前，方法还包括：基于容器参数，判断页面组件是否属于容器组件；如果是，则获取与页面组件对应的子页面组件，并通过递归调用渲染函数，执行基于子页面组件对应的元素参数数据，生成与子页面组件对应的虚拟节点的操作；如果否，则基于页面组件对应的元素参数数据，生成页面组件对应的虚拟节点。

其中，具体的，容器参数用于定义页面组件是否属于容器组件，如容器参数为“true”时说明页面组件属于容器组件，容器参数为“false”时说明页面组件不属于容器组件。其中，容器组件为可挂载子页面组件的页面组件。

其中，具体的，如果页面组件属于容器组件，则存在与该页面组件对应的子页面组件。示例性的，页面组件A为容器组件，用户可通过拖拽操作将页面组件B拖拽到页面组件A中，则页面组件B即为页面组件A对应的子页面组件。在页面组件A对应的render渲染函数中，递归调用render渲染函数，执行基于子页面组件对应的元素参数数据，生成与子页面组件对应的虚拟节点的操作。其中，具体的，将子页面组件对应的虚拟节点添加到该页面组件的元素参数数据中的children子元素参数中。

这样设置的好处在于，可以满足页面组件之间进行嵌套布局的应用场景，提高开发页面的多样性。

S230、基于各页面组件分别对应的虚拟节点，生成当前页面对应的渲染页面，并将渲染页面在交互界面上进行展示。

其中，具体的，render渲染函数用于对虚拟节点进行遍历，生成当前页面对应的渲染页面。

其中，示例性的，可以将当前页面划分为至少一个业务模块，每个业务模块包含至少一个页面组件。基于上述实施例记载的技术方案，可以生成与各业务模块分别对应的子渲染页面。各业务模块分别对应的子渲染页面构成当前页面对应的渲染页面。这样设置的好处在于，方便用户基于多个业务模块分别拖拽页面组件，从而降低页面布局的难度。

S240、基于各页面组件分别对应的元素参数数据，生成当前页面对应的抽象语法树。

S250、基于抽象语法树，分别确定当前页面对应的内容模板和JS逻辑数据，并基于内容模板和JS逻辑数据，确定当前页面对应的页面开发文件。

图4是本发明实施例二提供的一种页面开发方法的具体实例的示意图。具体的，在交互界面上展示用户可执行拖拽操作的页面组件，如组件1、组件2和组件3。至少一个页面组件构成一个业务模块，可将业务模块对应的子渲染页面在交互界面上进行展示，各业务模块分别对应的子渲染页面构成当前页面对应的渲染页面。用户拖拽完成后，基于用户选择输入的页面组件生成AST树。一方面，对AST树进行遍历，通过调用createTemplate函数，将AST树对应的schema数据结构转换为html-parse-stringify数据结构，基于各节点分别对应的html-parse-stringify数据结构，生成Template内容模板。另一方面，对AST树进行遍历，通过调用createJS函数，生成JS逻辑数据。基于Template内容模板和JS逻辑数据，生成当前页面对应的页面开发文件。

本实施例的技术方案，通过针对每个页面组件，调用渲染函数，基于页面组件对应的元素参数数据生成与页面组件对应的虚拟节点，基于各页面组件分别对应的虚拟节点，生成当前页面对应的渲染页面，并将渲染页面在交互界面上进行展示，解决了页面组件拖拽过程中的可视化问题，从而方便用户基于展示的渲染页面调整页面组件的布局，进而进一步提高了页面开发的效率。

实施例三

图5是本发明实施例三提供的一种页面开发装置的示意图。本实施例可适用于对页面进行开发的情况，尤其适用于基于vue架构进行页面开发的情况。该装置可采用软件和/或硬件的方式实现，该装置可以配置于终端设备中。该页面开发装置包括：页面组件搭建模块310、抽象语法树生成模块320和页面开发文件生成模块330。

其中，页面组件搭建模块310，用于获取用户基于交互界面选择输入的至少一个页面组件及各页面组件分别对应的元素参数数据；

抽象语法树生成模块320，用于基于各页面组件分别对应的元素参数数据，生成当前页面对应的抽象语法树；

页面开发文件生成模块330，用于基于抽象语法树，分别确定当前页面对应的内容模板和JS逻辑数据，并基于内容模板和JS逻辑数据，确定当前页面对应的页面开发文件。

本实施例的技术方案，通过预先配置页面组件的元素参数数据，在用户基于交互界面自定义页面组件后，基于页面组件的元素参数数据生成抽象语法树，并基于抽象语法树分别确定当前页面对应的内容模板和JS逻辑数据，基于内容模板和JS逻辑数据，确定当前页面对应的页面开发文件，解决了页面开发文件需要手动编写的问题，提高了页面开发的效率。

在上述技术方案的基础上，可选的，页面开发文件生成模块330包括：

内容模板生成单元，用于通过调用内容模板创建函数，基于抽象语法树中各页面节点分别对应的元素参数数据，生成当前页面对应的内容模板；

JS逻辑数据生成单元，用于通过调用JS创建函数，基于抽象语法树中各页面节点分别对应的元素参数数据，生成当前页面对应的JS逻辑数据。

在上述技术方案的基础上，可选的，内容模板生成单元，包括：

字符串节点生成子单元，用于针对抽象语法树中的每个页面节点，通过调用节点创建函数，基于页面节点对应的元素参数数据，生成与页面节点对应的字符串节点；其中，字符串节点对应的结构数据为语法字符串参数数据；

内容模板生成子单元，用于通过调用stringify字符串函数，基于各字符串节点分别对应的语法字符串参数数据，生成当前页面对应的内容模板。

在上述技术方案的基础上，可选的，字符串节点生成子单元，具体用于：

将页面节点对应的元素参数数据中的组件标签名、props支撑参数和子元素参数分别赋值给字符串节点对应的语法字符串参数数据中的元素标签名、attrs属性参数和子元素参数；

基于元素参数数据中的表单项元素参数和行内元素参数，生成与字符串节点对应的追加子元素参数，并将追加子元素参数添加到语法字符串参数数据中的子元素参数中。

在上述技术方案的基础上，可选的，字符串节点生成子单元，具体用于：

基于表单项元素参数和行内元素参数，分别判断页面组件是否属于表单项元素或是否属于行内元素；

如果页面组件属于表单项元素，则通过调用creatFormItemCol表单项创建函数，生成与字符串节点对应的追加子元素参数；

如果页面组件属于行内元素，则通过调用creatDisplayInline行内元素创建函数，生成与字符串节点对应的追加子元素参数。

在上述技术方案的基础上，可选的，字符串节点生成子单元，还用于：

如果页面组件不属于表单项元素且不属于行内元素，则判断抽象语法树是否仅包含一个属于表单项元素的容器组件；

如果是，则通过调用creatInsertFrom嵌入表单创建函数，生成与字符串节点对应的追加子元素参数；

如果否，则通过调用creatSingleCol单元素创建函数，生成与字符串节点对应的追加子元素参数。

在上述技术方案的基础上，可选的，JS逻辑数据生成单元，具体用于：

针对抽象语法树中的每个页面节点，基于页面节点对应的元素参数数据中的组件类型参数，判断页面节点对应的页面组件是否属于外部引入组件；

如果是，则基于元素参数数据中的数据参数、生命周期参数、methods方法参数和引入地址参数，生成与页面节点对应的子JS逻辑数据；

如果否，则基于元素参数数据中的数据参数、生命周期参数和methods方法参数，生成与页面节点对应的子JS逻辑数据；

基于各页面节点分别对应的子JS逻辑数据，生成当前页面对应的JS逻辑数据。

在上述技术方案的基础上，可选的，该装置还包括：

虚拟节点生成模块，用于针对每个页面组件，通过调用渲染函数，基于页面组件对应的元素参数数据，生成页面组件对应的虚拟节点；其中，元素参数数据包括组件标签名和props支撑参数；

渲染页面生成模块，用于基于各页面组件分别对应的虚拟节点，生成当前页面对应的渲染页面，并将渲染页面在交互界面上进行展示。

在上述技术方案的基础上，可选的，虚拟节点生成模块，具体用于：

判断元素参数数据中是否存在slots插槽参数；

如果存在，则通过调用节点创建函数，基于组件标签名、props支撑参数和slots插槽参数，生成与页面组件对应的虚拟节点；

如果不存在，则通过调用节点创建函数，基于组件标签名和props支撑参数，生成与页面组件对应的虚拟节点。

在上述技术方案的基础上，可选的，元素参数数据还包括容器参数，相应的，虚拟节点生成模块，还用于：

在基于页面组件对应的元素参数数据，生成页面组件对应的虚拟节点之前，基于容器参数，判断页面组件是否属于容器组件；

如果是，则获取与页面组件对应的子页面组件，并通过递归调用渲染函数，执行基于子页面组件对应的元素参数数据，生成与子页面组件对应的虚拟节点的操作；

如果否，则基于页面组件对应的元素参数数据，生成页面组件对应的虚拟节点。

本发明实施例所提供的页面开发装置可以用于执行本发明实施例所提供的页面开发方法，具备执行方法相应的功能和有益效果。

值得注意的是，上述页面开发装置的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

实施例四

图6是本发明实施例四提供的一种电子设备的结构示意图，本发明实施例为本发明上述实施例的页面开发方法的实现提供服务，可配置上述实施例中的页面开发装置。图6示出了适于用来实现本发明实施方式的示例性电子设备12的框图。图6显示的电子设备12仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图6所示，电子设备12以通用计算设备的形式表现。电子设备12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，系统存储器28，连接不同系统组件(包括系统存储器28和处理单元16)的总线18。

总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器、外围总线、图形加速端口、处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线、微通道体系结构(MAC)总线、增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

电子设备12典型地包括多种计算机系统可读介质。这些介质可以是任何能够被电子设备12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器28可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)30和/或高速缓存存储器32。电子设备12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图6未显示，通常称为“硬盘驱动器”)。尽管图6中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM，DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如存储器28中，这样的程序模块42包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明所描述的实施例中的功能和/或方法。

电子设备12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该电子设备12交互的设备通信，和/或与使得该电子设备12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且，电子设备12还可以通过网络适配器20与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图6所示，网络适配器20通过总线18与电子设备12的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备12使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理单元16通过运行存储在系统存储器28中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的页面开发方法。

通过上述电子设备，解决了页面开发文件需要手动编写的问题，提高了页面开发的效率。

实施例五

本发明实施例五还提供了一种包含计算机可执行指令的存储介质，计算机可执行指令在由计算机处理器执行时用于执行一种页面开发方法，该方法包括：

获取用户基于交互界面选择输入的至少一个页面组件及各页面组件分别对应的元素参数数据；

基于各页面组件分别对应的元素参数数据，生成当前页面对应的抽象语法树；

基于抽象语法树，分别确定当前页面对应的内容模板和JS逻辑数据，并基于内容模板和JS逻辑数据，确定当前页面对应的页面开发文件。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，程序设计语言包括面向对象的程序设计语言，诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络包括局域网(LAN)或广域网(WAN)，连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

当然，本发明实施例所提供的一种包含计算机可执行指令的存储介质,其计算机可执行指令不限于如上的方法操作，还可以执行本发明任意实施例所提供的页面开发方法中的相关操作。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (13)

1.一种页面开发方法，其特征在于，包括：

获取用户基于交互界面选择输入的至少一个页面组件及各所述页面组件分别对应的元素参数数据；

基于各所述页面组件分别对应的元素参数数据，生成当前页面对应的抽象语法树；

基于所述抽象语法树，分别确定所述当前页面对应的内容模板和JS逻辑数据，并基于所述内容模板和JS逻辑数据，确定所述当前页面对应的页面开发文件。

2.根据权利要求1所述的方法，其特征在于，所述基于所述抽象语法树，分别确定所述当前页面对应的内容模板和JS逻辑数据，包括：

通过调用内容模板创建函数，基于所述抽象语法树中各页面节点分别对应的元素参数数据，生成当前页面对应的内容模板；

通过调用JS创建函数，基于所述抽象语法树中各页面节点分别对应的元素参数数据，生成当前页面对应的JS逻辑数据。

3.根据权利要求2所述的方法，其特征在于，所述基于所述抽象语法树中各页面节点分别对应的元素参数数据，生成当前页面对应的内容模板，包括：

针对所述抽象语法树中的每个页面节点，通过调用节点创建函数，基于所述页面节点对应的元素参数数据，生成与所述页面节点对应的字符串节点；其中，所述字符串节点对应的结构数据为语法字符串参数数据；

通过调用stringify字符串函数，基于各所述字符串节点分别对应的语法字符串参数数据，生成当前页面对应的内容模板。

4.根据权利要求3所述的方法，其特征在于，所述基于所述页面节点对应的元素参数数据，生成与所述页面节点对应的字符串节点，包括：

将所述页面节点对应的元素参数数据中的组件标签名、props支撑参数和子元素参数分别赋值给所述字符串节点对应的语法字符串参数数据中的元素标签名、attrs属性参数和子元素参数；

基于所述元素参数数据中的表单项元素参数和行内元素参数，生成与所述字符串节点对应的追加子元素参数，并将所述追加子元素参数添加到所述语法字符串参数数据中的子元素参数中。

5.根据权利要求4所述的方法，其特征在于，所述基于所述元素参数数据中的表单项元素参数和行内元素参数，生成与所述字符串节点对应的追加子元素参数，包括：

基于所述表单项元素参数和行内元素参数，分别判断所述页面组件是否属于表单项元素或是否属于行内元素；

如果所述页面组件属于表单项元素，则通过调用creatFormItemCol表单项创建函数，生成与所述字符串节点对应的追加子元素参数；

如果所述页面组件属于行内元素，则通过调用creatDisplayInline行内元素创建函数，生成与所述字符串节点对应的追加子元素参数。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

如果所述页面组件不属于表单项元素且不属于行内元素，则判断所述抽象语法树是否仅包含一个属于表单项元素的容器组件；

如果是，则通过调用creatInsertFrom嵌入表单创建函数，生成与所述字符串节点对应的追加子元素参数；

如果否，则通过调用creatSingleCol单元素创建函数，生成与所述字符串节点对应的追加子元素参数。

7.根据权利要求2所述的方法，其特征在于，所述基于所述抽象语法树中各页面节点分别对应的元素参数数据，生成当前页面对应的JS逻辑数据，包括：

针对所述抽象语法树中的每个页面节点，基于所述页面节点对应的元素参数数据中的组件类型参数，判断所述页面节点对应的页面组件是否属于外部引入组件；

如果是，则基于所述元素参数数据中的数据参数、生命周期参数、methods方法参数和引入地址参数，生成与所述页面节点对应的子JS逻辑数据；

如果否，则基于所述元素参数数据中的所述数据参数、生命周期参数和methods方法参数，生成与所述页面节点对应的子JS逻辑数据；

基于各所述页面节点分别对应的子JS逻辑数据，生成所述当前页面对应的JS逻辑数据。

8.根据权利要求1所述的方法，其特征在于，所述方法还包括：

针对每个所述页面组件，通过调用渲染函数，基于所述页面组件对应的元素参数数据，生成所述页面组件对应的虚拟节点；其中，所述元素参数数据包括组件标签名和props支撑参数；

基于各所述页面组件分别对应的虚拟节点，生成当前页面对应的渲染页面，并将所述渲染页面在交互界面上进行展示。

9.根据权利要求8所述的方法，其特征在于，所述基于所述页面组件对应的元素参数数据，生成所述页面组件对应的虚拟节点，包括：

判断所述元素参数数据中是否存在slots插槽参数；

如果存在，则通过调用节点创建函数，基于所述组件标签名、props支撑参数和slots插槽参数，生成与所述页面组件对应的虚拟节点；

如果不存在，则通过调用节点创建函数，基于所述组件标签名和props支撑参数，生成与所述页面组件对应的虚拟节点。

10.根据权利要求8所述的方法，其特征在于，所述元素参数数据还包括容器参数，相应的，在基于所述页面组件对应的元素参数数据，生成所述页面组件对应的虚拟节点之前，所述方法还包括：

基于所述容器参数，判断所述页面组件是否属于容器组件；

如果是，则获取与所述页面组件对应的子页面组件，并通过递归调用渲染函数，执行基于所述子页面组件对应的元素参数数据，生成与所述子页面组件对应的虚拟节点的操作；

如果否，则基于所述页面组件对应的元素参数数据，生成所述页面组件对应的虚拟节点。

11.一种页面开发装置，其特征在于，包括：

页面组件搭建模块，用于获取用户基于交互界面选择输入的至少一个页面组件及各所述页面组件分别对应的元素参数数据；

抽象语法树生成模块，用于基于各所述页面组件分别对应的元素参数数据，生成当前页面对应的抽象语法树；

页面开发文件生成模块，用于基于所述抽象语法树，分别确定所述当前页面对应的内容模板和JS逻辑数据，并基于所述内容模板和JS逻辑数据，确定所述当前页面对应的页面开发文件。

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

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-10中任一所述的页面开发方法。

13.一种包含计算机可执行指令的存储介质，其特征在于，所述计算机可执行指令在由计算机处理器执行时用于执行如权利要求1-10中任一所述的页面开发方法。

Images