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

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

【技术实现步骤摘要】
一种页面开发方法、装置、设备及存储介质


[0001]本专利技术实施例涉及页面开发
，尤其涉及一种页面开发方法、装置、设备及存储介质。

技术介绍

[0002]随着前端框架的流行，它的生态环境所包含的资源越来越丰富。以电子商务toB业务为例，页面开发的类型可以归结为门户页、查询页、表单页、详情页和图表页等等。现有的页面开发主要采用静态模板页的方式，开发人员在静态模板页的基础上，根据业务需求进行业务代码内容的补充。
[0003]在实现本专利技术的过程中，发现现有技术中至少存在以下技术问题：
[0004]静态模板页只能提供一个很基础的框架，页面开发过程中的内容模板(template)和JS(JavaScript)代码仍需要开发人员手动编写，导致页面开发的效率仍很低。

技术实现思路

[0005]本专利技术实施例提供了一种页面开发方法、装置、设备及存储介质，以提高页面开发的效率。
[0006]第一方面，本专利技术实施例提供了一种页面开发方法，该方法包括：
[0007]获取用户基于交互界面选择输入的至少一个页面组件及各所述页面组件分别对应的元素参数数据；
[0008]基于各所述页面组件分别对应的元素参数数据，生成当前页面对应的抽象语法树；
[0009]基于所述抽象语法树，分别确定所述当前页面对应的内容模板和JS逻辑数据，并基于所述内容模板和JS逻辑数据，确定所述当前页面对应的页面开发文件。
[0010]第二方面，本专利技术实施例还提供了一种页面开发装置，该装置包括：
[0011]页面组件搭建模块，用于获取用户基于交互界面选择输入的至少一个页面组件及各所述页面组件分别对应的元素参数数据；
[0012]抽象语法树生成模块，用于基于各所述页面组件分别对应的元素参数数据，生成当前页面对应的抽象语法树；
[0013]页面开发文件生成模块，用于基于所述抽象语法树，分别确定所述当前页面对应的内容模板和JS逻辑数据，并基于所述内容模板和JS逻辑数据，确定所述当前页面对应的页面开发文件。
[0014]第三方面，本专利技术实施例还提供了一种电子设备，该电子设备包括：
[0015]一个或多个处理器；
[0016]存储器，用于存储一个或多个程序；
[0017]当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现上述所涉及的任一所述的页面开发方法。
[0018]第四方面，本专利技术实施例还提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行上述所涉及的任一所述的页面开发方法。
[0019]上述专利技术中的实施例具有如下优点或有益效果：
[0020]本专利技术实施例通过预先配置页面组件的元素参数数据，在用户基于交互界面自定义页面组件后，基于页面组件的元素参数数据生成抽象语法树，并基于抽象语法树分别确定当前页面对应的内容模板和JS逻辑数据，基于内容模板和JS逻辑数据，确定当前页面对应的页面开发文件，解决了页面开发文件需要手动编写的问题，提高了页面开发的效率。
附图说明
[0021]图1是本专利技术实施例一提供的一种页面开发方法的流程图；
[0022]图2是本专利技术实施例一提供的一种内容模板的生成方法的流程图；
[0023]图3是本专利技术实施例二提供的一种页面开发方法的流程图；
[0024]图4是本专利技术实施例二提供的一种页面开发方法的具体实例的示意图；
[0025]图5是本专利技术实施例三提供的一种页面开发装置的示意图；
[0026]图6是本专利技术实施例四提供的一种电子设备的结构示意图。
具体实施方式
[0027]下面结合附图和实施例对本专利技术作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本专利技术，而非对本专利技术的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本专利技术相关的部分而非全部结构。
[0028]实施例一
[0029]图1是本专利技术实施例一提供的一种页面开发方法的流程图，本实施例可适用于对页面进行开发的情况，尤其适用于基于vue架构进行页面开发的情况。该方法可以由页面开发装置来执行，该装置可采用软件和/或硬件的方式实现，该装置可以配置于终端设备中，示例性的，终端设备可以是移动终端、笔记本电脑、台式机、服务器和平板电脑等智能终端。具体包括如下步骤：
[0030]S110、获取用户基于交互界面选择输入的至少一个页面组件及各页面组件分别对应的元素参数数据。
[0031]其中，示例性的，交互界面上显示至少一个可供用户执行拖拽操作的页面组件。具体的，页面组件是对数据和方法的封装，每个页面组件相当于一个页面对象，有对应的属性和方法。示例性的，页面组件的类型包括但不限于文本框组件、下拉菜单组件、按钮组件、图表组件和表格组件等等。
[0032]其中，具体的，用户通过交互界面选择输入至少一个页面组件，各页面组件构成至少一个业务模块，各业务模块共同构成一个页面。其中，示例性的，交互界面可以是基于fastcode代码生成可视化平台提供的。
[0033]其中，具体的，元素参数数据满足schema数据结构，在schema数据结构中包含至少一个元素参数数据。在一个实施例中，可选的，元素参数数据包括但不限于组件ID(tagId)、组件标签名(tag)、props支撑参数(__props)、slots插槽参数(__slots)、容器参数
(canDrag)和children参数。
[0034]S120、基于各页面组件分别对应的元素参数数据，生成当前页面对应的抽象语法树。
[0035]抽象语法树(abstract syntax code，AST)是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构，之所以说是抽象的，是因为抽象语法树并不会表示出源代码中的每一个细节，如嵌套括号被隐含在树结构中，并没有以节点的形式呈现。在本实施例中，一个页面组件对应抽象语法树中的一个节点。
[0036]在页面开发的初始化时，抽象语法树是一个空的数组树，在用户执行页面组件的拖拽操作时，抽象语法树通过clone钩子函数克隆页面组件对应的schema数据结构，添加到数组列表中，从而构建抽象语法树对应的schema数据结构。如果当前页面组件属于容器组件，且当前页面组件包含子页面组件，则在当前页面组件的元素参数数据的children参数中增加子页面组件的schema数据结构，从而建立一个抽象语法树。
[0037]S130、基于抽象语法树，分别确定当前页面对应的内容模板和JS逻辑数据，并基于内容模板和JS逻辑数据，确定当前页面对应的页面开发文件。
[0038]其中，具体的，Template内容模板是一种保护客户端内容的机制，其作用是模板占位符，用于包裹元素，但在循环遍历的过程中，Template内容模板不会被渲染到页面上。其中，JS逻辑数据表示JS代码，JavaScript本文档来自技高网...

【技术保护点】

【技术特征摘要】
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所述的方法，其特征在于，所述基于所述抽象语法树中各页面节点分别对应的元素参数数据...

【专利技术属性】
技术研发人员：宋啊礼，
申请(专利权)人：北京京东振世信息技术有限公司，
类型：发明
国别省市：