CN116880813A - 工程导入方法和装置、计算机设备及存储介质 - Google Patents

Abstract

本申请实施例提供了一种工程导入方法和装置、计算机设备及存储介质，属于人工智能技术领域。该方法包括：获取前端页面文件和接口文件；前端页面文件包括：原始页面代码、原始脚本代码和原始属性代码；根据预设代码格式将原始页面代码进行格式转换，得到目标页面代码；将原始属性代码进行解析处理，得到属性信息，并根据属性信息构建属性编辑面板；将原始脚本代码进行分类存储，得到目标脚本代码；根据接口文件构建接口数据表；将目标页面代码、目标脚本代码、属性编辑面板和接口数据表进行合并处理得到目标工程数据，并将目标工程数据导入目标代码处理平台。本申请实施例能够简化工程导入到目标代码处理平台的操作。

Description

工程导入方法和装置、计算机设备及存储介质

技术领域

本申请涉及人工智能技术领域，尤其涉及一种工程导入方法和装置、计算机设备及存储介质。

背景技术

目前，为了适应低代码和无代码的发展趋势，以降低开发成本和学习成本，通过低代码平台完成前端工程开发。但是低代码平台无法导入现有的前端工程，若直接将前端工程导入低代码平台需要重新配置前端工程的样式、布局和公共方法，从而增加了工程开发的复杂性和难度，因此，如何简易地将前端工程完整导入低代码平台，成为了亟待解决的技术问题。

发明内容

本申请实施例的主要目的在于提出一种工程导入方法和装置、计算机设备及存储介质，旨在简化前端工程导入到低代码平台。

为实现上述目的，本申请实施例的第一方面提出了一种工程导入方法，所述方法包括：

获取原始工程数据；其中，所述原始工程数据包括：前端页面文件和接口文件；所述前端页面文件包括：原始页面代码、原始脚本代码和原始属性代码；

根据预设代码格式将所述原始页面代码进行格式转换，得到目标页面代码；其中，所述预设代码格式为预设的目标代码处理平台的代码格式；

将所述原始属性代码进行解析处理，得到属性信息，并根据所述属性信息构建属性编辑面板；

将所述原始脚本代码进行分类存储，得到目标脚本代码；

根据所述接口文件构建接口数据表；

将所述目标页面代码、所述目标脚本代码、所述属性编辑面板和所述接口数据表进行合并处理得到目标工程数据，并将所述目标工程数据导入所述目标代码处理平台。

在一些实施例，所述根据预设代码格式将所述原始页面代码进行格式转换，得到目标页面代码，包括：

获取所述原始页面代码的原始代码格式；

将所述原始代码格式和所述预设代码格式进行差异比对，得到差异代码格式；

根据所述差异代码格式对所述原始页面代码进行筛选处理，得到选定页面代码；

按照所述预设代码格式对所述选定页面代码进行代码格式转换，得到所述目标页面代码。

在一些实施例，所述根据所述差异代码格式对所述原始页面代码进行筛选处理，得到选定页面代码，包括：

根据预设的结构树创建工具对所述原始页面代码进行结构构建，得到代码结构树；

对所述代码结构树进行遍历处理，以获取所述差异代码格式的代码作为所述选定页面代码。

在一些实施例，所述将所述原始属性代码进行解析处理，得到属性信息，并根据所述属性信息构建属性编辑面板，包括：

将所述原始属性代码进行解析处理，得到属性信息；其中，所述属性信息包括：所述原始页面代码的页面属性信息和所述原始脚本代码的脚本属性信息；

将所述页面属性信息和所述脚本属性信息写入到预设的属性列表，得到目标属性列表；

根据所述目标属性列表构建所述属性编辑面板。

在一些实施例，所述将所述原始脚本代码进行分类存储，得到目标脚本代码，包括：

根据所述脚本属性信息将所述原始脚本代码进行分类处理，得到脚本代码类别；

根据所述脚本代码类别将所述原始脚本代码存储至预设的存储区，得到所述目标脚本代码。

在一些实施例，在所述根据所述脚本属性信息将所述原始脚本代码进行分类处理，得到脚本代码类别之后，所述方法还包括：

对所述脚本属性信息进行可视化，具体包括：

根据所述脚本代码类别对所述脚本属性信息进行展示分区处理，得到每一所述脚本属性信息的属性展示区域；

根据预设的展示规则和所述属性展示区域将所述脚本属性信息进行可视化处理，得到脚本属性视图。

在一些实施例，所述根据所述接口文件构建接口数据表，包括：

对所述接口文件进行解析，得到接口信息和接口调用信息；

将所述接口信息和所述接口调用信息进行数组构建，得到接口数组；

将所述接口数组存入预设的数据表，得到所述接口数据表。

为实现上述目的，本申请实施例的第二方面提出了一种工程导入装置，所述装置包括：

数据获取模块，用于获取原始工程数据；其中，所述原始工程数据包括：前端页面文件和接口文件；所述前端页面文件包括：原始页面代码、原始脚本代码和原始属性代码；

格式转换模块，用于根据预设代码格式将所述原始页面代码进行格式转换，得到目标页面代码；其中，所述预设代码格式为预设的目标代码处理平台的代码格式；

属性解析模块，用于将所述原始属性代码进行解析处理，得到属性信息，并根据所述属性信息构建属性编辑面板；

分类存储模块，用于将所述原始脚本代码进行分类存储，得到目标脚本代码；

数据表构建模块，用于根据所述接口文件构建接口数据表；

数据合并模块，用于将所述目标页面代码、所述目标脚本代码、所述属性编辑面板和所述接口数据表进行合并处理得到目标工程数据，并将所述目标工程数据导入所述目标代码处理平台。

为实现上述目的，本申请实施例的第三方面提出了一种计算机设备，所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述第一方面所述的方法。

为实现上述目的，本申请实施例的第四方面提出了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述第一方面所述的方法。

本申请提出的工程导入方法和装置、计算机设备及存储介质，其在将原始工程数据导入到目标代码处理平台之前，先针对不同类别文件采用不同处理工具/方法处理，以形成符合目标代码处理平台处理的目标工程数据，且属性编辑画板可以直接编辑属性信息，接口数据表可以直接管理接口，简化了将原始工程数据导入到目标代码处理平台的操作，降低了用户使用目标代码处理平台的复杂度，并提升用户体验感。

附图说明

图1是本申请实施例提供的工程导入方法的流程图；

图2是图1中的步骤S102的流程图；

图3是图2中的步骤S204的流程图；

图4是图1中的步骤S103的流程图；

图5是图1中的步骤S104的流程图；

图6是本申请另一实施例提供的工程导入方法的流程图；

图7是图1中的步骤S105的流程图；

图8是本申请实施例提供的工程导入装置的结构示意图；

图9是本申请实施例提供的计算机设备的硬件结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。

需要说明的是，虽然在装置示意图中进行了功能模块划分，在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于装置中的模块划分，或流程图中的顺序执行所示出或描述的步骤。说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

首先，对本申请中涉及的若干名词进行解析：

人工智能(artificial intelligence，AI)：是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学；人工智能是计算机科学的一个分支，人工智能企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。人工智能可以对人的意识、思维的信息过程的模拟。人工智能还是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。

低代码开发平台(LCDP)：低代码开发平台是无需编码(0代码)或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法(参考可视编程语言)，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。

VUE文件：VUE文件就是一个(或局部)组件，又或者说是一个对象。在导出时，得到Vue.createApp({app})app一个VUE文件，里面包括三个部分template和js、css。

超文本标记语言(Hyper Text Markup Language，HTML)：超文本标记语言是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

层叠样式表(Cascading Style Sheets，CCS)：层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

JS(Javascript，Javascript)：JS是一种由Netscape的LiveScript发展而来的脚本语言，主要目的是为了解决服务器终端语言，比如Perl，遗留的速度问题。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。

抽象语法树(Abstract Syntax Tree，AST)：抽象语法树简称语法树(Syntaxtree)，是源代码语法结构的一种抽象表示。抽象语法树以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的，是因为这里的语法并不会表示出真实语法中出现的每个细节。

为了节省开发人们手动编程的人力，低代码和无代码成为当前技术发展的趋势。其中，低代码平台可以大幅度降低开发成本以及学习成本，只需要在组件库中拖取合适的容器和组件在画布中进行布局，通过容器和组件在画布中布局以导出一个完整的前端工程或者单个页面文件，若后续开发人员需要再次开发也可以直接打包放在服务器直接使用即可。

相关技术中，低代码平台虽然能够降低开发人员的人力，但是低代码平台只支持在该平台上新建、编辑和导出，而不支持将前端工程导入低代码平台进行编辑。若强制将前端工程导入到低代码平台则需要将前端工程的样式、布局、公共方法等在低代码平台中重新配置，则增加了用户使用前端工程的复杂性。

基于此，本申请实施例提供了一种工程导入方法和装置、计算机设备及存储介质，旨在将原始工程数据中的原始页面代码转换为目标代码处理平台能处理的目标页面代码，并将原始属性代码解析得到属性信息，并将属性信息构建成属性编辑面板，将原始脚本代码分类存储得到目标脚本代码，再根据接口文件构建接口数据表，最后将目标页面代码、属性编码面板、目标脚本代码和接口数据表合并成目标工程数据，再将目标工程数据导入目标代码处理平台，以针对不同类别文件采用不同的处理方法，以将原始工程数据中的代码和接口文件转换成低代码开发平台能够识别和处理的代码，以实现低代码平台导入原始工程，并简化低代码开发平台导入原始工程的操作。

本申请实施例提供的工程导入方法和装置、计算机设备及存储介质，具体通过如下实施例进行说明，首先描述本申请实施例中的工程导入方法。

本申请实施例可以基于人工智能技术对相关的数据进行获取和处理。其中，人工智能(Artificial Intelligence，AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。

人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、机器人技术、生物识别技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。

本申请实施例提供的工程导入方法，涉及人工智能技术领域。本申请实施例提供的工程导入方法可应用于终端中，也可应用于服务器端中，还可以是运行于终端或服务器端中的软件。在一些实施例中，终端可以是智能手机、平板电脑、笔记本电脑、台式计算机等；服务器端可以配置成独立的物理服务器，也可以配置成多个物理服务器构成的服务器集群或者分布式系统，还可以配置成提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN以及大数据和人工智能平台等基础云计算服务的云服务器；软件可以是实现工程导入方法的应用等，但并不局限于以上形式。

本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

需要说明的是，在本申请的各个具体实施方式中，当涉及到需要根据用户信息、用户行为数据，用户历史数据以及用户位置信息等与用户身份或特性相关的数据进行相关处理时，都会先获得用户的许可或者同意，而且，对这些数据的收集、使用和处理等，都会遵守相关国家和地区的相关法律法规和标准。此外，当本申请实施例需要获取用户的敏感个人信息时，会通过弹窗或者跳转到确认页面等方式获得用户的单独许可或者单独同意，在明确获得用户的单独许可或者单独同意之后，再获取用于使本申请实施例能够正常运行的必要的用户相关数据。

图1是本申请实施例提供的工程导入方法的一个可选的流程图，图1中的方法可以包括但不限于包括步骤S101至步骤S106。

步骤S101，获取原始工程数据；其中，原始工程数据包括：前端页面文件和接口文件；前端页面文件包括：原始页面代码、原始脚本代码和原始属性代码；

步骤S102，根据预设代码格式将原始页面代码进行格式转换，得到目标页面代码；其中，预设代码格式为预设的目标代码处理平台的代码格式；

步骤S103，将原始属性代码进行解析处理，得到属性信息，并根据属性信息构建属性编辑面板；

步骤S104，将原始脚本代码进行分类存储，得到目标脚本代码；

步骤S105，根据接口文件构建接口数据表；

步骤S106，将目标页面代码、目标脚本代码、属性编辑面板和接口数据表进行合并处理得到目标工程数据，并将目标工程数据导入目标代码处理平台。

本申请实施例所示意的步骤S101至步骤S106，通过将原始页面代码以预设代码格式进行代码格式转换得到目标页面代码，且目标页面代码的格式和目标代码处理平台的代码格式一致，则目标代码处理平台能够识别目标页面代码，以对目标页面代码进行处理。然后将原始属性代码解析成属性信息，并根据属性信息构建成属性编辑面板，则用户可以直接在属性编辑面板上编辑属性信息，简化属性信息编辑。将原始脚本代码分类存储得到目标脚本代码，以便于二次开发能够快速查找到目标脚本代码，便于在目标代码处理平台被二次开发。根据接口文件构建成接口数据表，能够直接通过接口数据表知晓接口文件内容，以便于直接对接口数据表进行修改和新增，实现接口管理。最后，将目标页面代码、属性编辑面板、目标脚本代码和接口数据表构成目标工程数据，再将目标工程数据导入到目标代码处理平台。因此，在将原始工程数据导入到目标代码处理平台之前，先针对不同类别文件采用不同处理工具/方法处理，以形成符合目标代码处理平台处理的目标工程数据，便于编辑属性信息和管理接口文件的接口内容，简化了将原始工程数据导入到目标代码处理平台的操作，降低了用户使用目标代码处理平台的复杂度，并提升用户体验感。

在一些实施例的步骤S101中，获取原始工程数据根据触发事件执行，且触发事件可以是用户直接上传原始工程数据。也可以是通过其他方式为接收工程导入请求、原始工程数据创建完成，不限于此。对于触发事件为接收到工程导入请求，根据用户从原始工程数据的原始平台拖拽到目标代码处理平台生成工程导入请求，或者直接点击原始工程数据选择导入到目标代码处理平台选项以生成工程导入请求，且对于工程导入请求不做具体限制。其中，前端页面文件为VUE文件，VUE文件相当于一个页面的组件，所以VUE文件包括的原始页面代码、原始脚本代码和原始属性代码是构成页面的代码。其中，VUE文件包括多个子文件，且每一子文件上设有文件标签信息，以根据文件标签信息知晓子文件内是哪一类别的代码。文件标签信息包括：页面标签信息、脚本标签信息和属性标签信息，页面标签信息的子文件为页面子文件，脚本标签信息的子文件为脚本子文件，属性标签信息的子文件为属性子文件。因此，通过从页面子文件提取原始页面代码，从脚本子文件提取原始脚本代码，从属性子文件提取原始属性代码，以将能够构建页面的相关代码提取出来，针对不同类别代码采用不同处理方式，以转换为目标代码处理平台能导入的目标工程数据。

具体地，页面标签信息为“template”标签，脚本标签信息为“script”标签，属性标签信息为“style”标签，因此，通过每一子文件上的标签，即可确定子文件中存储什么类别的代码。

请参阅图2，在一些实施例中，步骤S102可以包括但不限于包括步骤S201至步骤S204：

步骤S201，获取原始页面代码的原始代码格式；

步骤S202，将原始代码格式和预设代码格式进行差异比对，得到差异代码格式；

步骤S203，根据差异代码格式对原始页面代码进行筛选处理，得到选定页面代码；

步骤S204，按照预设代码格式对选定页面代码进行代码格式转换，得到目标页面代码。

在一些实施例的步骤S201中，原始页面代码的原始代码格式存储于原始代码映射表中，且原始代码映射表中包括代码标签和原始代码格式的映射关系，代码标签标注于原始页面代码上，所以获取原始页面代码的代码标签，根据代码标签从原始代码映射表中查找出原始页面代码的原始代码格式。其中，一种原始代码格式可以包括至少一种代码标签。若代码标签为t1、t2、t3的原始代码格式为q1格式，t4、t5的原始代码格式为q2格式，且原始页面代码为HTML代码，若HTML代码的代码标签为t4，则对应的原始代码格式为q2。

在一些实施例的步骤S202中，将原始代码格式和预设代码格式进行差异比对，目标代码处理平台上设有目标代码映射表，且目标代码映射表中存储代码标签与目标代码格式的映射关系，则将原始代码映射表和目标代码映射表进行比对，也即将同一代码标签的原始代码格式和预设代码格式不同时提取出来得到差异代码格式，且差异代码格式表征同一代码标签的原始代码格式和预设代码格式不相同。例如，代码标签为t4的原始代码格式为q2，但是目标代码格式为q1，则将【t2，q2，q1】作为差异代码格式。

在一些实施例的步骤S203中，根据差异代码格式将原始页面代码进行筛选处理，对于原始代码格式和目标代码格式相同的原始页面代码则无需进行代码格式转换，而原始代码格式和目标代码格式不同的原始页面代码则需要进行代码格式转换，以便于目标代码处理平台能够识别并处理原始页面代码。因此，从原始页面代码中选出差异代码格式的原始页面代码作为选定页面代码。

在一些实施例的步骤S204中，按照预设代码格式对选定页面代码进行代码格式转换，得到目标页面代码。其中，预设代码格式为JSON格式，且目标代码处理平台为低代码平台，低代码平台能够识别JSON格式的代码，所以将选定页面代码的代码格式转换为JSON格式得到目标页面代码。

在本申请实施例所示意的步骤S201至步骤S204，先获取每一代码标签的原始代码格式和预设代码格式，将不同原始代码格式和预设代码格式作为差异代码格式，再获取差异代码格式的原始页面代码作为选定页面代码，再将选定页面代码的代码格式转换为预设代码格式得到目标页面代码。因此，对于目标代码处理平台能够识别代码格式的原始页面代码不做代码格式转换，而对于目标代码处理平台无法识别的原始页面代码才需要转换为目标代码处理平台能够识别的代码格式，以便于导入原始工程后，目标代码处理平台可以正常识别目标页面代码。

请参阅图3，在一些实施例中，步骤S204可以包括但不限于包括步骤S301至步骤S302：

步骤S301，根据预设的结构树创建工具对原始页面代码进行结构构建，得到代码结构树；

步骤S302，对代码结构树进行遍历处理，以获取差异代码格式的代码作为选定页面代码。

在一些实施例的步骤S301中，预设的结构树创建工具为@babel/parser工具，且代码结构树为AST树，也即通过@babel/parser工具解析原始页面代码以根据原始代码格式构建AST树。

在一些实施例的步骤S302中，通过对构建的AST树进行遍历，以获取原始代码格式与预设代码格式不同的节点下的代码标签，也即确定差异代码格式的原始页面代码为选定页面代码。

在选出页面代码后，也即在AST树中确定差异代码格式的节点，然后在AST树中增加预设代码格式的节点，并将差异代码格式的节点替换到预设代码格式下的节点以根据AST树生成新的格式的代码，以实现选定页面代码转换为预设代码格式的代码。

在本申请实施例所示意的步骤S301至步骤S302，先根据预设的@babel/parser工具对原始页面代码解析得到每一原始页面代码的原始代码格式，并以原始代码格式和原始页面代码构建AST树，然后对AST树进行编码，以选出原始代码格式与预设代码格式不同的原始页面代码作为选定页面代码，使得选定页面代码选择简易。

请参阅图4，在一些实施例中，步骤S103可以包括但不限于包括步骤S401至步骤S403：

步骤S401，将原始属性代码进行解析处理，得到属性信息；其中，属性信息包括原始页面代码的页面属性信息和原始脚本代码的脚本属性信息；

步骤S402，将页面属性信息和脚本属性信息写入到预设的属性列表，得到目标属性列表；

步骤S403，根据目标属性列表构建属性编辑面板。

在一些实施例的步骤S401中，原始属性代码记载代码的属性信息，所以对原始属性代码解析得到原始页面代码的页面属性信息和原始脚本代码的脚本属性信息。其中，页面属性信息包括：页面属性内容和页面属性值；脚本属性信息包括：脚本属性内容和脚本属性值。

其中，原始属性代码为CCS代码，且CCS代码能够通过属性方式修改页面样式。

在一些实施例的步骤S402中，将页面属性信息和脚本属性信息写入到属性列表，也即将页面属性内容、页面属性值、脚本属性内容和脚本属性值写入到属性列表得到目标属性列表，且目标属性列表中记载了每一原始页面代码和页面属性内容、页面属性值的对应关系，且记载了原始脚本代码和脚本属性内容、脚本属性值的对应关系。因此，通过目标属性列表即可知晓每一代码的属性内容和属性值。

在一些实施例的步骤S403中，根据目标属性列表构建属性编辑面板，也即构建携带目标属性列表的属性编辑面板，通过在属性编辑面板上修改目标属性列表的属性内容和属性值即可同步修改原始页面代码和原始脚本代码的属性内容、属性值。其中，属性编辑面板通过下拉选择或者输入的方式更改属性内容和属性值，且属性编码面板更改的属性内容和属性值会快速响应到用户的属性更改操作，以快速更改对应代码的属性内容和属性值。

在本申请实施例所示意的步骤S401至步骤S403，通过对原始属性代码解析得到原始页面代码的页面属性内容和页面属性值、原始脚本代码的脚本属性内容和脚本属性值，将页面属性内容、页面属性值、脚本属性内容和脚本属性值写入到属性列表得到目标属性列表，然后根据目标属性列表生成属性编辑面板。因此，用户在属性编辑面板上下拉选择或者输入方式更改代码的属性内容、属性值，且属性编辑面板可以快速相应于用户在属性编辑面板的操作，以对原始页面代码和原始脚本代码的属性内容、属性值进行更改，简化了属性修改的操作。当原始工程导入到目标代码处理面板后，若需要重新配置属性也更加简易。

请参阅图5，在一些实施例中，步骤S104可以包括但不限于包括步骤S501至步骤S502：

步骤S501，根据脚本属性信息将原始脚本代码进行分类处理，得到脚本代码类别；

步骤S502，根据脚本代码类别将原始脚本代码存储至预设的存储区，得到目标脚本代码。

在一些实施例的步骤S501中，获取原始脚本代码的脚本属性信息，并根据脚本属性信息对原始脚本代码进行分类处理得到脚本代码类别，则将同一脚本属性信息的原始脚本代码作为脚本代码类别。

在一些实施例的步骤S502中，每一存储区上设有存储标签，根据脚本代码类别从存储标签上筛选出目标标签，再将脚本代码类别的原始脚本代码存入到目标标签的存储区得到目标脚本代码，以实现原始脚本代码的分类存储。

在本申请实施例所示意的步骤S501至步骤S502，通过将同一脚本属性信息的原始脚本划分为一类得到脚本代码类别，再根据脚本代码类别从存储标签筛选出目标标签，然后将原始脚本代码存储到目标标签对应的存储区得到目标脚本代码。因此，通过将原始脚本代码分类存储到不同的存储区，以便于导入到目标代码处理平台，且导入目标代码处理平台便于二次开发。

具体地，原始脚本代码为JS代码，则分类存储JS代码，也即分类存储脚本代码，所以导入代码处理平台后，若需要二次开发可以快速查找出对应脚本代码类别的JS代码。

请参阅图6，在一些实施例，在步骤S502之后，工程导入方法还包括：对脚本属性信息进行可视化。通过将脚本属性信息可视化，则用户可以通过可视化的脚本属性信息直观地查看原始脚本代码的脚本属性信息。

对脚本属性信息进行可视化，包括但不限于包括步骤S601至步骤S602：

步骤S601，根据脚本代码类别对脚本属性信息进行展示分区处理，得到每一脚本属性信息的属性展示区域；

步骤S602，根据预设的展示规则和属性展示区域将脚本属性信息进行可视化处理，得到脚本属性视图。

在一些实施例的步骤S601中，为了对脚本属性信息进行可视化时能够分类显示，则根据脚本代码类别对脚本属性信息进行展示分区处理，也即对于通过脚本代码类别将脚本属性信息划分为同一属性展示区域。例如，若存在脚本代码类别为l1、l2、l3、l4，且确定脚本代码类别l1的属性展示区域为s1，脚本代码类别l2的属性展示区域为s2，脚本代码类别l3的属性展示区域为s3。因此，通过脚本代码类别确定每一脚本属性信息的属性展示区域。

在一些实施例的步骤S602中，根据预设的展示规则和属性展示区域将脚本属性信息可视化处理，且预设的展示规则为以下任意一种：以不同颜色设置属性展示区域；以不同标注形状设置属性展示区域。因此，根据不同展示规则确定属性展示区域的形状或者颜色，然后再将脚本属性信息根据脚本代码类别填入到对应的属性展示区域得到脚本属性视图，以便于用户查看脚本属性视图可以知晓整体的脚本属性信息有哪些。例如，将脚本代码类别l1的脚本属性信息写入到属性展示区域s1，将脚本代码类别l2的脚本属性信息写入到属性展示区域s2，将脚本代码类别的脚本属性信息写入到属性展示区域s3。

在本申请实施例所示意的步骤S601至步骤S602，根据脚本代码类别确定每一脚本属性信息的属性展示区域，并根据展示规则确定属性展示区域的形状或颜色，再将脚本属性信息填入到属性展示区域得到脚本属性视图，然后将脚本属性视图进行显示。当用户查看脚本属性视图时，能够通过脚本属性视图直观地知晓原始脚本代码的脚本属性信息。

请参阅图7，在一些实施例中，步骤S105可以包括但不限于包括步骤S701至步骤S703：

步骤S701，对接口文件进行解析，得到接口信息和接口调用信息；

步骤S702，将接口信息和接口调用信息进行数组构建，得到接口数组；

步骤S703，将接口数组存入预设的数据表，得到接口数据表。

在一些实施例的步骤S701中，接口文件也为API文件，对API文件遍历解析得到接口信息和接口调用信息，且接口调用信息包括接口调用方法名称、接口请求方法，且接口信息包括接口名称和接口类别。因此，对API文件解析得到API名称、API类别、API请求方法、API调用方法名称。

在一些实施例的步骤S702中，将接口信息和接口调用信息组合成数组得到接口数组。其中，数组则是组合成该对象的成员变量。由于每一接口信息对应一个接口调用方法，所以构建的数组也即包括了API名称、API类别、API请求方法、API调用方法名称，且采用变量的形式表征API名称、API类别、API请求方法、API调用方法名称。例如，API名称为第一接口j1，API类别为b2类别，API请求方法为x1，API调用方法名称为y3，则对应的接口数组为【j1，b2，x1.y3】。因此，通过接口数组即可知晓API名称、API类别、API请求方法和API调用方法。

在一些实施例的步骤S703中，将接口数组存入到数据表，也即将数组作为数据表的组成单元得到接口数据表，以通过接口数据表清楚每一接口对应的接口调用方法，便于根据接口数据表进行接口管理。

在本申请实施例所示意的步骤S701至步骤S703，对接口文件解析得到接口信息和接口调用方法，然后将接口信息和接口调用信息组合成接口数组，再将接口数组存入到数据表得到接口数据表，以便于通过接口数据表对接口进行管理。

在一些实施例的步骤S106，通过将目标页面代码、目标脚本代码、属性编辑面板和接口数据表汇合成目标工程数据，且根据预设的地址信息确定目标代码处理平台的目标导入路径，并将目标工程数据导入到目标代码处理平台的目标导入路径。通过将目标工程数据导入到目标代码处理平台后，由于目标代码处理平台为低代码平台，可以直接通过拖拽的方式对目标工程数据进行编辑，以改变目标工程数据对应的系统的布局、样式、界面格式，以更新目标工程数据。

其中，由于目标页面代码为目标代码处理平台能够识别的代码格式，所以目标代码处理平台直接读取目标页面代码显示页面，且根据分类存储的目标脚本代码快速提取出，再通过目标脚本代码对应的脚本运行以操作页面，同时通过下拉选择或者输入方式在属性编辑页面操作以更改代码的属性信息，且可以通过在接口数据表直接对接口信息和接口调用信息进行修改和新增。因此，构建目标工程数据后再导入目标代码处理平台，能够简化外部工程导入目标代码处理平台的操作，提升用户的体验感。

本申请实施例获取VUE文件和接口文件，且VUE文件包括多个子文件，获取每一子文件的文件标签，页面标签信息的子文件为页面子文件，脚本标签信息的子文件为脚本子文件，属性标签信息的子文件为属性子文件。页面子文件提取原始页面代码，从脚本子文件提取原始脚本代码，从属性子文件提取原始属性代码，以将能够构建页面的代码提取出来。获取每一代码标签的原始代码格式和预设代码格式，将不同原始代码格式和预设代码格式作为差异代码格式，根据预设的@babel/parser工具对原始页面代码解析得到每一原始页面代码的原始代码格式，并以原始代码格式和原始页面代码构建AST树，然后对AST树进行编码，以选出原始代码格式与预设代码格式不同的原始页面代码作为选定页面代码，再将选定页面代码的代码格式转换为预设代码格式得到目标页面代码。对原始属性代码解析得到原始页面代码的页面属性内容和页面属性值、原始脚本代码的脚本属性内容和脚本属性值，将页面属性内容、页面属性值、脚本属性内容和脚本属性值写入到属性列表得到目标属性列表，然后根据目标属性列表生成属性编辑面板。将同一脚本属性信息的原始脚本划分为一类得到脚本代码类别，再根据脚本代码类别从存储标签筛选出目标标签，然后将原始脚本代码存储到目标标签对应的存储区得到目标脚本代码。根据脚本代码类别确定每一脚本属性信息的属性展示区域，并根据展示规则确定属性展示区域的形状或颜色，然后再将脚本属性信息填入到属性展示区域得到脚本属性视图，然后将脚本属性视图进行显示。接口文件解析得到接口信息和接口调用方法，然后将接口信息和接口调用信息组合成接口数组，再将接口数组存入到数据表得到接口数据表。将目标页面代码、目标脚本代码、属性编辑面板和接口数据表汇合成目标工程数据，且根据预设的地址信息确定目标代码处理平台的目标导入路径，并将目标工程数据导入到目标代码处理平台的目标导入路径。由于目标页面代码为目标代码处理平台能够识别的代码格式，所以目标代码处理平台直接读取目标页面代码显示页面，且根据分类存储的目标脚本代码快速提取出后通过目标脚本代码对应的脚本运行以操作页面，同时通过下拉选择或者输入方式在属性编辑页面操作以更改代码的属性信息，且可以通过在接口数据表直接对接口信息和接口调用信息进行修改和新增，因此，简化了原有工程导入到目标代码处理平台的操作，提升用户体验感。

请参阅图8，本申请实施例还提供一种工程导入装置，可以实现上述工程导入方法，该装置包括：

数据获取模块801，用于获取原始工程数据；其中，原始工程数据包括：前端页面文件和接口文件；前端页面文件包括：原始页面代码、原始脚本代码和原始属性代码；

格式转换模块802，用于根据预设代码格式将原始页面代码进行格式转换，得到目标页面代码；其中，预设代码格式为预设的目标代码处理平台的代码格式；

属性解析模块803，用于将原始属性代码进行解析处理，得到属性信息，并根据属性信息构建属性编辑面板；

分类存储模块804，用于将原始脚本代码进行分类存储，得到目标脚本代码；

数据表构建模块805，用于根据接口文件构建接口数据表；

数据合并模块806，用于将目标页面代码、目标脚本代码、属性编辑面板和接口数据表进行合并处理得到目标工程数据，并将目标工程数据导入所述目标代码处理平台。

该工程导入装置的具体实施方式与上述工程导入方法的具体实施例基本相同，在此不再赘述。

本申请实施例还提供了一种计算机设备，计算机设备包括存储器和处理器，存储器存储有计算机程序，处理器执行计算机程序时实现上述工程导入方法。该计算机设备可以为包括平板电脑、车载电脑等任意智能终端。

请参阅图9，图9示意了另一实施例的计算机设备的硬件结构，计算机设备包括：

处理器901，可以采用通用的CPU(CentralProcessingUnit，中央处理器)、微处理器、应用专用集成电路(ApplicationSpecificIntegratedCircuit，ASIC)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本申请实施例所提供的技术方案；

存储器902，可以采用只读存储器(ReadOnlyMemory，ROM)、静态存储设备、动态存储设备或者随机存取存储器(RandomAccessMemory，RAM)等形式实现。存储器902可以存储操作系统和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器902中，并由处理器901来调用执行本申请实施例的工程导入方法；

输入/输出接口903，用于实现信息输入及输出；

通信接口904，用于实现本设备与其他设备的通信交互，可以通过有线方式(例如USB、网线等)实现通信，也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信；

总线905，在设备的各个组件(例如处理器901、存储器902、输入/输出接口903和通信接口904)之间传输信息；

其中处理器901、存储器902、输入/输出接口903和通信接口904通过总线905实现彼此之间在设备内部的通信连接。

本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时实现上述工程导入方法。

存储器作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序以及非暂态性计算机可执行程序。此外，存储器可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施方式中，存储器可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至该处理器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

本申请实施例提供的工程导入方法和装置、计算机设备及存储介质，其通过获取前端页面文件和接口文件，且前端页面文件包括原始页面代码、原始脚本代码和原始属性代码，将原始页面代码的代码格式转换为目标代码处理平台的预设代码格式得到目标页面代码。将原始属性代码解析得到属性信息，再根据属性信息构建属性编辑面板，再对原始脚本代码分类存储得到目标脚本代码，根据接口文件构建接口数据表。因此构建包括目标页面代码、目标脚本代码、属性编辑面板和接口数据表的目标工程数据，再将目标工程数据导入到目标代码处理平台，则目标代码处理平台能够识别目标页面代码，且能够快速查找到目标脚本代码，以便于快速显示页面以更改页面的布局和样式，同时可以直接通过属性编辑面板更改属性信息，还可以通过接口数据表直接进行修改和新增，所以构建成目标工程数据后再导入目标代码处理平台能够简化导入操作，还提升用户的体验感。

本申请实施例描述的实施例是为了更加清楚的说明本申请实施例的技术方案，并不构成对于本申请实施例提供的技术方案的限定，本领域技术人员可知，随着技术的演变和新应用场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。

本领域技术人员可以理解的是，图中示出的技术方案并不构成对本申请实施例的限定，可以包括比图示更多或更少的步骤，或者组合某些步骤，或者不同的步骤。

以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、设备中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。

本申请的说明书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

应当理解，在本申请中，“至少一个(项)”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：只存在A，只存在B以及同时存在A和B三种情况，其中A，B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a，b或c中的至少一项(个)，可以表示：a，b，c，“a和b”，“a和c”，“b和c”，或“a和b和c”，其中a，b，c可以是单个，也可以是多个。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，上述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

上述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

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

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

以上参照附图说明了本申请实施例的优选实施例，并非因此局限本申请实施例的权利范围。本领域技术人员不脱离本申请实施例的范围和实质内所作的任何修改、等同替换和改进，均应在本申请实施例的权利范围之内。

Claims (10)

1.一种工程导入方法，其特征在于，所述方法包括：

获取原始工程数据；其中，所述原始工程数据包括：前端页面文件和接口文件；所述前端页面文件包括：原始页面代码、原始脚本代码和原始属性代码；

根据预设代码格式将所述原始页面代码进行格式转换，得到目标页面代码；其中，所述预设代码格式为预设的目标代码处理平台的代码格式；

将所述原始属性代码进行解析处理，得到属性信息，并根据所述属性信息构建属性编辑面板；

将所述原始脚本代码进行分类存储，得到目标脚本代码；

根据所述接口文件构建接口数据表；

将所述目标页面代码、所述目标脚本代码、所述属性编辑面板和所述接口数据表进行合并处理得到目标工程数据，并将所述目标工程数据导入所述目标代码处理平台。

2.根据权利要求1所述的方法，其特征在于，所述根据预设代码格式将所述原始页面代码进行格式转换，得到目标页面代码，包括：

获取所述原始页面代码的原始代码格式；

将所述原始代码格式和所述预设代码格式进行差异比对，得到差异代码格式；

根据所述差异代码格式对所述原始页面代码进行筛选处理，得到选定页面代码；

按照所述预设代码格式对所述选定页面代码进行代码格式转换，得到所述目标页面代码。

3.根据权利要求2所述的方法，其特征在于，所述根据所述差异代码格式对所述原始页面代码进行筛选处理，得到选定页面代码，包括：

根据预设的结构树创建工具对所述原始页面代码进行结构构建，得到代码结构树；

对所述代码结构树进行遍历处理，以获取所述差异代码格式的代码作为所述选定页面代码。

4.根据权利要求1所述的方法，其特征在于，所述将所述原始属性代码进行解析处理，得到属性信息，并根据所述属性信息构建属性编辑面板，包括：

将所述原始属性代码进行解析处理，得到属性信息；其中，所述属性信息包括：所述原始页面代码的页面属性信息和所述原始脚本代码的脚本属性信息；

将所述页面属性信息和所述脚本属性信息写入到预设的属性列表，得到目标属性列表；

根据所述目标属性列表构建所述属性编辑面板。

5.根据权利要求4所述的方法，其特征在于，所述将所述原始脚本代码进行分类存储，得到目标脚本代码，包括：

根据所述脚本属性信息将所述原始脚本代码进行分类处理，得到脚本代码类别；

根据所述脚本代码类别将所述原始脚本代码存储至预设的存储区，得到所述目标脚本代码。

6.根据权利要求5所述的方法，其特征在于，在所述根据所述脚本属性信息将所述原始脚本代码进行分类处理，得到脚本代码类别之后，所述方法还包括：

对所述脚本属性信息进行可视化，具体包括：

根据所述脚本代码类别对所述脚本属性信息进行展示分区处理，得到每一所述脚本属性信息的属性展示区域；

根据预设的展示规则和所述属性展示区域将所述脚本属性信息进行可视化处理，得到脚本属性视图。

7.根据权利要求1至6任一项所述的方法，其特征在于，所述根据所述接口文件构建接口数据表，包括：

对所述接口文件进行解析，得到接口信息和接口调用信息；

将所述接口信息和所述接口调用信息进行数组构建，得到接口数组；

将所述接口数组存入预设的数据表，得到所述接口数据表。

8.一种工程导入装置，其特征在于，所述装置包括：

数据获取模块，用于获取原始工程数据；其中，所述原始工程数据包括：前端页面文件和接口文件；所述前端页面文件包括：原始页面代码、原始脚本代码和原始属性代码；

格式转换模块，用于根据预设代码格式将所述原始页面代码进行格式转换，得到目标页面代码；其中，所述预设代码格式为预设的目标代码处理平台的代码格式；

属性解析模块，用于将所述原始属性代码进行解析处理，得到属性信息，并根据所述属性信息构建属性编辑面板；

分类存储模块，用于将所述原始脚本代码进行分类存储，得到目标脚本代码；

数据表构建模块，用于根据所述接口文件构建接口数据表；

数据合并模块，用于将所述目标页面代码、所述目标脚本代码、所述属性编辑面板和所述接口数据表进行合并处理得到目标工程数据，并将所述目标工程数据导入所述目标代码处理平台。

9.一种计算机设备，其特征在于，所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现权利要求1至7任一项所述的工程导入方法。

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