CN111352628A - 一种前端代码生成方法、装置、计算机系统及可读存储介质 - Google Patents

Abstract

本发明公开了一种前端代码自动生成方法，涉及计算机技术领域，包括：获取页面上的当前组件信息，基于所述当前组件信息创建第一树形结构；接收用户在页面上的拖拽操作，基于所述拖拽操作获取被拖拽的第二组件标识信息；根据所述当前组件信息和所述第二组件标识信息从数据库中获取用于提示用户第二组件放置位置的第二组件提示信息，并将所述第二组件提示信息发送至页面；根据用户基于所述第二组件提示信息在页面上的操作获取第二组件位置信息和第二组件属性信息，并构建第二树形结构，基于所述第二树形结构生成目标前端代码，实现前端代码的自动生成，减少了工作人员重复且无意义的工作，提高了工作效率。

Description

一种前端代码生成方法、装置、计算机系统及可读存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种前端代码生成方法、装置、计算机系统及可读存储介质。

背景技术

前端开发是创建Web页面或app等前端界面呈现给用户的过程，前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

现有的用于前端Web的框架越来越多，无论是哪种框架，用于支持页面运行的代码主要由三部分组成，分别是HTML组成的描述组件结构的代码、CSS组成的描述组件样式的代码、JavaScript组成的描述交互逻辑的代码，除去控制实际业务逻辑的JavaScript代码外，HTML代码以及CSS代码是用以描述页面组件层级结构以及样式等与业务无实际关联的代码。

但是上述代码HTML代码以及CSS代码往往简单、大量且不断重复的，代码编写人员需要耗费大量时间编写这些重复的HTML代码及CSS代码，工作效率低下。

发明内容

本发明的目的是提供一种前端代码生成方法、装置、计算机系统及可读存储介质，用于解决现有技术存在的在前端框架下需要人员重复编写大量HTML代码及CSS代码而导致工作效率低下的问题。

为实现上述目的，本发明提供一种前端代码生成方法，包括：

获取页面上的当前组件信息，基于所述当前组件信息创建第一树形结构；其中，所述当前组件包括至少一个第一组件，所述树形结构用于通过结点及连接关系记录各个所述第一组件之间的位置关系信息和各个所述第一组件的属性信息；

接收用户在页面上的拖拽操作，基于所述拖拽操作获取被拖拽的第二组件标识信息；

根据所述当前组件信息和所述第二组件标识信息从数据库中获取用于提示用户第二组件放置位置的第二组件提示信息，并将所述第二组件提示信息发送至页面；

根据用户基于所述第二组件提示信息在页面上的操作获取第二组件位置信息和第二组件属性信息，并基于所述第二组件位置信息、所述第二组件属性信息和所述第一树形结构构建第二树形结构，所述第二树形结构包括用于记录第一组件或第二组件属性信息的结点，以及用于描述第一组件或第二组件位置关系的连接关系；

基于所述第二树形结构生成目标代码。

进一步的，所述结点包括包含结点和并列结点，包含结点对应包含位置关系，并列结点对应并列位置关系，任一所述结点至多同时连接一个包含结点和一个并列结点。

进一步的，所述所述构建第二树形结构，包括以下至少一种情况：

基于第一树形结构新增一个结点，所述新增的结点为包含结点或并列结点；基于第一树形结构移动一个结点及其连接的所有结点；基于第一树形结构删除一个结点及其连接的所有结点。

进一步的，所述基于所述树形结构生成目标代码，包括：

遍历所述第二树形结构，基于所述结点及其连接关系分别生成CSS码和HTML码；

将所述HTML码和所述CSS码合并获取目标代码。

进一步的，根据所述当前组件信息和所述第二组件标识信息从数据库中获取第二组件提示信息，包括：

数据库中预存储有多个模板信息；

基于所述当前组件信息获取第一组件信息；

根据所述第一组件信息和所述第二组件标识信息从数据库中匹配模板信息；

根据所述模板信息获取第二组件提示信息。

进一步的，所述根据所述模板信息获取第二组件提示信息，包括：

基于第一组件信息，获取至少一个第二组件位置数据；

逐次将各个所述第二组件位置数据与第一组件位置关系信息合并获得组件信息，计算所述组件信息与所述模板信息的相似度；

筛选出所述组件信息与所述模板信息相似度最高对应的第二组件位置数据，作为第二组件提示信息。

进一步的，所述方法还包括：

基于组件位置信息判断用户在页面上的操作是否为推荐操作，若是，则将所述组件位置信息设为模板信息存储在数据库内；

其中，所述组件位置信息包括第一组件位置信息和第二组件位置信息。

为实现上述目的，本发明还提供一种前端代码自动生成装置，包括：

获取模块，用于获取页面上的当前组件信息；

创建模块，用于基于所述当前组件信息创建第一树形结构；

识别模块，用于接收用户在页面上的拖拽操作，基于所述拖拽操作获取被拖拽的第二组件标识信息；

提示模块，用于根据所述当前组件信息和所述第二组件标识信息从数据库中获取第二组件提示信息，并将所述第二组件提示信息发送至页面；

更新模块，用于根据用户基于所述第二组件提示信息在页面上的操作获取第二组件位置信息和第二组件属性信息，并基于所述第二组件位置信息、所述第二组件属性信息和所述第一树形结构构件第二树形结构；

生成模块，用于基于所述第二树形结构自动生成目标代码。

为实现上述目的，本发明还提供一种计算机系统，其包括至少一个计算机设备，各计算机设备包括存储器.处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述至少一个计算机设备的处理器执行所述计算机程序时共同实现上述方法的步骤。

为实现上述目的，本发明还提供一种计算机可读存储介质，其包括多个存储介质，各存储介质上存储有计算机程序，所述多个存储介质存储的所述计算机程序被处理器执行时共同实现上述方法的步骤。

本发明提供的数据保存查询方法、装置、计算机系统及可读存储介质，通过获取模块获取页面的组件位置信息和组件属性信息，采用树形结构自动记录组件位置信息，使得所有组件位置信息清楚的被记录，生成模块遍历该树形结构，即可获得HTML代码和CSS代码，即目标代码，实现目标代码的自动生成，减少编码人员重复且无意义的编写工作，提高工作效率。

附图说明

图1为本发明所述的一种前端代码自动生成方法的实施例一的流程图；

图2为本发明的一种前端代码自动生成方法的实施例一中根据所述当前组件信息和所述第二组件标识信息从数据库中获取第二组件提示信息的流程图；

图3为本发明的一种前端代码自动生成方法的实施例一中根据所述模板信息获取第二组件提示信息的流程图；

图4为本发明的一种前端代码自动生成方法的实施例一中生成目标代码的流程图；

图5为本发明的一种前端代码自动生成装置实施例二的程序模块示意图；

图6为本发明计算机系统实施例三中计算机设备的硬件结构示意图。

附图标记：

71、获取模块 72、创建模块 73、识别模块

74、提示模块 75、更新模块 76、生成模块

81、存储器 82、处理器

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明提供适用于计算机技术领域，提供基于获取模块、创建模块、识别模块、提示模块、更新模块、生成模块的一种前端代码生成方法、装置、计算机系统及可读存储介质方法。本发明通过获取模块获取页面上的当前组件信息，并采用创建模块基于当前组件信息创建第一树形结构，再通过识别模块识别出用户拖拽操作的执行组件，并基于该执行组件的标识信息通过提示模块给出提示信息并发送至用户页面，用户在获取提示信息后对执行组件再进行拖拽操作，在确定用户拖拽该执行组件至最终位置后，基于该执行组件的位置信息通过更新模块对第一树形结构进行更新，即构建第二树形结构，最后生成模块根据上述第二树形结构自动完成代码生成，通过特定的树形结构对当前组件以及执行组件的信息进行获取和记录，进而实现代码的自动生成，减少了现有技术中代码编写人员需要耗费大量时间编写这些重复的HTML代码及CSS代码，工作效率低下的问题。

本发明在基于该执行组件的标识信息通过提示模块给出提示信息并发送至用户页面时，会根据当前组件信息从数据库中匹配相应的模板，数据库中的模板均为常用组件模板，将执行组件可能存在的各个位置信息与对应的模板进行相似度的比对，获得与模板相似度最高的位置信息，给与用户提示信息，以便于客户按照使用习惯去完成执行组件的操作，方便用户操作。

实施例一

请参阅图1，本实施例提供了一种前端代码自动生成方法，如图1所示，包括以下步骤：

S1：获取页面上的当前组件信息，基于所述当前组件信息创建第一树形结构；其中，所述当前组件包括至少一个第一组件，所述第一树形结构通过结点及其连接关系记录各个第一组件之间的位置关系信息和各个所述第一组件的属性信息；

在本实施方式中，使用基于MVVM(Model-View-ViewModel)的vue.js作为前端开发框架，vue将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方，在本实施方式中的组件库具体的使用HTML组件库，用于方便用户拖拽组件库中的组件。

具体的，所述第一组件可以由多个普通组件或容器组件组成，也可以是单个组件或容器组件，也可以是没有任何组件；能容纳其他组件(包括容器组件以及普通组件)的组件定义为容器组件，如“div”组件，否则为普通组件，如“button”组件；第一组件信息包括第一组件位置信息和第一组件属性信息，当第一组件由多个普通组件组成，第一组件位置信息包括各个普通组件的位置关系，第一组件属性信息包括各个普通组件的属性信息。

需要特别说明的是，页面上当前显示的组件均定义为第一组件，而本实施例中后述的用户拖拽操作的组件均为第二组件。

具体的，本实施方式中提及的树形结构包括所述的第一树形结构和下述S4中所述的第二树形结构，所述第一树形结构包括用于记录第一组件结点，以及用于描述各个第一组件之间位置关系的连接关系；后述的第二树形结构包括用于记录第一组件或第二组件属性信息的结点，以及用于描述各个第一组件之间或第一组件和第二组件位置关系的连接关系；

其中，上述结点均包括包含结点和并列结点，包含结点对应包含位置关系，并列结点对应并列位置关系，任一所述结点至多同时连接一个包含结点和一个并列结点。

需要说明的是，本实施方式中的位置信息均为各组件(包括第一组件和第二组件)之间的位置关系，所述位置关系包括“包含”以及“并列”，在拖拽某一组件后，任一前端开发框架(包括上述vue.js)均可根据组件被拖拽到的位置的坐标，判断组件被拖拽成为了页面已有组件的“包含”组件或者“并列”组件，获取并记录各组件之间的位置关系以及各组件的属性信息即可获取页面上当前组件信息，在本实施方式中，记录各组件之间的位置关系采用树形结构实现。

具体的，以上所述的树形结构中任一结点设为根结点，与根结点连接的分别为左结点和右结点，所述左结点用于记录子组件，即包含结点，所述右结点用于记录平行组件，即并列结点。

需要特别说明的是，上述树形结构与现有的二叉树结构区别在于：现有的二叉树可以包括根结点、多个左结点以及多个右结点，在本方案中，设置左结点为根结点的子结点，设置右结点为根结点的并列结点，每一结点只记录一个左结点以及一个右结点，结点记录某一第一组件信息或第二组件信息，左结点记录与该结点记录的组件信息呈“包含”关系的组件信息，右结点记录与该结点记录的组件信息呈“并列”关系的组件关系。

上述“包含”关系和“并列”关系具体例如：设置有组件A，组件B，组件C，组件A、C均为普通组件，且均被放置在容器组件B中，则组件B与组件A或组件C为“包含”关系，组件A与组件C为“并列”关系。

在本具体实施方式中，设置根结点位置数组为：[1]，设结点位置数组为[…,x,y]，其左结点位置数组为[…,x,y,1],其右结点位置数组为[…,x,y+1]，以上述组件A、组件B、组件C为例：组件B的位置数组为[1,1]，则组件A的位置数组为[1,1,1]，组件C的位置数组为[1,1,2]。

S2：接收用户在页面上的拖拽操作，基于所述拖拽操作获取被拖拽的第二组件标识信息；

具体的，其中，第二组件也包括容器组件和普通组件，被拖拽的第二组件可以来自组件库，也可以是页面上原有的组件，第二组件标识信息包括第二组件的名称、类型等，每一第二组件均具有唯一且特定的第二组件标识，需要特别说明的是，当被拖拽的第二组件是页面上原有的组件，此时当前页面组件信息会被更改，被拖拽的第二组件信息包括组件名称信息以及组件属性信息，需要说明的是，所述第二组件属性信息以支持通过CSS(叠层样式表)进行修改的属性作为第二组件属性,CSS能够对网页中元素位置的排版进行像素级精确控制。

S3：根据所述当前组件信息和所述第二组件标识信息从数据库中获取用于提示用户第二组件放置位置的第二组件提示信息，并将所述第二组件提示信息发送至页面；具体的，数据库中预存储有多个模板信息，每一模板信息均对应一预设HTML码和CSS码。

具体的，第二组件标识信息可以具体获知被拖拽的第二组件，并根据第二组件标识信息获取的组件类型进而去查找与被拖拽的第二组件相关联的模板信息。

根据所述当前组件信息和所述第二组件标识信息从数据库中获取第二组件提示信息，如图2所示，包括以下步骤：

S31：基于所述当前组件信息获取第一组件信息；

如上所述，当前组件信息包括各个第一组件属性信息和第一组件位置信息

S32：根据所述第一组件信息和所述第二组件标识信息从数据库中匹配模板信息；

S33：根据所述模板信息获取第二组件提示信息。

所述根据所述模板信息获取第二组件提示信息，如图3所示，包括以下步骤：

S331：基于第一组件信息，获取至少一个第二组件位置数据；

具体的，所述第二组件数据是基于第一组件信息获得，根据各个第一组件之间的位置关系获取，第二组件与各个第一组件之间的位置关系有且只有包含和并列两种情况，当第一组件为1个时，则第二组件数据有2个，一个是第二组件设置在第一组件内，另一个则是第二组件与第一组件并列设置；当第一组件为2个时，则第二组件数据有3个；当第一组件为3个时，则第二组件数据有4个；依次类推，第二组件数据个数依赖于第一组个数，第二组件数据个数为第一组件个数+1个。

S332：逐次将各个所述第二组件位置数据与第一组件位置关系信息合并获得组件信息，计算所述组件信息与所述模板信息的相似度；

具体的，计算所述组件信息与所述模板信息的相似度主要是为了确定第二组件放置在各个不同位置上时生成的树形结构与模板信息的相似度，进而找出相似度最高时第二组件的位置数据推荐给用户，以便于用户迅速构造页面，由于第二组件数据中包含的第二组件大小颜色等可能与模板信息中的不一致，因此采用相似度计算来判断是否需要推荐，更具体，上述计算相似度采用现有的KNN(k-NearestNeighbor)算法，现有技术中其他用于计算相似度的算法也适用于此。

S333：筛选出所述组件信息与所述模板信息相似度最高对应的第二组件位置数据，作为第二组件提示信息。

S4：根据用户基于所述第二组件提示信息在页面上的操作获取第二组件位置信息和第二组件属性信息，并基于所述第二组件位置信息、所述第二组件属性信息和第一树形结构构建第二树形结构；

需要特别说明的是，所述第二组件位置信息是第二组件与各个第一组件位置关系信息。

上述根据用户基于所述第二组件提示信息在页面上的操作包括以下两种情况，一种用户采纳第二组件提示信息，将第二组件放置在提示位置，则组件位置信息与模板信息中的组件位置信息一致，可以通过修改组件属性信息和模板信息即可获得目标代码，也可根据组件位置信息和组件属性信息构建第二树形结构并生成目标代码，另一种用户不采纳第二组件提示信息，将第二组件不放置在提示位置，则组件位置信息与模板信息中的组件位置信息不一致，需要根据组件位置信息和组件属性信息更新所述树形结构，即构建第二树形结构并生成目标代码。

具体的，所述构建第二树形结构，包括以下至少一种情况：

在第一树形结构上新增一个结点，所述新增的结点为包含结点或并列结点；在第一树形结构上移动一个结点及其连接的所有结点；在第一树形结构上删除一个结点及其连接的所有结点。

对上述内容进一步阐述，组件位置关系变化对应包括以下情况：1、当插入一个组件时，即新增一个结点，插入的方式存在两种：插入并列结点，或者插入子结点；2：删除一个简单组件/复杂组件，即删除一个结点或者删除一个结点及其相关的其他结点；3：当移动一个简单组件/复杂组件，即移动一个结点或者一个结点及其相关的其他结点。

S5：基于所述第二树形结构生成目标代码。

所述自动生成目标代码，如图4所示，包括以下步骤：

S51：遍历所述第二树形结构，基于所述结点及其连接关系分别生成CSS码和HTML码；

需要说明的是，CSS(层叠样式表)代码指具有规则CSS代码规则语法的代码，是描述标记语言页面格式的标准(或语言)，此代码具有布局HTML样式功能，第一组件和第二组件以支持通过CSS(叠层样式表)进行修改的属性作为属性信息，即通过获取各组件的属性信息即可生成CSS码，例如：<标签名style＝"属性1：值1；属性2：值2；……属性n：值n">标签内容</标签名>。

上述实施方式中树形结构每一结点只记录最多一个子结点以及一个并列结点，在遍历树形结构的过程中，先获取子结点的组件信息，再获取平行结点的组件信息，具体的，首先获取根结点的组件信息，再获取其子结点的组件信息，最后获取其子结点的并列结点的组件信息，再获取上述子结点的子结点的组件信息，而后获取上述子结点的子结点的并列结点的组件信息，按照上述规则依次读取组件信息，直至完成所有结点的读取，具体例如：设置有组件A，组件B，组件C、组件D、组件F，组件A、C均为普通组件，且均被放置在容器组件B中，组件D为普通组件，且B、D放置在容器组件F中，则遍历为F-B-D-A-C。

在上述实施方式中，以上述树形结构记录组件的关系数据，以各个组件的位置信息维护树形结构，当任一组件位置关系发生变化时，例如被拖拽的第二组件为页面上的原有组件的情况，遍历树形结构，并按规则修改相关结点位置信息即可。

在上述实施方式中，通过上述第二树形结构可以清晰记录各个组件之间的关系数据，遍历该第二树状树形结构即可获得HTML码和CSS码，且上述第二树状树形结构将左结点设置为子结点，右结点设置为并列结点，区别于现有的树形结构结构，不但能实现对组件关系的准确描述，而且在组件被移动时方便记录组件位置关系的变化，进而方便迅速的调整HTML码和CSS码，减少现有技术中每一组件移动时均需要重新调整HTML码和CSS码的情况。

S52：将所述HTML码和所述CSS码合并获取目标代码。

具体的，CSS码为各组件的属性信息，每个组件都会有默认属性，被拖拽后，默认属性保存到上述第二树形结构的结点即可；当用户修改了某个组件的属性时，根据组件信息找到树形结构中对应的结点，将修改后的信息保存到结点中即可。

在完成上述S1-S5后，还包括以下步骤：

S6：基于所述组件位置信息判断用户在页面上的操作是否为推荐操作，若是，则将所述组件位置信息设为模板信息存储在数据库内。

其中，所述组件位置信息包括第一组件位置信息和第二组件位置信息。

当用户构建页面完成后，将对应页面上组件拆分为不同的子组件，子组件可以按照预设规则拆分，也可以按照类型拆分，且每一子组件均对应一子树形结构，即代表不同子模板，记录到数据库中，针对每个子模板，通过现有的KNN算法计算与其他子模板的相似度，若达到指定阈值，则视为同一类子模板，定时统计各类模板出现的频率，出现较多的若干(如30个)个子模板信息则作为新的组件信息存储进入组件库,出现最多的若干(如30-60个)个子模板信息，则作为模板信息记录入数据库，作为给用户的推荐模板，即上述设定该操作为推荐操作。

通过前端开发框架获取页面的组件位置信息和组件属性信息，采用树形结构自动记录组件位置信息，数据结构中每个结点仅记录一并列结点和一子结点，使得所有组件位置信息清楚的被记录，遍历该树形结构，即可获得HTML代码和CSS代码，即目标代码，可实现目标代码的自动生成，减少编码人员重复且无意义的编写工作。

