CN114860252A - Code unified compiling method and device, electronic equipment and readable storage medium - Google Patents
Code unified compiling method and device, electronic equipment and readable storage mediumDownload PDFInfo
- Publication number
- CN114860252A CN114860252ACN202210446931.9ACN202210446931ACN114860252ACN 114860252 ACN114860252 ACN 114860252ACN 202210446931 ACN202210446931 ACN 202210446931ACN 114860252 ACN114860252 ACN 114860252A
- Authority
- CN
- China
- Prior art keywords
- code
- project
- tag
- compilation
- component
- 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
Images
Classifications
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/74—Reverse engineering; Extracting design information from source code
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; 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/448—Execution paradigms, e.g. implementations of programming paradigms
- G06F9/4482—Procedural
- G06F9/4484—Executing subprograms
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
Translated fromChinese
Description
Translated fromChinese技术领域technical field
本发明涉及人工智能技术领域，尤其涉及一种代码统一编译方法、装置、电子设备及可读存储介质。The present invention relates to the technical field of artificial intelligence, and in particular, to a method, device, electronic device and readable storage medium for unified code compilation.
背景技术Background technique
目前在国内前端行业内，广泛使用前端框架进行前端项目开发，项目中组件的展示内容通过不同的代码进行实现。例如，在前端vue框架内开发组件的过程中，一个组件内的页面展示和逻辑内容，既有固定内容不变化的部分，又存在动态变化的部分。对于动态变化的部分，主要是靠外部父级的组件传递进来，例如，如果是方法、变量，只需要在父级通过一个动态变量进行传递到子组件，子组件获取使用即可。但是由于页面展示部分的代码都是通过html语法进行编写的树状结构，而传递参数又只能是通过字符串的形式，进行html代码的字符串格式进行传递，字符串格式的html代码，在编写过程中，是非常难以阅读的且无法正常识别，造成了阅读和维护困难。早期vue版本，提出过插槽雏形特性，但是由于语法相对复杂，不容易理解，很多开发者还是按照通过动态参数传递html字符串的形式编码。直到vue2.6版本,才对这个情况设计了可靠新的特性，即通过插槽v-slot的方式，简单易懂地解决了这个场景问题。At present, in the domestic front-end industry, the front-end framework is widely used for front-end project development, and the display content of the components in the project is realized through different codes. For example, in the process of developing components in the front-end vue framework, the page display and logical content in a component have both fixed content that does not change and dynamic changes. For the dynamically changing part, it is mainly passed in by the component of the external parent. For example, if it is a method or variable, it only needs to be passed from the parent to the child component through a dynamic variable, and the child component can be obtained and used. However, since the code of the page display part is written in a tree structure by html syntax, and the passing parameters can only be passed in the form of strings, the string format of the html code is passed, and the html code in the string format is in the form of a string. During the writing process, it is very difficult to read and cannot be recognized normally, which makes reading and maintenance difficult. In the early Vue version, the prototype slot feature was proposed, but because the syntax is relatively complex and difficult to understand, many developers still code in the form of passing HTML strings through dynamic parameters. It was not until version 2.6 of vue that a reliable new feature was designed for this situation, that is, the problem of this scene was solved in a simple and understandable way by means of slot v-slot.
然而在现存的项目中还是存在着大量通过传递html字符串的方式，这给项目在后期维护和新增功能的时候，会增加维护成本，降低了代码的可阅读性，也容易导致问题的发生。如果要统一改造成使用插槽的方式，又会存在大量的开发人员需要学习掌握好新语法特性，并还要将原来的html传参写法的代码梳理出来，再进行改造，改造完后再需要测试人员投入人力进行验证原有功能，效率低下且标准不统一。However, there are still a lot of ways to pass html strings in existing projects, which will increase maintenance costs, reduce the readability of the code, and easily lead to problems when the project is maintained and added in the later stage. . If it is to be transformed into a unified way of using slots, there will be a large number of developers who need to learn to master the new syntax features, and also need to sort out the code of the original html pass-by-parameter writing method, and then carry out the transformation. Testers invest manpower to verify the original functions, which is inefficient and the standards are not uniform.
综上所述，现有技术下会存在前端项目中展示代码转换困难、且转换标准不统一的问题。因此亟需一种将框架组件中展示代码进行统一编译转化的方法。To sum up, in the prior art, there are problems that the display code conversion in front-end projects is difficult and the conversion standards are not uniform. Therefore, there is an urgent need for a method for uniformly compiling and transforming the code displayed in the framework components.
发明内容SUMMARY OF THE INVENTION
本发明提供一种代码统一编译方法、装置、电子设备及可读存储介质，其主要目的在于解决展示代码统一编译困难的问题。The present invention provides a method, device, electronic device and readable storage medium for unified code compilation, the main purpose of which is to solve the problem of difficulty in unified compilation of display code.
为实现上述目的，本发明提供的一种代码统一编译方法，包括：In order to achieve the above-mentioned purpose, a kind of code unified compiling method provided by the present invention comprises:
构建前端项目的代码编译项目，根据所述代码编译项目从所述前端项目中识别出展示内容；constructing a code compilation project of the front-end project, and identifying the display content from the front-end project according to the code compilation project;
根据所述展示内容的变量传递方式确定待编译文件；Determine the to-be-compiled file according to the variable transmission method of the display content;
识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，得到代码统一的前端项目。Identify the number of keyword tags in the to-be-compiled file, select different code compilation methods to perform tag replacement and component transfer mode conversion on the to-be-compiled file according to the number of identified tags, and obtain a front-end project with unified code.
可选地，所述根据所述代码编译项目从所述前端项目中识别出展示内容，包括：Optionally, identifying the display content from the front-end project according to the code compilation project includes:
根据所述代码编译项目遍历所述前端项目的项目目录；Traverse the project directory of the front-end project according to the code compilation project;
从遍历到的项目目录中查找出带有目标后缀的文件作为目标组件；Find the file with the target suffix as the target component from the traversed project directory;
确定所述目标组件中展示标签内的所有代码作为所述展示内容。All codes in the display tag in the target component are determined as the display content.
可选地，所述根据所述展示内容的变量传递方式确定待编译文件，包括：Optionally, determining the to-be-compiled file according to the variable transmission mode of the display content, including:
根据预设的关键词标签及所述关键词标签对应值的位置识别所述目标组件的变量传递方式；Identify the variable transmission mode of the target component according to the preset keyword tag and the position of the corresponding value of the keyword tag;
确定变量传递方式为父级传递的目标组件为所述待编译文件。It is determined that the target component whose variable transmission mode is parent-level transmission is the to-be-compiled file.
可选地，所述识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括：Optionally, identifying the number of keyword tags in the to-be-compiled file, and selecting different code compilation methods according to the number of identified tags to perform tag replacement and component transfer mode conversion on the to-be-compiled file, including:
判断所述待编译文件中关键词标签的数量是否单一；Determine whether the number of keyword tags in the to-be-compiled file is single;
若所述待编译文件中关键词标签的数量单一，则利用第一代码编译方式对所述待编译文件进行标签替换及组件传递方式转换；If the number of keyword tags in the to-be-compiled file is single, use the first code compilation method to perform tag replacement and component transfer mode conversion on the to-be-compiled file;
若所述待编译文件中关键词标签的数量不单一，则利用第二代码编译方式对所述待编译文件进行标签替换及组件传递方式转换。If the number of keyword tags in the to-be-compiled file is not single, the second code compilation mode is used to perform tag replacement and component transfer mode conversion on the to-be-compiled file.
可选地，所述利用第一代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括：Optionally, performing label replacement and component transfer mode conversion on the to-be-compiled file using the first code compilation method, including:
在所述关键词标签内增加一个闭合标签，并在所述闭合标签内设置默认值；Add a closed tag in the keyword tag, and set a default value in the closed tag;
查找所述待编译文件中所有目标组件的父组件；Find the parent components of all target components in the to-be-compiled file;
识别出所述父组件中用于引用所述目标组件的第一引用变量；Identifying the first reference variable in the parent component for referencing the target component;
将所述第一引用变量编码转化为标签格式，得到第一引用标签，并将所述第一引用标签插入至设置完默认值的闭合标签内。Convert the encoding of the first reference variable into a label format to obtain a first reference label, and insert the first reference label into the closed label with the default value set.
可选地，所述利用第二代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括：Optionally, performing label replacement and component transfer mode conversion on the to-be-compiled file using the second code compilation method, including:
在每个所述关键词标签内增加一个闭合标签，并在所述闭合标签内增加标志位；A closed tag is added in each of the keyword tags, and a flag is added in the closed tag;
查找所述待编译文件中所有目标组件的父组件，识别出所述父组件中用于引用所述目标组件的第二引用变量；Find the parent components of all target components in the to-be-compiled file, and identify the second reference variable used to refer to the target component in the parent component;
将所述第二引用变量编码转化为标签格式，得到第二引用标签，并根据所述标志位将所述第二引用标签插入至增加的闭合标签内。Converting the encoding of the second reference variable into a label format to obtain a second reference label, and inserting the second reference label into the added closed label according to the flag bit.
可选地，所述构建前端项目的代码编译项目，包括：Optionally, the code compilation project for building the front-end project includes:
定位所述前端项目的根目录，在所述根目录中添加代码统一编译工具；Locate the root directory of the front-end project, and add a unified code compilation tool in the root directory;
在所述代码统一编译工具中设置编译配置文件，并在添加完编译配置文件的根目录中添加代码统一编译命令，执行所述代码统一编译命令，得到所述代码编译项目。A compilation configuration file is set in the unified code compilation tool, and a unified code compilation command is added to the root directory where the compilation configuration file is added, and the unified code compilation command is executed to obtain the code compilation project.
为了解决上述问题，本发明还提供一种代码统一编译装置，所述装置包括：In order to solve the above problems, the present invention also provides a unified code compilation device, the device includes:
代码编译项目构建模块，用于构建前端项目的代码编译项目，根据所述代码编译项目从所述前端项目中识别出展示内容；a code compilation project building module, used for constructing a code compilation project of a front-end project, and identifying display content from the front-end project according to the code compilation project;
文件查找模块，用于根据所述展示内容的变量传递方式确定待编译文件；a file search module, used to determine the to-be-compiled file according to the variable transmission mode of the display content;
代码统一编译模块，用于识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，得到代码统一的前端项目。The code unified compilation module is used to identify the number of keyword tags in the to-be-compiled file, select different code compilation methods according to the number of identified tags, and perform tag replacement and component transfer mode conversion on the to-be-compiled file to obtain a unified code front-end project.
为了解决上述问题，本发明还提供一种电子设备，所述电子设备包括：In order to solve the above problems, the present invention also provides an electronic device, the electronic device includes:
存储器，存储至少一个计算机程序；及a memory that stores at least one computer program; and
处理器，执行所述存储器中存储的计算机程序以实现上述所述的代码统一编译方法。The processor executes the computer program stored in the memory to implement the above-mentioned unified code compilation method.
为了解决上述问题，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一个计算机程序，所述至少一个计算机程序被电子设备中的处理器执行以实现上述所述的代码统一编译方法。In order to solve the above problems, the present invention also provides a computer-readable storage medium, where at least one computer program is stored in the computer-readable storage medium, and the at least one computer program is executed by a processor in an electronic device to realize the above-mentioned The code described in the unified compilation method.
本发明通过直接在前端项目中构建代码编译项目，并通过识别出前端项目中的展示内容，根据展示内容的变量传递方式确定待编译文件，并根据识别到的标签数量选择不同的代码编译方式对待编译文件进行标签替换及组件传递方式转换，无需事后人工进行组件编译，大大提高了代码统一编译的效率。同时，直接根据识别到的标签数量选择不同的代码编译方式，可以将不同目标组件的展示代码进行统一，提高了开发的可维护性。因此本发明提出的代码统一编译方法、装置、电子设备及计算机可读存储介质，可以解决展示代码统一编译困难的问题。The present invention directly builds the code compilation project in the front-end project, identifies the display content in the front-end project, determines the file to be compiled according to the variable transmission method of the display content, and selects different code compilation methods according to the number of identified tags. Compiled files are used for label replacement and component transfer mode conversion, which eliminates the need for manual component compilation afterwards, which greatly improves the efficiency of unified code compilation. At the same time, by directly selecting different code compilation methods according to the number of identified tags, the display codes of different target components can be unified, which improves the maintainability of development. Therefore, the method, device, electronic device and computer-readable storage medium for unified code compilation proposed by the present invention can solve the problem of difficulty in unified compilation of display code.
附图说明Description of drawings
图1为本发明一实施例提供的代码统一编译方法的流程示意图；1 is a schematic flowchart of a method for uniformly compiling code according to an embodiment of the present invention;
图2为图1中其中一个步骤的详细实施流程示意图；Fig. 2 is a detailed implementation flow diagram of one of the steps in Fig. 1;
图3为图1中另一个步骤的详细实施流程示意图；Fig. 3 is the detailed implementation flow schematic diagram of another step in Fig. 1;
图4为图1中另一个步骤的详细实施流程示意图；Fig. 4 is a detailed implementation flow diagram of another step in Fig. 1;
图5为图4中其中一个步骤的详细实施流程示意图；Fig. 5 is a detailed implementation flow diagram of one of the steps in Fig. 4;
图6为图4中另一个步骤的详细实施流程示意图；Fig. 6 is the detailed implementation flow schematic diagram of another step in Fig. 4;
图7为本发明一实施例提供的代码统一编译装置的功能模块图；FIG. 7 is a functional block diagram of an apparatus for unified code compilation provided by an embodiment of the present invention;
图8为本发明一实施例提供的实现所述代码统一编译方法的电子设备的结构示意图。FIG. 8 is a schematic structural diagram of an electronic device implementing the method for unified code compilation according to an embodiment of the present invention.
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。The realization, functional characteristics and advantages of the present invention will be further described with reference to the accompanying drawings in conjunction with the embodiments.
具体实施方式Detailed ways
应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。It should be understood that the specific embodiments described herein are only used to explain the present invention, but not to limit the present invention.
本发明实施例提供一种代码统一编译方法。所述代码统一编译方法的执行主体包括但不限于服务端、终端等能够被配置为执行本发明实施例提供的该方法的电子设备中的至少一种。换言之，所述代码统一编译方法可以由安装在终端设备或服务端设备的软件或硬件来执行，所述软件可以是区块链平台。所述服务端包括但不限于：单台服务器、服务器集群、云端服务器或云端服务器集群等。所述服务器可以是独立的服务器，也可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(ContentDelivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。Embodiments of the present invention provide a method for uniformly compiling codes. The execution body of the unified code compilation method includes, but is not limited to, at least one of electronic devices that can be configured to execute the method provided by the embodiment of the present invention, such as a server and a terminal. In other words, the unified code compilation method can be executed by software or hardware installed in a terminal device or a server device, and the software can be a blockchain platform. The server includes but is not limited to: a single server, a server cluster, a cloud server or a cloud server cluster, and the like. The server can be an independent server, or can provide cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery network (Content Delivery Network) , CDN), and cloud servers for basic cloud computing services such as big data and artificial intelligence platforms.
参照图1所示，为本发明一实施例提供的代码统一编译方法的流程示意图。在本实施例中，所述代码统一编译方法包括以下步骤S1-S5：Referring to FIG. 1 , it is a schematic flowchart of a method for unified code compilation provided by an embodiment of the present invention. In this embodiment, the unified code compilation method includes the following steps S1-S5:
S1、构建前端项目的代码编译项目，根据所述代码编译项目从所述前端项目中识别出展示内容。S1. Build a code compilation project of a front-end project, and identify display content from the front-end project according to the code compilation project.
本发明实施例中，所述前端项目是指通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互的项目，例如，XXapp开发项目、XX公司官网开发项目、XX产品页面开发项目、XX小程序开发项目等。In the embodiment of the present invention, the front-end project refers to a project that realizes the user interface interaction of Internet products through HTML, CSS, JavaScript and various derived technologies, frameworks, and solutions, for example, XXapp development project, XX company Official website development project, XX product page development project, XX applet development project, etc.
详细地，参照图2所示，所述构建前端项目的代码编译项目，包括以下步骤S10-S11：In detail, as shown in FIG. 2 , the code compilation project for constructing the front-end project includes the following steps S10-S11:
S10、定位所述前端项目的根目录，在所述根目录中添加代码统一编译工具；S10, locate the root directory of the front-end project, and add a unified code compilation tool in the root directory;
S11、在所述代码统一编译工具中设置编译配置文件，并在添加完编译配置文件的根目录中添加代码统一编译命令，执行所述代码统一编译命令，得到所述代码编译项目。S11. Set a compilation configuration file in the unified code compilation tool, and add a unified code compilation command in the root directory where the compilation configuration file is added, and execute the unified code compilation command to obtain the code compilation project.
本发明实施例中，所述代码编译项目用来在前端页面中执行下述S2至S4的步骤来将代码进行统一编译。例如，在命令行(mac系统为终端)，定位当前前端项目根目录，执行命令：npmi html-prop-transform-slot-D，则可以添加代码统一编译工具到当前框架项目中，设置编译配置文件config.js，在编译配置文件中添加代码统一编译命令：npm runtransform-slot并执行，得到代码编译项目，其中，编译配置文件中的配置内容包括：项目中开发代码所在目录等。In the embodiment of the present invention, the code compilation project is used to execute the following steps S2 to S4 in the front-end page to uniformly compile the code. For example, on the command line (the mac system is the terminal), locate the root directory of the current front-end project, and execute the command: npmi html-prop-transform-slot-D, you can add a unified code compilation tool to the current framework project and set the compilation configuration file config.js, add the unified code compilation command in the compilation configuration file: npm runtransform-slot and execute it to get the code compilation project, where the configuration content in the compilation configuration file includes: the directory where the development code in the project is located, etc.
本发明一可选实施例中，通过代码编译项目可以将前端项目中所有组件之间通过html文本进行传递的方式，统一编译为slot插槽语法。In an optional embodiment of the present invention, all components in the front-end project can be uniformly compiled into slot syntax by means of html text transmission between all components in the front-end project through the code compilation project.
详细地，所述根据所述代码编译项目从所述前端项目中识别出展示内容，包括：In detail, identifying the display content from the front-end project according to the code compilation project includes:
根据所述代码编译项目遍历所述前端项目的项目目录；Traverse the project directory of the front-end project according to the code compilation project;
从遍历到的项目目录中查找出带有目标后缀的文件作为目标组件；Find the file with the target suffix as the target component from the traversed project directory;
确定所述目标组件中展示标签内的所有代码作为所述展示内容。All codes in the display tag in the target component are determined as the display content.
本发明一可选实施例中，根据代码编译项目中编译配置文件config.js中所配置的配置项：项目中开发代码所在目录，遍历前端项目的项目目录，查找到所有的.vue结尾的文件作为目标组件，由于在vue组件中，所有与页面展示相关的代码，都是编写在template标签(即展示标签)内的，所以查找在当前vue组件中template标签内的所有代码作为展示内容。In an optional embodiment of the present invention, the configuration items configured in the compilation configuration file config.js are compiled according to the code: the directory where the development code is located in the project, the project directory of the front-end project is traversed, and all files ending with .vue are found. As the target component, because in the vue component, all the code related to page display is written in the template tag (ie display tag), so look for all the code in the template tag in the current vue component as the display content.
S2、根据所述展示内容的变量传递方式确定待编译文件。S2. Determine the to-be-compiled file according to the variable transmission mode of the display content.
本发明实施例中，变量传递方式是指组件间方法、变量等的互相传递，例如传递展示动态内容时，父级组件通过一个动态变量传递到子组件，子组件获取动态变量后使用即可。In this embodiment of the present invention, the variable transfer method refers to the mutual transfer of methods, variables, etc. between components. For example, when transferring and displaying dynamic content, the parent component passes a dynamic variable to the child component, and the child component obtains the dynamic variable and then uses it.
具体地，参照图3所示，所述根据所述展示内容的变量传递方式确定待编译文件，包括以下步骤S20-S21：Specifically, referring to FIG. 3 , the determination of the file to be compiled according to the variable transmission method of the displayed content includes the following steps S20-S21:
S20、根据预设的关键词标签及所述关键词标签对应值的位置识别所述目标组件的变量传递方式；S20, identifying the variable transmission mode of the target component according to a preset keyword tag and the position of the corresponding value of the keyword tag;
S21、确定变量传递方式为父级传递的目标组件为所述待编译文件。S21. Determine that the target component whose variable transmission mode is the parent transmission is the to-be-compiled file.
本发明一可选实施例中，由于本发明主要对动态展示内容的代码进行编译，而动态变化的部分，主要是靠外部父级的组件传递进来，因此需要确定变量传递方式为父级传递的目标组件为待编译文件。In an optional embodiment of the present invention, since the present invention mainly compiles the code of the dynamic display content, and the dynamically changing part is mainly transmitted by the external parent component, it is necessary to determine the variable transmission method as the parent transmission. The target component is the file to be compiled.
本发明实施例中，例如，首先查找在当前vue组件的template标签中，是否包含使用关键字标签v-html，如果没有，则说明该组件不存在使用父级动态传入html字符串展示内容的场景，如果有，则取出v-html属性的对应值，判断其取值是否来自于与父级组件传递，判断方式为，该变量是否包含在vue组件中props属性内部，如果在其内部，则说明是来自于父级组件的传递变量。如果成立，则说明是通过父级传递的方式，确定当前目标组件为所述待编译文件，如果不成立，则说明该v-html使用的场景，并不是通过父级传递的方式实现。In the embodiment of the present invention, for example, firstly, check whether the template tag of the current vue component contains the use of the keyword tag v-html, if not, it means that the component does not have the use of the parent to dynamically pass in the html string to display the content. In the scenario, if there is, take out the corresponding value of the v-html attribute, and judge whether its value comes from the transmission with the parent component. The way to judge is whether the variable is included in the props attribute of the vue component. If it is inside, then The description is a passed variable from the parent component. If it is true, it means that the current target component is determined as the to-be-compiled file by means of parent transmission. If it is not true, it means that the v-html usage scenario is not implemented by parent transmission.
S3、识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，得到代码统一的前端项目。S3. Identify the number of keyword tags in the to-be-compiled file, and select different code compilation methods to perform tag replacement and component transfer mode conversion on the to-be-compiled file according to the number of identified tags to obtain a front-end project with unified code.
本发明实施例中，由于所述待编译文件中在进行内容展示时，可能会使用多个关键词标签，例如，一个vue组件中，同时存在1个以上的v-html标签的场景，且v-html属性对应的变量，包含在vue组件中props属性内部，说明当前vue组件使用超过了1个以上的父级动态传入html字符串展示内容。In the embodiment of the present invention, since the content display in the to-be-compiled file may use multiple keyword tags, for example, in a vue component, there are more than one v-html tags at the same time, and v The variable corresponding to the -html attribute is included in the props attribute of the vue component, indicating that the current vue component uses more than one parent to dynamically pass in the html string to display the content.
详细地，参照图4所示，所述识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括以下步骤S30-S32：In detail, referring to FIG. 4 , the identification of the number of keyword tags in the to-be-compiled file is performed, and different code compilation methods are selected according to the number of identified tags to perform tag replacement and component transfer mode conversion on the to-be-compiled file. , including the following steps S30-S32:
S30、判断所述待编译文件中关键词标签的数量是否单一；S30, determine whether the number of keyword tags in the to-be-compiled file is single;
若所述待编译文件中关键词标签的数量单一，则执行S31、利用第一代码编译方式对所述待编译文件进行标签替换及组件传递方式转换；If the number of keyword tags in the to-be-compiled file is single, then execute S31, using the first code compilation mode to perform tag replacement and component transfer mode conversion on the to-be-compiled file;
若所述待编译文件中关键词标签的数量不单一，则执行S32、利用第二代码编译方式对所述待编译文件进行标签替换及组件传递方式转换。If the number of keyword tags in the to-be-compiled file is not single, S32 is executed to perform tag replacement and component transfer mode conversion on the to-be-compiled file by using the second code compilation method.
本发明实施例中，由于不同数据传递方式中需要转换的变量不同，因此通过细化目标组件中的不同数据传递方式，可以提高代码统一编译的准确率及效率。In the embodiment of the present invention, since the variables that need to be converted are different in different data transfer modes, the accuracy and efficiency of unified code compilation can be improved by refining different data transfer modes in the target component.
本发明一可选实施例中，在vue组件中，由于单v-html标签及多个v-html标签的代码编译方式不同，因此需要通过关键词标签的数量来确定不同的代码编译方式，从而提高编译的准确率。In an optional embodiment of the present invention, in the vue component, since the code compilation methods of a single v-html tag and multiple v-html tags are different, the different code compilation methods need to be determined by the number of keyword tags, so as to Improve compilation accuracy.
进一步地，参照图5所示，所述利用第一代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括以下步骤S310-S313：Further, referring to FIG. 5 , the use of the first code compilation mode to perform label replacement and component transfer mode conversion on the to-be-compiled file includes the following steps S310-S313:
S310、在所述关键词标签内增加一个闭合标签，并在所述闭合标签内设置默认值；S310, adding a closed tag in the keyword tag, and setting a default value in the closed tag;
S311、查找所述待编译文件中所有目标组件的父组件；S311, find the parent components of all target components in the to-be-compiled file;
S312、识别出所述父组件中用于引用所述目标组件的第一引用变量；S312, identifying the first reference variable used to refer to the target component in the parent component;
S313、将所述第一引用变量编码转化为标签格式，得到第一引用标签，并将所述第一引用标签插入至设置完默认值的闭合标签内。S313. Convert the encoding of the first reference variable into a label format to obtain a first reference label, and insert the first reference label into the closed label for which the default value has been set.
本发明一可选实施例中，所述闭合标签可以为slot闭合标签，对于单v-html标签的场景，通过下述步骤进行代码编译：In an optional embodiment of the present invention, the closed tag may be a slot closed tag, and for the scenario of a single v-html tag, code compilation is performed through the following steps:
1.1、在当前目标组件所包含v-html属性的标签内，增加一个slot闭合标签。例如：<标签Av-html＝动态变量>默认值XXX</标签A>，则编译为<标签Av-html＝动态变量><slot></slot></标签A>，同时将v-html整个属性连同属性值一并删除。该slot闭合标签存在的情况下，当父组件有传入动态标签的时候，就会自动替换掉该标签，该部分也就属于当前目标组件中动态加载展示内容的部分；1.1. Add a slot closing tag to the tag of the v-html attribute contained in the current target component. For example: <tag Av-html=dynamic variable>default value XXX</tag A>, then it will be compiled as <tag Av-html=dynamic variable><slot></slot></tag A>, and the v-html The entire property is deleted along with the property value. When the slot closing tag exists, when the parent component has an incoming dynamic tag, the tag will be automatically replaced, and this part also belongs to the part of the current target component that dynamically loads the display content;
1.2、设置slot闭合标签内的默认值，在原来所包含v-html属性的标签内，如1.1所示，包含默认值XXX，该默认值的作用是，当父组件没有传入动态变量的情况下，依然有默认的内容可以用于展示。对于使用slot闭合标签的情况下，该默认展示内容需要从原来的标签中提取出俩，然后再插入到现有已经生成的slot标签内，如<标签Av-html＝动态变量><slot>默认值XXX</slot></标签A>；1.2. Set the default value in the slot closing tag. In the tag that originally contained the v-html attribute, as shown in 1.1, the default value XXX is included. The function of the default value is when the parent component does not pass in dynamic variables. Below, there are still default content that can be used for display. In the case of using a closed slot tag, the default display content needs to be extracted from the original tag, and then inserted into the existing slot tag that has been generated, such as <tag Av-html=dynamic variable><slot>default value XXX</slot></tag A>;
1.3、通过编译配置文件config.js中所配置的第一项：项目中开发代码所在的目录，查找到所有包含有引入目标组件的父组件，在父组件中的展示标签template内，查找到引用该子组件的位置，例如：<父组件标签><子组件A:htmltext＝动态变量A></子组件A></父组件标签>，通过子组件中props对象中，所引用的v-html属性中对应的传入变量(即上面1.2例子中的htmltext属性)，反向查找到父组件给子组件传递时候，所使用到该变量(即上面1.2例子中的动态变量A)，由于该变量原来是一个html的字符串格式，但是使用slot插槽的方式，只需要直接使用html标签的格式即可，所以需要将html字符串格式编码转换为html标签(即第一引用标签)的形式。操作步骤如下：由于html字符串内，是通过类似于如下方式进行变量拼接的：`<标签>${变量}<标签>`，而html标签格式，是不包含首尾两个`符号的，且在template模板标签内，对于动态变量的编写，是通过差值表达式，如{{变量}}进行书写的，所以需要去掉模板字符串中首尾两个`符号，然后将${变量}替换为{{变量}}形式，将得到一个html标签的形式的标签；1.3. By compiling the first item configured in the configuration file config.js: the directory where the development code in the project is located, find all parent components that contain the imported target component, and find the reference in the display label template in the parent component The location of the child component, for example: <parent component label><child component A:htmltext=dynamic variable A></child component A></parent component label>, through the props object in the child component, the referenced v- The corresponding incoming variable in the html attribute (ie the htmltext attribute in the example 1.2 above) is reversed to find the variable used when the parent component is passed to the child component (ie the dynamic variable A in the example 1.2 above), because the The variable is originally an html string format, but the way to use the slot slot, you only need to use the html tag format directly, so you need to convert the html string format encoding to the html tag (ie the first reference tag) form . The operation steps are as follows: Since the html string is spliced with variables in a similar way as follows: `<tag>${variable}<tag>`, and the html tag format does not contain the first and last two ` symbols, and In the template template tag, dynamic variables are written through differential expressions, such as {{variable}}, so you need to remove the first and last ` symbols in the template string, and then replace ${variable} with {{variable}} form, will get a tag in the form of an html tag;
1.4、由于在1.3中已知引入目标组件的位置，该目标组件的引用标签内，包含这个父组件给目标组件传递v-html变量的动态属性，将该部分内容进行删除(即上面例子中的:htmltext＝动态变量A)，将得到的动态html标签，插入到目标组件标签之中，如<父组件标签><子组件A>动态html标签</子组件A></父组件标签>，动态html标签会在目标组件中，替换掉目标组件的<slot></slot>标签，从而完成代码统一编译。1.4. Since the location of the introduction of the target component is known in 1.3, the reference tag of the target component contains the dynamic attribute of the parent component passing the v-html variable to the target component, and this part of the content is deleted (that is, in the above example. :htmltext=dynamic variable A), insert the obtained dynamic html tag into the target component tag, such as <parent component tag><child component A>dynamic html tag</child component A></parent component tag>, The dynamic html tag will replace the <slot></slot> tag of the target component in the target component, so as to complete the unified compilation of the code.
详细地，参照图6所示，所述利用第二代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括以下步骤S320-S322：In detail, referring to FIG. 6 , the use of the second code compilation mode to perform label replacement and component transfer mode conversion on the to-be-compiled file includes the following steps S320-S322:
S320、在每个所述关键词标签内增加一个闭合标签，并在所述闭合标签内增加标志位；S320, adding a closed tag in each of the keyword tags, and adding a flag in the closed tag;
S321、查找所述待编译文件中所有目标组件的父组件，识别出所述父组件中用于引用所述目标组件的第二引用变量；S321, look up the parent components of all target components in the to-be-compiled file, and identify the second reference variable used to refer to the target component in the parent component;
S322、将所述第二引用变量编码转化为标签格式，得到第二引用标签，并根据所述标志位将所述第二引用标签插入至增加的闭合标签内。S322: Convert the encoding of the second reference variable into a label format to obtain a second reference label, and insert the second reference label into the added closed label according to the flag bit.
本发明一可选实施例中，对于多个v-html标签的场景，和上述1.1至1.4类似，只需在新增的slot闭合标签内进行标志位操作，例如，在新增的slot标签内，增加name属性，该属性的值按照v-html在子组件的出现顺序，通过26个字母顺序进行定义，如插槽-A、插槽-B、...。对于<slot name＝插槽-A></slot>...<slot name＝插槽-B></slot>，中间的三个点表示子组件中的固定内容，前后两个slot为动态传入的内容。并且对于得到的动态html标签，先用一个template标签将这个动态标签进行包裹起来，给该template标签增加一个名称为v-slot属性，该属性值为name的值。例如<子组件A><template v-slot＝插槽-A>动态html标签</template><template v-slot＝插槽-B>动态html标签</template></子组件A>。这样传入对于传入不同的A、B两个动态html片段，就可以与不同目标组件中对应的slot标签上的name属性一一对应起来，便于定向替换slot标签中的内容。In an optional embodiment of the present invention, for the scenario of multiple v-html tags, similar to the above 1.1 to 1.4, only the flag bit operation needs to be performed in the newly added slot closing tag, for example, in the newly added slot tag , add the name attribute, the value of this attribute is defined in the order of v-html in the subcomponents, through 26 letters, such as slot-A, slot-B, .... For <slot name=slot-A></slot>...<slot name=slot-B></slot>, the three dots in the middle represent the fixed content in the sub-component, and the two front and rear slots are dynamic incoming content. And for the obtained dynamic html tag, first wrap the dynamic tag with a template tag, add a v-slot attribute to the template tag, and the attribute value is the value of name. For example, <subcomponent A><template v-slot=slot-A>dynamic html tag</template><template v-slot=slot-B>dynamic html tag</template></subcomponent A>. In this way, the incoming two dynamic html fragments of A and B can be in a one-to-one correspondence with the name attribute on the corresponding slot tag in different target components, which is convenient for directional replacement of the content in the slot tag.
本发明通过直接在前端项目中构建代码编译项目，并通过识别出前端项目中的展示内容，根据展示内容的变量传递方式确定待编译文件，并根据识别到的标签数量选择不同的代码编译方式对待编译文件进行标签替换及组件传递方式转换，无需事后人工进行组件编译，大大提高了代码统一编译的效率。同时，直接根据识别到的标签数量选择不同的代码编译方式，可以将不同目标组件的展示代码进行统一，提高了开发的可维护性。因此本发明提出的代码统一编译方法，可以解决展示代码统一编译困难的问题。The present invention directly builds the code compilation project in the front-end project, identifies the display content in the front-end project, determines the file to be compiled according to the variable transmission method of the display content, and selects different code compilation methods according to the number of identified tags. Compiled files are used for label replacement and component transfer mode conversion, which eliminates the need for manual component compilation afterwards, which greatly improves the efficiency of unified code compilation. At the same time, by directly selecting different code compilation methods according to the number of identified tags, the display codes of different target components can be unified, which improves the maintainability of development. Therefore, the unified code compilation method proposed by the present invention can solve the problem that the display code is difficult to be compiled uniformly.
如图7所示，是本发明一实施例提供的代码统一编译装置的功能模块图。As shown in FIG. 7 , it is a functional block diagram of an apparatus for unified code compilation provided by an embodiment of the present invention.
本发明所述代码统一编译装置100可以安装于电子设备中。根据实现的功能，所述代码统一编译装置100可以包括代码编译项目构建模块101、文件查找模块102及代码统一编译模块103。本发明所述模块也可以称之为单元，是指一种能够被电子设备处理器所执行，并且能够完成固定功能的一系列计算机程序段，其存储在电子设备的存储器中。The unified
在本实施例中，关于各模块/单元的功能如下：In this embodiment, the functions of each module/unit are as follows:
所述代码编译项目构建模块101，用于构建前端项目的代码编译项目，根据所述代码编译项目从所述前端项目中识别出展示内容；The code compilation
所述文件查找模块102，用于根据所述展示内容的变量传递方式确定待编译文件；The
所述代码统一编译模块103，用于识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，得到代码统一的前端项目。The unified
详细地，所述代码统一编译装置100各模块的具体实施方式如下：In detail, the specific implementation manner of each module of the unified
步骤一、构建前端项目的代码编译项目，根据所述代码编译项目从所述前端项目中识别出展示内容。Step 1: Build a code compilation project of the front-end project, and identify the display content from the front-end project according to the code compilation project.
本发明实施例中，所述前端项目是指通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互的项目，例如，XXapp开发项目、XX公司官网开发项目、XX产品页面开发项目、XX小程序开发项目等。In the embodiment of the present invention, the front-end project refers to a project that realizes the user interface interaction of Internet products through HTML, CSS, JavaScript and various derived technologies, frameworks, and solutions, for example, XXapp development project, XX company Official website development project, XX product page development project, XX applet development project, etc.
详细地，所述构建前端项目的代码编译项目，包括：In detail, the code compilation project for building the front-end project includes:
定位所述前端项目的根目录，在所述根目录中添加代码统一编译工具；Locate the root directory of the front-end project, and add a unified code compilation tool in the root directory;
在所述代码统一编译工具中设置编译配置文件，并在添加完编译配置文件的根目录中添加代码统一编译命令，执行所述代码统一编译命令，得到所述代码编译项目。A compilation configuration file is set in the unified code compilation tool, and a unified code compilation command is added to the root directory where the compilation configuration file is added, and the unified code compilation command is executed to obtain the code compilation project.
本发明实施例中，所述代码编译项目用来在前端页面中执行下述步骤二至步骤三的步骤来将代码进行统一编译。例如，在命令行(mac系统为终端)，定位当前前端项目根目录，执行命令：npmi html-prop-transform-slot-D，则可以添加代码统一编译工具到当前框架项目中，设置编译配置文件config.js，在编译配置文件中添加代码统一编译命令：npmrun transform-slot并执行，得到代码编译项目，其中，编译配置文件中的配置内容包括：项目中开发代码所在目录等。In the embodiment of the present invention, the code compilation project is used to execute the following steps 2 to 3 on the front-end page to uniformly compile the code. For example, on the command line (the mac system is the terminal), locate the root directory of the current front-end project, and execute the command: npmi html-prop-transform-slot-D, you can add a unified code compilation tool to the current framework project and set the compilation configuration file config.js, add the unified code compilation command in the compilation configuration file: npmrun transform-slot and execute it to get the code compilation project, where the configuration content in the compilation configuration file includes: the directory where the development code in the project is located, etc.
本发明一可选实施例中，通过代码编译项目可以将前端项目中所有组件之间通过html文本进行传递的方式，统一编译为slot插槽语法。In an optional embodiment of the present invention, all components in the front-end project can be uniformly compiled into slot syntax by means of html text transmission between all components in the front-end project through the code compilation project.
详细地，所述根据所述代码编译项目从所述前端项目中识别出展示内容，包括：In detail, identifying the display content from the front-end project according to the code compilation project includes:
根据所述代码编译项目遍历所述前端项目的项目目录；Traverse the project directory of the front-end project according to the code compilation project;
从遍历到的项目目录中查找出带有目标后缀的文件作为目标组件；Find the file with the target suffix as the target component from the traversed project directory;
确定所述目标组件中展示标签内的所有代码作为所述展示内容。All codes in the display tag in the target component are determined as the display content.
本发明一可选实施例中，根据代码编译项目中编译配置文件config.js中所配置的配置项：项目中开发代码所在目录，遍历前端项目的项目目录，查找到所有的.vue结尾的文件作为目标组件，由于在vue组件中，所有与页面展示相关的代码，都是编写在template标签(即展示标签)内的，所以查找在当前vue组件中template标签内的所有代码作为展示内容。In an optional embodiment of the present invention, the configuration items configured in the compilation configuration file config.js are compiled according to the code: the directory where the development code is located in the project, the project directory of the front-end project is traversed, and all files ending with .vue are found. As the target component, because in the vue component, all the code related to page display is written in the template tag (ie display tag), so look for all the code in the template tag in the current vue component as the display content.
步骤二、根据所述展示内容的变量传递方式确定待编译文件。Step 2: Determine the to-be-compiled file according to the variable transmission method of the displayed content.
本发明实施例中，变量传递方式是指组件间方法、变量等的互相传递，例如传递展示动态内容时，父级组件通过一个动态变量传递到子组件，子组件获取动态变量后使用即可。In this embodiment of the present invention, the variable transfer mode refers to the mutual transfer of methods, variables, etc. between components. For example, when transferring and displaying dynamic content, the parent component passes a dynamic variable to the child component, and the child component obtains the dynamic variable and then uses it.
具体地，所述根据所述展示内容的变量传递方式确定待编译文件，包括：Specifically, determining the to-be-compiled file according to the variable transmission method of the display content includes:
根据预设的关键词标签及所述关键词标签对应值的位置识别所述目标组件的变量传递方式；Identify the variable transmission mode of the target component according to the preset keyword tag and the position of the corresponding value of the keyword tag;
确定变量传递方式为父级传递的目标组件为所述待编译文件。It is determined that the target component whose variable transmission mode is parent-level transmission is the to-be-compiled file.
本发明一可选实施例中，由于本发明主要对动态展示内容的代码进行编译，而动态变化的部分，主要是靠外部父级的组件传递进来，因此需要确定变量传递方式为父级传递的目标组件为待编译文件。In an optional embodiment of the present invention, since the present invention mainly compiles the code of the dynamic display content, and the dynamically changing part is mainly transmitted by the external parent component, it is necessary to determine the variable transmission method as the parent transmission. The target component is the file to be compiled.
本发明实施例中，例如，首先查找在当前vue组件的template标签中，是否包含使用关键字标签v-html，如果没有，则说明该组件不存在使用父级动态传入html字符串展示内容的场景，如果有，则取出v-html属性的对应值，判断其取值是否来自于与父级组件传递，判断方式为，该变量是否包含在vue组件中props属性内部，如果在其内部，则说明是来自于父级组件的传递变量。如果成立，则说明是通过父级传递的方式，确定当前目标组件为所述待编译文件，如果不成立，则说明该v-html使用的场景，并不是通过父级传递的方式实现。In the embodiment of the present invention, for example, it is first checked whether the template tag of the current vue component contains the use of the keyword tag v-html, if not, it means that the component does not have the ability to use the parent to dynamically pass in the html string to display the content In the scenario, if there is, take out the corresponding value of the v-html attribute, and judge whether its value comes from the transmission with the parent component. The way to judge is whether the variable is included in the props attribute of the vue component. If it is inside, then The description is a passed variable from the parent component. If it is true, it means that the current target component is determined as the to-be-compiled file by means of parent transmission. If it is not true, it means that the v-html usage scenario is not implemented by parent transmission.
步骤三、识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，得到代码统一的前端项目。Step 3: Identify the number of keyword tags in the to-be-compiled file, select different code compilation methods to perform tag replacement and component transfer mode conversion on the to-be-compiled file according to the number of identified tags, and obtain a front-end project with unified code.
本发明实施例中，由于所述待编译文件中在进行内容展示时，可能会使用多个关键词标签，例如，一个vue组件中，同时存在1个以上的v-html标签的场景，且v-html属性对应的变量，包含在vue组件中props属性内部，说明当前vue组件使用超过了1个以上的父级动态传入html字符串展示内容。In the embodiment of the present invention, because the to-be-compiled file may use multiple keyword tags when displaying content, for example, in a vue component, there are more than one v-html tags at the same time, and v The variable corresponding to the -html attribute is included in the props attribute of the vue component, indicating that the current vue component uses more than one parent to dynamically pass in the html string to display the content.
详细地，所述识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括：In detail, identifying the number of keyword tags in the to-be-compiled file, and selecting different code compilation methods according to the number of identified tags to perform tag replacement and component transfer mode conversion on the to-be-compiled file, including:
判断所述待编译文件中关键词标签的数量是否单一；Determine whether the number of keyword tags in the to-be-compiled file is single;
若所述待编译文件中关键词标签的数量单一，则利用第一代码编译方式对所述待编译文件进行标签替换及组件传递方式转换；If the number of keyword tags in the to-be-compiled file is single, use the first code compilation method to perform tag replacement and component transfer mode conversion on the to-be-compiled file;
若所述待编译文件中关键词标签的数量不单一，则利用第二代码编译方式对所述待编译文件进行标签替换及组件传递方式转换。If the number of keyword tags in the to-be-compiled file is not single, the second code compilation mode is used to perform tag replacement and component transfer mode conversion on the to-be-compiled file.
本发明实施例中，由于不同数据传递方式中需要转换的变量不同，因此通过细化目标组件中的不同数据传递方式，可以提高代码统一编译的准确率及效率。In the embodiment of the present invention, since the variables that need to be converted are different in different data transfer modes, the accuracy and efficiency of unified code compilation can be improved by refining different data transfer modes in the target component.
本发明一可选实施例中，在vue组件中，由于单v-html标签及多个v-html标签的代码编译方式不同，因此需要通过关键词标签的数量来确定不同的代码编译方式，从而提高编译的准确率。In an optional embodiment of the present invention, in the vue component, since the code compilation methods of a single v-html tag and multiple v-html tags are different, the different code compilation methods need to be determined by the number of keyword tags, so as to Improve compilation accuracy.
进一步地，所述利用第一代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括：Further, the use of the first code compilation mode to perform label replacement and component transfer mode conversion on the to-be-compiled file includes:
在所述关键词标签内增加一个闭合标签，并在所述闭合标签内设置默认值；Add a closed tag in the keyword tag, and set a default value in the closed tag;
查找所述待编译文件中所有目标组件的父组件；Find the parent components of all target components in the to-be-compiled file;
识别出所述父组件中用于引用所述目标组件的第一引用变量；Identifying the first reference variable in the parent component for referencing the target component;
将所述第一引用变量编码转化为标签格式，得到第一引用标签，并将所述第一引用标签插入至设置完默认值的闭合标签内。Convert the encoding of the first reference variable into a label format to obtain a first reference label, and insert the first reference label into the closed label with the default value set.
本发明一可选实施例中，所述闭合标签可以为slot闭合标签，对于单v-html标签的场景，通过下述步骤进行代码编译：In an optional embodiment of the present invention, the closed tag may be a slot closed tag, and for the scenario of a single v-html tag, code compilation is performed through the following steps:
1.1、在当前目标组件所包含v-html属性的标签内，增加一个slot闭合标签。例如：<标签Av-html＝动态变量>默认值XXX</标签A>，则编译为<标签A v-html＝动态变量><slot></slot></标签A>，同时将v-html整个属性连同属性值一并删除。该slot闭合标签存在的情况下，当父组件有传入动态标签的时候，就会自动替换掉该标签，该部分也就属于当前目标组件中动态加载展示内容的部分；1.1. Add a slot closing tag to the tag of the v-html attribute contained in the current target component. For example: <tag Av-html=dynamic variable>default value XXX</tag A>, then it will be compiled as <tag A v-html=dynamic variable><slot></slot></tag A>, and v- The entire html attribute is deleted along with the attribute value. When the slot closing tag exists, when the parent component has an incoming dynamic tag, the tag will be automatically replaced, and this part also belongs to the part of the current target component that dynamically loads the display content;
1.2、设置slot闭合标签内的默认值，在原来所包含v-html属性的标签内，如1.1所示，包含默认值XXX，该默认值的作用是，当父组件没有传入动态变量的情况下，依然有默认的内容可以用于展示。对于使用slot闭合标签的情况下，该默认展示内容需要从原来的标签中提取出俩，然后再插入到现有已经生成的slot标签内，如<标签A v-html＝动态变量><slot>默认值XXX</slot></标签A>；1.2. Set the default value in the slot closing tag. In the tag that originally contained the v-html attribute, as shown in 1.1, the default value XXX is included. The function of the default value is when the parent component does not pass in dynamic variables. Below, there are still default content that can be used for display. In the case of using the slot closed tag, the default display content needs to be extracted from the original tag, and then inserted into the existing generated slot tag, such as <tag A v-html=dynamic variable><slot> Default XXX</slot></label A>;
1.3、通过编译配置文件config.js中所配置的第一项：项目中开发代码所在的目录，查找到所有包含有引入目标组件的父组件，在父组件中的展示标签template内，查找到引用该子组件的位置，例如：<父组件标签><子组件A:htmltext＝动态变量A></子组件A></父组件标签>，通过子组件中props对象中，所引用的v-html属性中对应的传入变量(即上面1.2例子中的htmltext属性)，反向查找到父组件给子组件传递时候，所使用到该变量(即上面1.2例子中的动态变量A)，由于该变量原来是一个html的字符串格式，但是使用slot插槽的方式，只需要直接使用html标签的格式即可，所以需要将html字符串格式编码转换为html标签(即第一引用标签)的形式。操作步骤如下：由于html字符串内，是通过类似于如下方式进行变量拼接的：`<标签>${变量}<标签>`，而html标签格式，是不包含首尾两个`符号的，且在template模板标签内，对于动态变量的编写，是通过差值表达式，如{{变量}}进行书写的，所以需要去掉模板字符串中首尾两个`符号，然后将${变量}替换为{{变量}}形式，将得到一个html标签的形式的标签；1.3. By compiling the first item configured in the configuration file config.js: the directory where the development code in the project is located, find all parent components that contain the imported target component, and find the reference in the display label template in the parent component The location of the child component, for example: <parent component label><child component A:htmltext=dynamic variable A></child component A></parent component label>, through the props object in the child component, the referenced v- The corresponding incoming variable in the html attribute (ie the htmltext attribute in the example 1.2 above) is reversed to find the variable used when the parent component is passed to the child component (ie the dynamic variable A in the example 1.2 above), because the The variable is originally an html string format, but the way to use the slot slot, you only need to use the html tag format directly, so you need to convert the html string format encoding to the html tag (ie the first reference tag) form . The operation steps are as follows: Since the html string is spliced with variables in a similar way as follows: `<tag>${variable}<tag>`, and the html tag format does not contain the first and last two ` symbols, and In the template template tag, dynamic variables are written through differential expressions, such as {{variable}}, so you need to remove the first and last ` symbols in the template string, and then replace ${variable} with {{variable}} form, will get a tag in the form of an html tag;
1.4、由于在1.3中已知引入目标组件的位置，该目标组件的引用标签内，包含这个父组件给目标组件传递v-html变量的动态属性，将该部分内容进行删除(即上面例子中的:htmltext＝动态变量A)，将得到的动态html标签，插入到目标组件标签之中，如<父组件标签><子组件A>动态html标签</子组件A></父组件标签>，动态html标签会在目标组件中，替换掉目标组件的<slot></slot>标签，从而完成代码统一编译。1.4. Since the location of the introduction of the target component is known in 1.3, the reference tag of the target component contains the dynamic attribute of the parent component passing the v-html variable to the target component, and this part of the content is deleted (that is, in the above example. :htmltext=dynamic variable A), insert the obtained dynamic html tag into the target component tag, such as <parent component tag><child component A>dynamic html tag</child component A></parent component tag>, The dynamic html tag will replace the <slot></slot> tag of the target component in the target component, so as to complete the unified compilation of the code.
详细地，所述利用第二代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，包括：In detail, the use of the second code compilation mode to perform label replacement and component transfer mode conversion on the to-be-compiled file includes:
在每个所述关键词标签内增加一个闭合标签，并在所述闭合标签内增加标志位；A closed tag is added in each of the keyword tags, and a flag is added in the closed tag;
查找所述待编译文件中所有目标组件的父组件，识别出所述父组件中用于引用所述目标组件的第二引用变量；Find the parent components of all target components in the to-be-compiled file, and identify the second reference variable used to refer to the target component in the parent component;
将所述第二引用变量编码转化为标签格式，得到第二引用标签，并根据所述标志位将所述第二引用标签插入至增加的闭合标签内。Converting the encoding of the second reference variable into a label format to obtain a second reference label, and inserting the second reference label into the added closed label according to the flag bit.
本发明一可选实施例中，对于多个v-html标签的场景，和上述1.1至1.4类似，只需在新增的slot闭合标签内进行标志位操作，例如，在新增的slot标签内，增加name属性，该属性的值按照v-html在子组件的出现顺序，通过26个字母顺序进行定义，如插槽-A、插槽-B、...。对于<slot name＝插槽-A></slot>...<slot name＝插槽-B></slot>，中间的三个点表示子组件中的固定内容，前后两个slot为动态传入的内容。并且对于得到的动态html标签，先用一个template标签将这个动态标签进行包裹起来，给该template标签增加一个名称为v-slot属性，该属性值为name的值。例如<子组件A><template v-slot＝插槽-A>动态html标签</template><template v-slot＝插槽-B>动态html标签</template></子组件A>。这样传入对于传入不同的A、B两个动态html片段，就可以与不同目标组件中对应的slot标签上的name属性一一对应起来，便于定向替换slot标签中的内容。In an optional embodiment of the present invention, for the scenario of multiple v-html tags, similar to the above 1.1 to 1.4, only the flag bit operation needs to be performed in the newly added slot closing tag, for example, in the newly added slot tag , add the name attribute, the value of this attribute is defined in the order of v-html in the subcomponents, through 26 letters, such as slot-A, slot-B, .... For <slot name=slot-A></slot>...<slot name=slot-B></slot>, the three dots in the middle represent the fixed content in the sub-component, and the two front and rear slots are dynamic incoming content. And for the obtained dynamic html tag, first wrap the dynamic tag with a template tag, add a v-slot attribute to the template tag, and the attribute value is the value of name. For example, <subcomponent A><template v-slot=slot-A>dynamic html tag</template><template v-slot=slot-B>dynamic html tag</template></subcomponent A>. In this way, the incoming two dynamic html fragments of A and B can be in a one-to-one correspondence with the name attribute on the corresponding slot tag in different target components, which is convenient for directional replacement of the content in the slot tag.
本发明通过直接在前端项目中构建代码编译项目，并通过识别出前端项目中的展示内容，根据展示内容的变量传递方式确定待编译文件，并根据识别到的标签数量选择不同的代码编译方式对待编译文件进行标签替换及组件传递方式转换，无需事后人工进行组件编译，大大提高了代码统一编译的效率。同时，直接根据识别到的标签数量选择不同的代码编译方式，可以将不同目标组件的展示代码进行统一，提高了开发的可维护性。因此本发明提出的代码统一编译装置，可以解决展示代码统一编译困难的问题。The present invention directly builds the code compilation project in the front-end project, identifies the display content in the front-end project, determines the file to be compiled according to the variable transmission method of the display content, and selects different code compilation methods according to the number of identified tags. Compiled files are used for label replacement and component transfer mode conversion, which eliminates the need for manual component compilation afterwards, which greatly improves the efficiency of unified code compilation. At the same time, by directly selecting different code compilation methods according to the number of identified tags, the display codes of different target components can be unified, which improves the maintainability of development. Therefore, the unified code compilation device proposed by the present invention can solve the problem of difficulty in unified compilation of display codes.
如图8所示，是本发明一实施例提供的实现代码统一编译方法的电子设备的结构示意图。As shown in FIG. 8 , it is a schematic structural diagram of an electronic device for implementing a method for unified code compilation provided by an embodiment of the present invention.
所述电子设备可以包括处理器10、存储器11、通信接口12和总线13，还可以包括存储在所述存储器11中并可在所述处理器10上运行的计算机程序，如代码统一编译程序。The electronic device may include a
其中，所述存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、移动硬盘、多媒体卡、卡型存储器(例如：SD或DX存储器等)、磁性存储器、磁盘、光盘等。所述存储器11在一些实施例中可以是电子设备的内部存储单元，例如该电子设备的移动硬盘。所述存储器11在另一些实施例中也可以是电子设备的外部存储设备，例如电子设备上配备的插接式移动硬盘、智能存储卡(Smart Media Card，SMC)、安全数字(SecureDigital，SD)卡、闪存卡(Flash Card)等。进一步地，所述存储器11还可以既包括电子设备的内部存储单元也包括外部存储设备。所述存储器11不仅可以用于存储安装于电子设备的应用软件及各类数据，例如代码统一编译程序的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。Wherein, the
所述处理器10在一些实施例中可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(Central Processing unit，CPU)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。所述处理器10是所述电子设备的控制核心(Control Unit)，利用各种接口和线路连接整个电子设备的各个部件，通过运行或执行存储在所述存储器11内的程序或者模块(例如代码统一编译程序等)，以及调用存储在所述存储器11内的数据，以执行电子设备的各种功能和处理数据。In some embodiments, the
所述通信接口12用于上述电子设备与其他设备之间的通信，包括网络接口和用户接口。可选地，所述网络接口可以包括有线接口和/或无线接口(如WI-FI接口、蓝牙接口等)，通常用于在该电子设备与其他电子设备之间建立通信连接。所述用户接口可以是显示器(Display)、输入单元(比如键盘(Keyboard))，可选地，用户接口还可以是标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在电子设备中处理的信息以及用于显示可视化的用户界面。The
所述总线13可以是外设部件互连标准(peripheral component interconnect，简称PCI)总线或扩展工业标准结构(extended industry standard architecture，简称EISA)总线等。该总线13可以分为地址总线、数据总线、控制总线等。所述总线13被设置为实现所述存储器11以及至少一个处理器10等之间的连接通信。The
图8仅示出了具有部件的电子设备，本领域技术人员可以理解的是，图8示出的结构并不构成对所述电子设备的限定，可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。FIG. 8 only shows an electronic device with components. Those skilled in the art can understand that the structure shown in FIG. 8 does not constitute a limitation on the electronic device, and may include fewer or more components than those shown in the drawings. , or a combination of certain components, or a different arrangement of components.
例如，尽管未示出，所述电子设备还可以包括给各个部件供电的电源(比如电池)，优选地，电源可以通过电源管理装置与所述至少一个处理器10逻辑相连，从而通过电源管理装置实现充电管理、放电管理、以及功耗管理等功能。电源还可以包括一个或一个以上的直流或交流电源、再充电装置、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。所述电子设备还可以包括多种传感器、蓝牙模块、Wi-Fi模块等，在此不再赘述。For example, although not shown, the electronic device may also include a power source (such as a battery) for powering the various components, preferably, the power source may be logically connected to the at least one
进一步地，所述电子设备还可以包括网络接口，可选地，所述网络接口可以包括有线接口和/或无线接口(如WI-FI接口、蓝牙接口等)，通常用于在该电子设备与其他电子设备之间建立通信连接。Further, the electronic device may also include a network interface, optionally, the network interface may include a wired interface and/or a wireless interface (such as a WI-FI interface, a Bluetooth interface, etc.) Establish a communication connection between other electronic devices.
可选地，该电子设备还可以包括用户接口，用户接口可以是显示器(Display)、输入单元(比如键盘(Keyboard))，可选地，用户接口还可以是标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在电子设备中处理的信息以及用于显示可视化的用户界面。Optionally, the electronic device may further include a user interface, and the user interface may be a display (Display), an input unit (such as a keyboard (Keyboard)), optionally, the user interface may also be a standard wired interface or a wireless interface. Optionally, in some embodiments, the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode, organic light-emitting diode) touch device, and the like. The display may also be appropriately called a display screen or a display unit, which is used for displaying information processed in the electronic device and for displaying a visual user interface.
应该了解，所述实施例仅为说明之用，在专利申请范围上并不受此结构的限制。It should be understood that the embodiments are only used for illustration, and are not limited by this structure in the scope of the patent application.
所述电子设备中的所述存储器11存储的代码统一编译程序是多个指令的组合，在所述处理器10中运行时，可以实现：The code unified compiler program stored in the
构建前端项目的代码编译项目，根据所述代码编译项目从所述前端项目中识别出展示内容；constructing a code compilation project of the front-end project, and identifying the display content from the front-end project according to the code compilation project;
根据所述展示内容的变量传递方式确定待编译文件；Determine the to-be-compiled file according to the variable transmission method of the display content;
识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，得到代码统一的前端项目。Identify the number of keyword tags in the to-be-compiled file, select different code compilation methods to perform tag replacement and component transfer mode conversion on the to-be-compiled file according to the number of identified tags, and obtain a front-end project with unified code.
具体地，所述处理器10对上述指令的具体实现方法可参考附图对应实施例中相关步骤的描述，在此不赘述。Specifically, for the specific implementation method of the above-mentioned instruction by the
进一步地，所述电子设备集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读存储介质中。所述计算机可读存储介质可以是易失性的，也可以是非易失性的。例如，所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)。Further, if the modules/units integrated in the electronic device are implemented in the form of software functional units and sold or used as independent products, they may be stored in a computer-readable storage medium. The computer-readable storage medium may be volatile or non-volatile. For example, the computer-readable medium may include: any entity or device capable of carrying the computer program code, a recording medium, a USB flash drive, a removable hard disk, a magnetic disk, an optical disc, a computer memory, a read-only memory (ROM, Read-Only). Memory).
本发明还提供一种计算机可读存储介质，所述可读存储介质存储有计算机程序，所述计算机程序在被电子设备的处理器所执行时，可以实现：The present invention also provides a computer-readable storage medium, where the readable storage medium stores a computer program, and when executed by a processor of an electronic device, the computer program can realize:
构建前端项目的代码编译项目，根据所述代码编译项目从所述前端项目中识别出展示内容；constructing a code compilation project of the front-end project, and identifying the display content from the front-end project according to the code compilation project;
根据所述展示内容的变量传递方式确定待编译文件；Determine the to-be-compiled file according to the variable transmission method of the display content;
识别所述待编译文件中关键词标签的数量，根据识别到的标签数量选择不同的代码编译方式对所述待编译文件进行标签替换及组件传递方式转换，得到代码统一的前端项目。Identify the number of keyword tags in the to-be-compiled file, select different code compilation methods to perform tag replacement and component transfer mode conversion on the to-be-compiled file according to the number of identified tags, and obtain a front-end project with unified code.
在本发明所提供的几个实施例中，应该理解到，所揭露的设备，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。In the several embodiments provided by the present invention, it should be understood that the disclosed apparatus, apparatus and method may be implemented in other manners. For example, the apparatus embodiments described above are only illustrative. For example, the division of the modules is only a logical function division, and there may be other division manners in actual implementation.
所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。The modules described as separate components may or may not be physically separated, and the components shown as modules may or may not be physical units, that is, may be located in one place, or may be distributed to multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution in this embodiment.
另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。In addition, each functional module in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically alone, or two or more units may be integrated into one unit. The above-mentioned integrated units can be implemented in the form of hardware, or can be implemented in the form of hardware plus software function modules.
对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。It will be apparent to those skilled in the art that the present invention is not limited to the details of the above-described exemplary embodiments, but that the present invention may be embodied in other specific forms without departing from the spirit or essential characteristics of the invention.
因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附关联图标记视为限制所涉及的权利要求。Therefore, the embodiments are to be regarded in all respects as illustrative and not restrictive, and the scope of the invention is to be defined by the appended claims rather than the foregoing description, which are therefore intended to fall within the scope of the claims. All changes within the meaning and range of the equivalents of , are included in the present invention. Any reference signs in the claims shall not be construed as limiting the involved claim.
本发明实施例可以基于人工智能技术对相关的数据进行获取和处理。其中，人工智能(Artificial Intelligence，AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。The embodiments of the present invention can acquire and process related data based on artificial intelligence technology. Among them, artificial intelligence (AI) is a theory, method, technology and application system that uses digital computers or machines controlled by digital computers to simulate, extend and expand human intelligence, perceive the environment, acquire knowledge and use knowledge to obtain the best results. .
人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、机器人技术、生物识别技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。The basic technologies of artificial intelligence generally include technologies such as sensors, special artificial intelligence chips, cloud computing, distributed storage, big data processing technology, operation/interaction systems, and mechatronics. Artificial intelligence software technology mainly includes computer vision technology, robotics technology, biometrics technology, speech processing technology, natural language processing technology, and machine learning/deep learning.
本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。The blockchain referred to in the present invention is a new application mode of computer technologies such as distributed data storage, point-to-point transmission, consensus mechanism, and encryption algorithm. Blockchain, essentially a decentralized database, is a series of data blocks associated with cryptographic methods. Each data block contains a batch of network transaction information to verify its Validity of information (anti-counterfeiting) and generation of the next block. The blockchain can include the underlying platform of the blockchain, the platform product service layer, and the application service layer.
此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。系统权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第二等词语用来表示名称，而并不表示任何特定的顺序。Furthermore, it is clear that the word "comprising" does not exclude other units or steps and the singular does not exclude the plural. Several units or means recited in the system claims can also be realized by one unit or means by means of software or hardware. Second-class terms are used to denote names and do not denote any particular order.
最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and not to limit them. Although the present invention has been described in detail with reference to the preferred embodiments, those of ordinary skill in the art should understand that the technical solutions of the present invention can be Modifications or equivalent substitutions can be made without departing from the spirit and scope of the technical solutions of the present invention.
Claims (10)
Translated fromChinesePriority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210446931.9ACN114860252A (en) | 2022-04-26 | 2022-04-26 | Code unified compiling method and device, electronic equipment and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210446931.9ACN114860252A (en) | 2022-04-26 | 2022-04-26 | Code unified compiling method and device, electronic equipment and readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114860252Atrue CN114860252A (en) | 2022-08-05 |
Family
ID=82632762
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210446931.9APendingCN114860252A (en) | 2022-04-26 | 2022-04-26 | Code unified compiling method and device, electronic equipment and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114860252A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115826968A (en)* | 2022-11-15 | 2023-03-21 | 城云科技（中国）有限公司 | Method, device and application of dynamically compiling cross-platform components based on VUE |
| CN116302250A (en)* | 2023-02-10 | 2023-06-23 | 中银金融科技有限公司 | Interface multiplexing method, device, electronic equipment and storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110265061A1 (en)* | 2010-04-27 | 2011-10-27 | Verizon Patent And Licensing Inc. | Code generation |
| CN109358841A (en)* | 2018-08-15 | 2019-02-19 | 中国平安人寿保险股份有限公司 | Web application develops Compilation Method, device and storage equipment, computer equipment |
| CN111897529A (en)* | 2020-06-08 | 2020-11-06 | 华人运通(江苏)技术有限公司 | Front-end component conversion method, device, equipment and readable storage medium |
- 2022
- 2022-04-26CNCN202210446931.9Apatent/CN114860252A/enactivePending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110265061A1 (en)* | 2010-04-27 | 2011-10-27 | Verizon Patent And Licensing Inc. | Code generation |
| CN109358841A (en)* | 2018-08-15 | 2019-02-19 | 中国平安人寿保险股份有限公司 | Web application develops Compilation Method, device and storage equipment, computer equipment |
| CN111897529A (en)* | 2020-06-08 | 2020-11-06 | 华人运通(江苏)技术有限公司 | Front-end component conversion method, device, equipment and readable storage medium |
Non-Patent Citations (1)
| Title |
|---|
| 堵车了: "1-9.vue指令：v-slot指令与插槽", pages 1 - 4, Retrieved from the Internet <URL:https://blog.csdn.net/weixin_45660035/article/details/111111391>* |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115826968A (en)* | 2022-11-15 | 2023-03-21 | 城云科技（中国）有限公司 | Method, device and application of dynamically compiling cross-platform components based on VUE |
| CN116302250A (en)* | 2023-02-10 | 2023-06-23 | 中银金融科技有限公司 | Interface multiplexing method, device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111813963A (en) | Knowledge graph construction method and device, electronic equipment and storage medium | |
| CN114020256A (en) | Front-end page generation method, apparatus, device and readable storage medium | |
| WO2022100032A1 (en) | System analysis visualization method and apparatus, electronic device, and computer readable storage medium | |
| CN113377661A (en) | Interface testing method and device, electronic equipment and storage medium | |
| CN114398282A (en) | Test script generation method, device, device and storage medium | |
| CN114860252A (en) | Code unified compiling method and device, electronic equipment and readable storage medium | |
| CN113434542B (en) | Data relationship identification method and device, electronic equipment and storage medium | |
| CN112486490B (en) | Front-end code packaging method and device, electronic equipment and storage medium | |
| CN112559337A (en) | Code coverage rate testing method and device, electronic equipment and storage medium | |
| CN113886446A (en) | Job automatic scheduling method, device, electronic device and readable storage medium | |
| CN118573738A (en) | Industrial control protocol configuration method, device, computer equipment and storage medium | |
| CN114489861A (en) | Target component conversion method and device, electronic equipment and readable storage medium | |
| CN114969043A (en) | Label storage method, device, equipment and storage medium | |
| CN113032275A (en) | Method and device for testing field, electronic equipment and storage medium | |
| CN114610340A (en) | Project deployment method, device, equipment and storage medium | |
| CN113687827B (en) | Data list generation method, device and equipment based on widget and storage medium | |
| CN115033489A (en) | Code resource detection method and device, electronic equipment and storage medium | |
| CN115048111A (en) | Code generation method, device, equipment and medium based on metadata | |
| CN114461531A (en) | Platform adaptability testing method, device, equipment and storage medium of test case | |
| CN115146064A (en) | Intention recognition model optimization method, device, equipment and storage medium | |
| CN112686759B (en) | Account reconciliation monitoring method, device, equipment and medium | |
| CN114138243A (en) | Function calling method, device, equipment and storage medium based on development platform | |
| CN113468175A (en) | Data compression method and device, electronic equipment and storage medium | |
| CN111859452A (en) | Page information verification method, apparatus, device, and computer-readable storage medium | |
| CN114860250A (en) | Component disassembly method, device, electronic device and readable storage medium |
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 | ||
| WD01 | Invention patent application deemed withdrawn after publication | ||
| WD01 | Invention patent application deemed withdrawn after publication | Application publication date:20220805 |