CN116126388A - Dynamic generation method of information release Web interface - Google Patents

Dynamic generation method of information release Web interface Download PDF

Info

Publication number
CN116126388A
CN116126388A CN202211619781.3A CN202211619781A CN116126388A CN 116126388 A CN116126388 A CN 116126388A CN 202211619781 A CN202211619781 A CN 202211619781A CN 116126388 A CN116126388 A CN 116126388A
Authority
CN
China
Prior art keywords
information
information release
web interface
intelligent terminal
module
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
Application number
CN202211619781.3A
Other languages
Chinese (zh)
Inventor
王敬昌
郑羽
黄皓天
曾泽坪
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Zhejiang Hongcheng Computer Systems Co Ltd
Original Assignee
Zhejiang Hongcheng Computer Systems Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Zhejiang Hongcheng Computer Systems Co Ltd filed Critical Zhejiang Hongcheng Computer Systems Co Ltd
Priority to CN202211619781.3A priority Critical patent/CN116126388A/en
Publication of CN116126388A publication Critical patent/CN116126388A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/70Software maintenance or management
    • G06F8/71Version control; Configuration management
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Abstract

A dynamic generation method of an information release Web interface belongs to the technical field of computer application. The method is applied to the intelligent terminal and comprises the following steps: step S01, receiving a first operation instruction of a user, configuring a layout component, and generating an information release module after the layout component is configured; the first user operation instruction comprises configuration information of the layout component; step S02, after generating a plurality of information release modules according to the step S01, forming an information release Web interface; the information release Web interface stores a plurality of objects in an array form, and each object corresponds to an information release module; step S03, receiving a second operation instruction of a user, adjusting the layout structure of a plurality of information release modules on an information release Web interface and storing the layout structure in an array; the second operation instruction of the user comprises position information of the information release module and/or size information of the information release module; the layout component is obtained from the template library prior to step S01. The invention can respond to the change of the demand rapidly, and shortens the development flow.

Description