当页面组件移动时，采用的树形结构可以依据组件移动即时更改，即当页面组件发生变化时，根据组件信息获得变化的结点，并更改树形结构中对应结点及其相关结点即可，区别于现有技术中大多采用的代码模板的方式，减少现有技术中由于任一组件移动而需要手动调整代码的情况。

除此之外，本发明中还采用依据存储在数据库中的模板信息作为推荐模板的方式，依据当前页面组件信息基于相似度推荐用户被拖拽的第二组件的位置信息，当用户接受推荐时，可自动更换模板信息中的CSS代码即可获得目标代码，提高代码生成效率，也可根据建立第二树形结构自动生成目标代码，当用户拒绝推荐(即个性化定制)时，基于组件信息自动生成代码，除此之外，数据库中的模板信息以及组件库可根据用户历史数据进行更新，在用户完成页面创建后记录目标代码并统计相似组件次数即可实现。

实施例二

请参阅图5，本实施例的一种前端代码自动生成装置7，包括

获取模块71，用于获取页面上的当前组件信息；

创建模块72，用于基于所述当前组件信息创建第一树形结构；

识别模块73，用于接收用户在页面上的拖拽操作，基于所述拖拽操作获取被拖拽的第二组件标识信息；

提示模块74，用于根据所述当前组件信息和所述第二组件标识信息从数据库中获取第二组件提示信息，并将所述第二组件提示信息发送至页面；

更新模块75，用于根据用户基于所述第二组件提示信息在页面上的操作获取第二组件位置信息和第二组件属性信息，并基于所述第二组件位置信息、所述第二组件属性信息和所述第一树形结构构建第二树形结构。

生成模块76，用于基于所述第二树形结构自动生成目标代码。

本技术方案基于开发辅助中的开发辅助工具，利用获取模块71获取页面上的组件信息(包括第一组件信息和第二组件信息)，并基于组件信息采用创建模块72和更新模块75创建树形结构对组件信息进行记录，生成模块76基于树形结构自动生成目标代码，减少了代码编写人员大量重复编写代码的操作，提高工作效率。

当用户通过拖拽操作改变组件位置、增加组件或删除组件时，通过识别模块73识别用户操作，并采用更新模块75基于用户操作对树形结构进行更新并构建第二树形结构，采用的树形结构可以依据组件移动即时更改，即当页面组件发生变化时，根据组件信息获得变化的结点，并更改树形结构中对应结点及其相关结点即可，减少由于某一组件移动而需要手动调整代码的情况，当用户通过拖拽操作改变组件位置或增加组件时，在识别模块73识别用户拖拽某一组件时，提示模块74可依据该组件信息给予用户推荐，以方便用户操作，同时也可一定程度上提高代码生成速度。

实施例三：

为实现上述目的，本发明还提供一种计算机系统，如图6所示，该计算机系统包括至少一个计算机设备8，实施例二的一种前端代码自动生成装置7的组成部分可分散于不同的计算机设备中，计算机设备可以是执行程序的智能手机、平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。本实施例的计算机设备至少包括但不限于：可通过系统总线相互通信连接的存储器81、处理器82，如图4所示。需要指出的是，图4仅示出了具有组件-的计算机设备，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

本实施例中，存储器81(即可读存储介质)包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器81可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，存储器81也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，存储器81还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，存储器81通常用于存储安装于计算机设备的操作系统和各类应用软件，例如实施例一的前端代码自动生成装置的程序代码、实施例一的模板信息等。此外，存储器81还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器82在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器82通常用于控制计算机设备的总体操作。本实施例中，处理器82用于运行存储器81中存储的程序代码或者处理数据，例如运行数据保存查询装置，以实现实施例一的前端代码自动生成方法。

实施例四：

为实现上述目的，本发明还提供一种计算机可读存储系统，其包括多个存储介质，如闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘、服务器、App应用商城等等，其上存储有计算机程序，程序被处理器82执行时实现相应功能。本实施例的计算机可读存储介质用于存储数据保存查询装置，被处理器82执行时实现实施例一的前端代码自动生成方法。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种前端代码生成方法，其特征在于，包括：

获取页面上的当前组件信息，基于所述当前组件信息创建第一树形结构；其中，所述当前组件包括至少一个第一组件，所述第一树形结构用于通过结点及连接关系记录各个所述第一组件之间的位置关系信息和各个所述第一组件的属性信息；

接收用户在页面上的拖拽操作，基于所述拖拽操作获取被拖拽的第二组件标识信息；

根据所述当前组件信息和所述第二组件标识信息从数据库中获取用于提示用户第二组件放置位置的第二组件提示信息，并将所述第二组件提示信息发送至页面；

根据用户基于所述第二组件提示信息在页面上的操作获取第二组件位置信息和第二组件属性信息，并基于所述第二组件位置信息、所述第二组件属性信息和所述第一树形结构构建第二树形结构，所述第二树形结构包括用于记录第一组件或第二组件属性信息的结点，以及用于描述第一组件或第二组件位置关系的连接关系；

基于所述第二树形结构生成目标前端代码。

2.根据权利要求1所述的一种前端代码生成方法，其特征在于：

所述结点包括包含结点和并列结点，包含结点对应包含位置关系，并列结点对应并列位置关系，任一所述结点至多同时连接一个包含结点和一个并列结点。

3.根据权利要求2所述的一种前端自动生成方法，其特征在于，

所述构建第二树形结构，包括以下至少一种情况：

基于第一树形结构新增一个结点，所述新增的结点为包含结点或并列结点；基于第一树形结构移动一个结点及其连接的所有结点；基于第一树形结构删除一个结点及其连接的所有结点。

4.根据权利要求2所述的一种前端代码生成方法，其特征在于，

所述基于所述树形结构生成目标代码，包括：

遍历所述第二树形结构，基于所述结点及其连接关系分别生成CSS码和HTML码；

将所述HTML码和所述CSS码合并获取目标代码。

5.根据权利要求2所述的一种前端代码生成方法，其特征在于，根据所述当前组件信息和所述第二组件标识信息从数据库中获取第二组件提示信息，包括：数据库中预存储有多个模板信息；

基于所述当前组件信息获取第一组件信息；

根据所述第一组件信息和所述第二组件标识信息从数据库中匹配模板信息；

根据所述模板信息获取第二组件提示信息。

6.根据权利要求5所述的一种前端代码生成方法，其特征在于，

所述根据所述模板信息获取第二组件提示信息，包括：

基于第一组件信息，获取至少一个第二组件数据；

逐次将各个所述第二组件位置数据与第一组件位置关系信息合并获得组件信息，计算所述组件信息与所述模板信息的相似度；

筛选出所述组件信息与所述模板信息相似度最高对应的第二组件位置数据，作为第二组件提示信息。

7.根据权利要求1所述的一种前端代码生成方法，其特征在于，

所述方法还包括：

基于组件位置信息判断用户在页面上的操作是否为推荐操作，若是，则将所述组件位置信息设为模板信息存储在数据库内；

其中，所述组件位置信息包括第一组件位置信息和第二组件位置信息。

8.一种前端代码生成装置，其特征在于，包括：

获取模块，用于获取页面上的当前组件信息；

创建模块，用于基于所述当前组件信息创建第一树形结构；

识别模块，用于接收用户在页面上的拖拽操作，基于所述拖拽操作获取被拖拽的第二组件标识信息；

提示模块，用于根据所述当前组件信息和所述第二组件标识信息从数据库中获取第二组件提示信息，并将所述第二组件提示信息发送至页面；

更新模块，用于根据用户基于所述第二组件提示信息在页面上的操作获取第二组件位置信息和第二组件属性信息，并基于所述第二组件位置信息、所述第二组件属性信息和所述第一树形结构构件第二树形结构；

生成模块，用于基于所述第二树形结构自动生成目标代码。

9.一种计算机系统，其包括至少一个计算机设备，各计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述至少一个计算机设备的处理器执行所述计算机程序时共同实现权利要求1至7任一项所述方法的步骤。

10.一种计算机可读存储介质，其包括多个存储介质，各存储介质上存储有计算机程序，其特征在于，所述多个存储介质存储的所述计算机程序被处理器执行时共同实现权利要求1至7任一项所述的步骤。

Images