Visual page construction method, device, computer equipment and storage medium

Abstract

The present application relates to a visual page construction method, device, computer equipment, storage medium and computer program product. The method includes: in response to the construction instruction of the project, obtaining the construction information of the project; sending the construction information of the project to at least one development terminal respectively; in response to the construction operation of the project page triggered by each development terminal for the construction information, obtaining the page editable unit and the configuration data of the page editable unit; determining the component tree of the project page according to the page editable unit, and updating the component configuration data of the component tree according to the configuration data to obtain the project resource package; synchronizing the project resource package to each development terminal, and previewing the project page according to the project resource package through each development terminal to generate a visual page. The use of this method can improve the efficiency of page construction by the collaboration of multiple development terminals, and improve the efficiency of page generation by previewing the page.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a visualization page construction method, apparatus, computer equipment, storage medium and computer program product. Background Art

[0002] With the rapid development of information technologies such as the Internet, the Internet of Things, and cloud computing, information technology is constantly intersecting and integrating with the economy, military, scientific research, and life of the human world; big data visualization technology is widely used in various fields; current big data visualization technologies include: text visualization, network (graph) visualization, spatiotemporal data visualization, multidimensional visualization, relationship graph data visualization, etc., which realize data visualization presentation and analysis capabilities, allowing users to intuitively obtain information.

[0003] At present, the development direction of Internet website construction technology is more inclined to the self-service mode. By dragging and dropping, you can quickly create and modify pages, perform visual operations, and proofread and edit in real time to complete the construction of website pages. However, based on the current page construction method, in the multi-person construction method, the page construction is completed by submitting the completed development tasks of each developer, which leads to a long development cycle, high cost and low development efficiency for website page development. Summary of the invention

[0004] Based on this, it is necessary to provide a visual page construction method, device, computer equipment, computer-readable storage medium and computer program product that can improve web page development efficiency and reduce development costs in response to the above technical problems.

[0005] In a first aspect, the present application provides a method for constructing a visual page. The method comprises:

[0006] In response to a project construction instruction, obtaining construction information of the project;

[0007] Sending the construction information of the project to at least one development terminal respectively;

[0008] In response to a construction operation of a project page triggered by each of the development terminals according to the construction information, obtaining a page editable unit and configuration data of the page editable unit;

[0009] Determine a component tree of the project page according to the page editable unit, and update component configuration data of the component tree according to the configuration data to obtain a project resource package;

[0010] The project resource package is synchronized to each of the development terminals, so that each of the development terminals previews the project page according to the project resource package to generate a visualization page.

[0011] In one embodiment, determining the component tree of the project page according to the page editable unit, and updating the component configuration data of the component tree according to the configuration data to obtain the project resource package includes:

[0012] Send each of the page editable units to a visual editor, and obtain components and component labels corresponding to each of the page editable units;

[0013] Mapping each of the component labels into corresponding configuration data according to a component mapping strategy;

[0014] A component tree of the project page is determined according to each of the components, and component configuration data of the component tree is updated according to the configuration data to obtain a project resource package.

[0015] In one embodiment, determining the component tree of the project page according to each of the components, and updating the component configuration data of the component tree according to the configuration data to obtain a project resource package includes:

[0016] Obtaining the hierarchical relationship between the components;

[0017] According to the hierarchical relationship, the component layout between the components is adjusted to obtain a component tree of the project page;

[0018] The component configuration data of the component tree is updated according to the configuration data to obtain a project resource package.

[0019] In one embodiment, adjusting the component layout between the components according to the hierarchical relationship to obtain the component tree of the project page includes:

[0020] Get component nesting rules and determine layout parameters between components;

[0021] Based on the component nesting rules, the layout parameters are adjusted according to the hierarchical relationship until the preset layout constraints are met, and the component tree of the project page is determined.

[0022] In one embodiment, the step of adjusting the layout parameters according to the hierarchical relationship based on the component nesting rule until a preset layout constraint is satisfied to determine the component tree of the project page includes:

[0023] Based on the component nesting rules, at least one of the layout parameters of whether to adapt to the parent component and the fixed size in the layout parameters is adjusted according to the hierarchical relationship until the preset layout constraints are met, and the component tree of the project page is determined.

[0024] In one embodiment, synchronizing the project resource package to each development terminal so that each development terminal previews the project page according to the project resource package to generate a visualization page includes:

[0025] The project resource package is sent to each of the development terminals so that each of the development terminals responds to the rendering request, obtains the page editable unit and the corresponding request data from the project resource package, combines and splices the editable unit and the request data to obtain combined splicing data, performs rendering and display on the combined splicing data, and generates a visualization page.

[0026] In one embodiment, synchronizing the project resource package to each development terminal so that each development terminal previews the project page according to the project resource package to generate a visualization page includes:

[0027] The project resource package is synchronized to each of the development terminals, so that each of the development terminals constructs a file object model element according to the project resource package, locates a target element node in the file object model element, performs component rendering on the project resource package at the target element node, and generates a visualization page.

[0028] In a second aspect, the present application also provides a visual page construction device. The device comprises:

[0029] A build information acquisition module, used to obtain the build information of the project in response to the build instruction of the project;

[0030] A build information distribution module, used to send the build information of the project to at least one development terminal;

[0031] A collaborative construction module, configured to obtain page editable units and configuration data of the page editable units in response to a construction operation of a project page triggered by each of the development terminals according to the construction information;

[0032] A determination module, configured to determine a component tree of the project page according to the page editable unit, and to update component configuration data of the component tree according to the configuration data to obtain a project resource package;

[0033] The synchronous preview module is used to synchronize the project resource package to each development terminal, so that each development terminal can preview the project page according to the project resource package to generate a visual page.

[0034] In a third aspect, the present application further provides a computer device. The computer device includes a memory and a processor, the memory stores a computer program, and the processor implements the following steps when executing the computer program:

[0035] In response to a project construction instruction, obtaining construction information of the project;

[0036] Sending the construction information of the project to at least one development terminal respectively;

[0037] In response to a construction operation of a project page triggered by each of the development terminals according to the construction information, obtaining a page editable unit and configuration data of the page editable unit;

[0038] Determine a component tree of the project page according to the page editable unit, and update component configuration data of the component tree according to the configuration data to obtain a project resource package;

[0039] The project resource package is synchronized to each of the development terminals, so that each of the development terminals previews the project page according to the project resource package to generate a visualization page.

[0040] In a fourth aspect, the present application further provides a computer-readable storage medium. The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the following steps are implemented:

[0041] In response to a project construction instruction, obtaining construction information of the project;

[0042] Sending the construction information of the project to at least one development terminal respectively;

[0043] In response to a construction operation of a project page triggered by each of the development terminals according to the construction information, obtaining a page editable unit and configuration data of the page editable unit;

[0044] Determine a component tree of the project page according to the page editable unit, and update component configuration data of the component tree according to the configuration data to obtain a project resource package;

[0045] The project resource package is synchronized to each of the development terminals, so that each of the development terminals previews the project page according to the project resource package to generate a visualization page.

[0046] In a fifth aspect, the present application further provides a computer program product. The computer program product includes a computer program, and when the computer program is executed by a processor, the following steps are implemented:

[0047] In response to a project construction instruction, obtaining construction information of the project;

[0048] Sending the construction information of the project to at least one development terminal respectively;

[0049] In response to a construction operation of a project page triggered by each of the development terminals according to the construction information, obtaining a page editable unit and configuration data of the page editable unit;

[0050] Determine a component tree of the project page according to the page editable unit, and update component configuration data of the component tree according to the configuration data to obtain a project resource package;

[0051] The project resource package is synchronized to each of the development terminals, so that each of the development terminals previews the project page according to the project resource package to generate a visualization page.

[0052] The above-mentioned visual page construction method, device, computer equipment, storage medium and computer program product can improve the efficiency of page construction through the collaboration of multiple development terminals, avoid the mutual transmission of file forms of multiple development terminals during the development process, and reduce the user's usage cost by having multiple development terminals simultaneously respond to the page construction operation triggered by the corresponding page construction information. Perform visual editing according to the editable units and configuration data of the page, and preview the target page obtained by the visual editing to generate a visual page to be published. Improve the efficiency of website construction through multi-terminal collaboration, avoid the mutual transmission of file forms; and preview the page, so that the actual effect of the page on the real device can be obtained during the development process, avoid secondary development caused by the page not meeting the actual demand effect after the page is published, and improve the efficiency of page generation. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] Figure 1 An application environment diagram of a visual page building method in one embodiment;

[0054] Figure 2 A flowchart of a method for building a visual page in one embodiment;

[0055] Figure 3a A schematic diagram of a project page in one embodiment;

[0056] Figure 3b A schematic diagram of a component tree corresponding to a project page in an embodiment;

[0057] Figure 4 A schematic diagram of a flow chart of a method for determining a project resource package in one embodiment;

[0058] Figure 5 A schematic diagram of the hierarchical relationship of a component tree in one embodiment;

[0059] Figure 6 A flowchart of a method for constructing a visual page in another embodiment;

[0060] Figure 7A schematic diagram of a page preview process in one embodiment;

[0061] Figure 8 A structural block diagram of a visual page construction device in one embodiment;

[0062] Fig. 9 FIG. 4 is a diagram showing the internal structure of a computer device in one embodiment. DETAILED DESCRIPTION

[0063] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0064] The visual page construction method provided in the embodiment of the present application can be applied to Figure 1 In the application environment shown. Among them, the terminal cluster 102 communicates with the server 104 through the network. The data storage device can store the data that the server 104 needs to process. The data storage device can be integrated on the server 104, or it can be placed on the cloud or other network servers. The server 104 responds to the construction instruction of the project and obtains the construction information of the project; sends the construction information of the project to at least one development terminal in the terminal cluster 102 respectively; the server responds to the construction operation of the project page triggered by each development terminal for the construction information, and obtains the configuration data of the page editable unit and the page editable unit; determines the component tree of the project page according to the page editable unit, and updates the component configuration data of the component tree according to the configuration data to obtain the project resource package; synchronizes the project resource package to each development terminal, and previews the project page according to the project resource package through each development terminal to generate a visual page. Among them, each development terminal in the terminal cluster 102 can be, but is not limited to, various personal computers, laptops, smart phones, tablet computers, Internet of Things devices and portable wearable devices. The server 104 can be implemented with an independent server or a server cluster consisting of multiple servers.

[0065] In one embodiment, Figure 2 As shown, a visual page construction method is provided, which is applied to Figure 1 The following steps are used to illustrate the server example in the example:

[0066] Step 202: In response to the project building instruction, obtain the project building information.

[0067] Among them, the project can be a business device or one or more visualization pages (such as a visualization page); in different business application scenarios, for example, in the logistics industry, the project is a logistics progress query project; in the medical field, it can be a medical information project. The build information can include the version number of the project, the build content of the project, and the functions to be implemented by the project. The build content includes the page editable units of the visualization page (which can also be understood as components), such as the visualization page includes component A, component B, component C and component D. For example, when the constructed project is a medical visualization page, the build information includes the device version number of the medical visualization page, and the components displayed on the visualization page (including components for displaying medical information information, components for selecting medical items, etc.). The build instruction refers to the collaborative construction instruction of the project, which can be understood as that the project is collaboratively constructed by multiple development terminals, and in the construction process, the page editable units determined by each development terminal are synchronized in real time; for example, development terminal 1 drags component A in the page toolbar, and it is displayed synchronously in development terminal 2; development terminal 2 drags component B in the page toolbar, and it is displayed synchronously in development terminal 1.

[0068] Specifically, the server responds to the construction instruction of the project, obtains the project module (such as a page template) from the database according to the construction instruction; and obtains the construction information of the project according to the obtained project template.

[0069] Optionally, in one embodiment, the build instructions of the project may be generated by a first development terminal, and the first development terminal sends them to at least one second development terminal in the form of a QR code or URL information. The server responds to the build instructions of the first development terminal and the second development terminal, obtains the build information of the project, and collaborative editing of the development terminals can be realized.

[0070] Step 204: Send the project's construction information to at least one development terminal.

[0071] Among them, the development terminal refers to the target object belonging to the same project development. The build information obtained by each development terminal can be the same or different; the development permission data of each development terminal can be the same (for example, each development terminal can obtain the build information of the entire project) or different (for example, each development terminal can only obtain the corresponding build information based on the permission data).

[0072] The build information may be sent to the development terminals by a server in the form of a link URL or a graphic code. Alternatively, the build information may be first sent to a designated development terminal, and then sent to other development terminals via the designated development terminal in the form of a link URL or a graphic code. For example, the server sends the build information of project A to development terminal 1, and development terminal 1 shares the received build information with development terminals 2 and 3 in the form of a link URL or a graphic code. Here, there is no limitation on the way the build information is sent.

[0073] Specifically, development terminals participating in the collaborative construction of the project are determined, the acquired construction information of the project is sent to at least one development terminal respectively, and the development environment of the project construction is displayed on each development terminal; wherein, collaborative construction means that each development terminal implements collaborative editing based on websocket, and synchronizes the operations of each collaborator in real time.

[0074] Step 206 , in response to the construction operation of the project page triggered by each development terminal according to the construction information, obtain the page editable unit and the configuration data of the page editable unit.

[0075] Among them, the editable unit of the page is a component; the construction tasks of different development terminals are different, and the construction operations of the project page triggered by the construction information are also different; for example, the project page is an item push page, the construction operation triggered by development terminal 1 is to add an image component, and the construction operation triggered by development terminal 2 is to add an active component of the item (such as an active turntable).

[0076] Each development terminal drags the page editable unit in the page toolbar displayed on the development terminal, that is, uses the page visualization building tool to build the project page without relying on the page front-end frame, that is, the page visualization building tool is decoupled from the page front-end frame.

[0077] Specifically, the server obtains page editable units in response to the build operations of the project pages triggered by the build information of each development terminal, and automatically generates configuration data for each page editable unit; for example, when the build operation triggered by development terminal 1 adds an image component and the build operation triggered by development terminal 2 adds an active component of an item, the active component added by development terminal 2 is synchronously displayed on the development display interface of development terminal 1; the image component added by development terminal 1 is synchronously displayed in the development display area of ​​development terminal 2.

[0078] Step 208, determining the component tree of the project page according to the page editable unit, and updating the component configuration data of the component tree according to the configuration data to obtain a project resource package.

[0079] Among them, components are encapsulations of HTML elements, element layout and style, and business logic, which convert the construction of the page into a combination of components. The page is organized in a componentized way according to the obtained page editable units to obtain the component tree of the project page. The project page can be considered as a component tree. The nodes in the component tree represent page editable units (i.e., page components), and page components can contain subcomponents. Figure 3a The project page in one embodiment shown includes <app / > , left area <left / > and the right area <right / > and head <header>< / header> ,in, <left / > Include multiple sub-tags <banner / > , <right / > Includes multiple sub-items <item / > . Figure 3b As shown in the figure, it is the component tree corresponding to the project page. The parent node is APP, and the subordinate child nodes of the parent node are Left, Header, and Right. The child node of Left is Banner, and the child node of Right is Item.

[0080] Specifically, the obtained page editable units are organized in a componentized manner to obtain a component tree of the project page, and the configuration data of each page editing unit is determined, and the component configuration data of the component tree is updated according to the configuration data; and the component tree is packaged to obtain a project resource package.

[0081] Furthermore, the way to organize the obtained page editable units using componentization is to dynamically add components to the page source code and then repackage and generate the page. For example, after replacing the Left component with the NewLeft component in a visual way, the component tree declaration of the source code is replaced, and the Left tag is replaced with the NewLeft tag.

[0082] Step 210 , synchronizing the project resource package to each development terminal, and performing page preview on the project page according to the project resource package through each development terminal to generate a visualization page.

[0083] Among them, the page preview methods include page mounting and background rendering. Page mounting refers to rendering the project resource package on a certain element node (div) of the front-end page of the editor to display the editing effect of the development terminal; page mounting can be understood as the back-end does not compile the project page to be displayed, and compiles and displays it on the front-end. Background rendering refers to the back-end rendering of the device, which means the page is directly output. The server assembles the existing data and components together and returns them to the front-end for direct rendering and display; background rendering can be understood as the back-end compiling the project page to be displayed in advance, sending the compiled project page to the front-end, and rendering and displaying it by the front-end.

[0084] Specifically, the project resource package is synchronized to each development terminal, and based on any one of the page mounting and background rendering methods, the project page is previewed according to the project resource package through each development terminal to obtain a preview page. When the page preview effect meets actual needs, a visualization page is generated and published.

[0085] In the above-mentioned visual page construction method, by having multiple development terminals simultaneously respond to the page construction operation triggered by the corresponding page construction information, the page construction efficiency can be improved through the collaboration of multiple development terminals, avoiding the mutual transmission of file formats among multiple development terminals during the development process, and reducing the user's usage cost. Visual editing is performed according to the page editable units and configuration data, and the target page obtained by the visual editing is previewed to generate a visual page to be published. The efficiency of website building is improved through the collaboration of multiple terminals to avoid the mutual transmission of file formats; and the page is previewed, so that the actual effect of the page on the real device can be obtained during the development process, avoiding secondary development caused by the page not meeting the actual demand effect after the page is published, and improving the efficiency of page generation.

[0086] In one embodiment, Figure 4 As shown, a method for determining a project resource package is provided, and this method is applied to Figure 1 The following steps are used to illustrate the server example in the example:

[0087] Step 402: Send each page editable unit to the visual editor to obtain the component and component label corresponding to each page editable unit.

[0088] Among them, the page visual construction tool (i.e., visual editor) is decoupled from the page front-end framework; the visual editor is used to realize visual construction, which can be understood as the mapping of json data and components. Users do not need to care about the implementation of components. The device will map components into readable labels, such as text boxes, carousels, verification forms, etc.; while users drag components, the device on the server will assemble components into configuration data json, and the page will render the page in real time according to json rules. It can be further understood that when components change, configuration data will also change, and when configuration data changes, the components corresponding to the configuration data will also be updated, and the project page will also be updated in real time.

[0089] Step 404: Map each component tag to corresponding configuration data according to the component mapping strategy.

[0090] Step 406, obtaining the hierarchical relationship between the components.

[0091] The hierarchical relationship between components includes parent-child hierarchical relationship and sibling hierarchical relationship. The component tree defines the hierarchical relationship between parent and child, and sibling components. Parent and child components are associated through data flow and events: data is passed from the parent component's State to the child component's Props; changes in the child component trigger an Event to notify the parent component. Figure 5 As shown, the component tree defines the hierarchical relationship between parent, child and sibling components.

[0092] Step 408, adjusting the component layout between the components according to the hierarchical relationship to obtain the component tree of the project page.

[0093] Different components have different style layouts. When editing the component tree for each component, you need to deal with the layout impact caused by the hierarchical relationship between different components. When there is a parent-child hierarchical relationship between components, the width of the child component may be too large, which may cause style overflow; that is, you need to set layout parameters for the child component, such as autoFix (whether to adapt to the parent component), forceWidth (force the width of the child component), etc. The component modifies different styles based on these properties.

[0094] In component layout, the page visual construction tool needs to formulate component nesting rules and constraints to ensure the normal rendering of the component tree after visual editing based on the component nesting rules and constraints. In addition to the existing component nesting rules, the component nesting rules also include flexible and customized component nesting rules, such as the fixed element position style cannot appear during the component nesting process.

[0095] Specifically, component nesting rules are obtained, and layout parameters between components are determined; based on the component nesting rules, the layout parameters are adjusted according to the hierarchical relationship until the preset layout constraints are met, and the component tree of the project page is determined. The layout parameters include adaptive parent components and fixed sizes; further, based on the component nesting rules, at least one of the layout parameters of whether to be adaptive to the parent component and the fixed size is adjusted according to the hierarchical relationship until the preset layout constraints are met, and the component tree of the project page is determined.

[0096] Step 410: Update component configuration data of the component tree according to the configuration data to obtain a project resource package.

[0097] Specifically, in the process of adjusting the component layout between components according to the hierarchical relationship, if the editable unit of the page changes, its corresponding configuration data also changes; after adjusting the component layout between components and obtaining the component tree of the project page, the component configuration data of the component number is updated according to the adjusted configuration data to obtain the project resource package.

[0098] In the above-mentioned method for determining the project resource package, the components required for the project are determined according to the different editing freedoms of each development terminal; by obtaining the hierarchical relationship between the components, the component labels are mapped into corresponding configuration data according to the component mapping strategy; according to the hierarchical relationship, the component layout between the components is adjusted by decoupling the page front-end framework through the visual construction tool to obtain the component tree of the project page; and the component configuration data of the component tree is updated according to the configuration data to obtain the project resource package, thereby improving the efficiency of componentization and page generation.

[0099] In one embodiment, Figure 6 As shown, a visual page construction method is provided, which is applied to Figure 1 The following steps are used to illustrate the server example in the example:

[0100] Step 602: In response to the project building instruction, obtain the project building information.

[0101] Specifically, the editor backend of the server responds to the construction instruction of the project, obtains the corresponding project template from the determined project templates, and determines the construction information of the project.

[0102] Step 604, obtaining development permission data of each development terminal.

[0103] The development permission data of each development terminal includes read-only and writable operation permissions, as well as permissions to participate in development, etc. The development permission data of each development terminal is set in advance according to the actual development needs of the project. For example, the build information includes four parts: A, B, C, and D. Development terminal 1 can only read and write part A, development terminal 2 can only read and write part B, development terminal 3 can only read and write part C, and development terminal 4 can only read and write part D.

[0104] Step 606: Determine the build information corresponding to each development terminal from the build information according to the development authority data.

[0105] Specifically, the development authority data of each development terminal is verified, and when the verification is passed, the build information corresponding to each development terminal is determined from the build information according to the development authority data.

[0106] Step 608 , in response to the construction operation of the project page triggered by each development terminal according to the construction information, the corresponding page editable unit is determined from the preset component library, and the configuration data of the page editable unit is obtained.

[0107] Specifically, the build information corresponding to each development terminal is determined from the build information according to the development permission data, each build information is sent to the corresponding development terminal, and the development environment corresponding to the project is displayed on each development terminal; each development terminal triggers a build operation in the development environment, and the server responds to the build operation of the project page triggered by each development terminal based on the build information, and determines the corresponding component from the preset component library; for example, the build operation of development terminal 1 is to move the image component to the main operation area of ​​the project page, that is, it is necessary to obtain the corresponding image component from the component library; the build operation of development terminal 2 is to drag the active component to the project page, that is, it is necessary to determine the active component from the component library (for example, the rights turntable, minus 50 for every 199).

[0108] Optionally, in response to the construction operation of the project page triggered by each development terminal based on the construction information, when there is no component corresponding to the construction operation in the component library, settings are performed according to the components in the component library to obtain the component corresponding to the component operation, thereby realizing free expansion of the component.

[0109] Step 610, determining a component tree of the project page according to the page editable unit, and updating component configuration data of the component tree according to the configuration data to obtain a project resource package.

[0110] Step 612: synchronize the project resource package to each development terminal, so that each development terminal can preview the project page according to the project resource package and generate a visualization page.

[0111] Optionally, in one embodiment, the project resource package is sent to each development terminal so that each development terminal responds to the rendering request, obtains the page editable unit and the corresponding request data from the project resource package, combines and splices the editable unit and the request data, obtains the combined splicing data and performs rendering display to generate a visual page.

[0112] Specifically, the server sends the project resource package to each development terminal, and each development terminal constructs a file object model element based on the project resource package; and locates the target element node in the file object model element by executing the pre-set code in each development terminal (wherein the code sets the target element node to be located), mounts the project resource package to the target element node for component rendering, and generates a visualization page.

[0113] like Figure 7As shown, in the editing background of the server, in response to the construction instruction of the project, the corresponding project template is obtained, the construction information of the project is obtained, and in response to the construction operation of the project page triggered by each development terminal for the construction information, the corresponding components and component configuration data are obtained from the component library, and the component tree of the project page is determined according to the page editable unit at the editor front end of the server, and the component configuration data of the component tree is updated according to the configuration data; the project resource package is synchronized to each development terminal, and the component tree is re-rendered on the specified element node to obtain the preview page. That is, when the preview mode of page mounting is used, the editor front-end page needs to provide a component library component rendering environment (component library front-end framework); to realize front-end rendering, the editor front-end source code introduces the component library component source code; when the component library is updated later, the editor needs to be updated synchronously, thereby improving the speed of real-time rendering.

[0114] Optionally, in one embodiment, the project resource package is synchronized to each development terminal so that each development terminal constructs a file object model element according to the project resource package, locates a target element node in the file object model element, renders the project resource package component at the target element node, and generates a visualization page.

[0115] Specifically, the server sends the project resource package to each development terminal, and each development terminal responds to the rendering request, obtains the page editable unit and the corresponding request data from the project resource package; combines and splices the editable unit and the request data to obtain the combined splicing data, and sends the combined splicing data to each development terminal; according to the combined splicing data, each development terminal performs rendering and display to generate a visual page. That is, background rendering is used to decouple the editor background from the component front-end framework, and the project page is previewed before publishing, and the page after actual publishing can be previewed in real time to reduce the development time.

[0116] Optionally, in one embodiment, link information of the visualization page is generated; the link information is used to verify the visualization page. The link information may be, but is not limited to, a QR code, and the terminal may obtain a preview effect of the visualization page by scanning the QR code.

[0117] In one embodiment, the application scenario is explained using a medical scenario as an example; the server responds to a build instruction of a medical project to obtain build information of the medical project; the build information of the medical project is sent to at least one development terminal respectively; in response to the build operation of the medical project page triggered by the build information at each development terminal, the page editable unit and the configuration data of the page editable unit are obtained; each page editable unit is sent to a visual editor to obtain the component and component label corresponding to each page editing unit; each component label is mapped to corresponding configuration data according to a component mapping strategy; the hierarchical relationship between each component is obtained; component nesting rules are obtained, and layout parameters between each component are determined; based on the component nesting rules, the layout parameters are adjusted according to the hierarchical relationship until the preset layout constraints are met, and the component tree of the project page is determined; the component configuration data of the component tree is updated according to the configuration data to obtain a project resource package.

[0118] The project resource package is sent to each development terminal, and each development terminal responds to the rendering request, obtains the page editable unit and the corresponding request data from the project resource package; the editable unit and the request data are combined and spliced ​​to obtain the combined splicing data, and the combined splicing data is sent to each development terminal; according to the combined splicing data, the rendering display is performed through each development terminal to generate a medical visualization page. Or, the file object model element is constructed according to the project resource package through each development terminal; each development terminal locates the target element node in the file object model element, mounts the project resource package to the target element node for component rendering, and generates a medical visualization page.

[0119] In one embodiment, a visual page construction system is provided, which includes multiple development front ends (editor front ends) and back ends (editor back ends, which can be understood as server ends); the visual page construction system establishes H5 sites such as activity pages and promotional pages for pushing and displaying medical information (such as the display of medical information, the display of medical supplies and related precautions, etc.).

[0120] The backend of the visualization page construction system responds to the construction instruction of the project and obtains the construction information of the project; sends the construction information of the project to at least one development terminal respectively; the development terminal triggers the construction operation on the page tool of the development terminal according to the construction information, for example, dragging the page component to the project page; the backend responds to the construction operation of the project page triggered by each development terminal according to the construction information, and obtains the page editable unit and the configuration data of the page editable unit; sends each page editable unit to the visual editor, obtains the component and component label corresponding to each page editing unit; maps each component label to the corresponding configuration data according to the component mapping strategy; determines the component tree of the project page according to each component, and updates the component configuration data of the component tree according to the configuration data to obtain the project resource package; synchronizes the project resource package to each development terminal, and previews the project page according to the project resource package through each development terminal to generate a medical visualization page.

[0121] In the above-mentioned visual page construction method, the efficiency of website construction is improved through the collaboration of multiple development terminals, the mutual transmission of files is avoided, and the user's usage cost is reduced; and visual construction is carried out through page visualization construction tools, which can improve the efficiency of componentization and page templates to achieve page generation; at the same time, page mounting or background rendering is used, and the editing device is decoupled from the component front-end framework, which can improve the real-time rendering speed.

[0122] It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

[0123] Based on the same inventive concept, the embodiment of the present application also provides a visualization page construction device for implementing the visualization page construction method involved above. The implementation solution provided by the device to solve the problem is similar to the implementation solution recorded in the above method, so the specific limitations in the one or more visualization page construction device embodiments provided below can refer to the limitations of the visualization page construction method above, and will not be repeated here.

[0124] In one embodiment, Figure 8As shown, a visual page construction device is provided, including: a construction information acquisition module 802, a construction information distribution module 804, a collaborative construction module 806, a determination module 808 and a synchronous preview module 810, wherein:

[0125] The build information acquisition module 802 is used to acquire the build information of the project in response to the build instruction of the project.

[0126] The build information distribution module 804 is used to send the build information of the project to at least one development terminal.

[0127] The collaborative construction module 806 is used to obtain the page editable unit and the configuration data of the page editable unit in response to the construction operation of the project page triggered by each development terminal according to the construction information.

[0128] The determination module 808 is used to determine the component tree of the project page according to the page editable unit, and to update the component configuration data of the component tree according to the configuration data to obtain the project resource package.

[0129] The synchronous preview module 810 is used to synchronize the project resource package to each development terminal, so that each development terminal can preview the project page according to the project resource package and generate a visual page.

[0130] In the above-mentioned visual page construction device, by having multiple development terminals simultaneously respond to the page construction operation triggered by the corresponding page construction information, the page construction efficiency can be improved through the collaboration of multiple development terminals, avoiding the mutual transmission of file forms among multiple development terminals during the development process, and reducing the user's usage cost. Visual editing is performed according to the page editable units and configuration data, and the target page obtained by the visual editing is previewed to generate a visual page to be published. The efficiency of website building is improved through the collaboration of multiple terminals to avoid the mutual transmission of file forms; and the page is previewed, so that the actual effect of the page on the real device can be obtained during the development process, avoiding secondary development caused by the page not meeting the actual demand effect after the page is published, and improving the efficiency of page generation.

[0131] Optionally, in one embodiment, the visual page construction device further includes a transceiver module, which is used to send each page editable unit to the visual editor and obtain a component and a component label corresponding to each page editing unit.

[0132] The visual page construction device also includes a mapping module, which is used to map each component label into corresponding configuration data according to the component mapping strategy.

[0133] Optionally, in one embodiment, the determination module 808 is further configured to determine a component tree of the project page according to each component, and to update component configuration data of the component tree according to the configuration data to obtain a project resource package.

[0134] In one embodiment, the visual page construction device also includes a layout adjustment module, which is used to obtain the hierarchical relationship between the components; according to the hierarchical relationship, the component layout between the components is adjusted to obtain the component tree of the project page.

[0135] Optionally, in one embodiment, the determination module 808 is further configured to update component configuration data of the component tree according to the configuration data to obtain a project resource package.

[0136] In one embodiment, the layout adjustment module is also used to obtain component nesting rules and determine layout parameters between components; based on the component nesting rules, the layout parameters are adjusted according to the hierarchical relationship until the preset layout constraints are met, and the component tree of the project page is determined.

[0137] In one embodiment, the layout adjustment module is also used to adjust at least one of the layout parameters, such as whether to adapt to the parent component and the fixed size, in the layout parameters based on the component nesting rules and the hierarchical relationship, until the preset layout constraints are met to determine the component tree of the project page.

[0138] In one embodiment, the visualization page construction device further includes an authority verification module, which is used to obtain development authority data of each development terminal; and determine the construction information corresponding to each development terminal from the construction information according to the development authority data.

[0139] Optionally, in one embodiment, the collaborative construction module 806 is also used to respond to the construction operation of the project page triggered by each development terminal based on the construction information, determine the corresponding page editable unit from the preset component library, and obtain the configuration data of the page editable unit.

[0140] In one embodiment, the visual page construction device also includes a page preview module, which is used to send the project resource package to each development terminal so that each development terminal responds to the rendering request, obtains the page editable unit and the corresponding request data from the project resource package, combines and splices the editable unit and the request data to obtain the combined splicing data, performs rendering and display on the combined splicing data, and generates a visual page.

[0141] Optionally, in one embodiment, the page preview module is also used to synchronize the project resource package to each development terminal, so that each development terminal constructs a file object model element according to the project resource package, locates the target element node in the file object model element, renders the project resource package component at the target element node, and generates a visual page.

[0142] In one embodiment, the visualization page construction device further includes a link information generation module, which is used to generate link information of the visualization page; the link information is used to verify the visualization page.

[0143] Each module in the above-mentioned visual page construction device can be implemented in whole or in part by software, hardware or a combination thereof. Each module can be embedded in or independent of a processor in a computer device in the form of hardware, or can be stored in a memory in a computer device in the form of software, so that the processor can call and execute the operations corresponding to each module.

[0144] In one embodiment, a computer device is provided. The computer device may be a server, and its internal structure diagram may be as follows: Fig. 9 As shown. The computer device includes a processor, a memory and a network interface connected through a device bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating device, a computer program and a database. The internal memory provides an environment for the operation of the operating device and the computer program in the non-volatile storage medium. The database of the computer device is used to store component libraries and configuration data. The network interface of the computer device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, a visual page construction method is implemented.

[0145] Those skilled in the art will understand that Fig. 9 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0146] In one embodiment, a computer device is further provided, including a memory and a processor, wherein a computer program is stored in the memory, and the processor implements the steps in the above-mentioned method embodiments when executing the computer program.

[0147] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments are implemented.

[0148] In one embodiment, a computer program product is provided, including a computer program, which implements the steps in the above method embodiments when executed by a processor.

[0149] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties.

[0150] A person of ordinary skill in the art can understand that all or part of the processes in the above-mentioned embodiment method can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to the memory, database or other medium used in the embodiments provided in the present application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive memory (ReRAM), magnetic memory (MRAM), ferroelectric memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The database involved in each embodiment provided in this application may include at least one of a relational database and a non-relational database. Non-relational databases may include distributed databases based on blockchains, etc., but are not limited to this. The processor involved in each embodiment provided in this application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic device, a data processing logic device based on quantum computing, etc., but are not limited to this.

[0151] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0152] The above-described embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present application. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.

Claims

1. A visual page construction method, characterized in that: The method comprises: In response to a project construction instruction, obtaining construction information of the project; Sending the construction information of the project to at least one development terminal respectively; In response to a construction operation of a project page triggered by each of the development terminals according to the construction information, obtaining a page editable unit and configuration data of the page editable unit; Send each of the page editable units to a visual editor, and obtain components and component labels corresponding to each of the page editable units; Mapping each of the component labels into corresponding configuration data according to a component mapping strategy; Obtaining the hierarchical relationship and component nesting rules between the components, and determining the layout parameters between the components; Based on the component nesting rule, the layout parameters are adjusted according to the hierarchical relationship until the preset layout constraints are met, thereby determining the component tree of the project page; Update component configuration data of the component tree according to the configuration data to obtain a project resource package; The project resource package is synchronized to each of the development terminals, so that each of the development terminals previews the project page according to the project resource package to generate a visualization page.

2. The method according to claim 1, characterized in that The step of adjusting the layout parameters based on the component nesting rule and the hierarchical relationship until a preset layout constraint is satisfied to determine the component tree of the project page includes: Based on the component nesting rules, at least one of the layout parameters of whether to adapt to the parent component and the fixed size in the layout parameters is adjusted according to the hierarchical relationship until the preset layout constraints are met, and the component tree of the project page is determined.

3. The method according to claim 1, characterized in that The step of synchronizing the project resource package to each of the development terminals so that each of the development terminals previews the project page according to the project resource package and generates a visualization page includes: The project resource package is sent to each of the development terminals so that each of the development terminals responds to the rendering request, obtains the page editable unit and the corresponding request data from the project resource package, combines and splices the editable unit and the request data to obtain combined splicing data, performs rendering and display on the combined splicing data, and generates a visualization page.

4. The method according to claim 1, characterized in that: The step of synchronizing the project resource package to each of the development terminals so that each of the development terminals previews the project page according to the project resource package and generates a visualization page includes: The project resource package is synchronized to each of the development terminals, so that each of the development terminals constructs a file object model element according to the project resource package, locates a target element node in the file object model element, performs component rendering on the project resource package at the target element node, and generates a visualization page.

5. A visual page construction device, characterized in that: The device comprises: A build information acquisition module, used to obtain the build information of the project in response to the build instruction of the project; A build information distribution module, used to send the build information of the project to at least one development terminal; A collaborative construction module, configured to obtain page editable units and configuration data of the page editable units in response to a construction operation of a project page triggered by each of the development terminals according to the construction information; A transceiver module, used to send each of the page editable units to a visual editor, and obtain components and component labels corresponding to each of the page editable units; A mapping module, used to map each of the component labels into corresponding configuration data according to a component mapping strategy; A layout adjustment module, used to obtain the hierarchical relationship and component nesting rules between the components, and determine the layout parameters between the components; based on the component nesting rules, the layout parameters are adjusted according to the hierarchical relationship until the preset layout constraints are met, and the component tree of the project page is determined; A determination module, used to update the component configuration data of the component tree according to the configuration data to obtain a project resource package; The synchronous preview module is used to synchronize the project resource package to each development terminal, so that each development terminal can preview the project page according to the project resource package to generate a visual page.

6. The device according to claim 5, characterized in that: The layout adjustment module is also used to adjust at least one of the layout parameters, whether to adapt to the parent component and the fixed size, in the layout parameters based on the component nesting rules and the hierarchical relationship until the preset layout constraints are met, thereby determining the component tree of the project page.

7. The device according to claim 5, characterized in that: The visual page construction device also includes a page preview module; The page preview module is used to send the project resource package to each of the development terminals so that each of the development terminals responds to the rendering request, obtains the page editable unit and the corresponding request data from the project resource package, combines and splices the editable unit and the request data to obtain combined splicing data, performs rendering and display on the combined splicing data, and generates a visual page.

8. The device according to claim 5, characterized in that: The page preview module is also used to synchronize the project resource package to each of the development terminals, so that each of the development terminals constructs a file object model element according to the project resource package, locates a target element node in the file object model element, performs component rendering on the project resource package at the target element node, and generates a visualization page.

9. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 4 are implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 4 are implemented.

Images