Dynamic generation method of information release Web interface
Technical Field
The invention relates to the technical field of computer application, in particular to a dynamic generation method of an information release Web interface.
Background
Currently, it is common practice to develop an information publishing Web interface, in which service personnel and product managers determine the content and layout required to be displayed by the information publishing Web interface, and developers write corresponding component modules in codes according to the determined layout, and render returned data on the interface by using a data interface requesting the corresponding content. When it is necessary to change the layout of the information distribution page, add or delete the content, the business personnel needs to rearrange and submit the requirements to the product manager. The product manager redesigns the interface prototype according to the new requirement, and the developer develops the Web interface of information release according to the new interface prototype, and can release online after the development is finished and tested.
The above prior art has the following disadvantages: 1) The workload of business personnel and developers is increased: the business personnel need to arrange the changed contents into a demand document, including the layout of the changed information release interface and the corresponding contents to be displayed. The developer needs to understand the requirement document and formulate a development scheme according to the new requirement. If multiple intelligent terminals, such as a PC terminal and a mobile terminal, or a PAD terminal and a mobile terminal, or a PC terminal and a PAD terminal, or a PC terminal, a mobile terminal and a PAD terminal, or the same intelligent terminals of different brands, two or even three different layouts need to be developed, wherein part repetitive work is not avoided, the requirement is continuously changed, and a developer needs to continuously track and modify. 2) The information release web interface has a plurality of change links and a long flow: the current information release Web interface change flow links are as follows: submitting a requirement, analyzing the requirement, designing an interface prototype, encoding, testing and online, wherein one to two weeks are required from receiving the requirement to online according to the changed size. 3) Instability caused by information release Web interface change: if the information release Web interface needs urgent change, the time for developing the code and testing is compressed, and under the condition of insufficient testing, the newly developed information release Web interface may introduce new problems and cause certain instability.
Therefore, a scheme capable of rapidly responding to the change of the demand and shortening the development flow is urgently needed at present.
The invention patent application CN2015104586435 discloses a Web interface generation control method, and specifically discloses a method comprising the following steps: generating a total panel assembly; determining a target panel assembly required by a Web interface of each step of the current service from the total panel assemblies, and generating an interface configuration file of the service according to the target panel assembly; and calling a corresponding target panel assembly to generate a Web interface of the current step of the service according to the interface configuration file. The method is proposed from the perspective of a developer, so that the developer does not need to independently write a page for each step, and further, the code development amount is reduced, and the development difficulty is reduced. However, the method does not change the existing interface development flow, namely the flow of three-way circulation of developers, product managers and business personnel, can not be directly developed on demand by using the terminal by a user, can not be synchronized to other intelligent terminals under the condition of developing and adapting to a Web interface of one intelligent terminal, and can only realize the code simplification work of the interface development flow each time through a universal panel component.
Disclosure of Invention
The invention aims to release and maintain developers of the information release Web interface, directly acquire the actual demands of users at a terminal, and quickly respond to generate the Web interface.
The invention provides a dynamic generation method of an information release Web interface, which is applied to an intelligent terminal, and comprises the following steps:
step S01, receiving a first operation instruction of a user, configuring a layout component, and generating an information release module after the layout component is configured;
wherein the first operation instruction of the user comprises configuration information of a layout component;
step S02, after generating a plurality of information release modules according to the step S01, forming an information release Web interface; the information release Web interface stores a plurality of objects in an array form, each object corresponds to an information release module, and each object stores configuration information corresponding to a layout component in the information release module;
step S03, receiving a second operation instruction of a user, adjusting the layout structure of a plurality of information release modules on an information release Web interface, and storing the information of the adjusted layout structure into an array;
the second operation instruction of the user comprises position information of the information release module and/or size information of the information release module;
the layout components are obtained from a template library prior to step S01, which stores a plurality of pre-built layout components.
The information release module is generated by configuring the layout components obtained from the template library; and then a plurality of information release modules are configured to dynamically generate an information release interface, the process is applied to the intelligent terminal, an operation instruction for reflecting the user demand can be directly obtained, service personnel are not required to collect demand information, multiple links of design is carried out through product managers and developers, and the intelligent terminal can rapidly respond to the user demand to dynamically generate the information release interface. The method simplifies the design and configuration flow of the existing Web interface and shortens the development period. Meanwhile, the information release module generated by the invention can be adapted to various intelligent terminals, the information release module meeting the user function requirement can be constructed according to the user operation instruction, the information release module meeting the interface size adaptation requirement required by the intelligent terminals can be constructed, the information release modules applied to different intelligent terminals can be flexibly configured, finally, the information release Web interface is dynamically generated in each intelligent terminal, and the information release Web interface does not need to be redeveloped because of different intelligent terminals.
Preferably, the intelligent terminal is a PC terminal, a mobile terminal and a PAD terminal.
Preferably, the step S01 includes:
s11, monitoring a signal selected and edited by the layout component, acquiring configuration information of the layout component in an interface configuration form, and forming a second operation instruction of a user; the interface configuration form comprises a configuration object and configuration data of configuration information;
step S12, according to a second operation instruction of the user, storing configuration data at a configuration object corresponding to the layout component in the array to configure the layout component;
and step S13, generating an information release module after the layout component is configured.
Preferably, the step S03 includes:
step S31, obtaining the towed moving displacement and/or the towed scaling displacement of the information issuing module by monitoring the signals selected and towed by the information issuing module, and generating the position information and/or the size information of the information issuing module;
and step S32, adjusting the positions of other information release modules in the information release Web interface according to the position information of the information release modules and/or the size information of the information release modules generated in the step S31.
Preferably, the step S03 further includes: monitoring the signal selected to be deleted by the information release module, and deleting the selected information release module; and after the information release module is deleted, adjusting the positions of the rest information release modules in the information release Web interface.
Preferably, the method further comprises an interface global synchronization step, after the execution of step S02 or step S03, the intelligent terminal synchronizes the created array data of the information release Web interface to another intelligent terminal, and adjusts the layout structure of the information release modules in the information release Web interface under the intelligent terminal according to the other intelligent terminal.
Preferably, the method further comprises an interface local synchronization step, after the execution of step S02 or step S03, when the intelligent terminal synchronizes the array data of the created information release Web interface to another intelligent terminal which has created the information release Web interface, comparing the array data of the two intelligent terminals to obtain difference data; then, local synchronization is carried out by taking difference data of a certain intelligent terminal as a reference; and each intelligent terminal after local synchronization adjusts the layout structure of a plurality of information release modules in the information release Web interface under the respective intelligent terminal according to the respective intelligent terminal.
Preferably, the difference data acquisition process is as follows: configuring array data of two intelligent terminals into a structural tree, and taking an information release module corresponding to one array as a node; performing operation marking identification on nodes with different attributes or nodes only provided by one of the two intelligent terminals by adopting a double-layer traversal algorithm; the operation marks comprise a modification mark, a deletion mark and a new mark; after the difference data are acquired, local synchronization is performed on the respective intelligent terminals according to the operation marks.
Preferably, the method further comprises an interface previewing step, after the information release Web interface of the intelligent terminal is established, an array of the information release Web interface is converted into a character string, the character string is jumped to a browser page through a link parameter in the character string, the browser page obtains the array corresponding to the information release Web interface through identifying the character string corresponding to the link parameter, and the array is rendered into the previewing interface.
Preferably, the method further comprises an operation recording step of monitoring user operation instructions and storing array data changed under each operation instruction in the RAM.
Preferably, the method further comprises a undoing step, receiving a user undoing or redoing operation instruction, reading the array after the last operation from the RAM according to the user undoing instruction, or reading the data before undoing from the RAM according to the redoing operation instruction to restore undoing, and then re-rendering the interface according to the read array.
The invention has the following beneficial effects:
according to the method for dynamically generating the information release Web interface, the intelligent terminal collects the user operation instruction, and the information of the user operation instruction (comprising the size information generated by user selection and dragging and the configuration information generated by user selection and input) is identified, so that the information release Web interface can be generated, and for a user, the user can directly operate as required without professional knowledge, and the information release interface can be dynamically generated through the intelligent terminal; the synchronization of the information release modules between two or more different intelligent terminals can be realized, namely one configuration end can be reconfigured at the other end without being reconfigured, and then the information release interface conforming to each intelligent terminal is dynamically generated according to the display interface of the intelligent terminal; on the basis, the intelligent terminals respectively configured with the information release interfaces can be subjected to differential display and differential synchronization. The method can release and maintain the developer of the information release Web interface, can realize the layout of different intelligent terminals by only acquiring the user operation instruction, greatly shortens the demand completion time and improves the demand response rate.
Drawings
FIG. 1 is a flow chart of a dynamic generation method of an information release Web interface of the invention;
FIG. 2 is an example of a synchronous configuration between a PC end and a mobile end using the method of the present invention;
FIG. 3 is a flowchart illustrating an example of whether to synchronize an information distribution interface to a mobile terminal after the information distribution interface is generated at a PC terminal by using the method in FIG. 1;
fig. 4 is a flowchart of an example of synchronization between the PC side and the mobile side.
Detailed Description
The following are specific embodiments of the present invention and the technical solutions of the present invention will be further described with reference to the accompanying drawings, but the present invention is not limited to these embodiments.
The invention discloses a dynamic generation method of an information release Web interface, which is applied to an intelligent terminal, wherein the intelligent terminal can be a mobile terminal, a PAD terminal or a PC terminal.
As in fig. 1, the method comprises:
step S01, receiving a first operation instruction of a user, configuring a layout component, and generating an information release module after the layout component is configured;
wherein the first operation instruction of the user comprises configuration information of a layout component;
step S02, after generating a plurality of information release modules according to the step S01, forming an information release Web interface; the information release Web interface stores a plurality of objects in an array form, each object corresponds to an information release module, and each object stores configuration information corresponding to a layout component in the information release module;
step S03, receiving a second operation instruction of a user, adjusting the layout structure of a plurality of information release modules on an information release Web interface, and storing the information of the adjusted layout structure into an array;
the second operation instruction of the user comprises position information of the information release module and/or size information of the information release module;
the layout components are obtained from a template library prior to step S01, which stores a plurality of pre-built layout components.
Before step S01 of the present invention, the general layout components are stored in the template library in the form of a template, and the relevant configuration information of the layout components in the template library is set as default configuration information, or is set as null data, for example, the configuration object of the configuration information is the layout component, and the configuration data corresponding to the configuration object is set as default configuration data (for example, history data or template data), or is set as null data. For example, a portion of the properties of the layout component may have default data such as length, width, height, whether a title is displayed, etc., and for example, a portion of the data is null data such as a data source. When executing step S01, the user selects a desired layout component from the template library, and the intelligent terminal receives the selected signal of the layout component and the configuration information input by the user, so as to generate the information publishing module.
A plurality of information release modules are required to be arranged on the information release Web interface, so that each time the information release modules are formed, the information release Web interface is generated after the information release modules are formed. In addition, the layout structure of the information publishing Web interface needs to be adjusted through step S03, so as to meet the style requirements of users for laying out a plurality of information publishing modules on the interface.
According to the method, the dynamic generation process of the intelligent terminal is adopted, and any intelligent terminal can dynamically generate the information release interface by acquiring and analyzing the user operation instruction according to the method.
The information release Web interface stores a plurality of objects in an array form, each object corresponds to one information release module, and each object stores configuration information corresponding to a layout component in the information release module. The array is set corresponding to the intelligent terminals, data among different intelligent terminals are isolated, independent configuration is needed, and the data are stored in a JSON format. For example, the array content is as follows:
[{
"name": "Carousel",
"i": "ae3f36c1-b9d2-464c-9ac4-73b78aaab493",
"x": 0,
"y": 0,
"w": 8,
"h": 8,
"width": 6,
"height": 6,
"dataSource": "all",
"limit": 4,
"hasTitle": true,
"titleSet": true,
"id": 2,
"title": public information ",
"carousel": true,
...
}...]
the name represents the name of a layout component in the information release module, and the front end can find out a preset packaged component consistent with the name by analyzing the name attribute value; "i" is the unique identification of the information distribution module; "x" and "y" represent the position coordinates of the information distribution module displayed on the interface; "w" and "h" represent the width and height of the information distribution module displayed on the interface; "width" and "height" represent the default width and height when the information release module is initialized, i.e. the initial width and height newly added to the interface for display when the module is created; the other attributes are relevant configuration attributes in the configuration data panel corresponding to the information release module, and the configuration attributes of different types of layout component data are different.
The step S01 includes:
s11, monitoring a signal selected and edited by the layout component, acquiring configuration information of the layout component in an interface configuration form, and forming a second operation instruction of a user; the interface configuration form comprises a configuration object and configuration data of configuration information;
step S12, according to a second operation instruction of the user, storing configuration data at a configuration object corresponding to the layout component in the array to configure the layout component;
and step S13, generating an information release module after the layout component is configured. In the actual operation process, a user selects a layout component in a template library by using a mouse or a finger or a touch keyboard, then edits the layout component, a click event is generated at the moment, and the intelligent terminal monitors a signal generated by the click event; after entering the edit, the user fills in the interface configuration form. Configuration information is required to be filled in the interface configuration form, the configuration information comprises a configuration object and configuration data, the configuration object is a layout component, and the configuration data is used for configuring aspects such as data sources, data volume limitation, whether titles are displayed or not and the like. For example, the user modifies the field attribute of the configuration object, after editing is completed, the system determines whether the data source "id" field in the configuration object is changed, if yes, the system initiates a new request to acquire new data from the server. Therefore, the method needs to be in communication connection with the server side in the process of configuring information so as to obtain real-time data; and judging the information in the first operation instruction of the user, such as the judgment in the field process, so as to determine whether the data needs to be acquired from the server. The server is a portal home page website, the generated Web interface is not only in static layout, but also comprises the setting of interface display data sources, and dynamic information can be generated by connecting the server to obtain the interface display data sources. In this process, the component type of the information distribution module may not be modified, and only the data-dependent configuration may be modified.
The interface configuration form is formed by background editing, after a user clicks 'editing', the interface configuration form is presented to the user in a form on a display interface of the intelligent terminal, the user fills the configuration form, mainly fills configuration data into the form, the background analyzes the filling content and generates a second operation instruction of the user, and then the layout component is configured according to the second operation instruction of the user.
In step S03, the second operation instruction of the user includes one or both of position information of the information distribution module and size information of the information distribution module. Namely, when the user only changes the position of the information release module, only the position information is contained; when the user only changes the size of the information release module, only size information is contained; when the user changes both the position and the size of the information distribution module, the position information and the size information are contained.
In the actual operation process, the user presses the mouse to select and move the change position or the touch screen to select and move the change position or the touch keyboard to select and move the change position, at this time, the displacement of the mouse movement or the displacement of the finger movement on the touch screen or the displacement of the cursor movement controlled by the touch keyboard can be obtained, so as to calculate the movement displacement of the information release module, and further obtain the position information "x" and "y" of the information release module. Or, the user holds the handle at the lower right corner to drag and adjust the size of the information release module, and the size information "w" and "h" of the information release module are obtained through dragging the zoom amount. Alternatively, if the above processes are performed, the position information "x", "y" and the size information "w" and "h" of the information distribution module may be obtained. Because the information release Web interface is provided with a plurality of information release modules, when the position and/or the size of one or a plurality of information release modules are changed, the layout of other information release modules on the interface can be influenced. For this reason, other objects in the array need to be traversed, and the affected objects are adjusted. The information release module with the position and/or size information after the user adjusts a certain information release module according to the second operation instruction is used as a reference, and if a row is not required to be fed, the coordinates x and y need to be recalculated, or if a plurality of information release modules are required to be placed in the same row, the coordinates x and y need to be recalculated.
For this purpose, the step S03 includes:
step S31, obtaining the towed moving displacement and/or the towed scaling displacement of the information issuing module by monitoring the signals selected and towed by the information issuing module, and generating the position information and/or the size information of the information issuing module;
and step S32, adjusting the positions of other information release modules in the information release Web interface according to the position information of the information release modules and/or the size information of the information release modules generated in the step S31.
The step S03 further includes: monitoring the signal selected to be deleted by the information release module, and deleting the selected information release module; and after the information release module is deleted, adjusting the positions of the rest information release modules in the information release Web interface. When one or more information release modules are deleted, the current layout of the rest information release modules on the information release Web interface is unreasonable, and the layout structure of the rest information release modules in the interface needs to be adjusted. Because the length of the array is changed after deletion, the system traverses the objects in the new array, recalculates the position of each object in the array, and forms a new layout structure. Besides calculating the position, the size of each object in the array can be recalculated according to the rationality of the information release Web interface layout structure, for example, the size of each information release module can be uniformly scaled by uniformly distributing the objects, for example, the size of each information release module is required to be distributed according to a certain arrangement mode, for example, the size of each information release module is distributed in a proportion, and then the size is adaptively adjusted according to the proportion. In addition, the user manually adjusts, and at the moment, the user operation instruction needs to be monitored again, and the position and the size are adjusted according to the user operation instruction.
The method of the invention further comprises an interface global synchronization step, which is performed after step S03. After the information release Web interface of the steps S01-S03 is generated in a certain intelligent terminal, the intelligent terminal synchronizes the created array data to another intelligent terminal, and the other intelligent terminal adjusts the layout structure of a plurality of information release modules on the information release Web interface according to the display interface characteristics of the intelligent terminal. The two intelligent terminals can be the same type of intelligent terminals under different brands, and also can be different types of intelligent terminals, such as a PC terminal, a PAD terminal and a mobile terminal. The method is global synchronization, for example, the intelligent terminal A creates an information release module according to the steps S01-S03, and the intelligent terminal B does not create the information release module, so that the created array data on the intelligent terminal A can be synchronized to another intelligent terminal. For example, the intelligent terminals a and B each create a respective information release module, and according to the user requirement, if the information release interfaces of the two intelligent terminals are the same, the created array data on the intelligent terminal a or B can be synchronized to the other intelligent terminal, and the process can store the old array data in an overlapping manner. In addition, the above global synchronization step may also be performed after step S02. After the information release Web interface of the steps S01-S02 is generated in a certain intelligent terminal, the intelligent terminal synchronizes the created array data to another intelligent terminal, and the other intelligent terminal adjusts the layout structure of a plurality of information release modules on the information release Web interface according to the characteristics of the display interface of the other intelligent terminal. The two differ in that the former has carried out the demand adjustment to the layout structure of the formed issuing interface, and the general layout structure is synchronized to another intelligent terminal after synchronization, if the other intelligent terminal is the same brand specification as the intelligent terminal which is synchronized before, the layout structure can be synchronized in place together, if not, the general layout structure is obtained, and finally the adaptive adjustment is carried out according to the interface demand of the intelligent terminal which is synchronized after; and the latter is not used for carrying out demand adjustment on the layout structure of the formed release interface, and after the other terminal obtains the array data, the whole layout structure at the intelligent terminal is adjusted according to the demand. The two embodiments are executed in different links according to the requirements of users.
In addition to the above-described interface global synchronization implementation, interface local synchronization may also be performed. The method also comprises an interface local synchronization step, wherein after the step S03 is executed, when the intelligent terminal synchronizes the array data of the established information release Web interface to another intelligent terminal which has established the information release Web interface, the array data of the two intelligent terminals are compared to obtain difference data; then, local synchronization is carried out by taking difference data of a certain intelligent terminal as a reference; and each intelligent terminal after local synchronization adjusts the layout structure of a plurality of information release modules in the information release Web interface under the respective intelligent terminal according to the respective intelligent terminal. In addition, the above-described partial synchronization step may also be performed after step S02. After finishing the generation of the information release Web interfaces in the steps S01-S02 at one intelligent terminal, when the intelligent terminal synchronizes the array data of the established information release Web interface to another intelligent terminal with the established information release Web interface, comparing the array data of the two intelligent terminals to obtain difference data; then, local synchronization is carried out by taking difference data of a certain intelligent terminal as a reference; and each intelligent terminal after local synchronization adjusts the layout structure of a plurality of information release modules in the information release Web interface under the respective intelligent terminal according to the respective intelligent terminal. The two differ in that the former has carried out the demand adjustment to the layout structure of the formed issuing interface, and the general layout structure is synchronized to another intelligent terminal after synchronization, if the other intelligent terminal is the same brand specification as the intelligent terminal which is synchronized before, the layout structure can be synchronized in place together, if not, the general layout structure is obtained, and finally the adaptive adjustment is carried out according to the interface demand of the intelligent terminal which is synchronized after; and the latter is not used for carrying out demand adjustment on the layout structure of the formed release interface, and after the other terminal obtains the array data, the whole layout structure at the intelligent terminal is adjusted according to the demand. The two embodiments are executed in different links according to the requirements of users.
The global synchronization and the local synchronization are two embodiments (see fig. 2), and one of them can be set in the intelligent terminal to perform synchronization, or the two can be set for the user to select to implement.
Fig. 3 shows an example under global synchronization. When the information release module of the PC terminal is switched to the layout of the mobile terminal for the first time, whether the information release module of the PC terminal is to be synchronized to the mobile terminal is prompted, if not, the interface array of the mobile terminal is set to be an empty array, and a blank canvas is created, then the information release module of the mobile terminal can be restarted by the flow of the method; if the information release module object is selected, the system synchronizes the interface array data of the PC end to the mobile end, and the values of 'x', 'y', 'w' in each information release module object are recalculated through the array, and the width and the position coordinates of the adjustment module are displayed in a form suitable for the mobile end. The calculation process is as shown in fig. 3, all the information release modules in the array are arranged from small to large according to the value of the ordinate "y", then the width "w" of each module object is judged by a cyclic traversal algorithm, and the width "w" is converted into the layout of the adaptive mobile terminal according to the rule: if "w" is greater than 3 (i.e., 25% of the interface width, 12% of the interface width), then the mobile terminal is shifted to exclusive one line, and "w" is set to 12 (i.e., the width of 100% of the interface); if the width of the information release module is not more than 3, the height and the remaining width of the last line in the current canvas need to be continuously judged, and if the remaining width of the last line in the canvas is more than 6 (namely, 50% of the interface width) and the height is more than the y coordinate value of the module object, the converted mobile terminal module object and the last module object are arranged in the same line, the y value is consistent with the y value of the last module object, and the w is set to 6 (namely, the widths respectively occupy 50%); if none of the above conditions is met, the row is started again, the value of "y" is set to the height where the last row is located, and the module object "w" is set to 6 (i.e., the width is set to 50%). The mobile terminal layout of automatic conversion is provided with at most two information release modules, and after conversion is completed, a user can manually adjust the size and the position of the information release modules again according to the requirements of the information release interface of the mobile terminal.
In the implementation of local synchronization, the data acquisition process is as follows: configuring array data of two intelligent terminals into a structural tree, and taking an information release module corresponding to one array as a node; performing operation marking identification on nodes with different attributes or nodes only provided by one of the two intelligent terminals by adopting a double-layer traversal algorithm; the operation marks comprise a modification mark, a deletion mark and a new mark; after the difference data are acquired, local synchronization is performed on the respective intelligent terminals according to the operation marks.
Referring to fig. 4, for example, when two ends have the same information publishing module but different values, the operation mark is a modification mark, the operation mark is marked at the corresponding node, and the right end is modified based on the left end according to the needs of the user; or the left side end is modified based on the right side end. For example, when the PC end has a certain information release module and the mobile end does not, the deletion mark is marked on the PC end, the new mark is marked on the mobile end, and local synchronization is performed according to the deletion or the new mark. For another example, when the mobile terminal has an information release module and the PC terminal does not, the mobile terminal marks the deletion mark, the PC terminal marks the new mark, and local synchronization is performed according to the deletion or new need.
The local synchronization operation may be implemented in two cases: in the first case, two intelligent terminals respectively perform information release module configuration; in the second case, when two intelligent terminals are already synchronized, a certain intelligent terminal (for example, intelligent terminal a) needs to perform resynchronization after reconfiguration. At this time, a local synchronization method is adopted. Adopting a double-layer traversal algorithm to find out different attributes of each node (for example, general attributes include information release module names, data sources and the like; specific attributes include whether titles are displayed or not, data number limitation and the like), and injecting marks (modification) on the corresponding node attributes on two intelligent terminal configuration trees; if the node does not exist on the configuration tree of the intelligent terminal A, a deletion mark (deletion: remove) is injected into the corresponding node on the configuration tree of the intelligent terminal B; filtering the same nodes of the two intelligent terminal configuration trees through a filter function, obtaining node configuration data which is a newly added node, and injecting a newly added mark (newly added: add) into the corresponding node on the intelligent terminal B configuration tree.
And according to the selection of the user, the intelligent terminal receives the operation instruction, namely, executes modification, deletion and new addition operations according to the operation mark.
The description of the above local synchronization is made with the example of the data source as an attribute: each information release module is provided with a unique identifier, and the unique identifiers are synchronized together in the past when different intelligent terminals are globally synchronized. And if the attributes of a plurality of information release modules at one end are changed (such as data sources), using a traversal algorithm to find out different attributes of each node, and comparing the attributes of the same unique identification node with the attributes of the same unique identification node, and rapidly synchronizing the changed attributes (such as the data sources) to other ends.
In addition, the difference type is used as one Class Name in the type of the difference mark (new: add, delete: remove, modify: change) in the data, and the difference is rendered into different background colors through the CSS style, so that the highlight display of the difference is realized.
The method further comprises an interface previewing step, after the information release Web interface of the intelligent terminal is established, the array in the information release interface is converted into a character string, the character string is jumped to a browser page through the link parameter in the character string, the browser page obtains the array corresponding to the information release Web interface through identifying the character string corresponding to the link parameter, and the array is rendered into the previewing interface. Specifically, the user performs preview operation on the intelligent terminal, and the system converts the current layout array of the interface into a JSON character string and brings the JSON character string into a new tab of the browser through the query parameter in the link. And obtaining a corresponding JSON character string in the preview interface by acquiring the query parameters in the interface link, and converting the JSON character string into an array in a JSON format. The system traverses and analyzes the coordinates, the size, the corresponding components, the data sources and other attributes of the objects in the array, and the result is rendered on the interface to show the preview effect. The intelligent terminal can also generate a two-dimensional code from the link containing the query parameter, and the browser of the intelligent terminal opens the link and acquires the query parameter by scanning the two-dimensional code to repeat the rendering process.
The method also comprises an operation recording step, wherein the operation recording step monitors the operation instruction of the user and stores the array data changed under each operation instruction into the RAM. All operations involving interface changes will cause changes to the interface array, with the system recording each changed interface array in RAM. When the operation times are more than 0, the operation can be canceled, and the interface of the last operation is restored; and when the number of the revoking times is more than 0, the interface before the revoking can be reworked and restored. The undo and redo are both reading the corresponding interface array in RAM and re-rendering on the interface. Further, the method further comprises a undoing and redoing step, a user undoing or redoing operation instruction is received, the array after the last operation is read from the RAM according to the user undoing instruction, or the data before undoing is read from the RAM according to the redoing operation instruction to restore undoing, and then the interface is re-rendered according to the read array. The above process can utilize the way that the pointer moves left and right in the data stack to realize the undo and redo.
The invention also provides a system for dynamically generating the information release Web interface, which is realized by the method. The system comprises various functional modules, such as a layout module, realized according to the method, and is used for executing steps S02 and S03; an editing module for executing step S01; a synchronization module for executing synchronization operation; the preview module is used for executing an interface preview step; such as a snapshot module, for performing an operation recording step; if the comparison module is used for comparing the difference between the two intelligent terminals, highlighting the configuration parameters of the difference and the lost configuration parameters; and the display module is used for visually displaying configuration parameters (module name, data source, whether to display title and the like) of each object in the intelligent terminal interface array and the like. The synchronization module comprises a global synchronization sub-module and a local synchronization sub-module, and the local synchronization sub-module needs to be executed based on the result of the comparison module when executed.
From the use perspective of the user, the user can modify the information release Web interface by self-dragging, adjusting the size and the position, setting the data source and the like, and the operation is simple without professional knowledge. The method and the system can directly acquire the user operation instruction at the intelligent terminal to perform timely interface arrangement response, can provide synchronous operation for modification of two ends, can render two-end difference in a visual mode, and can automatically select whether to combine or not by a user. By the method provided by the embodiment of the invention, the developer maintaining the information release web interface can be released, the layout of the intelligent terminal information release module can be modified by simply dragging the user, and the required completion time is greatly shortened.
It will be appreciated by persons skilled in the art that the embodiments of the invention described above and shown in the drawings are by way of example only and are not limiting. The objects of the present invention have been fully and effectively achieved. The functional and structural principles of the present invention have been shown and described in the examples and embodiments of the invention may be modified or practiced without departing from the principles described.

Claims (10)

1. The method is characterized by being applied to an intelligent terminal, and comprises the following steps:
step S01, receiving a first operation instruction of a user, configuring a layout component, and generating an information release module after the layout component is configured;
wherein the first operation instruction of the user comprises configuration information of a layout component;
step S02, after generating a plurality of information release modules according to the step S01, forming an information release Web interface; the information release Web interface stores a plurality of objects in an array form, each object corresponds to an information release module, and each object stores configuration information corresponding to a layout component in the information release module;
step S03, receiving a second operation instruction of a user, adjusting the layout structure of a plurality of information release modules on an information release Web interface, and storing the information of the adjusted layout structure into an array;
the second operation instruction of the user comprises position information of the information release module and/or size information of the information release module;
the layout components are obtained from a template library prior to step S01, which stores a plurality of pre-built layout components.
2. The method for dynamically generating the information release Web interface according to claim 1, wherein the intelligent terminal is a PC end, a mobile end and a PAD end.
3. The method for dynamically generating an information distribution Web interface according to claim 1, wherein the step S01 comprises:
s11, monitoring a signal selected and edited by the layout component, acquiring configuration information of the layout component in an interface configuration form, and forming a second operation instruction of a user; the interface configuration form comprises a configuration object and configuration data of configuration information;
step S12, according to a second operation instruction of the user, storing configuration data at a configuration object corresponding to the layout component in the array to configure the layout component;
and step S13, generating an information release module after the layout component is configured.
4. The method for dynamically generating an information distribution Web interface according to claim 1, wherein the step S03 includes:
step S31, obtaining the towed moving displacement and/or the towed scaling displacement of the information issuing module by monitoring the signals selected and towed by the information issuing module, and generating the position information and/or the size information of the information issuing module;
and step S32, adjusting the positions of other information release modules in the information release Web interface according to the position information of the information release modules and/or the size information of the information release modules generated in the step S31.
5. The method for dynamically generating an information distribution Web interface according to claim 1, wherein the step S03 further comprises: monitoring the signal selected to be deleted by the information release module, and deleting the selected information release module; and after the information release module is deleted, adjusting the positions of the rest information release modules in the information release Web interface.
6. The method for dynamically generating an information release Web interface according to claim 1, further comprising an interface global synchronization step, wherein after the execution of step S02 or step S03, the intelligent terminal synchronizes the created array data of the information release Web interface to another intelligent terminal, and adjusts the layout structure of the information release modules in the information release Web interface under the intelligent terminal according to the other intelligent terminal.
7. The method for dynamically generating an information release Web interface according to claim 1, further comprising an interface local synchronization step, wherein when the intelligent terminal synchronizes the array data of the created information release Web interface to another intelligent terminal having created the information release Web interface after the execution of step S02 or step S03, the two intelligent terminals are compared with each other to obtain difference data; then, local synchronization is carried out by taking difference data of a certain intelligent terminal as a reference; and each intelligent terminal after local synchronization adjusts the layout structure of a plurality of information release modules in the information release Web interface under the respective intelligent terminal according to the respective intelligent terminal.
8. The method for dynamically generating an information distribution Web interface according to claim 7, wherein the differential data acquisition process is as follows: configuring array data of two intelligent terminals into a structural tree, and taking an information release module corresponding to one array as a node; performing operation marking identification on nodes with different attributes or nodes only provided by one of the two intelligent terminals by adopting a double-layer traversal algorithm; the operation marks comprise a modification mark, a deletion mark and a new mark; after the difference data are acquired, local synchronization is performed on the respective intelligent terminals according to the operation marks.
9. The method for dynamically generating the information release Web interface according to claim 1, 6 or 7, further comprising an interface previewing step, wherein after the information release Web interface of the intelligent terminal is created, an array of the information release Web interface is converted into a character string, and the character string is jumped to a browser page through a link parameter in the character string, and the browser page obtains the array corresponding to the information release Web interface through identifying the character string corresponding to the link parameter, and then the array is rendered into the previewing interface.
10. The method for dynamically generating an information distribution Web interface according to claim 1, further comprising an operation recording step of monitoring an operation instruction of a user and storing array data changed every time the operation instruction in the RAM.
CN202211619781.3A 2022-12-16 2022-12-16 Dynamic generation method of information release Web interface Pending CN116126388A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211619781.3A CN116126388A (en) 2022-12-16 2022-12-16 Dynamic generation method of information release Web interface

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211619781.3A CN116126388A (en) 2022-12-16 2022-12-16 Dynamic generation method of information release Web interface

Publications (1)

Publication Number Publication Date
CN116126388A true CN116126388A (en) 2023-05-16

Family

ID=86298386

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211619781.3A Pending CN116126388A (en) 2022-12-16 2022-12-16 Dynamic generation method of information release Web interface

Country Status (1)

Country Link
CN (1) CN116126388A (en)

Similar Documents

Publication Publication Date Title
CN109614424B (en) Page layout generation method, device, computing equipment and medium
CN109408764B (en) Page area dividing method, device, computing equipment and medium
US20040001092A1 (en) Prototyping graphical user interfaces
US9110686B2 (en) Web client command infrastructure integration into a rich client application
CN109597954A (en) Data item methods of exhibiting, calculates equipment and medium at device
WO2011082072A2 (en) Gesture-based web site design
CN103530407B (en) Method and device for generating rich text document
JPS61229164A (en) Updating of data of chart for buisiness
JPWO2006051963A1 (en) Data processing apparatus and data processing method
US7480910B1 (en) System and method for providing information and associating information
US7685229B1 (en) System and method for displaying server side code results in an application program
EP1744255A1 (en) Document processing device and document processing method
US6281900B1 (en) Information processing apparatus and method, and providing medium
US20030067490A1 (en) Screen transition diagram editing apparatus and computer product
CN111061478B (en) Page form modification method, device and equipment and readable storage medium
CN113515275A (en) WYSIWYG cloud industrial configuration software system and development method thereof
CN109783596B (en) ArcGIS map configuration preview method based on Angular component
CN116126388A (en) Dynamic generation method of information release Web interface
JPH11102293A (en) Program automatic generating method
JP4719743B2 (en) Graph processing device
JP2001134424A (en) Method and device for preparing system parameter and computer readable storage medium recording system parameter preparation program and computer readable storage medium storing system parameter preparation data
US11966572B2 (en) Commenting feature for graphic design systems
JP6531855B2 (en) INFORMATION PROCESSING APPARATUS, CONTROL METHOD FOR INFORMATION PROCESSING APPARATUS, AND PROGRAM
JP6817523B2 (en) Information processing device, control method of information processing device, and program
WO1998032081A1 (en) Device and method for preparing original text and program storing medium for the same

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