CN114594939A - Visual page construction method and device, computer equipment and storage medium - Google Patents
Visual page construction method and device, computer equipment and storage medium Download PDFInfo
- Publication number
- CN114594939A CN114594939A CN202210282674.XA CN202210282674A CN114594939A CN 114594939 A CN114594939 A CN 114594939A CN 202210282674 A CN202210282674 A CN 202210282674A CN 114594939 A CN114594939 A CN 114594939A
- Authority
- CN
- China
- Prior art keywords
- page
- project
- component
- construction
- resource package
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000010276 construction Methods 0.000 title claims abstract description 191
- 230000000007 visual effect Effects 0.000 title claims abstract description 73
- 238000011161 development Methods 0.000 claims abstract description 210
- 238000000034 method Methods 0.000 claims abstract description 43
- 230000001960 triggered effect Effects 0.000 claims abstract description 27
- 238000004590 computer program Methods 0.000 claims abstract description 22
- 238000009877 rendering Methods 0.000 claims description 33
- 238000013507 mapping Methods 0.000 claims description 16
- 230000001360 synchronised effect Effects 0.000 claims description 6
- 238000012800 visualization Methods 0.000 description 30
- 230000008569 process Effects 0.000 description 12
- 230000000694 effects Effects 0.000 description 11
- 238000010586 diagram Methods 0.000 description 10
- 230000005540 biological transmission Effects 0.000 description 8
- 230000004044 response Effects 0.000 description 8
- 238000013079 data visualisation Methods 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 5
- 238000012795 verification Methods 0.000 description 4
- 230000003044 adaptive effect Effects 0.000 description 2
- 238000004458 analytical method Methods 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 238000013500 data storage Methods 0.000 description 2
- 230000008520 organization Effects 0.000 description 2
- 238000004806 packaging method and process Methods 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- OKTJSMMVPCPJKN-UHFFFAOYSA-N Carbon Chemical compound [C] OKTJSMMVPCPJKN-UHFFFAOYSA-N 0.000 description 1
- 230000000712 assembly Effects 0.000 description 1
- 238000000429 assembly Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 229910021389 graphene Inorganic materials 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
Abstract
The application relates to a visual page construction method, a visual page construction device, a visual page construction computer device, a visual page storage medium and a visual page construction computer program product. The method comprises the following steps: responding to a construction instruction of the project, and acquiring construction information of the project; respectively sending the construction information of the project to at least one development terminal; responding to construction operation of each development terminal on a project page triggered by construction information to obtain a page editable unit and configuration data of the page editable unit; 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; and synchronizing the project resource package to each development terminal, and performing page preview on the project page through each development terminal according to the project resource package to generate a visual page. By the adoption of the method, multiple development terminals can cooperate to improve the page construction efficiency, page preview is carried out on the page, and the page generation efficiency is improved.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method and an apparatus for constructing a visual page, a computer device, a storage medium, and a computer program product.
Background
With the rapid development of information technologies such as the internet, the internet of things, cloud computing and the like, the information technologies are continuously and crossly integrated with the aspects of economy, military, scientific research, life and the like of the human world; big data visualization technology is widely used in various fields; current big data visualization techniques include: the system has the advantages of realizing the data visualization presentation and analysis capability, and enabling users to visually acquire information, along with text visualization, network (graph) visualization, space-time data visualization, multi-dimensional visualization, relational graph data visualization and the like.
The development direction of the existing internet website building technology is more inclined to a self-service mode, a page can be quickly created, modified, visually operated and corrected and edited in real time through dragging, and the website page is built; however, based on the current page construction method, in the multi-user construction method, the construction of the page is completed by submitting the completed development tasks of each developer; the development period of website page development is long, the cost is high and the development efficiency is low.
Disclosure of Invention
In view of the foregoing, it is desirable to provide a visualized page constructing method, apparatus, computer device, computer readable storage medium and computer program product, which can improve the web page development efficiency and reduce the development cost.
In a first aspect, the application provides a visual page construction method. The method comprises the following steps:
responding to a construction instruction of a project, and acquiring construction information of the project;
respectively sending the construction information of the project to at least one development terminal;
responding to construction operation of each development terminal on a project page triggered by the construction information to obtain a page editable unit and configuration data of the page editable unit;
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;
and synchronizing 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.
In one embodiment, the 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 includes:
sending each page editing unit to a visual editor, and acquiring a component and a component label corresponding to each page editing unit;
mapping each component tag into corresponding configuration data according to a component mapping policy;
and determining a component tree of the project page according to each component, and updating component configuration data of the component tree according to the configuration data to obtain a project resource package.
In one embodiment, the determining a component tree of the project page according to each component and updating component configuration data of the component tree according to the configuration data to obtain a project resource package includes:
acquiring a hierarchical relationship between the components;
adjusting the component layout among the components according to the hierarchical relationship to obtain a component tree of the project page;
and updating the component configuration data of the component tree according to the configuration data to obtain a project resource package.
In one embodiment, the adjusting the component layout between the components according to the hierarchical relationship to obtain the component tree of the project page includes:
acquiring a component nesting rule and determining layout parameters among components;
and adjusting the layout parameters according to the hierarchical relationship based on the component nesting rule until a preset layout constraint is met, and determining the component tree of the project page.
In one embodiment, the adjusting the layout parameters according to the hierarchical relationship based on the component nesting rule until a preset layout constraint is satisfied, and determining the component tree of the project page includes:
and based on the component nesting rule, adjusting whether at least one of the layout parameters is self-adaptive to a parent component and a fixed size according to the hierarchical relation until a preset layout constraint is met, and determining the component tree of the project page.
In one embodiment, the synchronizing the project resource package to each of the development terminals to enable each of the development terminals to perform page preview on the project page according to the project resource package, so as to generate a visual page includes:
and sending the project resource package to each development terminal so that each development terminal responds to a rendering request, acquiring a page editable unit and corresponding request data from the acquired project resource package, performing combined splicing on the editable unit and the request data to obtain combined spliced data, and performing rendering display on the combined spliced data to generate a visual page.
In one embodiment, the synchronizing the project resource package to each of the development terminals to enable each of the development terminals to perform page preview on the project page according to the project resource package to generate a visualized page includes:
and synchronizing 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 a target element node in the file object model element, and performs component rendering on the project resource package at the target element node to generate a visual page.
In a second aspect, the application further provides a visual page building device. The device comprises:
the construction information acquisition module is used for responding to a construction instruction of a project and acquiring construction information of the project;
the construction information distribution module is used for respectively sending the construction information of the project to at least one development terminal;
the collaborative construction module is used for responding to construction operation of each development terminal on a project page triggered by the construction information to obtain a page editable unit and configuration data of the page editable unit;
the determining module is used for 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;
and the synchronous preview module is used for synchronizing the project resource package to each development terminal so that each development terminal can preview the page of the project page according to the project resource package to generate a visual page.
In a third aspect, the present application also provides a computer device. The computer device comprises a memory storing a computer program and a processor implementing the following steps when executing the computer program:
responding to a construction instruction of a project, and acquiring construction information of the project;
respectively sending the construction information of the project to at least one development terminal;
responding to construction operation of each development terminal on a project page triggered by the construction information to obtain a page editable unit and configuration data of the page editable unit;
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;
and synchronizing 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.
In a fourth aspect, the present application further provides a computer-readable storage medium. The computer-readable storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of:
responding to a construction instruction of a project, and acquiring construction information of the project;
respectively sending the construction information of the project to at least one development terminal;
responding to construction operation of each development terminal on a project page triggered by the construction information to obtain a page editable unit and configuration data of the page editable unit;
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;
and synchronizing 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.
In a fifth aspect, the present application further provides a computer program product. The computer program product comprising a computer program which when executed by a processor performs the steps of:
responding to a construction instruction of a project, and acquiring construction information of the project;
respectively sending the construction information of the project to at least one development terminal;
responding to construction operation of each development terminal on a project page triggered by the construction information to obtain a page editable unit and configuration data of the page editable unit;
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;
and synchronizing 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.
According to the visual page construction method, the visual page construction device, the computer equipment, the storage medium and the computer program product, the 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 cooperation of the multiple development terminals, the mutual transmission of the file forms of the multiple development terminals in the development process is avoided, and the use cost of a user is reduced. And performing visual editing according to the page editable unit and the configuration data, and performing page preview on a target page obtained by the visual editing to generate a visual page to be published. The station building efficiency is improved through multi-terminal cooperation, and mutual transmission of file forms is avoided; and the page preview is carried out on the page, the actual effect of the page on the operation of real equipment can be obtained in the development process, the secondary development caused by the fact that the actual demand effect is not achieved after the page is published is avoided, and the page generation efficiency is improved.
Drawings
FIG. 1 is a diagram of an application environment of a visualization page construction method in one embodiment;
FIG. 2 is a flowchart illustrating a visualization page construction method according to an embodiment;
FIG. 3a is a diagram of a project page in one embodiment;
FIG. 3b is a diagram of a component tree corresponding to a project page in one embodiment;
FIG. 4 is a flow diagram that illustrates a method for determining a project resource package, under an embodiment;
FIG. 5 is a diagram that illustrates the hierarchical relationships of the component tree, in one embodiment;
FIG. 6 is a flowchart illustrating a visual page building method according to another embodiment;
FIG. 7 is a schematic diagram illustrating the flow of page preview in one embodiment;
FIG. 8 is a block diagram that illustrates the structure of the visual page construction apparatus in one embodiment;
FIG. 9 is a diagram illustrating an internal structure of a computer device according to an embodiment.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the present application is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the present application and are not intended to limit the present application.
The visual page construction method provided by the embodiment of the application can be applied to the application environment shown in fig. 1. Wherein the terminal cluster 102 communicates with the server 104 via a network. The data storage device may store data that the server 104 needs to process. The data storage device may be integrated on the server 104, or may be located on the cloud or other network server. The server 104 responds to the construction instruction of the project to acquire construction information of the project; respectively sending the construction information of the project to at least one development terminal in the terminal cluster 102; the server responds to construction operation of each development terminal on a project page triggered by construction information to obtain a page editable unit and configuration data of the page editable unit; 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; and synchronizing the project resource package to each development terminal, and performing page preview on the project page through each development terminal according to the project resource package to generate a visual page. Each development terminal in the terminal cluster 102 may be, but is not limited to, various personal computers, notebook computers, smart phones, tablet computers, internet of things devices, and portable wearable devices. The server 104 may be implemented as a stand-alone server or as a server cluster comprised of multiple servers.
In one embodiment, as shown in fig. 2, a method for constructing a visualization page is provided, which is described by applying the method to the server example in fig. 1, and includes the following steps:
Wherein, the project may be a business device, or may be one or more visual pages (e.g., visual pages); in different business application scenarios, for example, in the logistics industry, the project is a logistics progress query project; in the medical field, it may be a medical information item. The construction information may include information such as a version number of the item, construction contents of the item, and a function to be implemented by the item. Building page editable units (also understood as components) whose content includes a visualization page, such as a visualization page including component a, component B, component C, and component D. For example, when the constructed item is a medical visualization page, the construction information includes a device version number of the medical visualization page, and a component displayed by the visualization page (including a component for displaying medical information, a component for selecting a medical article, and the like). The construction instruction refers to a collaborative construction instruction of a project, and can be understood that the project is collaboratively constructed through a plurality of development terminals, and in the construction process, page editable units determined by the development terminals are synchronized in real time; for example, the development terminal 1 drags the component a in the page toolbar and synchronously displays the component a in the development terminal 2; the development terminal 2 drags the component B in the page toolbar and synchronously displays the component B in the development terminal 1.
Specifically, the server responds to a construction instruction of a project, and acquires a project module (such as a page template) from a database according to the construction instruction; and acquiring construction information of the project according to the obtained project template.
Optionally, in an embodiment, the construction instruction of the project may be generated by a first development terminal, the first development terminal sends the construction instruction of the project to at least one second development terminal in the form of a two-dimensional code or website information, and the server obtains the construction information of the project in response to the construction instruction of the first development terminal and the construction instruction of the second development terminal, so that collaborative editing of the development terminals may be implemented.
And step 204, respectively sending the construction information of the project to at least one development terminal.
The development terminals refer to target objects belonging to the same project development, and the acquired construction information of each development terminal can be the same or different; the development authority data of each development terminal may be the same (e.g., each development terminal may obtain the construction information of the entire project) or may be different (e.g., each development terminal may only obtain the corresponding construction information according to the authority data).
The form of sending the construction information to the development terminals can be that the construction information is sent to each development terminal in a mode of linking a website or a graphic code through a server; or the construction information can be sent to a specified development terminal, and the construction information is sent to other development terminals in a mode of linking a website or a graphic code through the specified development terminal; for example, the server sends the construction information of the project A to the development terminal 1, and the development terminal 1 shares the received construction information to the development terminal 2 and the development terminal 3 in a mode of linking a website or a graphic code; here, the transmission method of the configuration information is not limited.
Specifically, determining development terminals participating in project collaborative construction, respectively sending acquired construction information of a project to at least one development terminal, and displaying a development environment of the project construction at each development terminal; the cooperative construction means that each development terminal realizes cooperative editing based on websocket and synchronizes the operation of each collaborator in real time.
And step 206, responding to the construction operation of each development terminal on the project page triggered by the construction information, and obtaining the configuration data of the page editable unit and the page editable unit.
Wherein, the page editable unit is a component; the construction tasks of different development terminals are different, and the construction operation of the project page triggered by the construction information is also different; for example, the project page is an item push page, the construction operation triggered by the development terminal 1 is an add image component, and the construction operation triggered by the development terminal 2 is an active component (e.g., an active carousel) for adding an item.
Each development terminal drags a page editable unit in a page toolbar displayed by the development terminal, namely, a project page is established through a page visual building tool, and a page front end frame does not need to be relied on, namely, the page visual building tool is decoupled from the page front end frame.
Specifically, the server responds to construction operation of each development terminal on a project page triggered by construction information to obtain a page editable unit; automatically generating configuration data of editable units of each page; for example, an image component is added by the construction operation triggered by the development terminal 1, and when an active component of an article is added by the construction operation triggered by the development terminal 2, the active component added by the development terminal 2 is synchronously displayed on a development display interface of the development terminal 1; the image components added by the development terminal 1 are synchronously displayed in the development display area of the development terminal 2.
And 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 the project resource package.
The assembly is used for packaging HTML elements, element layout and style and business logic, and building pages is converted into combination of the assemblies. And organizing the pages by using a componentization mode according to the obtained page editable unit to obtain a component tree of the project page. A project page may be thought of as a tree of components, where nodes in the tree of components represent page editable elements (i.e., page components), and page components may contain subcomponents. As in the Item page in one embodiment shown in fig. 3a, the Item page comprises < App/>, a left region < left/> and a Right region < Right/> and a head < Header/>, wherein < left/> comprises a plurality of sub-tags < Banner/>, and < Right/> comprises a plurality of sub-items < Item/>. FIG. 3b shows a component tree corresponding to an Item page, where the parent node is APP, 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.
Specifically, page organization is carried out on the obtained page editable units in a componentization mode to obtain a component tree of a project page, 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 packaging the component tree to obtain a project resource package.
Further, the way of page organization of the obtained page editable unit by using the componentization way can be: dynamically adding components to the page source code and then repackaging the generated page. If the Left component is replaced into the NewLeft component in a visual mode, replacing the component tree statement of the source code, and replacing the Left label with the NewLeft label.
And step 210, synchronizing the project resource packages to each development terminal, and performing page preview on the project page through each development terminal according to the project resource packages to generate a visual page.
The page previewing mode comprises page mounting and background rendering, wherein the page mounting means that a project resource package is rendered on a certain element node (div) of a front-end page of an editor, and the editing effect of a development terminal is displayed; the page mount can be understood that the back end does not compile the project page to be displayed, and the front end compiles and displays the project page. Background rendering refers to rendering at the back end of the device, namely page straightening, and the server side assembles the existing data and components together and then returns the data and the components to the front end for direct rendering and display; background rendering can be understood as compiling the project page to be displayed in advance by the back end, sending the compiled project page to the front end, and rendering and displaying by the front end.
Specifically, the project resource package is synchronized to each development terminal, page preview is performed on the project page through each development terminal according to the project resource package based on any one of page mounting and background rendering, a preview page is obtained, and when the page preview effect meets the actual requirement, a visual page is generated and issued.
According to the visual page construction method, the multiple development terminals simultaneously respond to the page construction operation triggered by the corresponding page construction information, so that the page construction efficiency can be improved through the cooperation of the multiple development terminals, the mutual transmission of the file forms of the multiple development terminals in the development process is avoided, and the use cost of a user is reduced. And performing visual editing according to the page editable unit and the configuration data, and performing page preview on a target page obtained by the visual editing to generate a visual page to be published. The station building efficiency is improved through multi-terminal cooperation, and mutual transmission of file forms is avoided; and the page preview is carried out on the page, the actual effect of the page on the operation of real equipment can be obtained in the development process, the secondary development caused by the fact that the actual demand effect is not reached after the page is published is avoided, and the page generation efficiency is improved.
In one embodiment, as shown in fig. 4, a method for determining a project resource package is provided, which is described by applying the method to the server example in fig. 1, and includes the following steps:
Wherein, the page visualization construction tool (namely the visualization editor) is decoupled from the page front-end framework; the visual editor is used for realizing visual construction, the visual construction can be understood as mapping of json data and the components, a user does not need to care about realization of the components, and the device can map the components into readable labels, such as text boxes, carousel pictures, verification forms and the like; a user drags the components, devices on the server can assemble the components into configuration data json, and the page can be rendered according to json rules in real time. It can be further understood that when a component changes, the configuration data also changes, when the configuration data changes, the component corresponding to the configuration data also updates, and the project page also updates in real time.
The hierarchical relationship among the components comprises a parent-child hierarchical relationship and a brother hierarchical relationship. The component tree defines the hierarchical relationship of father and son and brothers among the components, and the father and son components are associated through data flow and events, wherein data is transmitted from the State of the father component to the prons of the son components; the change of a child component triggers an Event to notify the parent component. As shown in FIG. 5, the component tree defines the hierarchical relationship of parent and child siblings among the components.
And 408, adjusting the component layout among the components according to the hierarchical relation to obtain a component tree of the project page.
Different components have different style layouts, and when the component tree is laid out and edited by each component, layout influence brought by hierarchical relationships generated by different components needs to be processed. When parent-child hierarchical relationships exist among components, the width of the child components is too large, and the style overflow can be caused; that is, layout parameters such as autoFix (whether to adapt parent components), forceWidth (mandatory child component width), etc. need to be set for child components, and different styles are modified inside the components according to these attributes.
In the component layout, a page visualization building tool needs to make rules and constraints for component nesting, and normal rendering of a visually edited component tree is ensured based on the rules and constraints for component nesting. The component nesting rules include, in addition to existing component nesting rules, flexibly customized component nesting rules, such as a style in which a fixed element position fixed cannot appear during the component nesting process.
Specifically, acquiring a component nesting rule, and determining layout parameters among components; and adjusting the layout parameters according to the hierarchical relation based on the component nesting rule until the preset layout constraint is met, and determining the component tree of the project page. The layout parameters include adaptive parent components, fixed size; further, based on a component nesting rule, whether at least one layout parameter of a parent component and a fixed size is self-adaptive or not is adjusted according to the hierarchical relation until a preset layout constraint is met, and a component tree of the project page is determined.
Specifically, in the process of adjusting the layout of the components among the components according to the hierarchical relationship, if the page editable unit is changed, the corresponding configuration data is also changed; and after the component layout among the components is adjusted to obtain a component tree of the project page, updating the component configuration data of the component number according to the adjusted configuration data to obtain a project resource package.
In the method for determining the project resource package, components required by the project are determined according to the selection of different editing degrees of freedom of each development terminal; mapping each component label into corresponding configuration data according to a component mapping strategy by acquiring the hierarchical relation among the components; decoupling with a page front-end framework through a visual building tool according to the hierarchical relation, and adjusting the component layout among the components to obtain a component tree of the project page; and updating the component configuration data of the component tree according to the configuration data to obtain a project resource package, thereby improving the efficiency of componentization and realizing page generation.
In one embodiment, as shown in fig. 6, a method for constructing a visualization page is provided, which is described by applying the method to the server example in fig. 1, and includes the following steps:
Specifically, the editor background of the server responds to the construction instruction of the project, acquires a corresponding project template from the determined project templates, and determines construction information of the project.
And step 604, acquiring development authority data of each development terminal.
The development authority data of each development terminal comprises read-only and writable operation authority, authority for whether to participate in development and the like; the development authority data of each development terminal is set in advance according to the actual development requirements of the project. For example, the construction information includes A, B, C, D four parts, the development terminal 1 can only read and write the part a, the development terminal 2 can only read and write the part B, the development terminal 3 can only read and write the part C, and the development terminal 4 can only read and write the part D.
And 606, determining construction information corresponding to each development terminal from the construction information according to the development authority data.
Specifically, the development authority data of each development terminal is verified, and after the verification is passed, the corresponding construction information of each development terminal is determined from the construction information according to the development authority data.
Step 608, in response to the construction operation of each development terminal on the project page triggered by the construction information, determining a corresponding page editable unit from a preset component library, and obtaining configuration data of the page editable unit.
Specifically, the construction information corresponding to each development terminal is determined from the construction information according to the development permission data, each construction 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 construction operation in a development environment, and the server responds to the construction operation of each development terminal on a project page triggered by construction information and determines a corresponding component from a preset component library; for example, the construction operation of the development terminal 1 is to move a picture assembly to a main operation area of a project page, that is, a corresponding picture assembly needs to be obtained from an assembly library; the build operation of the development terminal 2 is to drag the active component onto the project page, i.e. the active component needs to be determined from the component library (e.g. rights carousel, full 199 minus 50).
Optionally, in response to a construction operation of each development terminal on a project page triggered by construction information, when no component corresponding to the construction operation exists in the component library, setting is performed according to the component in the component library to obtain a component corresponding to the component operation, so that the component is freely expanded.
And step 612, synchronizing the project resource packages to the development terminals so that the development terminals can preview the project pages according to the project resource packages to generate the visual pages.
Optionally, in an 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 obtained project resource package, combines and splices the editable unit and the request data to obtain combined spliced data, and performs rendering display to generate the visual page.
Specifically, the server sends the project resource package to each development terminal, and each development terminal constructs a file object model element according to the project resource package; and positioning a target element node in the file object model element by executing a code preset in each development terminal (wherein the code is provided with the target element node to be positioned), mounting the project resource package to the target element node for component rendering, and generating a visual page.
As shown in fig. 7, in the editing background of the server, in response to a project construction instruction, acquiring a corresponding project template to obtain construction information of a project, in response to construction operations on a project page triggered by each development terminal for the construction information, acquiring a corresponding component and configuration data of the component from a component library, in front of an editor of the server, determining a component tree of the project page according to an editable unit of the page, and updating the component configuration data of the component tree according to the configuration data; and synchronizing the project resource package to each development terminal, and re-rendering the component tree on the designated element node to obtain a preview page. Namely, a preview mode of page mounting is used, and a component library component rendering environment (a component library front-end frame) needs to be provided on a front-end page of the editor; in order to realize front-end rendering, the front-end source code of the editor introduces the component source code of the component library; and after the subsequent component library is updated, the editor needs to be updated synchronously, so that the real-time rendering speed is increased.
Optionally, in an 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, and performs component rendering on the project resource package at the target element node to generate a visualization page.
Specifically, the server sends a project resource package to each development terminal, each development terminal responds to a rendering request, and a page editable unit and corresponding request data are obtained from the project resource package; combining and splicing the editable units and the request data to obtain combined spliced data, and sending the combined spliced data to each development terminal; and according to the combined splicing data, performing rendering display through each development terminal to generate a visual page. The background rendering is adopted, so that the background of the editor is decoupled from the front-end framework of the component, the project page is previewed before being released, the page after being actually released is previewed, the actual effect of the page can be previewed in real time, and the development time length is reduced.
Optionally, in one embodiment, link information of the visualized page is generated; the link information is used to verify the visualization page. The link information may be, but is not limited to, a two-dimensional code, and the terminal may obtain a preview effect of the visualized page by scanning the two-dimensional code.
In one embodiment, the application scenario is described with a medical scenario as an example; the server responds to the construction instruction of the medical project and acquires construction information of the medical project; respectively sending the construction information of the medical project to at least one development terminal; responding to construction operation of each development terminal on a medical project page triggered by construction information to obtain a page editable unit and configuration data of the page editable unit; sending each page editable unit to a visual editor, and acquiring a component and a component label corresponding to each page editable unit; mapping each component label into corresponding configuration data according to the component mapping strategy; acquiring a hierarchical relationship among the components; acquiring a component nesting rule and determining layout parameters among components; adjusting the layout parameters according to the hierarchical relation based on the component nesting rule until the preset layout constraint is met, and determining a component tree of the project page; and updating the component configuration data of the component tree according to the configuration data to obtain the project resource package.
Sending the project resource package to each development terminal, wherein each development terminal responds to the rendering request and acquires a page editable unit and corresponding request data from the acquired project resource package; combining and splicing the editable units and the request data to obtain combined spliced data, and sending the combined spliced data to each development terminal; and according to the combined splicing data, performing rendering display through each development terminal to generate a medical visualization page. Or constructing file object model elements according to the project resource package through each development terminal; and each development terminal positions a 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.
In one embodiment, a visualization page building system is provided, which includes a plurality of development front-ends (editor front-ends) and back-ends (editor back-ends, which may be understood as server-ends); the visualization page construction system establishes H5 sites such as an activity page, a publicity page and the like for pushing and displaying medical information (such as the display of medical information, the display of medical articles and related notices and the like).
The back end of the visual page construction system responds to the construction instruction of the project to obtain construction information of the project; respectively sending the construction information of the project to at least one development terminal; the development terminal triggers construction operation on a page tool of the development terminal according to the construction information, for example, a page component is dragged to a project page; the back end responds to the construction operation of each development terminal on the project page triggered by the construction information to obtain a page editable unit and configuration data of the page editable unit; sending each page editable unit to a visual editor, and acquiring a component and a component label corresponding to each page editable unit; mapping each component label into corresponding configuration data according to the component mapping strategy; determining a component tree of the project page according to each component, and updating component configuration data of the component tree according to the configuration data to obtain a project resource package; and synchronizing the project resource packages to each development terminal, and performing page preview on the project page through each development terminal according to the project resource packages to generate a medical visualization page.
In the visual page construction method, the station construction efficiency is improved through the cooperation of multiple development terminals, the mutual transmission of file forms is avoided, and the use cost of a user is reduced; the visual construction is carried out through the visual construction tool of the page, so that the page generation efficiency of modularization and page templates can be improved; meanwhile, page mounting or background rendering is adopted, and the editing device is decoupled with the front-end framework of the assembly, so that the real-time rendering speed can be improved.
It should be understood that, although the steps in the flowcharts related to the embodiments as described above are sequentially displayed as indicated by arrows, the steps are not necessarily performed sequentially as indicated by the arrows. The steps are not performed in the exact order shown and described, and may be performed in other orders, unless explicitly stated otherwise. Moreover, at least a part of the steps in the flowcharts related to the embodiments described above may include multiple steps or multiple stages, which are not necessarily performed at the same time, but may be performed at different times, and the execution order of the steps or stages is not necessarily sequential, but may be performed alternately or alternately with other steps or at least a part of the steps or stages in other steps.
Based on the same inventive concept, the embodiment of the application also provides a visual page construction device for realizing the visual page construction method. The implementation scheme for solving the problem provided by the apparatus is similar to the implementation scheme described in the method, so the specific limitations in one or more embodiments of the visualization page construction apparatus provided below may refer to the limitations on the visualization page construction method in the foregoing, and details are not described here.
In one embodiment, as shown in fig. 8, there is provided a visualization page constructing apparatus including: a construction information acquisition module 802, a construction information distribution module 804, a cooperation construction module 806, a determination module 808, and a synchronization preview module 810, wherein:
a construction information obtaining module 802, configured to obtain construction information of the project in response to a construction instruction of the project.
The construction information distribution module 804 is configured to send the construction information of the project to at least one development terminal respectively.
And the cooperation construction module 806 is configured to obtain the configuration data of the page editable unit and the page editable unit in response to construction operation on the project page triggered by each development terminal for the construction information.
The determining module 808 is configured to 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 the project resource package.
And the synchronous preview module 810 is configured to synchronize the project resource package to each development terminal, so that each development terminal performs page preview on the project page according to the project resource package to generate a visual page.
In the visual page construction device, the multiple development terminals simultaneously respond to the page construction operation triggered by the corresponding page construction information, so that the page construction efficiency can be improved through the cooperation of the multiple development terminals, the mutual transmission of the file forms of the multiple development terminals in the development process is avoided, and the use cost of a user is reduced. And performing visual editing according to the page editable unit and the configuration data, and performing page preview on a target page obtained by the visual editing to generate a visual page to be published. The station building efficiency is improved through multi-terminal cooperation, and mutual transmission of file forms is avoided; and the page preview is carried out on the page, the actual effect of the page on the operation of real equipment can be obtained in the development process, the secondary development caused by the fact that the actual demand effect is not reached after the page is published is avoided, and the page generation efficiency is improved.
Optionally, in an embodiment, the visualization page constructing apparatus further includes a transceiver module, configured to send each page editable unit to the visualization editor, and obtain the component and the component tag corresponding to each page editing unit.
The visualization page construction device also comprises a mapping module which is used for mapping each component label into corresponding configuration data according to the component mapping strategy.
Optionally, in an embodiment, the determining module 808 is further configured to determine a component tree of the project page according to each component, and update component configuration data of the component tree according to the configuration data to obtain the project resource package.
In one embodiment, the visual page construction device further includes a layout adjustment module, which is used for acquiring the hierarchical relationship between the components; and adjusting the component layout among the components according to the hierarchical relation to obtain a component tree of the project page.
Optionally, in an embodiment, the determining module 808 is further configured to update the component configuration data of the component tree according to the configuration data, so as to obtain the project resource package.
In one embodiment, the layout adjustment module is further configured to obtain component nesting rules and determine layout parameters between components; and adjusting the layout parameters according to the hierarchical relation based on the component nesting rule until the preset layout constraint is met, and determining the component tree of the project page.
In an embodiment, the layout adjusting module is further configured to adjust, according to the hierarchical relationship, whether at least one of a parent component and a fixed size is adaptive in the layout parameters based on a component nesting rule until a preset layout constraint is satisfied, and determine a component tree of the project page.
In one embodiment, the visual page construction device further comprises a permission verification module, wherein the permission verification module is used for acquiring development permission data of each development terminal; and determining construction information corresponding to each development terminal from the construction information according to the development authority data.
Optionally, in an embodiment, the collaborative construction module 806 is further configured to determine, in response to a construction operation on the project page triggered by each development terminal for the construction information, a corresponding page editable unit from a preset component library, and obtain configuration data of the page editable unit.
In one embodiment, the visualized page construction device further includes a page preview module, where the page preview module is configured to send the project resource package to each development terminal, so that each development terminal responds to the rendering request, obtains a page editable unit and corresponding request data from the obtained project resource package, performs combination and splicing on the editable unit and the request data to obtain combination and spliced data, and performs rendering and display on the combination and spliced data to generate the visualized page.
Optionally, in an embodiment, the page preview module is further configured 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 a target element node in the file object model element, and performs component rendering on the project resource package at the target element node to generate the visualization page.
In one embodiment, the visualized page constructing device further comprises a link information generating module, wherein the link information generating module is used for generating link information of the visualized page; the link information is used to verify the visualization page.
The modules in the visual page building device can be wholly or partially implemented by software, hardware and a combination thereof. The modules can be embedded in a hardware form or independent from a processor in the computer device, and can also be stored in a memory in the computer device in a software form, so that the processor can call and execute operations corresponding to the modules.
In one embodiment, a computer device is provided, which may be a server, and its internal structure diagram may be as shown in fig. 9. The computer apparatus includes a processor, a memory, and a network interface connected by a device bus. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The nonvolatile storage medium stores an operating device, a computer program, and a database. The internal memory provides an environment for the operation device in the nonvolatile storage medium and the execution of the computer program. The database of the computer device is used for storing component libraries and configuration data. The network interface of the computer device is used for communicating with an external terminal through a network connection. The computer program is executed by a processor to implement a visual page building method.
Those skilled in the art will appreciate that the architecture shown in fig. 9 is merely a block diagram of some of the structures associated with the disclosed aspects and is not intended to limit the computing devices to which the disclosed aspects apply, as particular computing devices may include more or less components than those shown, or may combine certain components, or have a different arrangement of components.
In one embodiment, a computer device is further provided, which includes a memory and a processor, the memory stores a computer program, and the processor implements the steps of the above method embodiments when executing the computer program.
In an embodiment, a computer-readable storage medium is provided, on which a computer program is stored which, when being executed by a processor, carries out the steps of the above-mentioned method embodiments.
In an embodiment, a computer program product is provided, comprising a computer program which, when being executed by a processor, carries out the steps of the above-mentioned method embodiments.
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 for analysis, stored data, presented data, etc.) referred to in the present application are information and data authorized by the user or sufficiently authorized by each party.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by hardware instructions of a computer program, which can be stored in a non-volatile computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. Any reference to memory, database, or other medium used in the embodiments provided herein may include at least one of non-volatile and volatile memory. The nonvolatile Memory may include a Read-Only Memory (ROM), a magnetic tape, a floppy disk, a flash Memory, an optical Memory, a high-density embedded nonvolatile Memory, a resistive random Access Memory (ReRAM), a Magnetic Random Access Memory (MRAM), a Ferroelectric Random Access Memory (FRAM), a Phase Change Memory (PCM), a graphene Memory, and the like. Volatile Memory may include Random Access Memory (RAM), external cache Memory, or the like. By way of illustration and not limitation, the RAM may take many forms, such as Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), and so on. The databases referred to in various embodiments provided herein may include at least one of relational and non-relational databases. The non-relational database may include, but is not limited to, a block chain based distributed database, and the like. The processors referred to in the embodiments provided herein may be general purpose processors, central processing units, graphics processors, digital signal processors, programmable logic devices, quantum computing based data processing logic devices, etc., without limitation.
All possible combinations of the technical features in the above embodiments may not be described for the sake of brevity, but should be considered as being within the scope of the present disclosure as long as there is no contradiction between the combinations of the technical features.
The above-mentioned embodiments only express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the present application. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present application shall be subject to the appended claims.
Claims (10)
1. A visual page construction method is characterized by comprising the following steps:
responding to a construction instruction of a project, and acquiring construction information of the project;
respectively sending the construction information of the project to at least one development terminal;
responding to construction operation of each development terminal on a project page triggered by the construction information to obtain a page editable unit and configuration data of the page editable unit;
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;
and synchronizing 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.
2. The method of claim 1, wherein determining a component tree of the project page according to the page editable element and updating component configuration data of the component tree according to the configuration data to obtain a project resource package comprises:
sending each page editing unit to a visual editor, and acquiring a component and a component label corresponding to each page editing unit;
mapping each component tag into corresponding configuration data according to a component mapping policy;
and determining a component tree of the project page according to each component, and updating component configuration data of the component tree according to the configuration data to obtain a project resource package.
3. The method of claim 2, wherein determining a component tree for the project page based on each of the components, and updating component configuration data for the component tree based on the configuration data to obtain a project resource package comprises:
acquiring a hierarchical relationship between the components;
adjusting the component layout among the components according to the hierarchical relationship to obtain a component tree of the project page;
and updating the component configuration data of the component tree according to the configuration data to obtain a project resource package.
4. The method of claim 3, wherein the adjusting the layout of the components between the components according to the hierarchical relationship to obtain the component tree of the project page comprises:
acquiring a component nesting rule and determining layout parameters among components;
and adjusting the layout parameters according to the hierarchical relationship based on the component nesting rule until a preset layout constraint is met, and determining the component tree of the project page.
5. The method according to claim 4, wherein the adjusting the layout parameters according to the hierarchical relationship based on the component nesting rules until a preset layout constraint is satisfied, and determining the component tree of the project page comprises:
and based on the component nesting rule, adjusting whether at least one of the layout parameters is self-adaptive to a parent component and a fixed size according to the hierarchical relation until a preset layout constraint is met, and determining the component tree of the project page.
6. The method according to claim 1, wherein the synchronizing the project resource package to each of the development terminals so that each of the development terminals performs a page preview on the project page according to the project resource package to generate a visualized page includes:
and sending the project resource package to each development terminal so that each development terminal responds to a rendering request, acquiring a page editable unit and corresponding request data from the acquired project resource package, performing combined splicing on the editable unit and the request data to obtain combined spliced data, and performing rendering display on the combined spliced data to generate a visual page.
7. The method according to claim 1, wherein the synchronizing the project resource package to each of the development terminals so that each of the development terminals performs a page preview on the project page according to the project resource package to generate a visualized page includes:
and synchronizing 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 a target element node in the file object model element, and performs component rendering on the project resource package at the target element node to generate a visual page.
8. A visual page building apparatus, the apparatus comprising:
the construction information acquisition module is used for responding to a construction instruction of a project and acquiring construction information of the project;
the construction information distribution module is used for respectively sending the construction information of the project to at least one development terminal;
the collaborative construction module is used for responding to construction operation of each development terminal on a project page triggered by the construction information to obtain a page editable unit and configuration data of the page editable unit;
the determining module is used for 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;
and the synchronous preview module is used for synchronizing the project resource package to each development terminal so that each development terminal can preview the page of the project page according to the project resource package to generate a visual page.
9. A computer device comprising a memory and a processor, the memory storing a computer program, characterized in that the processor, when executing the computer program, implements the steps of the method of any of claims 1 to 7.
10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210282674.XA CN114594939A (en) | 2022-03-22 | 2022-03-22 | Visual page construction method and device, computer equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210282674.XA CN114594939A (en) | 2022-03-22 | 2022-03-22 | Visual page construction method and device, computer equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114594939A true CN114594939A (en) | 2022-06-07 |
Family
ID=81811109
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210282674.XA Pending CN114594939A (en) | 2022-03-22 | 2022-03-22 | Visual page construction method and device, computer equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114594939A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117311709A (en) * | 2023-09-18 | 2023-12-29 | 深圳市联医科技有限公司 | Page design system and electronic equipment applied to Internet nursing software |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20140019627A (en) * | 2012-08-06 | 2014-02-17 | 인크로스 주식회사 | An authoring tool for web applications and the authoring method thereof |
| CA3034400A1 (en) * | 2018-02-26 | 2019-08-26 | Carl Solis | System for building and modeling web pages |
| CN111984902A (en) * | 2020-09-01 | 2020-11-24 | 平安养老保险股份有限公司 | Visual page configuration method, system, computer equipment and storage medium |
| CN112416339A (en) * | 2020-02-17 | 2021-02-26 | 上海哔哩哔哩科技有限公司 | Page development method and device and computer equipment |
| CN114020256A (en) * | 2021-10-29 | 2022-02-08 | 平安国际智慧城市科技股份有限公司 | Front-end page generation method, device and equipment and readable storage medium |
-
2022
- 2022-03-22 CN CN202210282674.XA patent/CN114594939A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20140019627A (en) * | 2012-08-06 | 2014-02-17 | 인크로스 주식회사 | An authoring tool for web applications and the authoring method thereof |
| CA3034400A1 (en) * | 2018-02-26 | 2019-08-26 | Carl Solis | System for building and modeling web pages |
| CN112416339A (en) * | 2020-02-17 | 2021-02-26 | 上海哔哩哔哩科技有限公司 | Page development method and device and computer equipment |
| CN111984902A (en) * | 2020-09-01 | 2020-11-24 | 平安养老保险股份有限公司 | Visual page configuration method, system, computer equipment and storage medium |
| CN114020256A (en) * | 2021-10-29 | 2022-02-08 | 平安国际智慧城市科技股份有限公司 | Front-end page generation method, device and equipment and readable storage medium |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117311709A (en) * | 2023-09-18 | 2023-12-29 | 深圳市联医科技有限公司 | Page design system and electronic equipment applied to Internet nursing software |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11640492B2 (en) | System and method providing responsive editing and viewing, integrating hierarchical fluid components and dynamic layout | |
| US20200349486A1 (en) | Collaborative design systems, apparatuses, and methods | |
| US10678995B2 (en) | System and methods for control of content presented on web pages | |
| US11372947B2 (en) | System and method for automatic selection for dynamic site compilation within a cloud-based content hub environment | |
| US10572573B2 (en) | Modifying native documents with formulas in a preview | |
| US10013157B2 (en) | Composing web-based interactive 3D scenes using high order visual editor commands | |
| US9483259B1 (en) | System and method for providing real-time execution of source code in a collaborative online software development environment | |
| CN107408142A (en) | 3D CAD systems based on multi-user's cloud parameter attribute | |
| CN111475163A (en) | Method, device and equipment for generating code file of view template and storage medium | |
| US8890890B2 (en) | Pluggable web-based visualizations for applications | |
| CN102902545B (en) | Markup language element is decomposed for animation | |
| CN109408764B (en) | Page area dividing method, device, computing equipment and medium | |
| US20110161847A1 (en) | System and method for integrating and publishing pages of content | |
| US20130076756A1 (en) | Data frame animation | |
| US20140040791A1 (en) | Development platform for software as a service (saas) in a multi-tenant environment | |
| US20150193406A1 (en) | System and Method to Provide Collaborative Document Processing Services Via Interframe Communication | |
| US20150199317A1 (en) | System and Method for Using a Third-Party Add-On to Manipulate a Document in a Collaborative Online Software Development Environment | |
| US8666997B2 (en) | Placeholders returned for data representation items | |
| US20190220539A1 (en) | Displaying an indication of changes made to content at a source | |
| US8966434B2 (en) | Repository based development using project development tools in enterprise management environment | |
| CN114594939A (en) | Visual page construction method and device, computer equipment and storage medium | |
| Schwab et al. | Scalable scalable vector graphics: Automatic translation of interactive svgs to a multithread vdom for fast rendering | |
| US20230315779A1 (en) | Image Tracing System and Method | |
| Goto et al. | Generation of UML package diagrams based on an attribute graph grammar | |
| de Lange et al. | Integrating web-based collaborative live editing and wireframing into a model-driven web engineering process |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |