Method for constructing Web page based on low code, storage medium, electronic equipment and product

Abstract

The invention relates to the technical field of Web platforms, and particularly provides a method for constructing a Web page based on low codes, a storage medium, electronic equipment and a product, and the method can comprise the steps of constructing a virtual tree structure based on a component structure in a page json file; based on the configuration content of each component in the json file, configuring tree nodes on the virtual tree structure to generate a virtual tree; the virtual tree is processed, a Web page is obtained, and iteration updating of the Web page changes along with updating of a page json file. According to some embodiments of the invention, the Web page is constructed based on low codes, the research and development cost is reduced, and the Web page generation efficiency is improved.

Description

Technical Field

[0001] The present application relates to the field of Web platform technology, and specifically, to a method, storage medium, electronic device, and product for building Web pages based on low code. Background Art

[0002] With the continuous development of computer technology, web front-end technology is gradually showing a trend of rapid iteration.

[0003] At present, most of the solutions for building web pages are based on the concepts of early static layout and flow layout. The current layout methods of web pages mostly adopt responsive layout, Flex elastic layout, etc. The width and height of the elements in the page, especially the non-last-level leaf node elements, are generally affected by the size of their internal lower-level elements and root nodes. Once the content or other attributes of an element change, causing the size to change and affecting other elements, the browser will automatically calculate the size of the changed element based on percentages, layout methods, etc. However, due to the large amount of page content, the static layout and size calculation of the page require a large amount of computer overhead, high R&D costs, and low R&D efficiency.

[0004] Therefore, how to provide a low-cost and efficient technical solution for building web pages based on low-code has become a technical problem that needs to be solved urgently. Summary of the invention

[0005] The purpose of some embodiments of the present application is to provide a method, storage medium, electronic device and product for building a web page based on low code. The technical solutions of the embodiments of the present application can reduce the R&D cost and computer overhead of building a web page and improve R&D efficiency.

[0006] In a first aspect, some embodiments of the present application provide a method for building a web page based on low code, including: building a virtual tree structure based on the component structure in the page json file; configuring the tree nodes on the virtual tree structure based on the configuration content of each component in the json file to generate a virtual tree; processing the virtual tree to obtain a web page, wherein the iterative update of the web page changes with the update of the page json file.

[0007] Some embodiments of the present application can generate a corresponding virtual tree through the component structure and configuration content in the page json file, and then process the virtual tree to obtain a web page, wherein the web page can be iteratively updated as the page json file is updated. Some embodiments of the present application can realize the generation of web pages in a low-code manner, reducing the R&D cost and computer overhead of building web pages and improving R&D efficiency.

[0008] In some embodiments, the processing of the virtual tree to obtain a Web page includes: stitching a Web page structure according to the hierarchical structure and hierarchical order on the virtual tree; and rendering and generating the Web page based on the Web page structure.

[0009] Some embodiments of the present application obtain a Web page by processing the Web page according to the hierarchical results and hierarchical order on the virtual tree, thereby achieving accurate generation of the Web page.

[0010] In some embodiments, the iterative update method of the Web page includes at least one of adding a page, modifying a page, and deleting a page.

[0011] Some embodiments of the present application implement iterative updates of Web pages through addition, modification, and deletion in a variety of ways, with high flexibility.

[0012] In some embodiments, when the iterative update method of the Web page is to add a page, the method includes: obtaining a newly added page json file; generating a component json object based on the newly added page json file, and inserting the component json object into the position of the page json file corresponding to the position of the Web page to obtain an updated page json file.

[0013] Some embodiments of the present application can achieve accurate addition of pages by obtaining a new page json file when adding a page, then generating a corresponding component json object and inserting it into the corresponding position, and obtaining an updated page json file. The implementation process is relatively simple and efficient.

[0014] In some embodiments, obtaining the newly added page json file includes: responding to the user's operation instructions, obtaining the newly added page json file with the page menu location and file name configured, and obtaining the updated menu configuration json file; generating a file path corresponding to the page menu location, and storing the newly added page json file under the file path.

[0015] Some embodiments of the present application can obtain a newly added page json file through user operations, and update and store relevant information to achieve effective addition of pages.

[0016] In some embodiments, when the iterative update method of the Web page is to modify the page, the method includes: obtaining the component object content and component position of the component to be modified from the page json file; editing the editing area corresponding to the component json object, obtaining the modified component object content, and overwriting the component object content of the component to be modified with the modified component object content; after the page modification is completed, obtaining the updated page json file, and obtaining the updated menu configuration json file.

[0017] Some embodiments of the present application determine the component json object to be modified from the page json file and then edit it, so as to obtain an updated page json file and an updated menu configuration json file, thereby achieving effective modification of the page.

[0018] In some embodiments, when the iterative update method of the Web page is to delete the page, the method includes: after searching the location of the component to be deleted from the page json file, deleting the component to be deleted, obtaining the updated page json file, and obtaining the updated menu configuration json file.

[0019] Some embodiments of the present application achieve effective deletion of the page by searching for the components to be deleted and then deleting them to obtain the updated page json file and the updated menu configuration json file.

[0020] In some embodiments, when the Web page is iteratively updated, the method further includes: generating a backup path for iterative updates of the Web page, wherein the name of the backup path includes: an iterative update timestamp, an updated page, and the iterative update method; at least one of the following information is backed up and stored under the backup path: when adding a page, backing up a menu configuration json file corresponding to the page json file; when modifying a page, backing up a page json corresponding to the component to be modified; when deleting a page, backing up the page json to be deleted and the menu configuration json file.

[0021] Some embodiments of the present application back up relevant data in the iterative update process through a specific backup path, thereby achieving accurate recording of data related to page iterative updates.

[0022] In some embodiments, the method further includes: saving a target web page corresponding to the iterative update method; when updating the web page to the target web page, matching and parsing the target web page to generate the updated page json file and the updated menu configuration json file; using the updated page json file and the updated menu configuration json file to overwrite the page json file and the menu configuration json file corresponding to the page json file.

[0023] After saving the target Web page, some embodiments of the present application can subsequently overwrite the current json file by matching and parsing the target Web page to obtain an updated page json file and an updated menu configuration json file, thereby achieving express iterative updates of the Web page and reducing computer overhead.

[0024] In the second aspect, some embodiments of the present application provide a device for building a web page based on low code, including: a structure construction module, used to build a virtual tree structure based on the component structure in the page json file; a configuration module, used to configure the tree nodes on the virtual tree structure based on the configuration content of each component in the json file to generate a virtual tree; a page acquisition module, used to process the virtual tree to obtain a web page, wherein the iterative update of the web page changes with the update of the page json file.

[0025] In a third aspect, some embodiments of the present application provide a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, can implement the method described in any embodiment of the first aspect.

[0026] In a fourth aspect, some embodiments of the present application provide an electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor can implement a method as described in any embodiment of the first aspect when executing the program.

[0027] In a fifth aspect, some embodiments of the present application provide a computer program product, wherein the computer program product comprises a computer program, wherein the computer program, when executed by a processor, can implement the method described in any embodiment of the first aspect. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] In order to more clearly illustrate the technical solutions of some embodiments of the present application, the drawings required for use in some embodiments of the present application will be briefly introduced below. It should be understood that the following drawings only show some embodiments of the present application and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without paying creative work.

[0029] Figure 1 A system architecture diagram for building web pages based on low code provided for some embodiments of the present application;

[0030] Figure 2 A system diagram for building a web page based on low code provided for some embodiments of the present application;

[0031] Figure 3 One of the flow charts of the method for building a web page based on low code provided in some embodiments of the present application;

[0032] Figure 4 Flowchart 2 of a method for building a web page based on low code provided for some embodiments of the present application;

[0033] Figure 5 A block diagram of a device for building a web page based on low code provided in some embodiments of the present application;

[0034] Figure 6 A schematic diagram of an electronic device is provided for some embodiments of the present application. DETAILED DESCRIPTION

[0035] The technical solutions in some embodiments of the present application will be described below in conjunction with the drawings in some embodiments of the present application.

[0036] It should be noted that similar reference numerals and letters represent similar items in the following drawings, so once an item is defined in one drawing, it does not need to be further defined and explained in subsequent drawings. At the same time, in the description of this application, the terms "first", "second", etc. are only used to distinguish the description and cannot be understood as indicating or implying relative importance.

[0037] In the related art, when building a web page, in order to adapt to display designs of different sizes, the width and height of non-last-level leaf node elements are generally affected by the sizes of their internal subordinate elements and root nodes. For example, if the style of an element in a page changes, it is necessary to recalculate and arrange the styles such as width and height from the element step by step to the root element. The deeper the element level, the greater the amount of calculation required. If there are elements with non-static layouts, it is very likely that the style of the element will be affected, which may cause the page to be partially incoordinated after the final calculation and rearrangement. If the page content is too much, or the content is dynamically refreshed and changeable, or too many pages are opened, the page will freeze, flicker, and crash due to the large computer overhead.

[0038] It can be seen from the above-mentioned related technologies that the existing methods of constructing and updating Web pages require a large amount of computer overhead, have high research and development costs, and have poor stability.

[0039] In view of this, some embodiments of the present application provide a method for building a web page based on low code, in which a virtual tree is constructed and generated through the component structure and configuration content in the page json file; then the nodes in the virtual tree are processed to obtain the corresponding web page. When the web page is iteratively updated later, the update can be achieved through the changed page json file. The present application can realize online editing and updating of product web pages by building web pages with low code, and achieve the effect of direct online local modification and iteration. There is no need for overall upgrade, and seamless upgrade is realized, which effectively improves the user experience, and supports automatic backup before upgrade and version restoration after upgrade. Moreover, the low-code platform can save development costs and unify product architecture; the low-code platform can also concentrate technology, greatly improve code reusability, and is also conducive to centralized problem solving, so that only the architecture platform needs to be modified, and the code of specific pages does not need to be modified, which significantly improves work efficiency.

[0040] Moreover, in the related technologies, the process of rendering web pages is implemented by the server. However, this application changes this traditional model. Through client-side rendering technology and web service technology, it transfers the functions of web page configuration storage, page loading and parsing, creation and editing, and page configuration writing to the client. All calculations are performed on the client. The server only needs to deploy web services, control user login, and save page configuration and permissions, without the need for page calculation, rendering, and generation.

[0041] The client system only needs to support access to the server's Web service, without considering database compatibility, storage, capacity and other issues, thereby solving the system compatibility problem of the server in traditional technology. After the client loads the framework function, the process of accessing the page is that the server returns the page configuration, the client's local browser performs page structure analysis, layout and typesetting size calculation, and finally renders it on the client browser. During the entire process, the server only needs to query and return the user's page configuration, and no longer needs to query the user's page configuration first, and then perform page structure analysis, size and style calculation, page assembly rendering and return according to the established framework, which greatly solves the concurrency performance problem. According to quantitative indicators, the available computing memory of the client browser is 0.7GB. If a 1TB server adopts the existing server-side deployment rendering method, and calculates on the server side according to the average 50MB computing content occupied by each user, it can theoretically support a maximum of 1024*1024 / 50≈20972 concurrent users. The present invention uses client-side rendering to break the concurrency limit, because the average 50MB of computing content for each user is consumed in the 0.7GB of the user's client browser, and no longer consumes the performance of the server. Therefore, the method for building a web page based on low code provided by the embodiment of the present application can improve R&D efficiency and reduce R&D costs.

[0042] In some embodiments of the present application, the client may be a mobile terminal or a non-portable computer terminal, which is not specifically limited in the embodiments of the present application.

[0043] The following is combined with Figure 1 The following is an exemplary description of the system architecture diagram for building a web page based on low code provided by some embodiments of the present application. The system for building a web page based on low code includes page json, architecture configuration, and web page. Specifically, the contents contained in the page json, architecture configuration, and web page are as follows: Figure 2 shown.

[0044] Among them, the page json mainly includes the route menu configuration json file, and the menu configuration json file includes the json file of each route menu page content area. The json file content is the attribute configuration object instance of various page element components and their combination relationship. The component attributes of the element include text, font, icon, interface address, request, permission subset, etc. The architecture configuration includes two parts: general framework configuration and component configuration. The general framework configuration mainly includes running dependencies such as JavaScript library, HTTP request and interceptor, public area page content and its style, public area interaction logic, etc.; the component configuration part mainly includes specific components, such as tables, forms, buttons, cards, text, titles, breadcrumbs, trees, etc., and their corresponding attributes, such as table columns, interfaces, paging, etc., form items such as input boxes, selection boxes, etc., form interfaces, layout methods, etc. The component attributes are used to match and parse the component attributes in the content object of the page json file for rendering. The json parsing tool in the architecture configuration can load the page json file, match and parse it layer by layer, and generate the corresponding virtual dom tree (as a specific example of a virtual tree) structure object. Web pages can generate corresponding Web pages through virtual DOM tree structure objects, that is, converting virtual DOM tree structure objects into real page HTML+CSS+JavaScript structures, and logical interactions (i.e. Figure 2 HTTP background interaction in ), menu routing, permission control (i.e. Figure 2 After that, the user can edit the web page through the visual interface, and generate a new json file for the new web page through the visual construction tool. Then, the new web page can be obtained by loading the new json file, realizing iterative update of the page.

[0045] exist Figure 1 When loading a web page in , a low-code platform is used. The loading process is as follows:

[0046] Users can trigger web page switching or loading actions on the client by clicking and other operations. According to the menu configuration information of the web page, match the corresponding specific directory and file to read the file content. The read file content json object (that is, the page json file) is parsed using the architecture configuration in the framework platform, and the json content of each component is parsed in hierarchy and order. Generate the corresponding html code snippet for each component according to the preset virtual dom configuration of the component, bind the interactive events according to the component event configuration, and form html and JavaScript functional code. Organize the html and JavaScript code application, mount it to the corresponding position of the page, and make the component binding event effective. Finally, render it uniformly according to the preset css style of the framework platform, so as to realize the page loading of the low-code platform.

[0047] Among them, the unified preset CSS solution also facilitates customized versions to customize Web page skins. CSS is uniformly coded by class and component. When customizing the skin, only the required local styles need to be modified, and there is no need to rewrite the entire thing. Modifying only CSS does not require additional adjustments to the framework platform's functional content, which facilitates rapid iteration of customized versions.

[0048] In addition, this application can also use Figure 1 The visual construction tool in can realize on-the-spot modification and update of online products without going through complex version processes, or overall update and upgrade, and even without power off, network disconnection, restart, etc. You only need to perform hot update and replacement of json files to achieve lightweight and seamless version update and iteration. Specifically, for situations where web pages need to be modified due to web failures, page optimization needs, etc. of online products, you can directly use the visual construction tool in the online environment to adjust the page as required, and then directly apply and save it, so that the code can be automatically uploaded and overwritten, thereby realizing online operation and maintenance and version iteration. The visual construction tool will automatically back up the web page version code before the operation interface, and only back up the changed json files, which takes up very little memory and has a very fast backup speed. It is also convenient for you to restore the changes or roll back to the specified version after the online changes, avoiding the situation where you cannot restore once the update error occurs. At the same time, there is no need to use cumbersome technical means such as snapshots to achieve backup and recovery, only file copying, saving, and replacement and recovery are required. The final operation of version recovery is just file overwriting, which is extremely fast, risk-free, and will not cause usability issues such as temporary freezes, user offline, and user waiting. Moreover, Figure 1 The system is directly deployed locally and the web page json files are also stored locally, so there is no need to use other network means for version updates. Local storage files are protected by vulnerability protection technology to avoid illegal access or tampering.

[0049] The following is combined with Figure 3 The implementation process of building a web page based on low code and executed by the client is exemplified in some embodiments of the present application.

[0050] Please see attached Figure 3 , Figure 3 A flowchart of a method for building a web page based on low code is provided for some embodiments of the present application. The method for building a web page based on low code may include:

[0051] S310, constructing a virtual tree structure based on the component structure in the page json file.

[0052] For example, in some embodiments of the present application, a virtual DOM structure with the same structure (as a specific example of a virtual tree structure) is constructed according to the component structures at each level in the page JSON file.

[0053] S320: Based on the configuration content of each component in the json file, configure the tree nodes on the virtual tree structure to generate a virtual tree.

[0054] For example, in some embodiments of the present application, the specific configuration attributes and event functions of each component in the page json file (as a specific example of configuration content) are converted into attributes and events with the same name as the real dom attributes on the virtual dom structure through the attribute converter, thereby obtaining the virtual dom (as a specific example of a virtual tree). For example, the input component attribute value corresponds to the attribute value of the real dom and virtual dom structures; such as the component onload event corresponds to the onload event of the real dom and virtual dom structures.

[0055] S330, processing the virtual tree to obtain a Web page, wherein the iterative update of the Web page changes with the update of the page json file.

[0056] For example, in some embodiments of the present application, a DOM splicer is used to process the virtual DOM to obtain a Web page.

[0057] In some embodiments of the present application, S330 may include: stitching out a Web page structure according to the hierarchical structure and hierarchical order on the virtual tree; and rendering and generating the Web page based on the Web page structure.

[0058] For example, in some embodiments of the present application, a real Web page structure containing real attributes and events is sequentially spliced ​​out through a DOM splicer according to the hierarchical structure and hierarchical order of components on a virtual DOM, and finally the real Web page structure is mounted on the page, and the browser completes the rendering and displays the Web page. In addition, a monitoring subscription data change can also be set to provide real-time synchronous refresh of the page.

[0059] The above method can generate the corresponding web page through the page json file. Figure 1 As a visual construction tool for reverse engineering of the Web generation json parsing tool, the Web page and its virtual dom tree structure object originally generated by the page json file after parsing by the framework can be edited through the visual interface operation, and a new json file of the new Web page can be generated through the visual construction tool. That is, iterative updates of Web pages can be achieved. Among them, the iterative update methods of Web pages include: adding pages, modifying pages and deleting pages. The following is an exemplary description of these three different iterative update methods.

[0060] In some embodiments of the present application, when the iterative update method of a Web page is to add a page, the method of building a Web page based on low code includes: obtaining a newly added page json file; based on the newly added page json file, generating a component json object, and inserting the component json object into the position of the page json file corresponding to the position of the Web page to obtain an updated page json file.

[0061] For example, in some embodiments of the present application, when performing a page-level add page operation, it is first necessary to generate a new page json file, and then perform a component-level add operation corresponding to the visualization operation page based on the content of the new page json file. Specifically, after selecting the target component type and component position (the last one by default) to be added, a component json object is generated with the default properties of the target component as the value, and the component json object is inserted into the corresponding position position of the current page json file content according to the position of the target component relative to the current page. After the target component is added, the current page json file content of the page is updated to obtain the updated page json file.

[0062] In some embodiments of the present application, obtaining a newly added page json file includes: responding to a user's operating instruction, obtaining the newly added page json file configured with a page menu location and a file name, and obtaining an updated menu configuration json file; generating a file path corresponding to the page menu location, and storing the newly added page json file under the file path.

[0063] For example, in some embodiments of the present application, after the user chooses to add a page, the user can configure the newly added page in the pop-up page menu location and file name. After the configuration is completed, a new basic blank page json file is generated (as a specific example of a newly added page json file), and the menu configuration json file is updated at the same time. The page json file path is generated according to the page menu location match, and the newly added web page json file is saved under this file path.

[0064] In some embodiments of the present application, when the iterative update method of a Web page is to modify the page, the method for building a Web page based on low code includes: obtaining the component object content and component position of the component to be modified from the page json file; editing the editing area corresponding to the component json object, obtaining the modified component object content, and overwriting the component object content of the component to be modified with the modified component object content; after the page modification is completed, obtaining the updated page json file, and obtaining the updated menu configuration json file.

[0065] For example, in some embodiments of the present application, if the current page needs to be modified, the user can select the component to be modified, and obtain the json object content of the component to be modified (as a specific example of the component object content) and its component position from the page json file content. For the convenience of editing, the object string is used uniformly for processing. The json object of the component generates an editing page and a form (as a specific example of the editing area) according to the data type of the component attribute value, and the current value of the attribute of the json object of the component is echoed for the user to make a custom input or selectively edit; the specific attribute key can be selected using a check box, and unchecking it means that the attribute is not configured, that is, the default value of the attribute is used; you can also choose to hide the configuration input or select the component of the attribute corresponding to the key, otherwise the attribute and component are displayed. After modifying the json object content of the component, the new component json object content is formed according to the form value of the component editing page, and the new component json object content is overwritten with the original json object content of the component in the page json file according to the position of the component relative to the json file of the current page recorded by the search, so as to obtain the updated page json file; at the same time, the menu configuration json file is updated.

[0066] In some embodiments of the present application, when the iterative update method of a web page is to delete the page, the method for building a web page based on low code includes: after finding the location of the component to be deleted from the page json file, deleting the component to be deleted, obtaining the updated page json file, and obtaining the updated menu configuration json file.

[0067] For example, in some embodiments of the present application, if a certain page needs to be deleted, it is necessary to find the component to be deleted and delete it. Specifically, the location of the component to be deleted in the page json file content is found, and the component object (that is, the component to be deleted) is directly deleted. After deletion, the updated page json file is obtained, and the menu configuration json file is updated at the same time.

[0068] In some embodiments of the present application, a method for building a web page based on low code includes: generating a backup path for iterative updates of the web page, wherein the name of the backup path includes: an iterative update timestamp, an updated page, and the iterative update method; the backup path stores at least one of the following information: when adding a page, backing up a menu configuration json file corresponding to the page json file; when modifying a page, backing up a page json corresponding to the component to be modified; when deleting a page, backing up the page json to be deleted and the menu configuration json file.

[0069] For example, in some embodiments of the present application, when performing any of the above-mentioned operations of adding a page, modifying a page, or deleting a page, it is necessary to generate a version record path based on the current time node (as a specific example of a backup path), and the version record path is in the form of a file path named after timestamp + operation page (i.e., the update page to be added, modified, or deleted) + operation type (i.e., the method of adding, modifying, or deleting). The pages to be sent for change will be backed up in advance under this backup path. If it is to add a page, the menu configuration json file is backed up; if it is to modify a page, the current page to be modified json is backed up; if it is to delete a page, the current page to be deleted json and the menu configuration json file are backed up.

[0070] In some embodiments of the present application, the method for building a web page based on low code includes: saving a target web page corresponding to the iterative update method; when updating the web page to the target web page, matching and parsing the target web page to generate the updated page json file and the updated menu configuration json file; using the updated page json file and the updated menu configuration json file to overwrite the page json file and the menu configuration json file corresponding to the page json file.

[0071] For example, in some embodiments of the present application, the above-mentioned operations of adding, modifying or deleting a Web page are completed, and the updated target Web page is saved. When the Web page needs to be iteratively updated later, the new menu configuration json file (as a specific example of the updated menu configuration json file) and the new Web page json file (as a specific example of the updated page json file) generated by automatic matching and parsing of the target Web page are uploaded and overwritten with the original menu configuration json file and page json file of the Web page, so as to realize the online version iterative upgrade. At the same time, the current target Web page code download function can also be provided. Because the real page effect after the online iterative upgrade is displayed in real time during editing, this technology is what you see is what you get.

[0072] The following is combined with Figure 4 The specific process of building a web page based on low code provided by some embodiments of the present application is exemplified.

[0073] Please see attached Figure 4 , Figure 4 A flowchart of a method for building a web page based on low code is provided for some embodiments of this application. It should be understood that this application Figure 1 and Figure 2 The system architecture for building a web page shown can realize the construction of a web page from 0 to 1.

[0074] The above process is explained below as an example.

[0075] S401, generating a menu configuration json file and a page json file in response to a user's operation instruction.

[0076] For example, after the user enters the web page building system on the client, if there is no built web page, a blank page will be displayed. The page building tool is suspended at the bottom of the blank page and can be dragged or folded and expanded. This tool is for operation and maintenance (that is, users). The permission restriction is only loaded when the preset super administrator logs in. Users can choose to add a new web page on the page building tool, and the page setting options will pop up. Users can choose to be before or after a certain menu. If there is no other web page at present, the options before or after a certain menu will not be displayed (the default is to place it last). When adding a new page later, you need to select a relative position. After setting the position, you also need to set the page name, path, file name, permissions and other attributes.

[0077] After setting the above properties, update the menu configuration json file according to the settings, and then generate the page json file of the web page. After naming it according to the above file name, upload it to the web root path and the path location set above. Then, according to the content of the new web page blank template, write the content into the page json file, and then use the content of the page json file as the original page json to edit the page content (i.e. add, modify, delete, etc.).

[0078] S402, constructing a virtual DOM structure based on the component structure in the page JSON file.

[0079] S403, based on the configuration content of each component in the JSON file, configure the tree nodes on the virtual DOM structure to generate a virtual DOM.

[0080] S404, hierarchically sort the virtual DOM to obtain the Web page.

[0081] S405 , in response to the user's operation instruction, determining an iterative update method for the Web page, generating a backup path, and using the backup path to store relevant data of the Web page.

[0082] For example, when adding, modifying or deleting a web page, a backup version will be automatically generated and stored in the backup path before the page-level operation for subsequent version recovery. The specific backup process includes:

[0083] In the system's version management visualization interface, the backup content is saved in the fixed path {$setupPath} / backups (as a specific example of the backup path) relative to the installation path $setupPath. The naming rule for the specific version directory name under the fixed path is {$generation time}_{$operation page}_{$operation type}. Building a Web page system can provide a separate version management visualization interface for display and operation. The page display content is under the traversal path {$setupPath} / backups, each version directory is a version, and the version content records the change time ({$generation time}), change interface ({$operation page}), and change type ({$operation type}). The generation time is the timestamp when the page is added, modified, or deleted, the operation page is the page that is added, modified, or deleted, and the operation type is addition, modification, or deletion.

[0084] When adding, modifying, or deleting a Web page or a component in a Web page, the framework automatically records the following key information: operation type, current time, target page (i.e., operation page), and generates a directory named {$current time}_{$target page}_{$operation type}. Operation types include: adding a page, editing a page, and deleting a page. In this directory, the changed files are saved in the form of a relative path relative to the Web service installation root directory. The changed files are the menu configuration json file and the target Web page json file (where the target Web page json file does not need to be recorded when adding a page).

[0085] In addition, the version management visualization interface not only displays the version directory information, but also provides operations to delete backup records and restore backup versions. Deleting backup records directly deletes the directory and files in the directory of the version backup, and restoring the version overwrites the files in the backup directory with the corresponding files of the same name in the current Web service directory according to the directory structure. In this way, the version control of the system Web platform is realized.

[0086] S406, iteratively updating the Web page.

[0087] For example, users can choose to add, delete, or modify component elements on a web page. Since the new web page generated above has no elements, they need to be added first. After adding a component element (that is, adding a page), the component setting option pops up to set the component type and position. Since the web page has no elements, the options before, after, or inside a component are not displayed (the default is to place it last). However, when adding a new component later, you will need to select a relative position. After setting the position, you also need to select the type of component, such as table, form, etc. Then, record the position of the newly added element component relative to the current web page and enter the element component property editing interface.

[0088] If it is a newly added element component, the editing object matches the default component properties according to the component type.

[0089] In addition, in addition to adding original components, if you are editing an existing component (i.e. modifying the page), the editing object of the element component property editing interface is the current property of the component; if you are deleting a component, simply delete the content fragment of the corresponding component from the component position recorded in the page json file content of the current Web page.

[0090] Specifically, when modifying a page, a form page pops up in the editing interface, which contains the property key selection item and the property content editing item. The options in the property key selection item are all editable properties of this type of component. If selected, it means that the property uses custom content and displays the editing item of the property corresponding to the key; if not selected, it means that the default value is used and the editing item of the property corresponding to the key is hidden. For the selected component properties in the property content editing item, each item generates an input box or selection box according to the type of property value, such as custom function type, character text type and other properties use input boxes, and enumeration class and other properties use selection boxes. It should be understood that the embodiments of the present application are not limited to this. Page modification can be achieved by editing.

[0091] After the above-mentioned editing of the component attributes of the addition and modification operations is completed, the new element component json content characters (i.e., component json object content) are assembled according to the customized attribute values, and then inserted or overwritten to the corresponding position of the current web page json file content according to the recorded element component position relative to the current web page. At the same time, the updated page json file content of the current web page is reloaded to the current web page, and the page refresh preview effect can be achieved.

[0092] At this point, if you need to continue adding, deleting or modifying components, you can continue to perform the above operations. After the operation is completed, you can choose to download the current page code for further confirmation; you can also choose to upload and update the updated page json file code content obtained after the automatic modification of the target Web page after the operation to achieve online version iterative upgrade.

[0093] In addition, this application can also realize the function of sharing a set of codes for UI interface and online development, without the need to maintain two sets of codes, UI interface code and actual product code, to improve the efficiency of online product and UI interface development and avoid repeated redundant development. In other words, this application can not only export a new version of UI interface after adding or modifying page content on the basis of existing Web products, but also directly carry out actual product development based on the exported Web page json file of the UI interface, because the style and structure of the two are the same, and only the specific UI display simulation data needs to be adjusted to the real data.

[0094] Through some of the above embodiments of the present application, it can be seen that the present application adopts a low-code mode, which greatly reduces the development cost. Figure 1 and Figure 2The framework unifies preset styles and supports custom extensions, achieving a high degree of unification of product and Web page styles. The development process is simplified throughout the process. Web pages do not need to encode every element, every event, and every style. They only need to encode and combine key component attributes and events in limited situations within the scope set by the framework. It supports direct online development updates and version iterations, as well as visual version control, to facilitate customized version development, especially skin style customization and local adjustment customization based on existing Web pages. In addition, the Web interface operations and component attribute operations are visualized, and the UI prototype system and the online product system share a set of Web page codes to reduce maintenance and development costs. Finally, the Web page system constructed in this application adopts localized deployment, local storage of the Web interface structure, and visual file editing operations. It is plug-and-play, has strong system compatibility, and does not have excessive performance parameter requirements for the server. It only requires a system configuration that can run the Web service.

[0095] Please refer to Figure 5 , Figure 5 The block diagram of the composition of the device for building a web page based on low code provided by some embodiments of the present application is shown. It should be understood that the device for building a web page based on low code corresponds to the above method embodiment and can execute the various steps involved in the above method embodiment. The specific functions of the device for building a web page based on low code can be found in the description above. To avoid repetition, the detailed description is appropriately omitted here.

[0096] Figure 5 The device for building a web page based on low code includes at least one software function module that can be stored in a memory in the form of software or firmware or solidified in the device for building a web page based on low code. The device for building a web page based on low code includes: a structure construction module 510, used to build a virtual tree structure based on the component structure in the page json file; a configuration module 520, used to configure the tree nodes on the virtual tree structure based on the configuration content of each component in the json file to generate a virtual tree; a page acquisition module 530, used to process the virtual tree and obtain a web page, wherein the iterative update of the web page changes with the update of the page json file.

[0097] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the device described above can refer to the corresponding process in the aforementioned method, and will not be described in detail here.

[0098] Some embodiments of the present application further provide a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, can implement the operations of the method corresponding to any of the above methods provided in the above embodiments.

[0099] Some embodiments of the present application further provide a computer program product, which includes a computer program, wherein when the computer program is executed by a processor, it can implement the operations corresponding to any of the above methods provided in the above embodiments.

[0100] like Figure 6 As shown, some embodiments of the present application provide an electronic device 600, which includes: a memory 610, a processor 620, and a computer program stored in the memory 610 and executable on the processor 620, wherein the processor 620 can implement a method as described in any of the above embodiments when reading the program from the memory 610 through a bus 630 and executing the program.

[0101] Processor 620 can process digital signals and can include various computing structures, such as complex instruction set computer structure, reduced instruction set computer structure, or a structure that implements a combination of multiple instruction sets. In some examples, processor 620 can be a microprocessor.

[0102] The memory 610 may be used to store instructions executed by the processor 620 or data related to the execution of instructions. These instructions and / or data may include codes for implementing some or all functions of one or more modules described in the embodiments of the present application. The processor 620 of the disclosed embodiment may be used to execute instructions in the memory 610 to implement the method shown above. The memory 610 includes a dynamic random access memory, a static random access memory, a flash memory, an optical memory, or other memory known to those skilled in the art.

[0103] The above description is only an embodiment of the present application and is not intended to limit the scope of protection of the present application. For those skilled in the art, the present application may have various changes and variations. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present application should be included in the scope of protection of the present application. It should be noted that similar reference numerals and letters represent similar items in the following drawings, so once an item is defined in one drawing, it does not need to be further defined and explained in the subsequent drawings.

[0104] The above is only a specific implementation 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.

[0105] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or device including the elements.

Claims

1. A method for building a web page based on low code, characterized in that: include: Build a virtual tree structure based on the component structure in the page json file; Based on the configuration content of each component in the json file, the tree nodes on the virtual tree structure are configured to generate a virtual tree; The virtual tree is processed to obtain a Web page, wherein the iterative update of the Web page changes with the update of the page json file.

2. The method according to claim 1, characterized in that The step of processing the virtual tree to obtain a Web page includes: According to the hierarchical structure and hierarchical order on the virtual tree, a web page structure is assembled; Based on the Web page structure, the Web page is rendered and generated.

3. The method according to claim 1 or 2, characterized in that The iterative update method of the Web page includes at least one of adding a page, modifying a page, and deleting a page.

4. The method according to claim 3, characterized in that When the iterative update mode of the web page is to add a page, the method includes: Get the new page json file; Based on the newly added page json file, a component json object is generated, and the component json object is inserted into the position of the page json file corresponding to the position of the Web page to obtain an updated page json file.

5. The method according to claim 4, characterized in that The method of obtaining the newly added page json file includes: In response to the user's operation instruction, the newly added page json file with the page menu location and file name configured is obtained, and the updated menu configuration json file is obtained; Generate a file path corresponding to the page menu location, and store the newly added page json file under the file path.

6. The method according to claim 3, characterized in that When the iterative update mode of the web page is to modify the page, the method includes: Obtain the component object content and component position of the component to be modified from the page json file; Edit the component json object in the editing area corresponding to the component, obtain the modified component object content, and overwrite the component object content of the component to be modified with the modified component object content; After the page modification is completed, the updated page json file is obtained, and the updated menu configuration json file is obtained.

7. The method according to claim 3, characterized in that When the iterative update mode of the web page is to delete the page, the method includes: After searching the location of the component to be deleted from the page json file, delete the component to be deleted, obtain the updated page json file, and obtain the updated menu configuration json file.

8. The method according to any one of claims 4 to 7, characterized in that When the web page is iteratively updated, the method further includes: Generate a backup path for iterative update of the Web page, wherein the name of the backup path includes: an iterative update timestamp, an update page, and the iterative update method; The backup path stores at least one of the following information: when adding a page, backing up the menu configuration json file corresponding to the page json file; when modifying a page, backing up the page json corresponding to the component to be modified; when deleting a page, backing up the page json to be deleted and the menu configuration json file.

9. The method according to any one of claims 4 to 7, characterized in that: The method further includes: saving a target Web page corresponding to the iterative update method; When the Web page is updated to the target Web page, Match and parse the target Web page to generate the updated page json file and the updated menu configuration json file; The updated page json file and the updated menu configuration json file are used to overwrite the page json file and the menu configuration json file corresponding to the page json file.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, wherein the computer program executes the method according to any one of claims 1 to 9 when executed by a processor.

11. An electronic device, characterized in that: The method comprises a memory, a processor, and a computer program stored in the memory and running on the processor, wherein the computer program executes the method according to any one of claims 1 to 9 when being run by the processor.

12. A computer program product, characterized in that The computer program product comprises a computer program, wherein the computer program executes the method according to any one of claims 1 to 9 when executed by a processor.

Images