A page file conversion method, device, electronic device and storage medium

Abstract

An embodiment of the present application provides a page file conversion method, a page file conversion device, an electronic device and a storage medium. The page file conversion method includes: converting the acquired VUE file corresponding to the page to be processed into a first abstract syntax tree through a first conversion function; obtaining partial content corresponding to each module in the first abstract syntax tree; according to the JavaScript object notation JSON page configuration of the visual editor, converting the partial content corresponding to each module into a JSON page configuration file corresponding to the page to be processed, so that the visual editor processes the page to be processed in the editing preview area of ​​the visual editor based on the JSON page configuration file.

Description

Technical Field

[0001] The present application relates to the field of data processing, and in particular to a page file conversion method, a page file conversion device, an electronic device and a storage medium. Background Art

[0002] With the intelligent development of Internet technology, in order to meet the requirements of automatically converting page designs such as UI drafts into codes and reducing labor costs, visual editors that support dragging existing components to assemble new pages have appeared in related technologies.

[0003] In the related art, see Figure 1 As shown, after the page code file is edited by the visual editor 101, if the business logic of the page is complex, the page code file needs to be developed for secondary pages through the local code integrated development tool (Integrated Development Environment, IDE) 102 such as vscode tool, and then the secondary developed page code file is uploaded to the project warehouse 103 such as GIT warehouse. However, in the related art, if the page code file that has been secondary developed needs to be processed, it cannot be previewed and edited again on the visual editor platform. It can be seen that a new page file conversion method is urgently needed. Summary of the invention

[0004] The embodiments of the present application are intended to provide a page file conversion method, a page file conversion device, an electronic device and a storage medium to solve the problem in the related art that the page code files that have been redeveloped cannot be previewed and edited again on the visual editor platform.

[0005] The technical solution of the embodiment of the present application is implemented as follows:

[0006] In a first aspect, an embodiment of the present application provides a page file conversion method, the method comprising:

[0007] Convert the acquired VUE file corresponding to the page to be processed into a first abstract syntax tree through a first conversion function;

[0008] Obtaining partial content corresponding to each module in the first abstract syntax tree;

[0009] According to the JavaScript object notation JSON page configuration of the visual editor, the partial content corresponding to each module is converted into a JSON page configuration file corresponding to the page to be processed, so that the visual editor processes the page to be processed in the editing preview area of ​​the visual editor based on the JSON page configuration file.

[0010] In a second aspect, an embodiment of the present application provides a page file conversion device, the device comprising:

[0011] A first conversion module, used to convert the acquired VUE file corresponding to the page to be processed into a first abstract syntax tree through a first conversion function;

[0012] An acquisition module, used to acquire partial content corresponding to each module in the first abstract syntax tree;

[0013] The second conversion module is used to convert the partial content corresponding to each module into a JSON page configuration file corresponding to the page to be processed according to the JavaScript object notation JSON page configuration of the visual editor, so that the visual editor can process the page to be processed in the editing preview area of ​​the visual editor based on the JSON page configuration file.

[0014] In a third aspect, an embodiment of the present application provides an electronic device, the electronic device comprising: a processor, a memory, and a communication bus;

[0015] The communication bus is used to realize the communication connection between the processor and the memory;

[0016] The processor is used to execute the page file conversion program stored in the memory to implement the page file conversion method described above.

[0017] In a fourth aspect, an embodiment of the present application provides a storage medium, wherein the storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the page file conversion method described above.

[0018] The following beneficial effects are achieved by applying the embodiments of the present application: the page files developed by the local IDE tool can also be edited again in the visual editor, thereby improving the page development efficiency and saving the page development cost.

[0019] Because the VUE file corresponding to the page to be processed is converted into a first abstract syntax tree through a first conversion function; the partial content corresponding to each module in the first abstract syntax tree is obtained; according to the JavaScript object notation JSON page configuration of the visual editor, the partial content corresponding to each module is converted into a JSON page configuration file corresponding to the page to be processed, so that the visual editor processes the page to be processed in the editing preview area of ​​the visual editor based on the JSON page configuration file; in this way, the problem that the page code files that have been redeveloped in the related art cannot be previewed and edited again on the visual editor platform is solved, and the page files developed by the local IDE tool can also be re-edited in the visual editor, thereby improving the page development efficiency and saving the page development cost. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1 A flow chart of page development provided for related technologies;

[0021] Figure 2 An optional flow chart of page file development provided in the embodiment of the present application;

[0022] Figure 3 A schematic diagram of a page development process provided in an embodiment of the present application;

[0023] Figure 4 An optional flow chart of a page file conversion method provided in an embodiment of the present application;

[0024] Figure 5 An optional flow chart of a page file conversion method provided in an embodiment of the present application;

[0025] Figure 6 A schematic diagram of the structure of an abstract syntax tree provided in an embodiment of the present application;

[0026] Figure 7 An optional flow chart of a page file conversion method provided in an embodiment of the present application;

[0027] Figure 8 An optional flow chart of a page file conversion method provided in an embodiment of the present application;

[0028] Fig. 9 An optional structural diagram of a page file conversion device provided in an embodiment of the present application;

[0029] Fig.10 An optional structural diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0030] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0031] The terms "first", "second", etc. in the specification and claims of this application and the above-mentioned drawings are used to distinguish different objects, rather than to describe a specific order. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but optionally includes steps or units that are not listed, or optionally includes other steps or units inherent to these processes, methods, products or devices.

[0032] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0033] The present application embodiment provides a page file conversion method, which is applied to electronic devices, see Figure 2 As shown, the method comprises the following steps:

[0034] Step 201: convert the acquired VUE file corresponding to the page to be processed into a first abstract syntax tree through a first conversion function.

[0035] The page to be processed is a page in the front-end that needs to be edited.

[0036] Among them, the VUE file is the source code file of the page to be processed in the front-end page built by the VUE component, and the VUE component is the abstract unit that constitutes the page view.

[0037] The first conversion function is a conversion function in a JavaScript compiler. Exemplarily, the first conversion function may be the @vue / compiler-dom function in a babel compiler.

[0038] Among them, the Abstract Syntax Tree (AST) is used to abstractly express the logical relationship of the grammatical structure in the source code. It should be noted that the Abstract Syntax Tree is applicable to all types of programming languages.

[0039] In an embodiment of the present application, the electronic device obtains a source code file corresponding to the page to be processed, namely a VUE file, and converts the VUE file into a first abstract syntax tree through a first conversion function such as the @vue / compiler-dom function in the babel compiler.

[0040] Step 202: Obtain partial content corresponding to each module in the first abstract syntax tree.

[0041] Among them, each module includes: page structure module, page logic module and page style module.

[0042] In an embodiment of the present application, when the electronic device converts the acquired VUE file corresponding to the page to be processed into a first abstract syntax tree through a first conversion function, it traverses each tree node in the first abstract syntax tree and determines the partial content corresponding to each module according to the node label of the tree node.

[0043] In an achievable application scenario, the electronic device obtains a node tag of a tree node in the first abstract syntax tree, and obtains content corresponding to the tag tag being a page structure module template, a page logic module script, and a page style module style.

[0044] Step 203, according to the JavaScript object notation JSON page configuration of the visual editor, convert the partial content corresponding to each module into a JSON page configuration file corresponding to the page to be processed, so that the visual editor processes the page to be processed in the editing preview area of ​​the visual editor based on the JSON page configuration file.

[0045] Among them, the JSON page configuration is the configuration of the page by the visual editor according to its own JSON specification. The JSON page configuration file is a file suitable for the visual editor. Here, JSON is JavaScript Object Notation (JSON), which is an open standard data exchange format based on a subset of JavaScript syntax. JSON is text-based, lightweight, and generally considered easy to read / write.

[0046] In an embodiment of the present application, after the electronic device obtains the partial content corresponding to each module in the first abstract syntax tree, it converts the partial content corresponding to each module into a JSON page configuration file corresponding to the page to be processed according to the JSON page configuration of the visual editor, so that the visual editor processes the page to be processed in the editing preview area of ​​the visual editor based on the JSON page configuration file.

[0047] In one possible application scenario, see Figure 3 As shown, after the page code file is edited by the visual editor 301, when the business logic of the page is complex, the page code file 4 is subjected to secondary page development through a local code integrated development tool (Integrated Development Environment, IDE) 302 such as a vscode tool, and then the secondary developed page code file is uploaded to a project warehouse 303 such as a GIT warehouse. If the VUE file in the page code file uploaded to the GIT warehouse needs to be processed again for the page code file that has been secondary developed, the VUE file can be processed by the page file conversion method provided in the embodiment of the present application, and then it can be previewed and edited again on the visual editor platform; in this way, the page file developed by the local IDE tool can also be secondary edited in the visual editor, which improves the efficiency of page development and saves the cost of page development.

[0048] A page file conversion method provided in an embodiment of the present application converts a VUE file corresponding to a page to be processed into a first abstract syntax tree through a first conversion function; obtains part of the content corresponding to each module in the first abstract syntax tree; and converts part of the content corresponding to each module into a JSON page configuration file corresponding to the page to be processed according to the JavaScript object notation JSON page configuration of the visual editor, so that the visual editor processes the page to be processed in the editing preview area of ​​the visual editor based on the JSON page configuration file; in this way, the problem that the page code files that have been redeveloped in the related art cannot be previewed and edited again on the visual editor platform is solved, and it is achieved that page files developed by local IDE tools can also be re-edited in the visual editor, thereby improving page development efficiency and saving page development costs.

[0049] The present application embodiment provides a page file conversion method, which is applied to electronic devices, see Figure 4 As shown, the method comprises the following steps:

[0050] Step 401: convert the acquired VUE file corresponding to the page to be processed into a first abstract syntax tree through a first conversion function.

[0051] Step 402: Obtain partial content corresponding to each module in the first abstract syntax tree.

[0052] Among them, the partial contents corresponding to each module include: the first partial contents corresponding to the page structure module, the second partial contents corresponding to the page logic module, and the third partial contents corresponding to the page style module.

[0053] Step 403: According to the page structure configuration in the JSON page configuration, the first part of the content corresponding to the page structure module in the first abstract syntax tree is converted to obtain a JSON page structure configuration file.

[0054] In the present application examples, see Figure 5 As shown, step 403 converts the first part of the content corresponding to the page structure module in the first abstract syntax tree according to the page structure configuration in the JSON page configuration to obtain a JSON page structure configuration file, which can be implemented by the following steps:

[0055] Step 4031: Convert the first part of content into a second abstract syntax tree through a second conversion function.

[0056] The first conversion function is a conversion function in a JavaScript compiler, and the second conversion function is different from the first conversion function. Exemplarily, the second conversion function may be a vue-template-compiler function in a babel compiler. The second abstract syntax tree is different from the first abstract syntax tree.

[0057] Here, the second abstract syntax tree is a tree representation of the abstract syntax structure of the source code in the VUE file, which is used to describe the logical relationship between statements in the source code. Each node on the tree represents a structure in the source code, and each tree node corresponds to a source code item. Figure 6 is a schematic diagram of a second abstract syntax tree in an embodiment of the present application, and the corresponding source code in the VUE file is:

[0058]

[0059] In an embodiment of the present application, the electronic device converts the first part of the content corresponding to the page structure module, such as the template module, into a second abstract syntax tree through a second conversion function, such as the vue-template-compiler function in the babel compiler.

[0060] Step 4032: Starting from the root node in the second abstract syntax tree, traverse each node in the second abstract syntax tree in the order of level-order traversal to obtain the first node identifier and the first node attribute of each node.

[0061] The nodes in the second abstract syntax tree include a root node.

[0062] In the embodiment of the present application, after the electronic device converts the first part of the content into the second abstract syntax tree through the second conversion function, it determines the root node in the second abstract syntax tree, takes the root node as the starting point, traverses each node in the second abstract syntax tree in the order of layer-order traversal, and obtains the first node identifier and the first node attribute of each node. Afterwards, the first node identifier and the first node attribute are saved in the JSON object.

[0063] Step 4033: Generate a JSON page structure configuration file based on the first node identifier of each node, the first node attribute of each node and the page structure configuration.

[0064] In the embodiment of the present application, step 4033 generates a JSON page structure configuration file based on the first node identifier of each node, the first node attribute of each node and the page structure configuration. There are two implementation situations:

[0065] In the first case, if a node in the second abstract syntax tree does not have a child node, a JSON page structure configuration file is generated based on the association relationship between the nodes in the second abstract syntax tree, the first node identifier of each node, the first node attribute of each node and the page structure configuration.

[0066] In an embodiment of the present application, the association relationship between the nodes is the logical relationship between the nodes in the second abstract syntax tree. By way of example, the logical relationship between the nodes includes but is not limited to the brother relationship between nodes, the parent-child relationship between nodes, etc.

[0067] In an embodiment of the present application, the electronic device determines whether a node in the second abstract syntax tree has a child node. If it is determined that the node does not have a child node, a JSON page structure configuration file is generated based on the association relationship between the nodes in the second abstract syntax tree, the first node identifier of each node, the first node attribute of each node, and the page structure configuration.

[0068] In the second case, if the node in the second abstract syntax tree has child nodes, all child nodes in the node are traversed according to the recursive traversal algorithm to obtain the second node identifier and the second node attribute of the child node of each node;

[0069] A JSON page structure configuration file is generated based on the association relationship between nodes and child nodes in the second abstract syntax tree, based on the first node identifier and first node attribute of each node, the second node identifier and second node attribute of the child node of each node, and the page structure configuration.

[0070] In an embodiment of the present application, the electronic device determines whether a node in the second abstract syntax tree has a child node. If it is determined that the node has a child node, all child nodes in the node are traversed according to a recursive traversal algorithm to obtain the second node identifier and the second node attribute of the child node of each node. Afterwards, the second node identifier and the second node attribute of the child node are saved in the children array of the JSON object. Furthermore, the electronic device outputs a JSON page structure configuration file of the second abstract node tree corresponding to the first part of the content of the page structure module based on the association relationship between nodes and child nodes in the second abstract syntax tree, based on the first node identifier and the first node attribute of each node, the second node identifier and the second node attribute of the child node of each node, and the page structure configuration. Here, the JSON page structure configuration file includes the root node and branch nodes of the second abstract node tree, and the description information of each node includes the first node identifier, the first node attribute and the description information of the child node.

[0071] In an achievable application scenario, if the source code in the VUE file is the code provided above, the electronic device first converts the first part of the content corresponding to the template module into a second abstract syntax tree through a second conversion function; secondly, starting from the root node in the second abstract syntax tree, traverse each node in the second abstract syntax tree in the order of layer-by-layer traversal, and obtain the first node identifier and first node attribute of each node; secondly, the electronic device determines whether there are child nodes in the node in the second abstract syntax tree. If it is determined that the node has child nodes, traverse all child nodes in the node according to the recursive traversal algorithm, and obtain the second node identifier and second node attribute of the child nodes of each node; finally, based on the first node identifier of each node, the first node attribute of each node and the page structure configuration, generate a JSON page structure configuration file. Here, part of the code in the generated JSON page structure configuration file is as follows:

[0072]

[0073] It should be noted that the above-displayed code is only an example of part of the code in the JSON page structure configuration file, and not all of the code is displayed, so the code structure is incomplete.

[0074] Step 404: According to the page logic configuration in the JSON page configuration, the second part of the content corresponding to the page logic module in the first abstract syntax tree is converted to obtain a JSON page logic configuration file.

[0075] In the present application examples, see Figure 7As shown, step 404 converts the second part of the content corresponding to the page logic module in the first abstract syntax tree according to the page logic configuration in the JSON page configuration to obtain a JSON page logic configuration file, which can be implemented by the following steps:

[0076] Step 4041: Convert the second sub-part content in the second part content based on the object conversion function to obtain a JavaScript object.

[0077] The second sub-part content is the content included in exportdefault in the second part content corresponding to the page logic module such as script.

[0078] The object conversion function is used to convert a string into an object type. Exemplarily, the object conversion function may be an eval function in a JavaScript function.

[0079] In the embodiment of the present application, the electronic device obtains the second sub-part content in the second part content corresponding to the page logic module such as script, converts the second sub-part content based on the object conversion function, and obtains a JavaScript object, referred to as a JS object.

[0080] Step 4042: Get the field contents corresponding to the multiple field identifiers in the JavaScript object.

[0081] In the embodiment of the present application, the multiple fields may include but are not limited to the name of the VUE instance in the VUE file, data, property props, computed property computed, instance method methods and VUE life cycle.

[0082] In the implementation of this application, the electronic device converts the second sub-part content in the second part content based on the object conversion function, and after obtaining the JS object, obtains the field content corresponding to multiple field identifiers in the JS object. That is, the electronic device reads the field content corresponding to the lot identifier by formulating the field identifier, so as to map the field content to the target field identifier having a mapping relationship with the field identifier.

[0083] Step 4043: Determine the target field identifier that has a mapping relationship with the field identifier in the page logic configuration based on the field mapping table.

[0084] In an embodiment of the present application, after the electronic device obtains the field content corresponding to multiple field identifiers in the JavaScript object, it obtains the field mapping table, and determines the target field identifier that has a mapping relationship with the field identifier in the page logic configuration based on the field mapping table. Here, part of the field mapping table is shown in Table 1.

[0085]

[0086] Table 1

[0087] It should be noted that the code corresponding to the target field identifier lifeCycle in the page logic configuration is as follows:

[0088] '_constructor':'created',

[0089] 'getDerivedStateFromProps':'beforeUpdate',

[0090] 'render':",

[0091] 'componentDidMount':'mounted',

[0092] 'componentDidUpdate':'updated',

[0093] 'componentWillUnmount':'beforeDestroy'

[0094] Step 4044: write the field content into the field corresponding to the target field identifier to obtain a JSON page logic configuration file.

[0095] In an embodiment of the present application, the electronic device determines the target field identifier having a mapping relationship with the field identifier in the page logic configuration based on the field mapping table, and then writes the field content into the field corresponding to the target field identifier to determine the field content corresponding to the target field identifier, and then obtains a JSON page logic configuration file.

[0096] Step 405: According to the page style configuration in the JSON page configuration, the third part of the content corresponding to the page style module in the first abstract syntax tree is converted to obtain a JSON page style configuration file.

[0097] In the present application examples, see Figure 8 As shown, step 405 converts the third part of the content corresponding to the page style module in the first abstract syntax tree according to the page style configuration in the JSON page configuration to obtain a JSON page style configuration file, which can be implemented by the following steps:

[0098] Step 4051: Get the class identifier in the third part of the content.

[0099] Step 4052: Obtain the target node corresponding to the class identifier in the JSON page structure configuration file.

[0100] Step 4053: Add the style content in the third part to the page style field in the target node to obtain a JSON page style configuration file.

[0101] In an achievable application scenario, an electronic device obtains a class identifier corresponding to the third part of the content corresponding to a page style module such as a style module, searches for a target node in a generated JSON page structure configuration file whose class or className identifier in the property props field is the same as the class identifier, and incrementally adds the style content in the third part of the content to the page style style field in the target node in the JSON page structure configuration file to obtain a JSON page style configuration file.

[0102] Step 406: Generate a JSON page configuration file based on the JSON page structure configuration file, the JSON page logic configuration file, and the JSON page style configuration file, so that the visual editor processes the page to be processed in the editing preview area of ​​the visual editor based on the JSON page configuration file.

[0103] As can be seen from the above, in the embodiment of the present application, the electronic device first obtains the VUE file corresponding to the page to be processed and converts it into a first abstract syntax tree through a first conversion function; secondly, based on the tag tag, the first part of the content corresponding to the page structure module, the second part of the content corresponding to the page logic module, and the third part of the content corresponding to the page style module in the first abstract syntax tree are determined; again, the first part of the content corresponding to the page structure module, the second part of the content corresponding to the page logic module, and the third part of the content corresponding to the page style module are respectively identified by the corresponding conversion modules and mapped to the JSON file corresponding to the page configuration itself, and finally the source code in the VUE file of the page is converted into a JSON page configuration file; in this way, through a customized conversion method, reverse editing is realized without changing the development process of the original page, that is, secondary editing is performed in the visual editor, thereby improving page development efficiency and saving page development costs.

[0104] It should be noted that, for the description of the same steps and the same contents in this embodiment as those in other embodiments, reference can be made to the description in other embodiments and will not be repeated here.

[0105] The present application embodiment provides a page file conversion device, which can be applied to Figure 2 , 4 In the page file conversion method provided in the embodiments corresponding to 5 and 7 to 8, referring to Fig. 9 As shown, the page file conversion device 9 includes:

[0106] The first conversion module 901 is used to convert the acquired VUE file corresponding to the page to be processed into a first abstract syntax tree through a first conversion function;

[0107] An acquisition module 902 is used to acquire partial content corresponding to each module in the first abstract syntax tree;

[0108] The second conversion module 903 is used to convert the partial content corresponding to each module into a JSON page configuration file corresponding to the page to be processed according to the JavaScript object notation JSON page configuration of the visual editor, so that the visual editor can process the page to be processed in the editing preview area of ​​the visual editor based on the JSON page configuration file.

[0109] In other embodiments of the present application, the second conversion module 903 is also used to convert the first part of the content corresponding to the page structure module in the first abstract syntax tree according to the page structure configuration in the JSON page configuration, to obtain a JSON page structure configuration file; to convert the second part of the content corresponding to the page logic module in the first abstract syntax tree according to the page logic configuration in the JSON page configuration, to obtain a JSON page logic configuration file; to convert the third part of the content corresponding to the page style module in the first abstract syntax tree according to the page style configuration in the JSON page configuration, to obtain a JSON page style configuration file; a generation module is used to generate a JSON page configuration file based on the JSON page structure configuration file, the JSON page logic configuration file and the JSON page style configuration file.

[0110] In other embodiments of the present application, the second conversion module 903 is also used to convert the first part of the content into a second abstract syntax tree through a second conversion function; the acquisition module 902 is also used to take the root node in the second abstract syntax tree as the starting point, traverse each node in the second abstract syntax tree in the order of level-order traversal, and obtain the first node identifier and the first node attribute of each node, and the nodes in the second abstract syntax tree include the root node; the generation module is also used to generate a JSON page structure configuration file based on the first node identifier of each node, the first node attribute of each node and the page structure configuration.

[0111] In other embodiments of the present application, the generation module is also used to generate a JSON page structure configuration file based on the association relationship between the nodes in the second abstract syntax tree, the first node identifier of each node, the first node attribute of each node and the page structure configuration if there is no child node in the node in the second abstract syntax tree.

[0112] In other embodiments of the present application, the acquisition module 902 is also used to, if the node in the second abstract syntax tree has child nodes, traverse all child nodes in the node according to the recursive traversal algorithm to obtain the second node identifier and second node attribute of the child node of each node; the generation module is also used to generate a JSON page structure configuration file based on the association relationship between the nodes and child nodes in the second abstract syntax tree, based on the first node identifier and first node attribute of each node, the second node identifier and second node attribute of the child node of each node, and the page structure configuration.

[0113] In other embodiments of the present application, the second conversion module 903 is also used to convert the second sub-part content in the second part content based on the object conversion function to obtain a JavaScript object; the acquisition module 902 is also used to obtain the field content corresponding to multiple field identifiers in the JavaScript object; the generation module is also used to determine the target field identifier having a mapping relationship with the field identifier in the page logic configuration based on the field mapping table; the field content is written into the field corresponding to the target field identifier to obtain a JSON page logic configuration file.

[0114] In other embodiments of the present application, the acquisition module 902 is also used to obtain the class identifier in the third part of the content; obtain the target node corresponding to the class identifier in the JSON page structure configuration file; the generation module is also used to add the style content in the third part of the content to the page style field in the target node to obtain the JSON page style configuration file.

[0115] The present application provides an electronic device which can be used in Figure 2 , 4 In the page file conversion method provided in the embodiments corresponding to 5 and 7 to 8, referring to Fig.10 As shown, the electronic device ( Fig.10 The electronic device 10 corresponds to Fig. 9 The page file conversion device 9) includes: a processor 1001, a memory 1002 and a communication bus 1003, wherein:

[0116] The communication bus 1003 is used to realize the communication connection between the processor 1001 and the memory 1002;

[0117] The processor 1001 is used to execute the page file conversion program stored in the memory 1002 to implement the following steps:

[0118] Convert the acquired VUE file corresponding to the page to be processed into a first abstract syntax tree through a first conversion function;

[0119] Obtaining partial content corresponding to each module in the first abstract syntax tree;

[0120] According to the JavaScript object notation JSON page configuration of the visual editor, the partial content corresponding to each module is converted into the JSON page configuration file corresponding to the page to be processed, so that the visual editor can process the page to be processed in the editing preview area of ​​the visual editor based on the JSON page configuration file.

[0121] In other embodiments of the present application, the processor 1001 is used to execute the page file conversion program stored in the memory 1002 to implement the following steps:

[0122] According to the page structure configuration in the JSON page configuration, the first part of the content corresponding to the page structure module in the first abstract syntax tree is transformed to obtain a JSON page structure configuration file; according to the page logic configuration in the JSON page configuration, the second part of the content corresponding to the page logic module in the first abstract syntax tree is transformed to obtain a JSON page logic configuration file; according to the page style configuration in the JSON page configuration, the third part of the content corresponding to the page style module in the first abstract syntax tree is transformed to obtain a JSON page style configuration file; based on the JSON page structure configuration file, the JSON page logic configuration file and the JSON page style configuration file, a JSON page configuration file is generated.

[0123] In other embodiments of the present application, the processor 1001 is used to execute the page file conversion program stored in the memory 1002 to implement the following steps:

[0124] The first part of the content is converted into a second abstract syntax tree through a second conversion function; starting from the root node in the second abstract syntax tree, each node in the second abstract syntax tree is traversed in the order of level-order traversal to obtain the first node identifier and the first node attribute of each node; based on the first node identifier of each node, the first node attribute of each node and the page structure configuration, a JSON page structure configuration file is generated.

[0125] In other embodiments of the present application, the processor 1001 is used to execute the page file conversion program stored in the memory 1002 to implement the following steps:

[0126] If a node in the second abstract syntax tree has no child nodes, a JSON page structure configuration file is generated based on the association relationship between the nodes in the second abstract syntax tree, the first node identifier of each node, the first node attribute of each node and the page structure configuration.

[0127] In other embodiments of the present application, the processor 1001 is used to execute the page file conversion program stored in the memory 1002 to implement the following steps:

[0128] If a node in the second abstract syntax tree has child nodes, traverse all child nodes in the node according to the recursive traversal algorithm to obtain the second node identifier and second node attribute of the child node of each node; generate a JSON page structure configuration file based on the association relationship between nodes and child nodes in the second abstract syntax tree, based on the first node identifier and first node attribute of each node, the second node identifier and second node attribute of the child node of each node, and the page structure configuration.

[0129] In other embodiments of the present application, the processor 1001 is used to execute the page file conversion program stored in the memory 1002 to implement the following steps:

[0130] Based on the object conversion function, the second sub-part content in the second part content is converted to obtain a JavaScript object; the field content corresponding to multiple field identifiers in the JavaScript object is obtained; based on the field mapping table, the target field identifier having a mapping relationship with the field identifier in the page logic configuration is determined; the field content is written into the field corresponding to the target field identifier to obtain a JSON page logic configuration file.

[0131] In other embodiments of the present application, the processor 1001 is used to execute the page file conversion program stored in the memory 1002 to implement the following steps:

[0132] Get the class identifier in the third part of the content; get the target node corresponding to the class identifier in the JSON page structure configuration file; add the style content in the third part of the content to the page style field in the target node to obtain the JSON page style configuration file.

[0133] An embodiment of the present application provides a computer storage medium, which stores one or more programs. The one or more programs can be executed by one or more processors to implement the following steps:

[0134] Convert the acquired VUE file corresponding to the page to be processed into a first abstract syntax tree through a first conversion function;

[0135] Obtaining partial content corresponding to each module in the first abstract syntax tree;

[0136] According to the JavaScript object notation JSON page configuration of the visual editor, the partial content corresponding to each module is converted into the JSON page configuration file corresponding to the page to be processed, so that the visual editor can process the page to be processed in the editing preview area of ​​the visual editor based on the JSON page configuration file.

[0137] In other embodiments of the present application, the one or more programs may be executed by one or more processors, and the following steps may also be implemented:

[0138] According to the page structure configuration in the JSON page configuration, the first part of the content corresponding to the page structure module in the first abstract syntax tree is transformed to obtain a JSON page structure configuration file; according to the page logic configuration in the JSON page configuration, the second part of the content corresponding to the page logic module in the first abstract syntax tree is transformed to obtain a JSON page logic configuration file; according to the page style configuration in the JSON page configuration, the third part of the content corresponding to the page style module in the first abstract syntax tree is transformed to obtain a JSON page style configuration file; based on the JSON page structure configuration file, the JSON page logic configuration file and the JSON page style configuration file, a JSON page configuration file is generated.

[0139] In other embodiments of the present application, the one or more programs may be executed by one or more processors, and the following steps may also be implemented:

[0140] The first part of the content is converted into a second abstract syntax tree through a second conversion function; starting from the root node in the second abstract syntax tree, each node in the second abstract syntax tree is traversed in the order of level-order traversal to obtain the first node identifier and the first node attribute of each node; based on the first node identifier of each node, the first node attribute of each node and the page structure configuration, a JSON page structure configuration file is generated.

[0141] In other embodiments of the present application, the one or more programs may be executed by one or more processors, and the following steps may also be implemented:

[0142] If a node in the second abstract syntax tree has no child nodes, a JSON page structure configuration file is generated based on the association relationship between the nodes in the second abstract syntax tree, the first node identifier of each node, the first node attribute of each node and the page structure configuration.

[0143] In other embodiments of the present application, the one or more programs may be executed by one or more processors, and the following steps may also be implemented:

[0144] If a node in the second abstract syntax tree has child nodes, traverse all child nodes in the node according to the recursive traversal algorithm to obtain the second node identifier and second node attribute of the child node of each node; generate a JSON page structure configuration file based on the association relationship between nodes and child nodes in the second abstract syntax tree, based on the first node identifier and first node attribute of each node, the second node identifier and second node attribute of the child node of each node, and the page structure configuration.

[0145] In other embodiments of the present application, the one or more programs may be executed by one or more processors, and the following steps may also be implemented:

[0146] Based on the object conversion function, the second sub-part content in the second part content is converted to obtain a JavaScript object; the field content corresponding to multiple field identifiers in the JavaScript object is obtained; based on the field mapping table, the target field identifier having a mapping relationship with the field identifier in the page logic configuration is determined; the field content is written into the field corresponding to the target field identifier to obtain a JSON page logic configuration file.

[0147] In other embodiments of the present application, the one or more programs may be executed by one or more processors, and the following steps may also be implemented:

[0148] Get the class identifier in the third part of the content; get the target node corresponding to the class identifier in the JSON page structure configuration file; add the style content in the third part of the content to the page style field in the target node to obtain the JSON page style configuration file.

[0149] It should be noted here that the description of the above storage medium and device embodiments is similar to the description of the above method embodiments, and has similar beneficial effects as the method embodiments. For technical details not disclosed in the storage medium and device embodiments of this application, please refer to the description of the method embodiments of this application for understanding.

[0150] The above-mentioned computer storage medium / memory can be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), a magnetic random access memory (FRAM), a flash memory (Flash Memory), a magnetic surface memory, an optical disk, or a compact disc read-only memory (CD-ROM) and the like; it can also be various terminals including one or any combination of the above-mentioned memories, such as mobile phones, computers, tablet devices, personal digital assistants, etc.

[0151] It should be understood that the "one embodiment" or "an embodiment" or "an embodiment of the present application" or "the aforementioned embodiment" or "some embodiments" or "some implementation methods" mentioned throughout the specification means that the specific features, structures or characteristics related to the embodiment are included in at least one embodiment of the present application. Therefore, "in one embodiment" or "in an embodiment" or "an embodiment of the present application" or "the aforementioned embodiment" or "some embodiments" or "some implementation methods" appearing throughout the specification do not necessarily refer to the same embodiment. In addition, these specific features, structures or characteristics can be combined in one or more embodiments in any suitable manner. It should be understood that in various embodiments of the present application, the size of the sequence number of the above-mentioned processes does not mean the order of execution, and the execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiment of the present application. The above-mentioned sequence numbers of the embodiments of the present application are only for description and do not represent the advantages and disadvantages of the embodiments.

[0152] In the several embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. The device embodiments described above are only schematic. For example, the division of units is only a logical function division. There may be other division methods in actual implementation, such as: multiple units or components can be combined, or can be integrated into another system, or some features can be ignored or not executed. In addition, the coupling, direct coupling, or communication connection between the components shown or discussed can be through some interfaces, and the indirect coupling or communication connection of devices or units can be electrical, mechanical or other forms.

[0153] The units described above as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units; they may be located in one place or distributed on multiple network units; some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.

[0154] In addition, all functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may be a separate unit, or two or more units may be integrated into one unit; the above-mentioned integrated units may be implemented in the form of hardware or in the form of hardware plus software functional units.

[0155] The methods disclosed in several method embodiments provided in this application can be arbitrarily combined without conflict to obtain new method embodiments.

[0156] The features disclosed in several product embodiments provided in this application can be arbitrarily combined without conflict to obtain new product embodiments.

[0157] The features disclosed in several method or device embodiments provided in this application can be arbitrarily combined without conflict to obtain new method embodiments or device embodiments.

[0158] A person skilled in the art can understand that all or part of the steps of implementing the above method embodiment can be completed by hardware related to program instructions, and the aforementioned program can be stored in a computer-readable storage medium. When the program is executed, it executes the steps of the above method embodiment; and the aforementioned storage medium includes: mobile storage devices, read-only memories (ROM), magnetic disks or optical disks, etc., various media that can store program codes.

[0159] Alternatively, if the above-mentioned integrated unit of the present application is implemented in the form of a software function module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the embodiment of the present application can essentially or in other words, the part that contributes to the relevant technology can be embodied in the form of a software product, which is stored in a storage medium and includes a number of instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the methods of each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as mobile storage devices, ROMs, magnetic disks, or optical disks.

[0160] It is worth noting that the drawings in the embodiments of the present application are only for illustrating the schematic positions of various components on the terminal device and do not represent the actual positions in the terminal device. The actual positions of various components or areas may be changed or offset accordingly according to actual conditions (for example, the structure of the terminal device), and the proportions of different parts of the terminal device in the drawings do not represent the actual proportions.

