CN114594933A - Front-end code generation method, device and storage medium based on file scanning - Google Patents
Front-end code generation method, device and storage medium based on file scanning Download PDFInfo
- Publication number
- CN114594933A CN114594933A CN202210066569.2A CN202210066569A CN114594933A CN 114594933 A CN114594933 A CN 114594933A CN 202210066569 A CN202210066569 A CN 202210066569A CN 114594933 A CN114594933 A CN 114594933A
- Authority
- CN
- China
- Prior art keywords
- file
- code generation
- end code
- scanning
- control
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 35
- 238000012800 visualization Methods 0.000 claims description 12
- 238000004590 computer program Methods 0.000 claims description 9
- 230000008569 process Effects 0.000 abstract description 9
- 230000000007 visual effect Effects 0.000 abstract description 2
- 230000008676 import Effects 0.000 description 6
- 230000006870 function Effects 0.000 description 3
- 238000013507 mapping Methods 0.000 description 2
- 238000004806 packaging method and process Methods 0.000 description 2
- 230000003252 repetitive effect Effects 0.000 description 2
- 230000009466 transformation Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000000605 extraction Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/427—Parsing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
- G06F9/4451—User profiles; Roaming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computing Systems (AREA)
- Stored Programmes (AREA)
Abstract
Description
技术领域technical field
本发明涉及计算机软件代码领域，尤其涉及基于文件扫描的前端代码生成方法、装置及存储介质。The present invention relates to the field of computer software codes, in particular to a method, device and storage medium for generating front-end code based on file scanning.
背景技术Background technique
在业务开发过程中，一般会提供一套可视化系统，用于前端界面的配置与开发。但是，随着企业业务规模的不断扩大和客户群体的增加，对前端界面展示效果的多样性、定制性需求与日俱多，并无法完全通过可视化系统进行配置完成，这就需要由系统开发人员进行针对性地对某些功能的代码进行手动编写，导致系统开发人员的工作量加大。同时，若掺杂额外的业务逻辑时，还会破坏原有可视化系统的单一性，因此，还需要将可视化系统配置的界面转换为源代码，将源代码分离出去后由系统工作人员进行单独定制修改。In the business development process, a visual system is generally provided for the configuration and development of the front-end interface. However, with the continuous expansion of the business scale of the enterprise and the increase of the customer base, the diversity and customization requirements for the display effect of the front-end interface are increasing day by day, and the configuration cannot be completely completed through the visualization system, which requires system developers. Manually writing the code for certain functions in a targeted manner increases the workload of system developers. At the same time, if the additional business logic is mixed, the unity of the original visualization system will also be destroyed. Therefore, it is also necessary to convert the interface of the visualization system configuration into source code, and then separate the source code to be individually customized by the system staff. Revise.
目前对于代码生成方法，大多数时由系统工作人员采用手工方式进行编写代码；同时，对于定制化的开发，要依赖于控件库，每个控件都需要编写一套对应的代码生成规则。当控件发生变动时，代码生成规则也要随之变动。这种传统的代码生成方法，通常开发周期较长，效率不高，需要持续地投入人力，更缺少通用性，不能灵活的解析控件进行代码生成。At present, most of the code generation methods are written manually by system staff; at the same time, for customized development, it depends on the control library, and each control needs to write a set of corresponding code generation rules. When the control changes, the code generation rules also change accordingly. This traditional code generation method usually has a long development cycle and low efficiency, requires continuous investment of manpower, lacks versatility, and cannot flexibly parse controls for code generation.
发明内容SUMMARY OF THE INVENTION
为了克服现有技术的不足，本发明的目的之一在于提供基于文件扫描的前端代码生成方法，其能够解决现有的前端代码需要人工手动编写或依赖控件库等问题。In order to overcome the deficiencies of the prior art, one of the purposes of the present invention is to provide a front-end code generation method based on file scanning, which can solve the problems that the existing front-end code needs to be manually written or relies on a control library.
本发明的目的之二在于提供基于文件扫描的前端代码生成装置，其能够解决现有的前端代码需要人工手动编写或依赖控件库等问题。The second purpose of the present invention is to provide a front-end code generation device based on file scanning, which can solve the problem that the existing front-end code needs to be manually written or relies on a control library.
本发明的目的之三在于提供一种存储介质，其能够解决现有的前端代码需要人工手动编写或依赖控件库等问题。The third object of the present invention is to provide a storage medium, which can solve the problem that the existing front-end code needs to be manually written or relies on a control library.
本发明的目的之一采用如下技术方案实现：One of the objects of the present invention adopts the following technical scheme to realize:
基于文件扫描的前端代码生成方法，包括：Front-end code generation methods based on file scanning, including:
文件扫描步骤：获取源工程文件并对源工程文件进行扫描以获取预设格式的文件；File scanning step: obtain the source project file and scan the source project file to obtain the file in the preset format;
解析步骤：对扫描得到的每个文件按照预设解析规则进行解析得出文件内容，并根据解析得出的文件内容得出文件的依赖关系，进而根据每个文件的文件内容、每个文件的代码和依赖关系得出文件的解析数据；Parsing step: parse each scanned file according to the preset parsing rules to obtain the file content, and obtain the file dependency according to the parsed file content, and then according to the file content of each file and the file content of each file. The code and dependencies derive parsed data for the file;
控件信息获取步骤：根据源工程文件对应的可视化系统导出每个前端界面的配置数据，并根据每个前端界面的配置数据提取得出对应控件信息；The control information acquisition step: export the configuration data of each front-end interface according to the visualization system corresponding to the source project file, and extract the corresponding control information according to the configuration data of each front-end interface;
代码生成步骤：将提取得出的每个前端界面的控件信息与每个文件的解析数据进行关联以生成每个控件的全量数据，进而得出每个前端界面的前端代码；所述每个控件的全量数据包括控件名称、控件位置信息和控件代码。Code generation step: associate the extracted control information of each front-end interface with the parsing data of each file to generate the full data of each control, and then obtain the front-end code of each front-end interface; each control The full amount of data includes control name, control location information and control code.
进一步地，所述解析步骤包括：首先对扫描得到的每个文件按照预设解析规则进行解析提取得出文件内容，并将解析得出的文件内容转换为抽象语法树，然后根据每个文件的抽象语法树得出每个文件的依赖关系。Further, the parsing step includes: first, parse and extract each file obtained by scanning according to a preset parsing rule to obtain the file content, and convert the parsed file content into an abstract syntax tree, and then according to the content of each file. The abstract syntax tree derives the dependencies of each file.
进一步地，文件内容包括文件名称、文件路径、源代码和结构描述。Further, the file content includes file name, file path, source code and structure description.
进一步地，根据每个文件的抽象语法树得出文件的依赖关系具体包括根据预设的依赖查找规则对每个抽象语法树的各个节点进行遍历，获取满足匹配条件的节点值并将其确定为对应文件的依赖关系，同时将节点值记录在该文件的依赖关系中。Further, obtaining the dependency relationship of the file according to the abstract syntax tree of each file specifically includes traversing each node of each abstract syntax tree according to the preset dependency search rule, obtaining the node value that satisfies the matching condition and determining it as The dependency of the corresponding file, and the node value is recorded in the dependency of the file.
进一步地，将文件的解析数据以JSON格式的文件进行保存。Further, the parsed data of the file is saved as a file in JSON format.
进一步地，控件信息包括：控件名称、控件类型、显示样式、控件位置信息。Further, the control information includes: control name, control type, display style, and control position information.
进一步地，预设格式的文件包括VUE格式的文件和JS格式的文件。Further, the files in the preset format include files in the VUE format and files in the JS format.
进一步地，文件扫描步骤具体包括对源工程文件的所有目录进行扫描或对源工程文件的预设目录进行扫描。Further, the file scanning step specifically includes scanning all directories of the source project file or scanning a preset directory of the source project file.
本发明的目的之二采用如下技术方案实现：The second purpose of the present invention adopts the following technical scheme to realize:
基于文件扫描的前端代码生成装置，其包括存储器和处理器，所述存储器上存储有在处理器上运行的前端代码生成程序，所述前端代码生成程序为计算机程序，所述处理器执行所述前端代码生成程序时实现如本发明的目的之一采用的基于文件扫描的前端代码生成方法的步骤。A front-end code generation device based on file scanning, which includes a memory and a processor, the memory stores a front-end code generation program running on the processor, the front-end code generation program is a computer program, and the processor executes the The front-end code generation program implements the steps of the front-end code generation method based on file scanning adopted as one of the objectives of the present invention.
本发明的目的之三采用如下技术方案实现：The third purpose of the present invention adopts the following technical scheme to realize:
一种存储介质，该存储介质为计算机可读存储介质，其上存储有计算机程序，计算机程序为前端代码生成程序，所述前端代码生成程序被处理器执行时实现如本发明的目的之一采用的基于文件扫描的前端代码生成方法的步骤。A storage medium, the storage medium is a computer-readable storage medium on which a computer program is stored, the computer program is a front-end code generation program, and the front-end code generation program is implemented as one of the objects of the present invention when the front-end code generation program is executed by the processor. The steps of the front-end code generation method based on file scanning.
相比现有技术，本发明的有益效果在于：Compared with the prior art, the beneficial effects of the present invention are:
本发明通过根据源工程文件中预设格式的文件进行扫描分析得出与控件相关的数据信息，然后将其与源工程文件对应的可视化系统的前端界面的配置数据进行结合以实现前端界面的代码的自动生成，本发明可自动、快速完成前端代码的生成，无需人工编码，也不需要特定的控件库即可实现，解决现有技术中前端代码生成的操作复杂、重复工作量大、开发周期长、效率低下、缺乏通用性等问题。The present invention obtains the data information related to the control by scanning and analyzing the files in the preset format in the source project file, and then combining it with the configuration data of the front-end interface of the visualization system corresponding to the source project file to realize the code of the front-end interface The invention can automatically and quickly complete the generation of the front-end code without manual coding or a specific control library, and solves the complex operation of the front-end code generation in the prior art, the heavy workload of repetitive work, and the development cycle. length, inefficiency, and lack of versatility.
附图说明Description of drawings
图1为本发明提供的基于文件扫描的前端代码生成方法流程图。FIG. 1 is a flowchart of a method for generating front-end code based on file scanning provided by the present invention.
具体实施方式Detailed ways
下面，结合附图以及具体实施方式，对本发明做进一步描述，需要说明的是，在不相冲突的前提下，以下描述的各实施例之间或各技术特征之间可以任意组合形成新的实施例。The present invention will be further described below with reference to the accompanying drawings and specific embodiments. It should be noted that, on the premise of no conflict, the embodiments or technical features described below can be combined arbitrarily to form new embodiments. .
实施例一Example 1
本发明提供一种基于文件扫描的前端代码生成方法，通过对原始的源工程文件进行扫描分析，并对分析得出的文件内容进行转换与解析提取得出与控件相关的源码数据信息，然后将其与源工程文件的可视化系统的前端界面的配置数据结合以自动生成前端界面的代码，实现前端代码的自动生成。The invention provides a front-end code generation method based on file scanning. The original source project file is scanned and analyzed, and the content of the analyzed file is converted and analyzed to extract the source code data information related to the control, and then the source code data information related to the control is obtained. It is combined with the configuration data of the front-end interface of the visualization system of the source project file to automatically generate the code of the front-end interface, so as to realize the automatic generation of the front-end code.
本发明提供一种优选的实施例，基于文件扫描的前端代码生成方法，如图1所示，包括以下步骤：The present invention provides a preferred embodiment, a front-end code generation method based on file scanning, as shown in Figure 1, comprising the following steps:
步骤S1、获取源工程文件并对源工程文件进行扫描以获取预设格式的文件。Step S1, obtaining a source project file and scanning the source project file to obtain a file in a preset format.
具体地，可通过开发插件工具将其导入到具体应用软件中以实现对源工程文件的扫描从而获取预设格式的文件。具体地，通过的自定义插件webpack，在源工程编译打包的生命周期上载入文件扫描功能，该功能基于nodejs提供的文件系统遍历和读取文件内容，能扫描整个源工程文件中的所有文件。Specifically, it can be imported into a specific application software by developing a plug-in tool to scan the source project file to obtain a file in a preset format. Specifically, through the custom plug-in webpack, the file scanning function is loaded in the life cycle of the source project compilation and packaging. This function is based on the file system provided by nodejs to traverse and read the file content, and can scan all the files in the entire source project file. .
需要说明的是，webpack是一个静态模块打包工具，它能找到js模块以及其它的一些浏览器不能直接运行的文件(.vue、.scss、.ts等)，将其转化为能被浏览器直接使用的格式，最后组合成一个或多个文件。在转化和组合流程中，会对外提供许多接口，便于外部的程序逻辑介入到转化流程中。基于上述机制，将读取源工程下各文件内容的逻辑进行封装，作为插件插入到webpack流程中。It should be noted that webpack is a static module packaging tool, which can find js modules and other files (. The format used, and finally combined into one or more files. In the transformation and combination process, many external interfaces will be provided to facilitate the intervention of external program logic into the transformation process. Based on the above mechanism, the logic of reading the contents of each file under the source project is encapsulated and inserted into the webpack process as a plug-in.
优选地，在对源工程文件进行扫描时，可以根据实际情况设置所要扫描的目录，其中，默认情况下会对源工程文件中的所有文件进行扫描仪得出预设格式的文件。Preferably, when scanning the source project file, the directory to be scanned can be set according to the actual situation, wherein by default, all files in the source project file are scanned to obtain files in a preset format.
优选地，预设格式的文件包括VUE格式的文件和JS格式的文件。由于这两个文件与前端配置页面相关，因此，在对源工程文件进行扫描时直接获取这两种类型的文件即可。在实际的应用过程中，可根据实际的需求对预设格式的文件进行设定，并不仅限于本实施例中所给出的VUE格式的文件和JS格式的文件。Preferably, the files in the preset format include files in the VUE format and files in the JS format. Since these two files are related to the front-end configuration page, you can directly obtain these two types of files when scanning the source project files. In the actual application process, the files in the preset format can be set according to actual requirements, and are not limited to the files in the VUE format and the files in the JS format given in this embodiment.
步骤S2、对扫描得到的每个文件按照预设解析规则进行解析并将解析得出的内容转换为抽象语法树。Step S2, parse each file obtained by scanning according to a preset parsing rule, and convert the parsed content into an abstract syntax tree.
优选地，由于源工程文件中有多种类型的文件，本实施例只针对VUE格式和JS格式的文件，由于不同格式的文件其数据的存储方式等均有所不同，因此，再对每种格式的文件进行解析时，需要预先设定对应的解析规则，然后通过调用对应的预设的解析规则来实现对每种格式的每个文件进行解析，并将解析得出的内容转换为抽象语法树。其中，解析规则可由工程师预先设定并存储到系统中，在使用时直接调用即可。Preferably, since there are various types of files in the source project file, this embodiment is only for files in VUE format and JS format. Since files in different formats have different data storage methods, etc. When parsing files in various formats, it is necessary to preset corresponding parsing rules, and then parse each file in each format by calling the corresponding preset parsing rules, and convert the parsed content into abstract syntax. Tree. Among them, the parsing rules can be preset by engineers and stored in the system, and can be called directly when using.
具体地，以VUE格式的文件为例：由于vue格式的文件均包含三种类型的顶级语言块：<template>、<script>和<style>，同时还允许添加可选的自定义块。因此，在对文件进行解析时，需要单独对每个语言块的内容进行解析，然后将解析得出的内容转换为抽象语法树。Specifically, take the Vue format file as an example: since the Vue format file contains three types of top-level language blocks: <template>, <script> and <style>, it also allows adding optional custom blocks. Therefore, when parsing the file, the content of each language block needs to be parsed separately, and then the parsed content is converted into an abstract syntax tree.
其中，抽象语法树是指将词法单元流转换成一个由元素嵌套所组成的代表了程序语法结构的树。比如：以“let a＝1”这段程序为例，该段程序通常会被分解成以下的词法单元：let、a、＝、1，然后再将其转化为抽象语法树，其抽象语法树的结构具体如下；其中，body是关键字为let的变量声明节点，具体描述信息包含变量名和初始值，其中，变量名a存放在id节点的子属性name中，初始值1存放在init节点的子属性value中。Among them, the abstract syntax tree refers to the conversion of the lexical unit stream into a tree composed of element nesting that represents the program syntax structure. For example, taking the program "let a=1" as an example, the program is usually decomposed into the following lexical units: let, a, =, 1, and then converted into an abstract syntax tree, whose abstract syntax tree The structure is as follows; among them, body is a variable declaration node with the keyword let, and the specific description information includes the variable name and initial value, where the variable name a is stored in the sub-attribute name of the id node, and the initial value 1 is stored in the init node. in the sub-attribute value.
对于不同格式的文件设置不同的解析规则，在实际的应用过程中，根据文件的格式来调用对应的解析规则即可。Different parsing rules are set for files of different formats. In the actual application process, the corresponding parsing rules can be called according to the format of the file.
优选地，本发明在对每个文件进行解析提取的内容至少包括以下内容：文件名称、文件路径、源代码、结构描述等。Preferably, the content extracted by parsing each file in the present invention at least includes the following content: file name, file path, source code, structure description, and the like.
优选地，将提取得出的内容转换为抽象语法树时，本发明还可采用现有的@babel/parser插件来实现，从而将从每个文件中提取得出的内容转换为抽象语法树。Preferably, when converting the extracted content into an abstract syntax tree, the present invention can also be implemented by using the existing @babel/parser plug-in, so that the content extracted from each file is converted into an abstract syntax tree.
步骤S3、根据每个文件的抽象语法树得出各个文件之间的依赖关系。In step S3, the dependency relationship between each file is obtained according to the abstract syntax tree of each file.
在具体应用中，获取到每个文件的抽象语法树后，可根据预设的依赖查找规则，对每个抽象语法树的各个节点进行遍历，并将匹配成功的节点值确定为当前文件的依赖文件，同时节点值会被记录在该文件的依赖关系中。In a specific application, after the abstract syntax tree of each file is obtained, each node of each abstract syntax tree can be traversed according to the preset dependency search rules, and the value of the successfully matched node is determined as the dependency of the current file file, and node values are recorded in the file's dependencies.
优选地，预设的依赖查找规则是依据业界的模块化编码规范生成的，在CommonJS模块化规范中，使用require引入模块，而在ES6模块化规范中，使用import引入模块，也可以使用export*引入模块。其中，使用require、import、export*命令可查找得出文件之间的互相引用，也即得出每个文件的依赖关系。Preferably, the preset dependency lookup rules are generated according to the industry's modular coding specifications. In the CommonJS modular specification, use require to import modules, while in the ES6 modular specification, use import to import modules, and you can also use export* import module. Among them, use the require, import, export* commands to find the mutual references between files, that is, to find the dependencies of each file.
具体地，依据预设的依赖查找规则对抽象语法树进行遍历分析时具体可以包括匹配关系：Specifically, when traversing and analyzing the abstract syntax tree according to the preset dependency search rule, the matching relationship may be specifically included:
遍历抽象语法树的各个节点，查找匹配type:CallExpression的节点，此节点使用require命令加载模块文件；Traverse each node of the abstract syntax tree to find the node matching type:CallExpression, this node uses the require command to load the module file;
遍历抽象语法树的各个节点，查找匹配type:ImportDeclaration的节点，此节点使用import命令加载模块文件；Traverse each node of the abstract syntax tree to find the node matching type: ImportDeclaration, this node uses the import command to load the module file;
遍历抽象语法树的各个节点，查找匹配type:ExportAllDeclaration的节点，此使用export*命令加载模块文件。Traverse each node of the abstract syntax tree, find the node matching type:ExportAllDeclaration, use the export* command to load the module file.
进一步地，查找得出的符合上述匹配关系的节点，其节点值为该文件的关联文件，通过记录的节点值内容，可以确定各个文件之间的依赖关系。当导出控件源码时，通过收集记录的文件依赖关系，可以将相关联的文件源码一起导出，保证程序的正常运行与使用。Further, the searched node that meets the above matching relationship has the node value of the associated file of the file, and the dependency relationship between each file can be determined through the recorded node value content. When exporting the control source code, by collecting the recorded file dependencies, the associated file source code can be exported together to ensure the normal operation and use of the program.
S4：根据每个文件的文件内容、源代码和依赖关系生成对应文件的解析数据。S4: Generate parsing data of the corresponding file according to the file content, source code and dependencies of each file.
在具体应用中，对每个文件解析得出的文件内容、源代码、依赖关系进行规范化处理后生成对应文件的解析数据。同时，将每个文件的解析数据以JSON格式的文件进行保存。In a specific application, the file content, source code, and dependencies obtained by parsing each file are normalized to generate parsing data of the corresponding file. At the same time, the parsed data of each file is saved as a file in JSON format.
S5：根据源工程文件对应的可视化系统导出每个前端界面的配置数据，并根据每个前端界面的配置数据提取得出对应控件信息。S5: Export the configuration data of each front-end interface according to the visualization system corresponding to the source project file, and extract corresponding control information according to the configuration data of each front-end interface.
在具体应用中，对于可视化系统的每个前端界面一般都会设有配置数据，因此，需要对每个前端界面的配置数据进行导出，然后对导出的配置数据进行解析并提取得出对应控件信息。具体地，前端界面的配置数据可通过提供的开放接口进行导出。In specific applications, configuration data is generally provided for each front-end interface of the visualization system. Therefore, the configuration data of each front-end interface needs to be exported, and then the exported configuration data is parsed and extracted to obtain the corresponding control information. Specifically, the configuration data of the front-end interface can be exported through the provided open interface.
本实施例提供的方法中，控件信息至少包括：控件名称、控件类型、显示样式、控件位置信息等。In the method provided by this embodiment, the control information includes at least: control name, control type, display style, control location information, and the like.
S6：将提取得出的每个控件信息与每个文件的解析数据进行关联以生成每个前端界面的前端代码。S6: Associate each control information obtained by extraction with the parsing data of each file to generate front-end code of each front-end interface.
在具体应用中，通过将提取的控件信息与前述生成的每个文件的解析数据进行关联映射，可以确定所需生成代码的全量数据，从而可得出每个前端界面的前端代码。其中，关联的具体过程是将控件信息中的控件类型与文件的解析数据中的控件名称进行匹配以得出全量数据，然后根据全量数据确定所有控件的布局、代码后输出每个前端界面的前端代码。In a specific application, by associating and mapping the extracted control information with the parsed data of each file generated above, the full amount of code to be generated can be determined, and the front-end code of each front-end interface can be obtained. The specific process of association is to match the control type in the control information with the control name in the parsing data of the file to obtain the full amount of data, and then determine the layout and code of all the controls according to the full amount of data and output the front end of each front-end interface. code.
在具体应用中，以文本控件为例，提取的文本的控件信息至少包括：控件类型、位置信息、属性配置信息。而步骤S4得出的文件的解析数据至少包括：文件名称、文件路径、源代码、关联依赖、结构描述等。在关联映射时，通过对步骤S4得出的文件的解析数据进行遍历，以查找到文件名称与控件类型相匹配的数据，然后将其与控件类型对应的控件信息进行组合以得出包含源代码的全量数据，也即，该文本控件的全量数据。优选地，本发明最终得出每个控件的全量数据至少包括控件名称、控件位置信息、控件代码。In a specific application, taking a text control as an example, the control information of the extracted text includes at least: control type, location information, and attribute configuration information. The parsing data of the file obtained in step S4 at least includes: file name, file path, source code, association dependency, structure description, and the like. During the associative mapping, the parsed data of the file obtained in step S4 is traversed to find the data whose file name matches the control type, and then it is combined with the control information corresponding to the control type to obtain the data containing the source code The full data of the text control, that is, the full data of the text control. Preferably, the present invention finally obtains that the full data of each control includes at least the name of the control, the position information of the control, and the code of the control.
本发明提供一种前端代码生成方法，其可应用于任意的开发工程中，通过对源工程文件进行扫描，从而将提取得出的文件内容与源工程文件对应的可视化系统的前端界面的配置数据进行组合以得出每个前端界面所包含的控件信息、布局和代码，进而确定每个前端界面的代码，实现前端代码的生成，本发明具有快速、自动生成前端代码的特点，无需人工手动编码，也无需依赖特定的控件库，解决了业务开发过程中工作量的重复操作，以及无法灵活生成前端代码的问题。The invention provides a front-end code generation method, which can be applied to any development project. By scanning the source project file, the content of the extracted file is matched with the configuration data of the front-end interface of the visualization system corresponding to the source project file. Combining to obtain the control information, layout and code contained in each front-end interface, and then determining the code of each front-end interface, realizing the generation of front-end code, the present invention has the characteristics of fast and automatic generation of front-end code, without manual manual coding , and does not need to rely on a specific control library, which solves the repetitive operation of workload in the business development process and the inability to flexibly generate front-end code.
实施例二Embodiment 2
基于实施例二，本发明还提供基于文件扫描的前端代码生成装置，其包括存储器和处理器，所述存储器上存储有在处理器上运行的前端代码生成程序，所述前端代码生成程序为计算机程序，所述处理器执行所述前端代码生成程序时实现以下步骤：Based on the second embodiment, the present invention also provides a front-end code generation device based on file scanning, which includes a memory and a processor, the memory stores a front-end code generation program running on the processor, and the front-end code generation program is a computer program, the processor implements the following steps when executing the front-end code generation program:
文件扫描步骤：获取源工程文件并对源工程文件进行扫描以获取预设格式的文件；File scanning step: obtain the source project file and scan the source project file to obtain the file in the preset format;
解析步骤：对扫描得到的每个文件按照预设解析规则进行解析得出文件内容，并根据解析得出的文件内容得出文件的依赖关系，进而根据每个文件的文件内容、每个文件的代码和依赖关系得出文件的解析数据；Parsing step: parse each scanned file according to the preset parsing rules to obtain the file content, and obtain the file dependency according to the parsed file content, and then according to the file content of each file and the file content of each file. Code and dependencies derive parsed data for the file;
控件信息获取步骤：根据源工程文件对应的可视化系统导出每个前端界面的配置数据，并根据每个前端界面的配置数据提取得出对应控件信息；The control information acquisition step: export the configuration data of each front-end interface according to the visualization system corresponding to the source project file, and extract the corresponding control information according to the configuration data of each front-end interface;
代码生成步骤：将提取得出的每个前端界面的控件信息与每个文件的解析数据进行关联以生成每个控件的全量数据，进而得出每个前端界面的前端代码；所述每个控件的全量数据包括控件名称、控件位置信息和控件代码。Code generation step: associate the extracted control information of each front-end interface with the parsing data of each file to generate the full data of each control, and then obtain the front-end code of each front-end interface; each control The full amount of data includes control name, control location information and control code.
进一步地，所述解析步骤包括：首先对扫描得到的每个文件按照预设解析规则进行解析提取得出文件内容，并将解析得出的文件内容转换为抽象语法树，然后根据每个文件的抽象语法树得出每个文件的依赖关系。Further, the parsing step includes: first, parse and extract each file obtained by scanning according to a preset parsing rule to obtain the file content, and convert the parsed file content into an abstract syntax tree, and then according to the content of each file. The abstract syntax tree derives the dependencies of each file.
进一步地，文件内容包括文件名称、文件路径、源代码和结构描述。Further, the file content includes file name, file path, source code and structure description.
进一步地，根据每个文件的抽象语法树得出文件的依赖关系具体包括根据预设的依赖查找规则对每个抽象语法树的各个节点进行遍历，获取满足匹配条件的节点值并将其确定为对应文件的依赖关系，同时将节点值记录在该文件的依赖关系中。Further, obtaining the dependency relationship of the file according to the abstract syntax tree of each file specifically includes traversing each node of each abstract syntax tree according to the preset dependency search rule, obtaining the node value that satisfies the matching condition and determining it as The dependency of the corresponding file, and the node value is recorded in the dependency of the file.
进一步地，将文件的解析数据以JSON格式的文件进行保存。Further, the parsed data of the file is saved as a file in JSON format.
进一步地，控件信息包括：控件名称、控件类型、显示样式、控件位置信息。Further, the control information includes: control name, control type, display style, and control position information.
进一步地，预设格式的文件包括VUE格式的文件和JS格式的文件。Further, the files in the preset format include files in the VUE format and files in the JS format.
进一步地，文件扫描步骤具体包括对源工程文件的所有目录进行扫描或对源工程文件的预设目录进行扫描。Further, the file scanning step specifically includes scanning all directories of the source project file or scanning a preset directory of the source project file.
实施例三Embodiment 3
基于实施例一，本发明还提供另外一实施例，一种存储介质，该存储介质为计算机可读存储介质，其上存储有计算机程序，计算机程序为前端代码生成程序，所述前端代码生成程序被处理器执行时实现如以下步骤：Based on the first embodiment, the present invention also provides another embodiment, a storage medium, the storage medium is a computer-readable storage medium, and a computer program is stored thereon, and the computer program is a front-end code generation program, and the front-end code generation program When executed by the processor, the following steps are implemented:
文件扫描步骤：获取源工程文件并对源工程文件进行扫描以获取预设格式的文件；File scanning step: obtain the source project file and scan the source project file to obtain the file in the preset format;
解析步骤：对扫描得到的每个文件按照预设解析规则进行解析得出文件内容，并根据解析得出的文件内容得出文件的依赖关系，进而根据每个文件的文件内容、每个文件的代码和依赖关系得出文件的解析数据；Parsing step: parse each scanned file according to the preset parsing rules to obtain the file content, and obtain the file dependency according to the parsed file content, and then according to the file content of each file and the file content of each file. The code and dependencies derive parsed data for the file;
控件信息获取步骤：根据源工程文件对应的可视化系统导出每个前端界面的配置数据，并根据每个前端界面的配置数据提取得出对应控件信息；The control information acquisition step: export the configuration data of each front-end interface according to the visualization system corresponding to the source project file, and extract the corresponding control information according to the configuration data of each front-end interface;
代码生成步骤：将提取得出的每个前端界面的控件信息与每个文件的解析数据进行关联以生成每个控件的全量数据，进而得出每个前端界面的前端代码；所述每个控件的全量数据包括控件名称、控件位置信息和控件代码。Code generation step: associate the extracted control information of each front-end interface with the parsing data of each file to generate the full data of each control, and then obtain the front-end code of each front-end interface; each control The full amount of data includes control name, control location information and control code.
进一步地，所述解析步骤包括：首先对扫描得到的每个文件按照预设解析规则进行解析提取得出文件内容，并将解析得出的文件内容转换为抽象语法树，然后根据每个文件的抽象语法树得出每个文件的依赖关系。Further, the parsing step includes: first, parse and extract each file obtained by scanning according to a preset parsing rule to obtain the file content, and convert the parsed file content into an abstract syntax tree, and then according to the content of each file. The abstract syntax tree derives the dependencies of each file.
进一步地，文件内容包括文件名称、文件路径、源代码和结构描述。Further, the file content includes file name, file path, source code and structure description.
进一步地，根据每个文件的抽象语法树得出文件的依赖关系具体包括根据预设的依赖查找规则对每个抽象语法树的各个节点进行遍历，获取满足匹配条件的节点值并将其确定为对应文件的依赖关系，同时将节点值记录在该文件的依赖关系中。Further, obtaining the dependency relationship of the file according to the abstract syntax tree of each file specifically includes traversing each node of each abstract syntax tree according to the preset dependency search rule, obtaining the node value that satisfies the matching condition and determining it as The dependency of the corresponding file, and the node value is recorded in the dependency of the file.
进一步地，将文件的解析数据以JSON格式的文件进行保存。Further, the parsed data of the file is saved as a file in JSON format.
进一步地，控件信息包括：控件名称、控件类型、显示样式、控件位置信息。Further, the control information includes: control name, control type, display style, and control position information.
进一步地，预设格式的文件包括VUE格式的文件和JS格式的文件。Further, the files in the preset format include files in the VUE format and files in the JS format.
进一步地，文件扫描步骤具体包括对源工程文件的所有目录进行扫描或对源工程文件的预设目录进行扫描。Further, the file scanning step specifically includes scanning all directories of the source project file or scanning a preset directory of the source project file.
上述实施方式仅为本发明的优选实施方式，不能以此来限定本发明保护的范围，本领域的技术人员在本发明的基础上所做的任何非实质性的变化及替换均属于本发明所要求保护的范围。The above-mentioned embodiments are only preferred embodiments of the present invention, and cannot be used to limit the scope of protection of the present invention. Any insubstantial changes and substitutions made by those skilled in the art on the basis of the present invention belong to the scope of the present invention. Scope of protection claimed.
Claims (10)
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210066569.2A CN114594933A (en) | 2022-01-20 | 2022-01-20 | Front-end code generation method, device and storage medium based on file scanning |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210066569.2A CN114594933A (en) | 2022-01-20 | 2022-01-20 | Front-end code generation method, device and storage medium based on file scanning |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114594933A true CN114594933A (en) | 2022-06-07 |
Family
ID=81806508
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210066569.2A Pending CN114594933A (en) | 2022-01-20 | 2022-01-20 | Front-end code generation method, device and storage medium based on file scanning |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114594933A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115016784A (en) * | 2022-08-08 | 2022-09-06 | 宇动源(北京)信息技术有限公司 | Low code application multiplexing method, application analysis system, equipment and storage medium |
| CN116483377A (en) * | 2023-06-15 | 2023-07-25 | 太平金融科技服务(上海)有限公司深圳分公司 | Code detection method and device, electronic equipment and storage medium |
| CN116541305A (en) * | 2023-06-26 | 2023-08-04 | 京东方艺云(杭州)科技有限公司 | A method, device, electronic device and storage medium for anomaly detection |
| CN116860324A (en) * | 2023-09-01 | 2023-10-10 | 深圳代码兄弟技术有限公司 | Development data processing method, development data processing apparatus, and readable storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104991773A (en) * | 2015-06-30 | 2015-10-21 | 小米科技有限责任公司 | Program generation method and apparatus |
| CN108228183A (en) * | 2018-01-12 | 2018-06-29 | 北京三快在线科技有限公司 | Front-end interface code generating method, device, electronic equipment and storage medium |
| CN112416787A (en) * | 2020-11-27 | 2021-02-26 | 平安普惠企业管理有限公司 | JAVA-based project source code scanning analysis method, system and storage medium |
| CN113778848A (en) * | 2021-01-29 | 2021-12-10 | 北京沃东天骏信息技术有限公司 | Test code generation method, device, computer system and medium |
-
2022
- 2022-01-20 CN CN202210066569.2A patent/CN114594933A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104991773A (en) * | 2015-06-30 | 2015-10-21 | 小米科技有限责任公司 | Program generation method and apparatus |
| CN108228183A (en) * | 2018-01-12 | 2018-06-29 | 北京三快在线科技有限公司 | Front-end interface code generating method, device, electronic equipment and storage medium |
| CN112416787A (en) * | 2020-11-27 | 2021-02-26 | 平安普惠企业管理有限公司 | JAVA-based project source code scanning analysis method, system and storage medium |
| CN113778848A (en) * | 2021-01-29 | 2021-12-10 | 北京沃东天骏信息技术有限公司 | Test code generation method, device, computer system and medium |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115016784A (en) * | 2022-08-08 | 2022-09-06 | 宇动源(北京)信息技术有限公司 | Low code application multiplexing method, application analysis system, equipment and storage medium |
| CN116483377A (en) * | 2023-06-15 | 2023-07-25 | 太平金融科技服务(上海)有限公司深圳分公司 | Code detection method and device, electronic equipment and storage medium |
| CN116483377B (en) * | 2023-06-15 | 2024-03-01 | 太平金融科技服务(上海)有限公司深圳分公司 | Code detection method and device, electronic equipment and storage medium |
| CN116541305A (en) * | 2023-06-26 | 2023-08-04 | 京东方艺云(杭州)科技有限公司 | A method, device, electronic device and storage medium for anomaly detection |
| CN116541305B (en) * | 2023-06-26 | 2023-12-15 | 京东方艺云(杭州)科技有限公司 | Anomaly detection method, device, electronic equipment and storage medium |
| CN116860324A (en) * | 2023-09-01 | 2023-10-10 | 深圳代码兄弟技术有限公司 | Development data processing method, development data processing apparatus, and readable storage medium |
| CN116860324B (en) * | 2023-09-01 | 2023-12-05 | 深圳代码兄弟技术有限公司 | Development data processing method, development data processing apparatus, and readable storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN114594933A (en) | Front-end code generation method, device and storage medium based on file scanning | |
| CN111462327B (en) | Unstructured data analysis method for three-dimensional inspection model of three-dimensional modeling software | |
| US7617444B2 (en) | File formats, methods, and computer program products for representing workbooks | |
| CN109582647B (en) | Unstructured evidence file oriented analysis method and system | |
| US7854376B2 (en) | System and method for managing item interchange and identification in an extended enterprise | |
| CN106874244B (en) | Method for constructing automatic document generation model based on work sequence | |
| US20130152061A1 (en) | Full fidelity parse tree for programming language processing | |
| CN113609820A (en) | Method, device and equipment for generating word file based on extensible markup language file | |
| CN108762743A (en) | Data table operation code generation method and device | |
| CN107608895A (en) | Software testing generation method, system and storage medium based on static models | |
| CN105354036A (en) | Database operation code generating method and apparatus | |
| CN110968294A (en) | Business domain model establishing system and method | |
| CN107608894A (en) | Software testing generation method, system and storage medium based on dynamic model | |
| CN105468571A (en) | Method and device used for automatically generating report | |
| CN113177057A (en) | SQL statement syntax visualization analysis method, system and computer readable storage medium | |
| CN109325217B (en) | File conversion method, system, device and computer readable storage medium | |
| CN117608656A (en) | Mixed front end frame migration method based on AST and LLM | |
| CN114756554B (en) | Data query processing method based on MyBatis framework | |
| CN119690440B (en) | Automatic code activity diagram generation system and method | |
| CN113111633A (en) | Online editing method, system, terminal and storage medium for power grid evaluation opinions | |
| Kulkarni et al. | Abstraction of UML class diagram from the input java program | |
| CN111898351A (en) | Aviator-based Excel data automatic import method, device, terminal device and storage medium | |
| CN113590189B (en) | Document generation method, device, electronic device and storage medium | |
| CN113655996B (en) | An enterprise-level system generation method based on demand model | |
| CN110502735B (en) | Method and system for quickly manufacturing universal process file of electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |