Project page generation method and device, equipment and storage medium

Abstract

The invention provides a project page generation method and device, equipment and a storage medium, relates to the technical field of low-code platform development, solves the technical problem of low development efficiency of web projects in related technologies, and realizes function reuse, reduces repeated coding and improves the development efficiency by utilizing a development mode of binding a dynamic menu and a configuration page of a low-code platform. Therefore, the development process is accelerated, and the development efficiency of the web project is effectively improved.

Description

Technical Field

[0001] The present application relates to the field of low-code platform development technology, and in particular to a project page generation method, device, equipment and storage medium. Background Art

[0002] Traditional web project pages are usually developed using technology stacks such as Vue3, Vite, TypeScript, and Element Plus during the development phase. During the development phase, developers are usually required to build the project framework from scratch and complete the development of specific business function modules, such as compiling the corresponding source code. When starting a new project, traditional solutions often require developers to rebuild the project structure, which will cause developers to repeat functional development work between different projects, and even copy code for similar functions from previous projects, which is not only prone to errors but also requires developers to perform multiple tests and debugging, resulting in slow project development and further reducing the development efficiency of web projects. Summary of the invention

[0003] The present application provides a project page generation method, device, equipment and storage medium, which solves the technical problem of low development efficiency of web projects in related technologies. The present solution utilizes a development model that binds a dynamic menu to a configuration page of a low-code platform to achieve function reuse, reduce repeated coding, and thereby speed up the development process, effectively improving the development efficiency of web projects.

[0004] In a first aspect, the present application provides a project page generation method, which comprises:

[0005] In response to a user selecting a web project template, determining the selected target template and loading the target template;

[0006] Based on the project menu structure configured by the user, determine the menu entity corresponding to the project menu structure, and establish an association relationship between the menu entity and the configuration page corresponding to the target template;

[0007] According to the association relationship between the menu entity and the configuration page, obtain the page information corresponding to the associated configuration page from the low-code platform;

[0008] Based on the page information, render and generate the corresponding project page.

[0009] In a second aspect, the present application also provides a project page generating device, which includes:

[0010] The template loading module is configured to determine the selected target template and load the target template in response to the user's selection operation on the web project template;

[0011] The project binding module is configured to determine the menu entity corresponding to the project menu structure based on the project menu structure configured by the user, and to establish an association relationship between the menu entity and the configuration page corresponding to the target template;

[0012] An information acquisition module, configured to acquire page information corresponding to the associated configuration page from the low-code platform according to the association relationship between the menu entity and the configuration page;

[0013] The page rendering module is configured to render and generate the corresponding project page based on the page information.

[0014] In a third aspect, the present application further provides an electronic device, comprising:

[0015] one or more processors;

[0016] A storage device is used to store one or more programs. When the one or more programs are executed by one or more processors, the one or more processors implement the project page generation method of the present application.

[0017] In a fourth aspect, the present application also provides a storage medium storing computer executable instructions, which, when executed by a processor, are used to execute the project page generation method of the present application.

[0018] This application scheme constructs a project menu structure to establish an association between menu entities and configuration pages, forming a development model that binds dynamic menus to the configuration pages of a low-code platform. This model can be used to achieve function reuse and reduce repetitive coding work, thereby speeding up the development process and effectively improving the development efficiency of web projects. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] Figure 1 A schematic diagram of the steps of a project page generation method provided in an embodiment of the present application;

[0020] Figure 2 A schematic diagram of the steps for generating a project page provided in an embodiment of the present application;

[0021] Figure 3 A schematic diagram of a project page provided for an embodiment of the present application;

[0022] Figure 4 A schematic diagram of the steps of establishing an association relationship provided in an embodiment of the present application;

[0023] Figure 5 A schematic diagram of the steps for obtaining page information provided in an embodiment of the present application;

[0024] Figure 6 A schematic diagram of the structure of a project page generating device provided in an embodiment of the present application;

[0025] Figure 7 A schematic diagram of the structure of an electronic device provided in one embodiment of the present application. DETAILED DESCRIPTION

[0026] The embodiments of the present application are further described in detail below in conjunction with the accompanying drawings and examples. It is to be understood that the specific embodiments described herein are only used to explain the embodiments of the present application, rather than to limit the embodiments of the present application. It should also be noted that, for ease of description, only the parts related to the embodiments of the present application rather than all structures are shown in the accompanying drawings, and those skilled in the art should be able to think of it after reading the specification of this application that as long as the technical features do not contradict each other, any combination of the technical features can constitute an optional implementation method.

[0027] The terms "first", "second", etc. in the specification and claims of the present application are used to distinguish similar objects, and are not used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable when appropriate, so that the embodiments of the present application can be implemented in an order other than those illustrated or described here, and the objects distinguished by "first", "second", etc. are generally a class, and the number of objects is not limited. For example, the first object can be one or more. In addition, "and / or" in the specification and claims represents at least one of the connected objects, and the character " / " generally represents that the objects associated before and after are in an "or" relationship. In the description of the present application, "multiple" means two or more, and "several" means one or more.

[0028] In the related technologies, the development of web project pages is usually implemented using technology stacks such as Vue3, Vite, TypeScript and ElementPlus. During the development phase, developers need to build project frameworks from scratch for different projects, such as gradually completing project initialization, environment configuration, building a development environment, and writing code to complete the development of different functional pages. When starting a new project, R&D personnel are still required to re-develop according to the above process, causing them to repeat the work of functional page development between different projects. In addition, the functions to be developed in some projects are similar, and R&D personnel usually copy the code of similar functions, but this is prone to errors and requires R&D personnel to test and debug multiple times, resulting in slow project development and further reducing the development efficiency of web projects.

[0029] To this end, the present application provides a project page generation method, which is applied in an electronic device, and a user can build a web project through the electronic device. Figure 1This is a schematic diagram of the steps of the project page generation method provided in an embodiment of the present application. The user can generate the corresponding project page through simple configuration on the device, saving a lot of repetitive function development work. The specific steps are as follows:

[0030] Step S110: In response to the user's selection operation on the web project template, determine the selected target template and load the target template.

[0031] It is understandable that in order to facilitate the subsequent generation of project pages, developers can pre-process the built pages, such as decomposing the pages to extract page elements, layout structure and style information, and then encapsulate and store them in a preset format, such as in json format in a database corresponding to the cloud, server and / or electronic device. In addition, the database also stores template data corresponding to several project templates, which include page elements, layout structure and style information in the page corresponding to the project template.

[0032] In one embodiment, the electronic device can determine the target template selected by the user for the user's selection operation of the web project template. For example, the electronic device includes a display, and then provides a corresponding display interface on the display for the user to select the project template on the display interface. After determining the target template, the device can copy the template data of the target template from the database, and configure the obtained template data in the local environment to complete the loading of the target template.

[0033] Step S120: Based on the project menu structure configured by the user, determine the menu entity corresponding to the project menu structure, and establish an association relationship between the menu entity and the configuration page corresponding to the target template.

[0034] The user can also configure the project menu structure on the display interface provided by the device, such as configuring menu items at different levels, configuration information corresponding to each menu item, etc., so that the device can determine the corresponding project menu structure according to the information configured by the user. Then, according to the project menu structure, the device can generate a corresponding menu entity, which is used to carry menu information to record the project menu structure configured by the user. Similarly, the device establishes an association relationship between the menu entity and the configuration page corresponding to the target template, and records the association relationship for subsequent calls.

[0035] Step S130: According to the association relationship between the menu entity and the configuration page, obtain the page information corresponding to the associated configuration page from the low-code platform.

[0036] Based on the established association relationship, the device can determine the configuration page associated with the project page that the user needs to build, and then obtain the page information corresponding to the configuration page from the low-code platform. Exemplarily, the page elements, layout structure and style information extracted from the configuration page are stored in json format. The low-code platform can dynamically generate corresponding HTML, CSS and JavaScript codes as the page information corresponding to the configuration page. After the device determines the corresponding configuration page, it can obtain the corresponding code from the low-code platform to facilitate the generation of the project page.

[0037] Step S140: Render and generate a corresponding project page based on the page information.

[0038] After receiving the corresponding page information, the device can decode the page information to compile the corresponding code in the local environment, and then render the corresponding project page. For example, in the process of rendering and generating the project page, the corresponding name, logo and theme color, etc. are configured on the project page, and the corresponding menu items are configured to form the corresponding page on the display interface.

[0039] In one embodiment, Figure 2 A schematic diagram of steps for generating a project page provided in an embodiment of the present application. The rendering of the project page by the device is implemented according to the rendering engine built into the target template, specifically including steps S210-S220:

[0040] Step S210: In response to the loading operation of the target template, the renderer engine built into the target template is deployed in the local environment.

[0041] Step S220: configure the target template according to the project information, and call the renderer engine to render the acquired page information.

[0042] It is understandable that a corresponding renderer engine is built into each project template, and then after determining the target template, the corresponding renderer engine can also be determined accordingly. When loading the target template, the renderer engine built into the target template is deployed in the local environment, so that the renderer engine can be used for rendering when rendering the page. Then, the device configures the target template according to project information such as Logo, theme color, names of menu items at all levels, etc. And call the configured renderer engine to render the page information to generate a project page. It is conceivable that the renderer engine can also be generated based on a low-code platform and built into the project template. In this regard, the device can better generate project pages through the built-in renderer engine, making the rendering of project pages easier and faster.

[0043] For example, Figure 3A schematic diagram of a project page provided for an embodiment of the present application. After obtaining the page information, the device can call the renderer engine corresponding to the target template to render the page information, thereby generating a corresponding project page, such as the project page of the vehicle monitoring and operation and maintenance system shown in the figure, which includes menu items such as alarm management, equipment management, and report management, as well as configuration pages such as system logs, equipment logs, and equipment lists. The figure shows the page corresponding to the system log.

[0044] It can be seen from the above scheme that this scheme builds the project menu structure to establish the association relationship between the menu entity and the configuration page, forming a development model that binds the dynamic menu to the configuration page of the low-code platform. This model can be used to achieve function reuse and reduce repetitive coding work, thereby speeding up the development process and effectively improving the development efficiency of web projects.

[0045] It should be noted that, in one embodiment, the electronic device can also provide feedback to the user in the form of a network address, such as generating a web page carrying a project page, and then saving the network address corresponding to the web page, thereby displaying the network address on the display interface to feedback the network address to the user.

[0046] Figure 4 A schematic diagram of the steps for building an association relationship provided for an embodiment of the present application. In one embodiment, the project menu structure includes menu items and configuration information of the configuration pages pre-assigned to the menu items. It is conceivable that the project menu structure can be configured by the user on the display interface provided by the device, such as configuring specific menu items, the hierarchy of each menu item, etc. Moreover, for the pre-assigned configuration page, the device can provide a corresponding drop-down box, and multiple configuration pages are displayed in the drop-down box for the user to select. Based on this, the association relationship between the menu entity and the configuration page corresponding to the target template is constructed, and the specific steps are as follows:

[0047] Step S310: Based on the configured menu items, determine the topological structure corresponding to each menu item as a menu entity, store the topological structure in a preset format, and generate corresponding project information.

[0048] Step S320: According to the page ID corresponding to each configuration page in the configuration information, add the page ID to the project information.

[0049] Step S330: Generate a page link pointing to the configuration page based on the page ID to associate the configuration page with the menu entity.

[0050] It can be understood that in the process of users configuring the project menu structure, they can define the hierarchical structure of each menu item, that is, the topological structure corresponding to each menu item, such as forming a multi-level menu. Based on this, the device can use the topological structure corresponding to each menu item as a menu entity according to the menu items configured by the user, and then store it in a preset format, such as using json format to store the topological structure, and generate corresponding project information.

[0051] Similarly, when the user configures the project menu structure, he can select the corresponding configuration page in the corresponding drop-down box to form the corresponding configuration information, that is, the page ID corresponding to each configuration page is stored in the configuration information, so that the device can determine the corresponding page ID according to the configuration information, and then add the page ID to the project information. In addition, the device also generates a corresponding page link based on the project ID. It can be imagined that the page link points to the configuration page, and the corresponding associated configuration page generates a corresponding page link, thereby realizing the association of the configuration page with the menu entity.

[0052] Therefore, by establishing an association relationship between the menu entity and the configuration page corresponding to the target template, the device can determine the configuration page required for the project page to be created. From the user's perspective, the user only needs to perform simple configuration to complete the generation of the project page, thereby improving development efficiency.

[0053] Figure 5 A schematic diagram of the steps for obtaining page information provided in an embodiment of the present application. In one embodiment, after determining the association relationship between the menu entity and the configuration page, the device obtains the page information corresponding to the associated configuration page from the low-code platform according to the association relationship. The specific steps are as follows:

[0054] Step S410: Based on the page link, generate request information for obtaining page information corresponding to the associated configuration page, and send the request information to the low-code platform to use the data fed back by the low-code platform in response to the request information as page information.

[0055] Step S420: When it is determined that the configuration page includes device list information, based on the data interface corresponding to the device in the device list, obtain device data and add it to the page information.

[0056] It is understandable that, when the page link is determined, the device can generate corresponding request information based on the link pointing to the configuration page, and the request information is used to obtain the page information corresponding to the associated configuration page. Then, the device sends the request information to the low-code platform, and after receiving the request information, the low-code platform responds to the request information and provides corresponding data (such as page information corresponding to the configuration page) and feeds it back to the device. In this regard, the device can obtain the corresponding page information. In the case where the configuration page includes a device list, the device calls the data interface corresponding to the device in the device list to obtain the corresponding device data, and then adds the obtained device data to the page information, so as to display the corresponding device data to the user when the project page is generated later.

[0057] Therefore, the device can obtain more complete page information by calling the data interface corresponding to the device list, so that subsequent project pages can display more information. In addition, the call to the device data does not require manual migration by the user, which is conducive to improving development efficiency.

[0058] In one embodiment, the user can perform update operations such as replacement and modification on the configured configuration page. The device responds to the user's update operation on the configuration page corresponding to the target template, re-records the association relationship between the target template and the updated configuration page, and obtains the page information corresponding to the updated configuration page from the low-code platform. It is understandable that after the user performs the update operation, the project menu structure will also be updated. The device responds to the updated project menu structure. Correspondingly, the association relationship between the target template and the updated configuration page can also be determined according to the project menu structure, and then the page information corresponding to the updated configuration page can be obtained from the low-code platform according to the corresponding association relationship.

[0059] Figure 6 This is a schematic diagram of the structure of a project page generation device provided in an embodiment of the present application, which is used to execute the project page generation method provided in the above embodiment and has the corresponding functional modules and beneficial effects of the execution method. As shown in the figure, the project page generation device includes a template loading module 601, a project binding module 602, an information acquisition module 603 and a page rendering module 604.

[0060] The template loading module 601 is configured to determine the selected target template and load the target template in response to the user's selection operation on the web project template;

[0061] The project binding module 602 is configured to determine the menu entity corresponding to the project menu structure based on the project menu structure configured by the user, and establish an association relationship between the menu entity and the configuration page corresponding to the target template;

[0062] The information acquisition module 603 is configured to acquire page information corresponding to the associated configuration page from the low-code platform according to the association relationship between the menu entity and the configuration page;

[0063] The page rendering module 604 is configured to render and generate a corresponding project page based on the page information.

[0064] Based on the above embodiment, the template loading module 601 is specifically configured as follows:

[0065] According to the selected target template, copy the template data of the target template from the database;

[0066] Configure template data in the local environment to load the target template.

[0067] Based on the above embodiment, the project menu structure includes menu items and configuration information of configuration pages pre-assigned to the menu items. The project binding module 602 is specifically configured as follows:

[0068] Based on the configured menu items, determine the topological structure corresponding to each menu item as a menu entity, store the topological structure in a preset format, and generate corresponding item information;

[0069] According to the page ID corresponding to each configuration page in the configuration information, add the page ID to the project information;

[0070] Based on the page ID, a page link pointing to the configuration page is generated to associate the configuration page with the menu entity.

[0071] Based on the above embodiment, the project binding module 602 is further configured as follows:

[0072] Based on the page link, generate request information for obtaining page information corresponding to the associated configuration page, and send the request information to the low-code platform to use the data fed back by the low-code platform in response to the request information as page information;

[0073] When it is determined that the configuration page includes device list information, the device data is acquired based on the data interface corresponding to the device in the device list and added to the page information.

[0074] On the basis of the above embodiment, the device further includes a configuration update module, and the configuration update module is specifically configured as follows:

[0075] In response to the user's update operation on the configuration page corresponding to the target template, the association relationship between the target template and the updated configuration page is re-recorded, and page information corresponding to the updated configuration page is obtained from the low-code platform.

[0076] Based on the above embodiment, the page rendering module 604 is specifically configured as follows:

[0077] In response to a loading operation on a target template, deploying a renderer engine built into the target template in a local environment;

[0078] According to the project information, the target template is configured, and the renderer engine is called to render the obtained page information.

[0079] On the basis of the above embodiment, the device further includes an address generation module, and the address generation module is specifically configured as follows:

[0080] Based on the project page, a web page carrying the project page is generated, and the network address corresponding to the web page is saved to feedback the network address to the user.

[0081] It is worth noting that in the embodiment of the above-mentioned device, the modules included are only divided according to functional logic, but are not limited to the above-mentioned division, as long as the corresponding functions can be achieved; in addition, the specific names of the modules are only for the convenience of distinguishing each other, and are not used to limit the protection scope of the embodiments of the present application.

[0082] Figure 7 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application, the device is used to execute the project page generation method provided in the above embodiment, and has functional modules and beneficial effects corresponding to the execution method. As shown in the figure, the electronic device includes a processor 701, a memory 702, an input device 703 and an output device 704. The number of processors 701 can be one or more, and a processor 701 is taken as an example in the figure; the processor 701, the memory 702, the input device 703 and the output device 704 can be connected by a bus or other means, and the figure takes the connection through a bus as an example. The memory 702, as a computer-readable storage medium, can be used to store software programs, computer executable programs and modules, such as program instructions / modules corresponding to the project page generation method in the embodiment of the present application. The processor 701 executes various corresponding functional applications and data processing by running the software programs, instructions and modules stored in the memory 702, that is, realizing the above-mentioned project page generation method.

[0083] The memory 702 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system and at least one application required for a function; the data storage area may store data recorded or created during use, etc. In addition, the memory 702 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other non-volatile solid-state storage device. In some embodiments, the memory 702 may further include a memory remotely arranged relative to the processor 701, and these remotely arranged memories may be connected to the device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0084] The input device 703 can be used to input corresponding digital or character information to the processor 701, and to generate key signal input related to the user settings and function control of the device; the output device 704 can be used to send or display key signal output related to the user settings and function control of the device.

[0085] An embodiment of the present application also provides a storage medium storing computer executable instructions, which, when executed by a processor, are used to perform relevant operations in the project page generation method provided in any embodiment of the present application.

[0086] Computer-readable storage media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device.

[0087] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity 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, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0088] Note that the above are only preferred embodiments of the present application and the technical principles used. Those skilled in the art will understand that the present application is not limited to the specific embodiments described herein, and that various obvious changes, readjustments and substitutions can be made by those skilled in the art without departing from the scope of protection of the present application. Therefore, although the present application is described in more detail through the above embodiments, the present application is not limited to the above embodiments, and may include more other equivalent embodiments without departing from the concept of the present application, and the scope of the present application is determined by the scope of the appended claims.

Claims

1. A project page generation method, characterized in that: include: In response to a user's selection operation on a web project template, determining the selected target template and loading the target template; Based on the project menu structure configured by the user, determining a menu entity corresponding to the project menu structure, and establishing an association relationship between the menu entity and a configuration page corresponding to the target template; According to the association relationship between the menu entity and the configuration page, obtain page information corresponding to the associated configuration page from the low-code platform; Based on the page information, the corresponding project page is rendered and generated.

2. The project page generation method according to claim 1, characterized in that: In response to the user's selection operation on the web project template, determining the selected target template and loading the target template includes: According to the selected target template, copy the template data of the target template from the database; The template data is configured in the local environment to load the target template.

3. The project page generation method according to claim 1, characterized in that: The project menu structure includes menu items and configuration information of configuration pages pre-assigned to the menu items; The determining, based on the project menu structure configured by the user, a menu entity corresponding to the project menu structure, and establishing an association relationship between the menu entity and a configuration page corresponding to the target template, includes: Based on the configured menu items, determine the topological structure corresponding to each of the menu items as the menu entity, store the topological structure in a preset format, and generate corresponding item information; According to the page ID corresponding to each configuration page in the configuration information, adding the page ID to the project information; Based on the page ID, a page link pointing to the configuration page is generated to associate the configuration page with the menu entity.

4. The project page generation method according to claim 3, characterized in that: The acquiring, from the low-code platform, page information corresponding to the associated configuration page according to the association relationship between the menu entity and the configuration page includes: Based on the page link, generate request information for obtaining page information corresponding to the associated configuration page, and send the request information to the low-code platform to use the data fed back by the low-code platform in response to the request information as the page information; When it is determined that the configuration page includes device list information, device data is acquired based on a data interface corresponding to the device in the device list and added to the page information.

5. The project page generation method according to any one of claims 1 to 4, characterized in that: The method further comprises: In response to the user's update operation on the configuration page corresponding to the target template, the association relationship between the target template and the updated configuration page is re-recorded, and page information corresponding to the updated configuration page is obtained from the low-code platform.

6. The project page generation method according to claim 1, characterized in that: The rendering and generating a corresponding project page based on the page information includes: In response to a loading operation on the target template, deploying a renderer engine built into the target template in a local environment; The target template is configured according to the project information, and the renderer engine is called to render the acquired page information.

7. The project page generation method according to claim 1 or 6, characterized in that: After rendering and generating a corresponding project page based on the page information, the method further includes: Based on the project page, a web page carrying the project page is generated, and a network address corresponding to the web page is saved to feed back the network address to the user.

8. A project page generating device, characterized in that: include: A template loading module, configured to determine a selected target template and load the target template in response to a user's selection operation on a web project template; A project binding module is configured to determine a menu entity corresponding to the project menu structure based on the project menu structure configured by the user, and to establish an association relationship between the menu entity and a configuration page corresponding to the target template; An information acquisition module, configured to acquire page information corresponding to the associated configuration page from the low-code platform according to the association relationship between the menu entity and the configuration page; The page rendering module is configured to render and generate a corresponding project page based on the page information.

9. An electronic device, characterized in that: include: one or more processors; A storage device for storing one or more programs, when the one or more programs are executed by the one or more processors, the one or more processors implement the project page generation method as described in any one of claims 1-7.

10. A storage medium storing computer executable instructions, characterized in that: When the computer executable instructions are executed by a processor, they are used to perform the project page generation method according to any one of claims 1 to 7.

Images