[0161] The above is only an implementation method of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A page file conversion method, characterized in that: The method comprises: Convert the acquired VUE file corresponding to the page to be processed into a first abstract syntax tree through a first conversion function; Obtaining partial content corresponding to each module in the first abstract syntax tree; According to the JavaScript object notation JSON page configuration of the visual editor, the partial content corresponding to each module is converted into a JSON page configuration file corresponding to the page to be processed, so that the visual editor processes the page to be processed in the editing preview area of ​​the visual editor based on the JSON page configuration file; The part of the content corresponding to each module is converted into a JSON page configuration file corresponding to the page to be processed, including: The first part of the content corresponding to the page structure module in the first abstract syntax tree, the second part of the content corresponding to the page logic module in the first abstract syntax tree, and the third part of the content corresponding to the page style module in the first abstract syntax tree are respectively identified by different conversion modules and mapped to the JSON file corresponding to the page configuration of the page to be processed to obtain the JSON page configuration file.

2. The method according to claim 1, characterized in that: The converting of the partial contents corresponding to the modules into a JSON page configuration file corresponding to the page to be processed according to the JSON page configuration of the visual editor includes: According to the page structure configuration in the JSON page configuration, convert the first part of the content corresponding to the page structure module in the first abstract syntax tree to obtain a JSON page structure configuration file; According to the page logic configuration in the JSON page configuration, the second part of the content corresponding to the page logic module in the first abstract syntax tree is converted to obtain a JSON page logic configuration file; According to the page style configuration in the JSON page configuration, the third part of the content corresponding to the page style module in the first abstract syntax tree is transformed to obtain a JSON page style configuration file; The JSON page configuration file is generated based on the JSON page structure configuration file, the JSON page logic configuration file and the JSON page style configuration file.

3. The method according to claim 2, characterized in that The first part of the content corresponding to the page structure module in the abstract syntax tree is converted according to the page structure configuration in the JSON page configuration to obtain a JSON page structure configuration file, including: Converting the first part of content into a second abstract syntax tree through a second conversion function; Taking the root node in the second abstract syntax tree as a starting point, traverse each node in the second abstract syntax tree in a layer-order traversal order, and obtain a first node identifier and a first node attribute of each node, wherein the nodes in the second abstract syntax tree include the root node; The JSON page structure configuration file is generated based on the first node identifier of each node, the first node attribute of each node and the page structure configuration.

4. The method according to claim 3, characterized in that The generating the JSON page structure configuration file based on the first node identifier of each node, the first node attribute of each node and the page structure configuration includes: If there is no child node at a node in the second abstract syntax tree, the JSON page structure configuration file is generated based on the association relationship between the nodes in the second abstract syntax tree, the first node identifier of each node, the first node attribute of each node and the page structure configuration.

5. The method according to claim 3, characterized in that: The generating the JSON page structure configuration file based on the first node identifier of each node, the first node attribute of each node and the page structure configuration includes: If a node in the second abstract syntax tree has child nodes, traverse all child nodes in the node according to a recursive traversal algorithm to obtain a second node identifier and a second node attribute of the child nodes of each node; The JSON page structure configuration file is generated based on the association relationship between nodes and child nodes in the second abstract syntax tree, the first node identifier and first node attribute of each node, the second node identifier and second node attribute of the child node of each node, and the page structure configuration.

6. The method according to claim 2, characterized in that The second part of the content corresponding to the page logic module in the abstract syntax tree is converted according to the page logic configuration in the JSON page configuration to obtain a JSON page logic configuration file, including: Based on the object conversion function, the second sub-part content in the second part content is converted to obtain a JavaScript object; Obtain field contents corresponding to multiple field identifiers in the JavaScript object; Determine, based on the field mapping table, a target field identifier in the page logic configuration that has a mapping relationship with the field identifier; The field content is written into the field corresponding to the target field identifier to obtain the JSON page logic configuration file.

7. The method according to claim 2, characterized in that According to the page style configuration in the JSON page configuration, the third part of the content corresponding to the page style module in the abstract syntax tree is transformed to obtain a JSON page style configuration file, including: Obtaining a class identifier in the third part of the content; Obtain a target node corresponding to the class identifier in the JSON page structure configuration file; The style content in the third part is added to the page style field in the target node to obtain the JSON page style configuration file.

8. A page file conversion device, characterized in that: The device comprises: A first conversion module, used to convert the acquired VUE file corresponding to the page to be processed into a first abstract syntax tree through a first conversion function; An acquisition module, used to acquire partial content corresponding to each module in the first abstract syntax tree; The second conversion module is used to map the first part of the content corresponding to the page structure module in the first abstract syntax tree, the second part of the content corresponding to the page logic module in the first abstract syntax tree, and the third part of the content corresponding to the page style module in the first abstract syntax tree to the JSON file corresponding to the page configuration of the page to be processed after being identified by different conversion modules according to the JavaScript object notation JSON page configuration of the visual editor, so as to obtain the JSON page configuration file corresponding to the page to be processed, so that the visual editor processes the page to be processed in the editing preview area of ​​the visual editor based on the JSON page configuration file.

9. An electronic device, characterized in that: The electronic device comprises: a processor, a memory and a communication bus; The communication bus is used to realize the communication connection between the processor and the memory; The processor is used to execute a page file conversion program stored in the memory to implement the page file conversion method according to any one of claims 1 to 7.

10. A storage medium, characterized in that: The storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the page file conversion method according to any one of claims 1 to 7.

Images