CN112269576A - Component display method and device, server and storage medium - Google Patents
Component display method and device, server and storage medium Download PDFInfo
- Publication number
- CN112269576A CN112269576A CN202010790160.6A CN202010790160A CN112269576A CN 112269576 A CN112269576 A CN 112269576A CN 202010790160 A CN202010790160 A CN 202010790160A CN 112269576 A CN112269576 A CN 112269576A
- Authority
- CN
- China
- Prior art keywords
- component
- attribute information
- file
- plug
- html
- 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
- 238000000034 method Methods 0.000 title claims abstract description 52
- 238000006243 chemical reaction Methods 0.000 claims abstract description 17
- 238000009877 rendering Methods 0.000 claims description 5
- 238000004590 computer program Methods 0.000 claims description 3
- 230000001360 synchronised effect Effects 0.000 abstract description 12
- 238000011161 development Methods 0.000 abstract description 8
- 230000000694 effects Effects 0.000 abstract description 2
- 230000001939 inductive effect Effects 0.000 abstract description 2
- 238000010586 diagram Methods 0.000 description 12
- 230000006870 function Effects 0.000 description 4
- 230000005540 biological transmission Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 239000000284 extract Substances 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000008707 rearrangement Effects 0.000 description 1
- 230000000717 retained effect Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000006467 substitution reaction Methods 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/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Abstract
The embodiment of the invention discloses a component display method, a component display device, component display equipment and a storage medium. The method comprises the following steps: when receiving a component display request sent by a user interface UI plug-in client, acquiring a preset formatted file configured in advance; the preset formatted file comprises attribute information of at least one component in the component library; reading attribute information of each component from a preset formatted file, and generating a hypertext markup language (HTML) file according to the attribute information of each component; and sending the HTML file to the UI plug-in client so that the UI plug-in client renders and displays the component display page containing each component according to the HTML file. The technical scheme of the embodiment of the invention solves the problems that the WEB component can not be directly used by a UI user and the efficiency of synchronous development of the WEB component library and the UI plug-in is low, and realizes the effects of improving the synchronous conversion efficiency of the WEB component and the UI plug-in and reducing the labor cost.
Description
Technical Field
The embodiment of the invention relates to computer technology, in particular to a component display method, a component display device, a server and a storage medium.
Background
With the development of internet technology, the User Interface (UI) visual style is more and more emphasized, and various UI visual WEB component libraries have appeared in the industry. The UI designer may use the UI plug-in to draw the user interface diagram, specifically, the UI plug-in may synchronously display various components in the WEB component library, and the UI designer may drag the components displayed by the UI plug-in to the user interface diagram to draw the user interface diagram.
In the process of implementing the invention, the inventor finds that at least the following problems exist in the prior art:
the components in the WEB component library are developed by component developers, and the UI plug-ins are developed by plug-in developers, namely the WEB component library and the UI plug-ins are developed and updated respectively. In order to realize the synchronous display of the components in the WEB component library at the UI plug-in end, two sides need to be kept synchronous during development, the efficiency is low, and the labor cost is high.
Disclosure of Invention
The embodiment of the invention provides a component display method, a component display device, equipment and a storage medium, and aims to achieve the effects of improving the synchronization efficiency of a WEB component and a UI plug-in and reducing the labor cost.
In a first aspect, an embodiment of the present invention provides a component display method, where the method includes:
when receiving a component display request sent by a user interface UI plug-in client, acquiring a preset formatted file configured in advance; the preset formatted file comprises attribute information of at least one component in a component library;
reading attribute information of each component from the preset formatted file, and generating a hypertext markup language (HTML) file according to the attribute information of each component;
and sending the HTML file to the UI plug-in client so that the UI plug-in client renders and displays the component display page containing each component according to the HTML file.
In a second aspect, an embodiment of the present invention further provides an assembly display apparatus, where the apparatus includes:
the system comprises a preset formatted file acquisition module, a component display module and a format conversion module, wherein the preset formatted file acquisition module is used for acquiring a preset formatted file configured in advance when receiving a component display request sent by a user interface UI plug-in client; the preset formatted file comprises attribute information of at least one component in a component library;
a hypertext markup language file generation module, configured to read attribute information of each component from the preset formatted file, and generate a hypertext markup language HTML file according to the attribute information of each component;
and the hypertext markup language file sending module is used for sending the HTML file to the UI plug-in client so as to render and display the component display page containing each component according to the HTML file.
In a third aspect, an embodiment of the present invention further provides a server, where the server includes:
one or more processors;
storage means for storing one or more programs;
when executed by the one or more processors, cause the one or more processors to implement a component exposure method as provided by any of the embodiments of the invention.
In a fourth aspect, the embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored, where the program, when executed by a processor, implements the component presentation method provided in any embodiment of the present invention.
The method comprises the steps of acquiring a preset formatted file configured in advance when receiving a component display request sent by a user interface UI plug-in client; the preset formatted file comprises attribute information of at least one component in a component library; reading attribute information of each component from the preset formatted file, and generating a hypertext markup language (HTML) file according to the attribute information of each component; and sending the HTML file to the UI plug-in client so that the UI plug-in client renders and displays the component display page containing each component according to the HTML file. The method has the advantages that the components in the component library are synchronously displayed at the UI plug-in client side through the pre-configured preset formatted files, the problems that the WEB components cannot be directly used by UI users and the WEB component library and the UI plug-ins are low in efficiency in synchronous development are solved, the synchronous conversion efficiency of the WEB components and the UI plug-ins is improved, and the labor cost is reduced.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, a brief description will be given below of the drawings required for the embodiments or the technical solutions in the prior art, and it is obvious that the drawings in the following description are some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.
FIG. 1 is a flow chart of a method for displaying components according to an embodiment of the present invention;
FIG. 2 is a schematic diagram of Button components of different styles in a WEB component library according to an embodiment of the present invention;
FIG. 3 is a schematic diagram of a Button component presentation page according to an embodiment of the present invention;
FIG. 4 is a diagram illustrating an edit panel of the Button component according to an embodiment of the present invention;
FIG. 5 is a flowchart of a component displaying method according to a second embodiment of the present invention;
FIG. 6 is a diagram illustrating WEB component properties according to a second embodiment of the present invention;
FIG. 7 is a block diagram of a component display apparatus according to a third embodiment of the present invention;
fig. 8 is a schematic structural diagram of a server in the fourth embodiment of the present invention.
Detailed Description
The present invention will be described in further detail with reference to the accompanying drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the invention and are not limiting of the invention. It should be further noted that, for the convenience of description, only some of the structures related to the present invention are shown in the drawings, not all of the structures.
Example one
Fig. 1 is a flowchart of a component display method according to an embodiment of the present invention, which is applicable to a case where a component is displayed on a user interface diagram. The method may be performed by a component presentation apparatus. The method specifically comprises the following steps:
s110, when a component display request sent by a User Interface (UI) plug-in client is received, a preset formatted file configured in advance is obtained; the preset formatted file comprises attribute information of at least one component in the component library.
The UI plug-in client can provide a component display page, and a user can select and set properties of the component through the component display page. . When a user installs a UI plug-in client on a computer and starts using the UI plug-in client, the UI plug-in client needs to send a component display request to a server side. When a server side receives a component display request sent by a UI plug-in client side, a preset formatted file which is configured in advance is obtained, the preset formatted file comprises all or part of attribute information which is extracted by the server from a WEB component library in advance and corresponds to a component which needs to be converted, the component which needs to be converted is at least one, the attribute information is an attribute required by the UI plug-in, and exemplary attribute information comprises: type, size, shape, etc. of the component. Optionally, the preset formatted file is a JavaScript object notation (JSON) file. The JSON file is a lightweight open standard data exchange format based on a JavaScript grammar subset, and adopts a text format completely independent of a programming language to store and represent data. The JSON file is also a light-weight data exchange format, has a simple and clear hierarchical structure, is convenient to read and write, is easy to analyze and generate, and effectively improves the network transmission efficiency.
Taking Button (Button) components in a WEB component library as an example, as shown in fig. 2, Button components of different styles in the WEB component library are selected, components to be converted are selected from the Button components of different styles, illustratively, the components to be converted are primary (primary) buttons and information (info) buttons of common styles, and all or part of attribute information of the primary Button components and the info Button components to be converted are configured into JSON files. Wherein the Button component attribute information comprises: button type, button size, and button shape.
And S120, reading the attribute information of each component from a preset formatted file, and generating a hypertext markup language (HTML) file according to the attribute information of each component.
And the server side reads the attribute information of each component needing to be converted from the acquired preset formatted file and generates an HTML file according to the attribute information of each component. Specifically, the method comprises the following steps: converting the attribute information of each component into HTML tag elements according to a preset DOM template, and generating HTML files according to the converted HTML tag elements; and the DOM template is configured with HTML tag element conversion methods corresponding to various types of components in the component library.
When the attribute information of each component is converted into an HTML tag element according to the preset DOM template, specifically, for each component, determining an HTML tag corresponding to the component by executing a code of an HTML tag element conversion method corresponding to the component type of the component configured in the DOM template; and then binding the read attribute information of the component with the HTML tag to obtain an HTML tag element corresponding to the component. The name of the component in the component library can be written into a preset formatted file in advance, and the name and the HTML tag symbol of the component in the component library form an HTML tag of the component. Taking a certain button component as an example for explanation, the attribute information of the button component in the preset formatted file includes: id: button-demo1, type: primary, size: large, and lnnertext: a primary button; the component name of the button component is j-button, and the code of the HTML tag conversion method corresponding to the button component type configured in the DOM template is executed to determine that the HTML tag corresponding to the button component comprises: < j-button and </j-button >; after the attribute information of the button component is bound with the HTML tag, a corresponding HTML tag element is obtained, as follows:
<j-button
id＝“button-demo1”；
type＝“primary”
size＝“large”
InnerText is the main button "
</j-button>
When the HTML file is generated from each converted HTML tag, each converted HTML tag may be directly written into a blank HTML file. Preferably, before writing each converted HTML tag into a blank HTML file, attribute information that does not meet the HTML rule in each converted HTML tag needs to be further converted into attribute information that meets the HTML rule, where the conversion of the attribute information can be specifically realized by calling a conversion service provided by a component library. Still taking the button component as an example for illustration, the attributes that need to be converted, such as type and size, are converted into tag names, styles and the like that meet the HTML rules, and the attributes that do not need to be converted, such as id and innertext, are retained, and finally, the HTML file that is sent to the client and can be used for rendering and displaying is obtained.
S130, the HTML file is sent to the UI plug-in client side, so that the UI plug-in client side renders and displays the component display page containing each component according to the HTML file.
The server sends the HTML file to the UI plug-in client side, the UI plug-in client side renders according to the received HTML file, and displays the component display page containing each component in the HTML, so that conversion from the components in the configured WEB component library to the UI plug-in is realized, the components in the WEB component library and the UI plug-in are kept synchronous, repeated development of the WEB components and the UI plug-in is avoided, and the development efficiency of the UI plug-in is improved.
Optionally, the preset formatted file further includes an editing mode and an optional field of the attribute information of the component; correspondingly, the generated HTML file comprises the editing mode and the selectable item field; the editing mode and the selectable item field of the attribute information are also stored in the preset formatting file and are used for being displayed in an editing panel of the UI plug-in, and a user can edit the component through the editing mode and the selectable item displayed in the editing panel to generate a design view.
On the basis of the above embodiment, after the UI plug-in client renders and displays the component presentation page including each of the components according to the HTML file, the method further includes: when detecting the attribute editing triggering operation of the components displayed in the component display page, rendering and displaying the attribute editing page according to the editing mode and the selectable item fields of the attribute information of the components, so that a user can edit the attributes of the components in the attribute editing page. Due to the fact that the editing modes and the optional fields of all the attributes are stored in the preset formatted file, an attribute editing page can be rendered. Illustratively, taking the Button component as an example, when a property editing triggering operation on the Button is detected, taking the size property of the Button component as an example, the editing mode field is select, which indicates that the size property appears in a drop-down box in an editing panel, and the selectable field options are configured with three options of large, medium and small, and when any option is selected in the drop-down box, the property value of the size in the corresponding component DOM is set to the selected value. As shown in fig. 3, for the display page of the Button component, a Button can be selected by clicking, the selected Button is edited as shown in fig. 4, and for the edit panel of the Button component, the selected Button to be edited is edited with selectable value attributes such as size, so as to adjust different specifications of the style, size, and the like of the Button.
According to the technical scheme of the embodiment, when an assembly display request sent by a UI plug-in client is received, a preset formatted file configured in advance is obtained; the preset formatted file comprises attribute information of at least one component in a component library; reading attribute information of each component from the preset formatted file, and generating a hypertext markup language (HTML) file according to the attribute information of each component; and sending the HTML file to the UI plug-in client so that the UI plug-in client renders and displays the component display page containing each component according to the HTML file. The method has the advantages that the components in the component library are synchronously displayed at the UI plug-in client side through the pre-configured preset formatted files, the problems that the WEB components cannot be directly used by UI users and the WEB component library and the UI plug-ins are low in efficiency in synchronous development are solved, the synchronous conversion efficiency of the WEB components and the UI plug-ins is improved, and the labor cost is reduced.
Example two
Fig. 5 is a flowchart of an assembly displaying method provided in the second embodiment of the present invention, which is further optimized based on the foregoing embodiments in this embodiment, and before receiving an assembly displaying request sent by a UI plug-in client, the assembly displaying method further includes: reading attribute information of each component from the component library file; and configuring at least one attribute information of at least one component in the attribute information of each component in a preset formatted file. The conversion from the attribute of the WEB component to the UI plug-in is realized through the preset formatted file, so that the attribute of the converted UI plug-in is more in line with the actual requirement. Wherein explanations of the same or corresponding terms as those of the above embodiments are omitted.
Referring to fig. 5, the assembly display method provided by the embodiment includes:
and S210, reading the attribute information of each component from the component library file.
The server extracts all attributes or part of attributes of the components needing to be converted in the WEB component library from a certain type of file of the WEB component library, illustratively, the certain type of file of the WEB component library may be a readme file, and reads out all component attribute information in the readme file through a script program, as shown in fig. 3, the attribute information of the Button component is read out.
S220, configuring at least one attribute information of at least one component in the attribute information of each component in a preset formatted file.
Configuring the attribute information of the component needing to be converted in a preset formatted file, wherein the attribute information configured in the preset formatted file can be all the attribute information of the component needing to be converted, or can be partial attribute information of the component needing to be converted, and is determined according to the requirement of the UI plug-in. Illustratively, as shown in fig. 6, the attribute information required by the UI plug-in is selected, and the selected attribute information is configured in the preset formatted file. For example, taking a Button component as an example, the attribute information required by the UI plug-in includes: native type, size, state-in-progress and shape. And configuring the attribute information of the Button component in a preset formatted file.
Optionally, configuring at least one attribute information of at least one component in the attribute information of each component in a preset formatted file, including: respectively writing at least one attribute information of at least one component in the attribute information of each component into an array of a preset formatted file; the array comprises at least one array element, each array element corresponds to one component in the component library and is used for storing attribute information of the corresponding component, and the corresponding relation between the array elements and the components is determined according to the position sequence of each component in the component display page. And sequentially writing the attribute information of the components into the array according to the position sequence in the component display page, wherein each component corresponds to one array element.
Illustratively, the position sequence of the components to be displayed in the component display page is an information button, a primary button and a secondary button, and the corresponding relationship between the array elements and the components in the array is established according to the position sequence, that is, the first array element of the array corresponds to the information button for storing the attribute information of the information button, the second array element corresponds to the primary button for storing the attribute information of the primary button, and the third array element corresponds to the secondary button for storing the attribute information of the secondary button. The attribute information of the components is displayed according to the storage sequence in the array, so that the disordered display of the component information in the component display page is avoided, and the use difficulty of a user is increased.
S230, when a component display request sent by a user interface UI plug-in client is received, a preset formatted file configured in advance is obtained; the preset formatted file comprises attribute information of at least one component in the component library.
S240, reading the attribute information of each component from the preset formatted file, and generating a hypertext markup language (HTML) file according to the attribute information of each component.
And S250, sending the HTML file to the UI plug-in client so that the UI plug-in client renders and displays the component display page containing each component according to the HTML file.
On the basis of the above embodiment, the component display method further includes: when a formatted file updating request is received, updating operation is carried out on a preset formatted file which is stored currently according to the formatted file updating request; wherein the update operation includes at least one of an add operation of the component attribute information, a delete operation of the component attribute information, and a modify operation of the component attribute information. When the WEB component actually needs to perform the operation of adding or deleting the component, the user needs to keep synchronization with the WEB component when using the UI plug-in, so that the server receives a preset formatted file updating request sent by the UI plug-in client, and performs the operation of adding or deleting at least one component attribute information stored in the preset formatted file, thereby realizing the synchronous conversion from the WEB component to the UI plug-in. And the UI plug-in converted by the WEB component through the updated preset formatted file is more in line with the user requirement.
According to the technical scheme of the embodiment, the attribute information of each component is read from the component library file; and configuring at least one attribute information of at least one component in the attribute information of each component in a preset formatted file. The conversion from the attribute of the WEB component to the UI plug-in is realized through the preset formatted file, so that the attribute of the converted UI plug-in is more in line with the actual requirement. When receiving a component display request sent by a UI plug-in client, acquiring a preset formatted file configured in advance; the preset formatted file comprises attribute information of at least one component in a component library; reading attribute information of each component from the preset formatted file, and generating a hypertext markup language (HTML) file according to the attribute information of each component; and sending the HTML file to the UI plug-in client so that the UI plug-in client renders and displays the component display page containing each component according to the HTML file. The method has the advantages that the components in the component library are synchronously displayed at the UI plug-in client side through the pre-configured preset formatted files, the problems that the WEB components cannot be directly used by UI users and the WEB component library and the UI plug-ins are low in efficiency in synchronous development are solved, the synchronous conversion efficiency of the WEB components and the UI plug-ins is improved, and the labor cost is reduced.
The following is an embodiment of the device for displaying components according to an embodiment of the present invention, which belongs to the same inventive concept as the method for displaying components according to the above embodiments, and reference may be made to the embodiment of the method for displaying components, which is not described in detail in the embodiment of the device for displaying components.
EXAMPLE III
Fig. 7 is a schematic structural diagram of an assembly display apparatus according to a third embodiment of the present invention, where the present embodiment is applicable to a case where an assembly is displayed on a display page, the assembly display apparatus specifically includes: a preset formatted file obtaining module 310, a hypertext markup language file generating module 320 and a hypertext markup language file sending module 330.
The preset formatted file acquisition module 310 is configured to acquire a preset formatted file configured in advance when receiving a component display request sent by a user interface UI plug-in client; the preset formatted file comprises attribute information of at least one component in a component library; a hypertext markup language file generating module 320, configured to read attribute information of each component from the preset formatted file, and generate a hypertext markup language HTML file according to the attribute information of each component; a hypertext markup language file sending module 330, configured to send the HTML file to the UI plug-in client, so that the UI plug-in client renders and displays a component display page including each component according to the HTML file.
In the technical solution of the above embodiment, the component display apparatus further includes:
the attribute information reading module is used for reading the attribute information of each component from the component library file;
and the attribute information configuration module is used for configuring at least one attribute information of at least one component in the attribute information of each component in a preset formatted file.
In the technical solution of the above embodiment, the attribute information configuration module includes:
the attribute information writing unit is used for writing at least one attribute information of at least one component in the attribute information of each component into an array of a preset formatted file respectively;
the array comprises at least one array element, each array element corresponds to one component in the component library and is used for storing attribute information of the corresponding component, and the corresponding relation between the array elements and the components is determined according to the position sequence of each component in the component display page.
In the technical solution of the above embodiment, the module 320 for generating a hypertext markup language file includes:
the attribute information mounting unit is used for converting the attribute information of each component into HTML tag elements according to a preset Document Object Model (DOM) template;
the HTML file generating unit is used for generating an HTML file according to each converted HTML tag element; and the DOM template is configured with HTML tag element conversion methods corresponding to various types of components in the component library.
In the technical solution of the above embodiment, the component display apparatus further includes:
the preset formatted file updating module is used for executing updating operation on the currently stored preset formatted file according to the formatted file updating request when the formatted file updating request is received; wherein the update operation includes at least one of an add operation of the component attribute information, a delete operation of the component attribute information, and a modify operation of the component attribute information.
Optionally, the preset formatted file further includes an editing mode and an optional field of the attribute information of the component; correspondingly, the generated HTML file comprises the editing mode and the selectable item field;
in the technical solution of the above embodiment, the component display apparatus further includes:
and the attribute editing page rendering module is used for rendering and displaying an attribute editing page according to the editing mode and the selectable item field of the attribute information of the component when detecting the attribute editing triggering operation of the component displayed in the component display page, so that a user can edit the attribute of the component in the attribute editing page.
Optionally, the preset formatted file is a JavaScript object notation JSON file.
The component display device provided by the embodiment of the invention can execute the component display method provided by any embodiment of the invention, and has corresponding functional modules and beneficial effects of the execution method.
It should be noted that, in the embodiment of the component display apparatus, the units and modules included in the embodiment are only divided according to functional logic, but are not limited to the above division as long as the corresponding functions can be implemented; in addition, specific names of the functional units are only for convenience of distinguishing from each other, and are not used for limiting the protection scope of the present invention.
Example four
Fig. 8 is a schematic structural diagram of a server according to a fourth embodiment of the present invention, as shown in fig. 8, the server includes a processor 410, a memory 420, an input device 430, and an output device 440; the number of the processors 410 in the server may be one or more, and one processor 410 is taken as an example in fig. 8; the processor 410, the memory 420, the input device 430 and the output device 440 in the server may be connected by a bus or other means, and fig. 8 illustrates the connection by a bus as an example.
The memory 420 is used as a computer-readable storage medium for storing software programs, computer-executable programs and modules, such as program instructions/modules corresponding to the theme update method in the embodiment of the present invention (for example, the pre-formatted file acquisition module 310, the html file generation module 320 and the html file transmission module 330 in the component exhibition apparatus, the processor 410 executes various functional applications and data processing of the server by running the software programs, instructions and modules stored in the memory 420, so as to implement the theme update method.
The memory 420 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application program required for at least one function; the storage data area may store data created according to the use of the terminal, and the like. Further, the memory 420 may include high speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other non-volatile solid state storage device. In some examples, memory 420 may further include memory located remotely from processor 410, which may be connected to a server over a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.
The input device 430 may be used to receive input numeric or character information and generate key signal inputs related to user settings and function control of the server. The output device 440 may include a display device such as a display screen.
EXAMPLE five
The present embodiment provides a computer-readable storage medium on which a computer program is stored, which when executed by a processor implements a component presentation method according to any embodiment of the present invention. The method comprises the following steps:
when receiving a component display request sent by a user interface UI plug-in client, acquiring a preset formatted file configured in advance; the preset formatted file comprises attribute information of at least one component in a component library;
reading attribute information of each component from the preset formatted file, and generating a hypertext markup language (HTML) file according to the attribute information of each component;
and sending the HTML file to the UI plug-in client so that the UI plug-in client renders and displays the component display page containing each component according to the HTML file.
Of course, the storage medium provided by the embodiment of the present invention contains computer-executable instructions, and the computer-executable instructions are not limited to the method operations described above, and may also perform related operations in component exhibition provided by any embodiment of the present invention.
From the above description of the embodiments, it is obvious for those skilled in the art that the present invention can be implemented by software and necessary general hardware, and certainly, can also be implemented by hardware, but the former is a better embodiment in many cases. Based on such understanding, the technical solutions of the present invention may be embodied in the form of a software product, which may be stored in a computer-readable storage medium, such as a floppy disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a FLASH Memory (FLASH), a hard disk or an optical disk of a computer, and includes several instructions for enabling a computer device (which may be a personal computer, a server, or a network device) to execute the component display method according to the embodiments of the present invention.
It should be noted that, in the embodiment of the component display apparatus, the units and modules included in the embodiment are only divided according to functional logic, but are not limited to the above division as long as the corresponding functions can be implemented; in addition, specific names of the functional units are only for convenience of distinguishing from each other, and are not used for limiting the protection scope of the present invention.
It is to be noted that the foregoing is only illustrative of the preferred embodiments of the present invention and the technical principles employed. It will be understood by those skilled in the art that the present invention is not limited to the particular embodiments described herein, but is capable of various obvious changes, rearrangements and substitutions as will now become apparent to those skilled in the art without departing from the scope of the invention. Therefore, although the present invention has been described in greater detail by the above embodiments, the present invention is not limited to the above embodiments, and may include other equivalent embodiments without departing from the spirit of the present invention, and the scope of the present invention is determined by the scope of the appended claims.
Claims (10)
1. A method of component display, comprising:
when receiving a component display request sent by a user interface UI plug-in client, acquiring a preset formatted file configured in advance; the preset formatted file comprises attribute information of at least one component in a component library;
reading attribute information of each component from the preset formatted file, and generating a hypertext markup language (HTML) file according to the attribute information of each component;
and sending the HTML file to the UI plug-in client so that the UI plug-in client renders and displays the component display page containing each component according to the HTML file.
2. The method of claim 1, wherein prior to receiving the component exposure request sent by the UI plug-in client, the method further comprises:
reading attribute information of each component from the component library file;
and configuring at least one attribute information of at least one component in the attribute information of each component in a preset formatted file.
3. The method of claim 2, wherein configuring at least one attribute information of at least one component among the attribute information of each component in a preset formatted file comprises:
writing at least one attribute information of at least one component in the attribute information of each component into an array of a preset formatted file respectively;
the array comprises at least one array element, each array element corresponds to one component in the component library and is used for storing attribute information of the corresponding component, and the corresponding relation between the array elements and the components is determined according to the position sequence of each component in the component display page.
4. The method of claim 1, wherein generating an HTML file based on attribute information of each of the components comprises:
converting the attribute information of each component into HTML tag elements according to a preset Document Object Model (DOM) template;
generating an HTML file according to each converted HTML tag element;
and the DOM template is configured with HTML tag element conversion methods corresponding to various types of components in the component library.
5. The method of claim 1, further comprising:
when a formatted file updating request is received, updating operation is executed on the preset formatted file which is stored currently according to the formatted file updating request;
wherein the update operation includes at least one of an add operation of the component attribute information, a delete operation of the component attribute information, and a modify operation of the component attribute information.
6. The method according to claim 1, wherein the preset formatted file further comprises an editing mode and an option field of the property information of the component; correspondingly, the generated HTML file comprises the editing mode and the selectable item field;
after the UI plug-in client renders and displays a component presentation page including each of the components according to the HTML file, the method further includes:
when detecting the attribute editing triggering operation of the components displayed in the component display page, rendering and displaying the attribute editing page according to the editing mode and the selectable item fields of the attribute information of the components, so that a user can edit the attributes of the components in the attribute editing page.
7. The method of any one of claims 1-6, wherein the pre-formatted file is a JavaScript object notation (JSON) file.
8. An assembly display device, comprising:
the system comprises a preset formatted file acquisition module, a component display module and a format conversion module, wherein the preset formatted file acquisition module is used for acquiring a preset formatted file configured in advance when receiving a component display request sent by a user interface UI plug-in client; the preset formatted file comprises attribute information of at least one component in a component library;
a hypertext markup language file generation module, configured to read attribute information of each component from the preset formatted file, and generate a hypertext markup language HTML file according to the attribute information of each component;
and the hypertext markup language file sending module is used for sending the HTML file to the UI plug-in client so as to render and display the component display page containing each component according to the HTML file.
9. A server, characterized in that the server comprises:
one or more processors;
a memory for storing one or more programs;
when executed by the one or more processors, cause the one or more processors to implement the component exhibition method of any one of claims 1-7.
10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the component presentation method as claimed in any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010790160.6A CN112269576A (en) | 2020-08-07 | 2020-08-07 | Component display method and device, server and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010790160.6A CN112269576A (en) | 2020-08-07 | 2020-08-07 | Component display method and device, server and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112269576A true CN112269576A (en) | 2021-01-26 |
Family
ID=74348730
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010790160.6A Pending CN112269576A (en) | 2020-08-07 | 2020-08-07 | Component display method and device, server and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112269576A (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113268234A (en) * | 2021-05-17 | 2021-08-17 | 北京三快在线科技有限公司 | Page generation method, device, terminal and storage medium |
| CN113361235A (en) * | 2021-06-30 | 2021-09-07 | 北京百度网讯科技有限公司 | HTML file generation method and device, electronic equipment and readable storage medium |
| CN113656094A (en) * | 2021-08-03 | 2021-11-16 | 北京数码大方科技股份有限公司 | Processing method and device of attribute information |
| CN113730920A (en) * | 2021-09-15 | 2021-12-03 | 福建天晴在线互动科技有限公司 | Method and system for presetting component synchronization attribute |
| CN114116071A (en) * | 2022-01-28 | 2022-03-01 | 北京金堤科技有限公司 | Information processing method, device, medium and electronic equipment for label assembly |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6665860B1 (en) * | 2000-01-18 | 2003-12-16 | Alphablox Corporation | Sever-based method and apparatus for enabling client systems on a network to present results of software execution in any of multiple selectable render modes |
| CN107451296A (en) * | 2017-08-21 | 2017-12-08 | 南京焦点领动云计算技术有限公司 | A kind of Website Module rendering intent based on component |
| CN107798001A (en) * | 2016-08-29 | 2018-03-13 | 阿里巴巴集团控股有限公司 | Web page processing method, device and equipment |
| CN109460276A (en) * | 2018-10-25 | 2019-03-12 | 北京字节跳动网络技术有限公司 | The page and page configuration document generating method, device, terminal device and medium |
| CN110989976A (en) * | 2019-11-29 | 2020-04-10 | 北京美络克思科技有限公司 | Web application componentization development method based on J2EE, storage medium and electronic device |
-
2020
- 2020-08-07 CN CN202010790160.6A patent/CN112269576A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6665860B1 (en) * | 2000-01-18 | 2003-12-16 | Alphablox Corporation | Sever-based method and apparatus for enabling client systems on a network to present results of software execution in any of multiple selectable render modes |
| CN107798001A (en) * | 2016-08-29 | 2018-03-13 | 阿里巴巴集团控股有限公司 | Web page processing method, device and equipment |
| CN107451296A (en) * | 2017-08-21 | 2017-12-08 | 南京焦点领动云计算技术有限公司 | A kind of Website Module rendering intent based on component |
| CN109460276A (en) * | 2018-10-25 | 2019-03-12 | 北京字节跳动网络技术有限公司 | The page and page configuration document generating method, device, terminal device and medium |
| CN110989976A (en) * | 2019-11-29 | 2020-04-10 | 北京美络克思科技有限公司 | Web application componentization development method based on J2EE, storage medium and electronic device |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113268234A (en) * | 2021-05-17 | 2021-08-17 | 北京三快在线科技有限公司 | Page generation method, device, terminal and storage medium |
| CN113361235A (en) * | 2021-06-30 | 2021-09-07 | 北京百度网讯科技有限公司 | HTML file generation method and device, electronic equipment and readable storage medium |
| CN113361235B (en) * | 2021-06-30 | 2024-03-22 | 北京百度网讯科技有限公司 | HTML file generation method and device, electronic equipment and readable storage medium |
| CN113656094A (en) * | 2021-08-03 | 2021-11-16 | 北京数码大方科技股份有限公司 | Processing method and device of attribute information |
| CN113656094B (en) * | 2021-08-03 | 2023-12-12 | 北京数码大方科技股份有限公司 | Attribute information processing method and device |
| CN113730920A (en) * | 2021-09-15 | 2021-12-03 | 福建天晴在线互动科技有限公司 | Method and system for presetting component synchronization attribute |
| CN113730920B (en) * | 2021-09-15 | 2023-10-20 | 福建天晴在线互动科技有限公司 | Method and system for presetting component synchronization attribute |
| CN114116071A (en) * | 2022-01-28 | 2022-03-01 | 北京金堤科技有限公司 | Information processing method, device, medium and electronic equipment for label assembly |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111045655B (en) | Page rendering method and device, rendering server and storage medium | |
| CN112269576A (en) | Component display method and device, server and storage medium | |
| CN110442822B (en) | Method, device, equipment and storage medium for displaying small program content | |
| US9244658B2 (en) | Multi-step auto-completion model for software development environments | |
| CN110083790A (en) | Page editing method, page output method, device, computer equipment and medium | |
| CN109634598A (en) | A kind of page display method, device, equipment and storage medium | |
| WO2022048316A1 (en) | Method and apparatus for designing front-end page, storage medium, and device | |
| CN111611518B (en) | Automatic visual display page publishing method and system based on Html5 | |
| CN108038212B (en) | Data interaction method, device, system, equipment and storage medium | |
| CN110955428A (en) | Page display method and device, electronic equipment and medium | |
| CN112540763A (en) | Front-end page generation method and device, platform equipment and storage medium | |
| CN110673847A (en) | Configuration page generation method and device, electronic equipment and readable storage medium | |
| CN111079047A (en) | Web-oriented page construction system | |
| CN110727429B (en) | Front-end page generation method, device and equipment | |
| CN113126990B (en) | Page development method, device, equipment and storage medium | |
| WO2022048141A1 (en) | Image processing method and apparatus, and computer readable storage medium | |
| CN108170409B (en) | Development method and system of WEB front-end control | |
| WO2023103430A1 (en) | Data visualization display method and apparatus, medium and electronic device | |
| US10282172B2 (en) | Authoring and deploying television apps and pages in a content management system | |
| JPWO2007132568A1 (en) | Data processing server and data processing method | |
| US20060117248A1 (en) | Web screen creation method, program and server | |
| CN113448569A (en) | Site page processing system, method, equipment and storage medium | |
| CN113703893A (en) | Page rendering method, device, terminal and storage medium | |
| CN113721910A (en) | Interface code generation method and device, electronic equipment and computer readable medium | |
| CN116360735A (en) | Form generation method, device, equipment and medium |
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 |