CN112558970A - Rendering generation method and device for front-end page, front-end equipment and storage medium - Google Patents
Rendering generation method and device for front-end page, front-end equipment and storage medium Download PDFInfo
- Publication number
- CN112558970A CN112558970A CN202011547383.6A CN202011547383A CN112558970A CN 112558970 A CN112558970 A CN 112558970A CN 202011547383 A CN202011547383 A CN 202011547383A CN 112558970 A CN112558970 A CN 112558970A
- Authority
- CN
- China
- Prior art keywords
- view model
- page
- dsl
- tree
- component
- 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.)
- Granted
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 70
- 238000000034 method Methods 0.000 title claims abstract description 44
- 238000011161 development Methods 0.000 claims abstract description 37
- 230000000007 visual effect Effects 0.000 claims abstract description 18
- 238000012800 visualization Methods 0.000 claims description 12
- 238000004590 computer program Methods 0.000 claims description 5
- 238000013519 translation Methods 0.000 claims description 2
- 238000010586 diagram Methods 0.000 description 12
- 230000006870 function Effects 0.000 description 7
- 230000008569 process Effects 0.000 description 5
- 230000000694 effects Effects 0.000 description 4
- 230000005540 biological transmission Effects 0.000 description 3
- 238000013461 design Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 238000006243 chemical reaction Methods 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 239000000463 material Substances 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 230000006399 behavior Effects 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000008707 rearrangement Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- Y—GENERAL 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
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE 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/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Image Generation (AREA)
Abstract
The embodiment of the invention discloses a rendering generation method and device for a front-end page, front-end equipment and a storage medium. The method comprises the following steps: reading a DSL node tree from a DSL layout description file generated by development platform equipment; analyzing the DSL node tree to obtain at least one target view model tree matched with the front-end equipment; and carrying out view rendering on the front-end equipment according to the target view model tree to generate a visual component page comprising at least two atomic components. By adopting the scheme of the embodiment, when the front-end page is generated by rendering, the DSL layout description file generated according to the predefined format can be analyzed to obtain the view model tree matched with the front-end equipment for page rendering, so that the problem that the front-end equipment cannot be matched for rendering when the page is rendered is solved, the consistency of the double-end page of the development platform equipment end and the front-end equipment can be ensured, and the cross-end page development and the front-end page development dynamism are realized.
Description
Technical Field
The embodiment of the invention relates to the technical field of computers, in particular to a rendering generation method and device for a front-end page, front-end equipment and a storage medium.
Background
The development of the mobile terminal APP can bear various page services provided by the server, a front-end developer can usually develop a front-end page based on a development platform of the mobile terminal, the developer needs to process complex business logic, design various interfaces and reduce the development cost of the page, and meanwhile, the high availability, the readability and the low error rate of a page code are guaranteed and the development efficiency is improved. Therefore, how to develop and generate the front page quickly and easily becomes important.
Disclosure of Invention
The embodiment of the invention provides a rendering generation method and device for a front-end page, front-end equipment and a storage medium, which are used for reducing the labor and cost for front-end page development and improving the simplicity of front-end page development.
In a first aspect, an embodiment of the present invention provides a method for generating a rendering of a front-end page, where the method is executed by a front-end device, and the method includes:
reading a DSL node tree from a DSL layout description file generated by development platform equipment;
analyzing the DSL node tree to obtain at least one target view model tree matched with the front-end equipment;
and carrying out view rendering on the front-end equipment according to the target view model tree to generate a visual component page comprising at least two atomic components.
In a second aspect, an embodiment of the present invention further provides a rendering generation apparatus for a front-end page, where the apparatus is configured in a front-end device, and the apparatus includes:
a layout description file reading module, configured to read a DSL node tree from a DSL layout description file generated by the development platform device;
the layout description file analysis module is used for analyzing the DSL node tree to obtain at least one target view model tree matched with the front-end equipment;
and the page rendering generation module is used for carrying out view rendering on the front-end equipment according to the target view model tree so as to generate a visualization component page comprising at least two atomic components.
In a third aspect, an embodiment of the present invention further provides a front-end device, including:
one or more processors;
storage means for storing one or more programs;
the one or more programs are executed by the one or more processors, so that the one or more processors implement the rendering generation method of the front-end page provided in any embodiment of the present invention.
In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored, where the computer program, when executed by a processor, implements the rendering generation method for a front-end page provided in any embodiment of the present invention.
The embodiment of the invention provides a rendering generation method of a front-end page.A front-end device obtains a DSL layout description file generated on a development platform device, reads a contained read DSL node tree from the DSL layout description file, and obtains at least one target view model tree matched with the front-end device by analyzing the DSL node tree; on the basis, the front-end device can perform view rendering on the front-end device according to the target view model tree, and a visual component page comprising at least two atomic components is generated. By adopting the scheme of the embodiment, when the front-end page is generated by rendering, the DSL layout description file generated according to the predefined format can be analyzed to obtain the view model tree matched with the front-end equipment for page rendering, so that the problem that the front-end equipment cannot be matched for rendering when the page is rendered is solved, the consistency of the double-end page of the development platform equipment end and the front-end equipment can be ensured, and the cross-end page development and the front-end page development dynamism are realized.
The above summary of the present invention is merely an overview of the technical solutions of the present invention, and the present invention can be implemented in accordance with the content of the description in order to make the technical means of the present invention more clearly understood, and the above and other objects, features, and advantages of the present invention will be more clearly understood.
Drawings
Other features, objects and advantages of the invention will become more apparent upon reading of the following detailed description of non-limiting embodiments thereof, made with reference to the accompanying drawings. The drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the invention. Also, like reference numerals are used to refer to like parts throughout the drawings. In the drawings:
fig. 1 is a flowchart of a method for generating a rendering of a front-end page according to an embodiment of the present invention;
fig. 2 is a schematic diagram of page rendering performed at a front-end device according to an embodiment of the present invention;
fig. 3a is a schematic diagram of parsing a DSL node tree provided in an embodiment of the present invention;
FIG. 3b is a diagram illustrating a view rendering using a view model according to an embodiment of the present invention;
FIG. 4 is a schematic diagram illustrating a page rendering effect of a front-end device on a visualization component page provided in an embodiment of the present invention;
fig. 5 is a block diagram of a rendering generation apparatus for a front-end page provided in an embodiment of the present invention;
fig. 6 is a block diagram of a front-end device provided in the 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.
Before discussing exemplary embodiments in more detail, it should be noted that some exemplary embodiments are described as processes or methods depicted as flowcharts. Although a flowchart may describe the operations (or steps) as a sequential process, many of the operations can be performed in parallel, concurrently or simultaneously. In addition, the order of the operations may be re-arranged. The process may be terminated when its operations are completed, but may have additional steps not included in the figure. The processes may correspond to methods, functions, procedures, subroutines, and the like.
Fig. 1 is a flowchart of a rendering generation method for a front-end page provided in an embodiment of the present invention. The embodiment of the invention can be suitable for the condition of page rendering of the client page on the front-end equipment. The method can be executed by a rendering generation device of the front-end page, the device can be realized by adopting a software and/or hardware mode, and the device can be configured in a front-end device with a network communication function. As shown in fig. 1, the method for generating a front page in a rendering manner according to an embodiment of the present invention may include the following steps:
and S110, reading the DSL node tree from the DSL layout description file generated by the development platform equipment.
In this embodiment, the DSL layout description file is a visualization component page-translation determination built for the development platform device based on a predefined DSL layout description protocol. At a development platform equipment end, a visual component page comprising at least two target atomic components can be constructed and displayed in a page editing window of development platform equipment through dragging operation of the atomic components in the component window; meanwhile, the development platform device may convert the visualization component page into a DSL layout description file of a predefined format and send the DSL layout description file to the front-end device. The primitive components in the component window can comprise components of the types of a component container, a text component, a picture component, a list control, a sliding component and the like, and are used for constructing the page.
In this embodiment, for the structure of the DSL layout description file, the DSL layout takes into account three key descriptions, namely component description, component attribute description, and relationship description between parent and child components, so that the layout structure correspondingly consists of a description control name, a description control attribute, and a description parent-child containment relationship; the parent control we abstract and define uniformly as Container. Based on the above situation, the visualized component page visually built on the development platform equipment can be converted into the DSL layout description file with the predefined format. The DSL layout description file is used for indicating the component description, the component attribute description and the relationship description among the components of the target atomic component in a visual page; the inter-component relationship description comprises inter-component dependency relationships and association combination relationships. Thus, the front-end device can analyze the DSL layout description file, render pages according to the component description, the component attribute description and the inter-component relation description of the indicated target atomic component in the visual page, and display a page which is the same as the visual component page built on the platform device.
In this embodiment, fig. 2 is a schematic diagram of page rendering performed on a front-end device according to an embodiment of the present invention. Referring to fig. 2, after the front-end device obtains the DSL layout description file sent from the development platform device, the DSL layout description file is loaded and DSL-analyzed, and the most original DSL node tree is obtained from the DSL layout description file, and at this time, the DSL node tree does not distinguish the component type of each component in the visual component page for page rendering. Among them, DSL resolution includes but is not limited to the following: and performing component layout analysis, component resource analysis, component configuration analysis and the like on the page rendered visual component page.
In the embodiment, in the readability of the content description, the content description is naturally supported by the content structure of the xml file, so that the content is presented, and the readability is relatively intuitive and better; the JSON file content structure needs to add nodes such as a design child and the like to describe the dependency relationship, and the JSON file content structure has no fixed structure, so that the JSON file content structure has the advantages of supporting any appointed configuration and being poor in readability. In terms of transmission volume, JSON is lighter and faster than XML in network transmission, but in practice, the difference is not a major concern because downloading in advance and non-real-time instant transmission are considered. In view of the above analysis, the DSL topology description file employs an XML structure as the file carrier.
It should be noted that, when loading and performing DSL parsing on the DSL topology description file, the loading function does not include data processing, but only converts the DSL into a DSL node tree, so the obtained DSL node tree is clean template data, supports caching, and allows for cache reading when called multiple times.
S120, at least one target view model tree matched with the front-end equipment is obtained by analyzing the DSL node tree.
In an alternative of this embodiment, combinations with each of the alternatives of one or more of the embodiments described above are possible. Fig. 3a is a schematic diagram of parsing a DSL node tree according to an embodiment of the present invention. Referring to fig. 3a, parsing the DSL node tree to obtain at least one target view model tree adapted to the head-end equipment may include steps a1-a 2:
step a1, parsing the DSL node tree based on the device attributes of the front-end device to obtain an initial view model tree adapted to the front-end device, and obtain component style attributes and component dynamic attributes associated with the initial view model tree.
Step A2, adjusting the style attribute associated with the initial view model tree and the initial value content of the service field in the dynamic attribute to obtain the target view model tree.
In this embodiment, referring to fig. 2, according to the device attribute of the front-end device, the DSL node tree is parsed to form an abstraction of the corresponding component type, which is denoted as an initial view model tree. Each view model tree comprises at least two view model nodes ViewModelNode, and each view model node ViewModelNode corresponds to one atomic component. At this time, the node tree without distinguishing the actual component type is converted into an abstraction of the tree of the view model node viewmodel node so as to distinguish the actual component type. The device attribute is used to indicate an operating system type of the front-end device, such as an Android and iOS system.
In this embodiment, referring to fig. 2, by analyzing the DSL node tree, a component style attribute and a component dynamic attribute associated with the initial view model tree may also be obtained, and the component style attribute and the component dynamic attribute of each view model node obtained by the analysis are stored in the pops, where each view model node viewmodel node corresponds to one pops, and the pops describes a style attribute of a component node corresponding to the view model node and used for forming a visual component page.
In this embodiment, referring to fig. 2, the style attribute associated with the initial view model tree and the initial value content of the service field in the dynamic attribute are not actual service data content, but the actual service data is usually used when the front-end device performs page rendering, so that the style attribute associated with the initial view model tree and the initial value content of the service field in the dynamic attribute need to be adjusted, and the initial value content is replaced by the actual service data, so as to be loaded and used when the front-end device performs page rendering.
In an alternative of this embodiment, combinations with each of the alternatives of one or more of the embodiments described above are possible. Adjusting the style attribute associated with the initial view model tree and the initial value content of the service field in the dynamic attribute may include:
and aiming at each initial view model node in the initial view model tree, replacing the initial value taking content of the service field in the partial dynamic attribute of the initial view model node ViewModelNode with the service data content associated with the initial value taking content through data binding DataBind.
In this embodiment, the initial value content includes a field value address of a service field required by an API interface in a visualization component page described in the DSL layout description file, which is assigned by the GraphQl service. Before converting the visual component page into the DSL layout description file in the predefined format, the development platform device will assign a field address of a service field required by the API interface to the API interface of the visual component page through the GraphQl service. The front-end equipment can replace some dynamic attribute contents (such as @ data { name }) in the initial view model node ViewModelNode by data binding Databind into real service data contents. For example, the name field is parsed, and the service data of the value of the field is obtained from the network data.
By adopting the mode, the Api is provided without independent back-end development logic to meet the requirement of the service data, the back-end development-free logic interface can be realized through GraphQl, the service of each service system is directly aggregated through the service, and the assembly and the conversion of the service data are realized by defining the logic.
And S130, carrying out view rendering on front-end equipment according to the target view model tree to generate a visualization component page comprising at least two atomic components.
In this embodiment, fig. 3b is a schematic diagram of view rendering by using a view model according to an embodiment of the present invention, and fig. 4 is a schematic diagram of a page rendering effect of a front-end device on a visualization component page according to an embodiment of the present invention. Referring to fig. 3b and fig. 4, View rendering is performed on each of at least one target View model tree which is obtained by analyzing and is adapted to the front-end device, different View views are generated according to the node name of each View model node, simultaneously, the tips corresponding to each View model node are bound to the corresponding views, a real View tree is formed, View rendering is completed, and a visualization component page including at least two atomic components is displayed on the front-end device. And the interactive behavior of the View View and other aspects are triggered by the JsBridge to develop business logic by js so as to achieve the dynamic property of the business logic.
The embodiment of the invention provides a rendering generation method of a front-end page, which designs a set of protocol capable of describing interface styles through DSL, and comprises the steps of defining all atomic components and attributes of a system and describing the layout combination relationship among all the components, and the front end dynamically analyzes the content according to the set of protocol, generates the components required by page rendering, manages and controls the layout combination relationship, and accurately controls the position and size of the display of interface content elements. By adopting the scheme of the embodiment, when the front-end page is generated by rendering, the DSL layout description file generated according to the predefined format can be analyzed to obtain the view model tree matched with the front-end equipment for page rendering, so that the problem that the front-end equipment cannot be matched for rendering when the page is rendered is solved, the consistency of the double-end page of the development platform equipment end and the front-end equipment can be ensured, and the cross-end page development and the front-end page development dynamism are realized. Moreover, the development cost and the threshold are reduced, the mobile terminal development page can be conveniently and rapidly built, the technical requirements on developers are reduced, the Android and the iOS are effective at the same time, and the complex page effect and the consistency of the interaction of the two terminals are facilitated; meanwhile, the dynamic property is met, the mobile terminal version is prevented from being frequently issued, and the issuing flow cost is reduced.
Fig. 5 is a block diagram of a rendering generation apparatus for a front-end page according to an embodiment of the present invention. The embodiment of the invention can be suitable for the condition of page rendering of the client page on the front-end equipment. The apparatus can be implemented by software and/or hardware, and the apparatus can be configured in a front-end device with network communication function. As shown in fig. 5, the apparatus for generating a rendering of a front-end page in the embodiment of the present invention may include the following: a layout description file reading module 510, a layout description file parsing module 520, and a page rendering generation module 530. Wherein:
a layout description reading module 510, configured to read a DSL node tree from a DSL layout description generated by a development platform device;
a layout description parsing module 520, configured to parse the DSL node tree to obtain at least one target view model tree adapted to the front-end device;
a page rendering generation module 530, configured to perform view rendering on the front-end device according to the target view model tree to generate a visualization component page including at least two atomic components.
On the basis of the foregoing embodiment, optionally, the DSL layout description file determines the visualization component page conversion constructed by the development platform device based on a predefined DSL layout description protocol.
On the basis of the foregoing embodiment, optionally, the DSL layout description file is configured to indicate a component description, a component attribute description, and an inter-component relationship description required for page rendering; the inter-component relationship description comprises inter-component dependency relationships and association combination relationships.
On the basis of the foregoing embodiment, optionally, the layout description file parsing module 520 includes:
analyzing the DSL node tree based on the equipment attribute of the front-end equipment to obtain an initial view model tree adapted to the front-end equipment and obtain a component style attribute and a component dynamic attribute associated with the initial view model tree; the view model tree comprises at least two view model nodes, and each view model node corresponds to an atomic component;
and adjusting the style attribute associated with the initial view model tree and the initial value content of the service field in the dynamic attribute to obtain the target view model tree.
On the basis of the above embodiment, optionally, adjusting the initial value-taking content of the service field in the style attribute and the dynamic attribute associated with the initial view model tree includes:
aiming at each initial view model node in an initial view model tree, replacing initial value-taking content of a service field in part of dynamic attributes of the initial view model node ViewModelNode with service data content associated with the initial value-taking content through data binding DataBind;
and the initial value content comprises a field value address of a service field required by an API (application programming interface) in a visual component page described by the DSL layout description file through GraphQl service.
The rendering generation device for the front-end page provided in the embodiment of the present invention may execute the rendering generation method for the front-end page provided in any embodiment of the present invention, and has a function and an advantageous effect corresponding to the execution of the rendering generation method for the front-end page.
Fig. 6 is a block diagram of a front-end device provided in the embodiment of the present invention. As shown in fig. 6, the front-end device provided in the embodiment of the present invention includes: one or more processors 610 and storage 620; the processor 610 in the front-end device may be one or more, and one processor 610 is taken as an example in fig. 6; storage 620 is used to store one or more programs; the one or more programs are executed by the one or more processors 610, so that the one or more processors 610 implement the rendering generation method of the front-end page according to any one of the embodiments of the present invention.
The front-end device may further include: an input device 630 and an output device 640.
The processor 610, the storage 620, the input device 630, and the output device 640 in the front-end apparatus may be connected by a bus or other means, and fig. 6 illustrates an example of connection by a bus.
The storage device 620 in the front-end device is used as a computer-readable storage medium for storing one or more programs, which may be software programs, computer-executable programs, and modules, such as program instructions/modules corresponding to the rendering generation method for the front-end page provided in the embodiment of the present invention. The processor 610 executes various functional applications and data processing of the front-end device by executing software programs, instructions and modules stored in the storage device 620, that is, implements the rendering generation method of the front-end page in the above method embodiments.
The storage device 6620 may include a storage program area and a storage data area, wherein the storage program 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 front-end device, and the like. Further, the storage 620 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, the storage 620 may further include memory located remotely from the processor 610, which may be connected to the device 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 means 630 may be used to receive input numeric or character information and generate key signal inputs related to user settings and function control of the front-end device. The output device 640 may include a display device such as a display screen.
And, when the one or more programs included in the front-end device are executed by the one or more processors 610, the programs perform the following operations:
reading a DSL node tree from a DSL layout description file generated by development platform equipment;
analyzing the DSL node tree to obtain at least one target view model tree matched with the front-end equipment;
and carrying out view rendering on the front-end equipment according to the target view model tree to generate a visual component page comprising at least two atomic components.
Of course, it can be understood by those skilled in the art that when one or more programs included in the front-end device are executed by the one or more processors 610, the programs may also perform related operations in the rendering generation method of the front-end page provided in any embodiment of the present invention.
An embodiment of the present invention provides a computer-readable medium, on which a computer program is stored, the program being executed by a processor to perform a rendering generation method for a front-end page, the method including:
reading a DSL node tree from a DSL layout description file generated by development platform equipment;
analyzing the DSL node tree to obtain at least one target view model tree matched with the front-end equipment;
and carrying out view rendering on the front-end equipment according to the target view model tree to generate a visual component page comprising at least two atomic components.
Optionally, the program, when executed by the processor, may be further configured to perform a rendering generation method for a front-end page provided in any embodiment of the present invention.
Computer storage media for embodiments of the invention may employ any combination of one or more computer-readable media. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the computer readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a Read Only Memory (ROM), an Erasable Programmable Read Only Memory (EPROM), a flash Memory, an optical fiber, a portable CD-ROM, an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. A computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
A computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take a variety of forms, including, but not limited to: an electromagnetic signal, an optical signal, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.
Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, Radio Frequency (RF), etc., or any suitable combination of the foregoing.
Computer program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
In the description herein, references to the description of the term "one embodiment," "some embodiments," "an example," "a specific example," or "some examples," etc., mean that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the invention. In this specification, the schematic representations of the terms used above do not necessarily refer to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples.
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 rendering generation method of a front-end page, which is executed by a front-end device, the method comprising:
reading a DSL node tree from a DSL layout description file generated by development platform equipment;
analyzing the DSL node tree to obtain at least one target view model tree matched with the front-end equipment;
and carrying out view rendering on the front-end equipment according to the target view model tree to generate a visual component page comprising at least two atomic components.
2. The method of claim 1, wherein the DSL layout description file determines visualization component page translation built for a development platform device based on a predefined DSL layout description protocol.
3. The method of claim 1, wherein the DSL layout description file is used to indicate component descriptions, component attribute descriptions, and inter-component relationship descriptions required for page rendering; the inter-component relationship description comprises inter-component dependency relationships and association combination relationships.
4. The method of claim 1, wherein parsing the DSL node tree to obtain at least one target view model tree adapted to the head-end device comprises:
analyzing the DSL node tree based on the equipment attribute of the front-end equipment to obtain an initial view model tree adapted to the front-end equipment and obtain a component style attribute and a component dynamic attribute associated with the initial view model tree; the view model tree comprises at least two view model nodes, and each view model node corresponds to an atomic component;
and adjusting the style attribute associated with the initial view model tree and the initial value content of the service field in the dynamic attribute to obtain the target view model tree.
5. The method of claim 4, wherein adjusting the initial value content of the service field in the style attribute and the dynamic attribute associated with the initial view model tree comprises:
aiming at each initial view model node in an initial view model tree, replacing initial value-taking content of a service field in part of dynamic attributes of the initial view model node ViewModelNode with service data content associated with the initial value-taking content through data binding DataBind;
and the initial value content comprises a field value address of a service field required by an API (application programming interface) in a visual component page described by the DSL layout description file through GraphQl service.
6. An apparatus for generating a rendering of a front-end page, configured at a front-end device, the apparatus comprising:
a layout description file reading module, configured to read a DSL node tree from a DSL layout description file generated by the development platform device;
the layout description file analysis module is used for analyzing the DSL node tree to obtain at least one target view model tree matched with the front-end equipment;
and the page rendering generation module is used for carrying out view rendering on the front-end equipment according to the target view model tree so as to generate a visualization component page comprising at least two atomic components.
7. The method of claim 1, wherein the layout description parsing module comprises:
analyzing the DSL node tree based on the equipment attribute of the front-end equipment to obtain an initial view model tree adapted to the front-end equipment and obtain a component style attribute and a component dynamic attribute associated with the initial view model tree; the view model tree comprises at least two view model nodes, and each view model node corresponds to an atomic component;
and adjusting the style attribute associated with the initial view model tree and the initial value content of the service field in the dynamic attribute to obtain the target view model tree.
8. The apparatus of claim 7, wherein adjusting the initial value content of the service field in the style attribute and the dynamic attribute associated with the initial view model tree comprises:
aiming at each initial view model node in an initial view model tree, replacing initial value-taking content of a service field in part of dynamic attributes of the initial view model node ViewModelNode with service data content associated with the initial value-taking content through data binding DataBind;
and the initial value content comprises a field value address of a service field required by an API (application programming interface) in a visual component page described by the DSL layout description file through GraphQl service.
9. A front-end device, comprising:
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 the method for rendering generation of a front end page of any of claims 1-5.
10. A computer-readable storage medium on which a computer program is stored, the program, when executed by a processor, implementing the rendering generation method for a front-end page of any one of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011547383.6A CN112558970B (en) | 2020-12-24 | 2020-12-24 | Rendering generation method and device of front-end page, front-end equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011547383.6A CN112558970B (en) | 2020-12-24 | 2020-12-24 | Rendering generation method and device of front-end page, front-end equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112558970A true CN112558970A (en) | 2021-03-26 |
| CN112558970B CN112558970B (en) | 2024-04-19 |
Family
ID=75032338
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011547383.6A Active CN112558970B (en) | 2020-12-24 | 2020-12-24 | Rendering generation method and device of front-end page, front-end equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112558970B (en) |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112905944A (en) * | 2021-04-06 | 2021-06-04 | 成都新希望金融信息有限公司 | Page online dynamic generation method and device, electronic equipment and readable storage medium |
| CN113553047A (en) * | 2021-07-28 | 2021-10-26 | 湖南快乐阳光互动娱乐传媒有限公司 | Method and device for converting DSL into visual page |
| CN113805966A (en) * | 2021-09-15 | 2021-12-17 | 上海得帆信息技术有限公司 | Multi-terminal device dynamic view rendering implementation method and system |
| CN114090015A (en) * | 2021-11-26 | 2022-02-25 | 浩云科技股份有限公司 | Page DSL (digital subscriber line) analysis method, system, equipment and storage medium |
| CN114679484A (en) * | 2022-03-25 | 2022-06-28 | 机科发展科技股份有限公司 | Server, client, TCP/IP Ethernet communication system, medium, and device |
| CN114924815A (en) * | 2022-03-31 | 2022-08-19 | 北京达佳互联信息技术有限公司 | Page rendering method and device, electronic equipment and storage medium |
| CN115268911A (en) * | 2022-08-01 | 2022-11-01 | 广州道然信息科技有限公司 | Television application construction method based on layout and components |
| CN117093218A (en) * | 2023-10-19 | 2023-11-21 | 浪潮通用软件有限公司 | Front-end interface rendering method, device and medium based on interface description |
| CN117234494A (en) * | 2023-09-08 | 2023-12-15 | 红有软件股份有限公司 | Method for dynamically generating front-end page |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107291482A (en) * | 2016-03-30 | 2017-10-24 | 阿里巴巴集团控股有限公司 | The display methods and device of content of pages in application program |
| CN110096277A (en) * | 2019-03-19 | 2019-08-06 | 北京三快在线科技有限公司 | A kind of dynamic page methods of exhibiting, device, electronic equipment and storage medium |
| CN111324833A (en) * | 2018-12-14 | 2020-06-23 | 北京京东尚科信息技术有限公司 | Page display method, device, electronic design and computer readable medium |
-
2020
- 2020-12-24 CN CN202011547383.6A patent/CN112558970B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107291482A (en) * | 2016-03-30 | 2017-10-24 | 阿里巴巴集团控股有限公司 | The display methods and device of content of pages in application program |
| CN111324833A (en) * | 2018-12-14 | 2020-06-23 | 北京京东尚科信息技术有限公司 | Page display method, device, electronic design and computer readable medium |
| CN110096277A (en) * | 2019-03-19 | 2019-08-06 | 北京三快在线科技有限公司 | A kind of dynamic page methods of exhibiting, device, electronic equipment and storage medium |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112905944A (en) * | 2021-04-06 | 2021-06-04 | 成都新希望金融信息有限公司 | Page online dynamic generation method and device, electronic equipment and readable storage medium |
| CN113553047A (en) * | 2021-07-28 | 2021-10-26 | 湖南快乐阳光互动娱乐传媒有限公司 | Method and device for converting DSL into visual page |
| CN113805966A (en) * | 2021-09-15 | 2021-12-17 | 上海得帆信息技术有限公司 | Multi-terminal device dynamic view rendering implementation method and system |
| CN114090015A (en) * | 2021-11-26 | 2022-02-25 | 浩云科技股份有限公司 | Page DSL (digital subscriber line) analysis method, system, equipment and storage medium |
| CN114679484A (en) * | 2022-03-25 | 2022-06-28 | 机科发展科技股份有限公司 | Server, client, TCP/IP Ethernet communication system, medium, and device |
| CN114679484B (en) * | 2022-03-25 | 2023-01-10 | 机科发展科技股份有限公司 | Server, client, TCP/IP Ethernet communication system, medium, and device |
| CN114924815A (en) * | 2022-03-31 | 2022-08-19 | 北京达佳互联信息技术有限公司 | Page rendering method and device, electronic equipment and storage medium |
| CN114924815B (en) * | 2022-03-31 | 2024-07-02 | 北京达佳互联信息技术有限公司 | Page rendering method and device, electronic equipment and storage medium |
| CN115268911A (en) * | 2022-08-01 | 2022-11-01 | 广州道然信息科技有限公司 | Television application construction method based on layout and components |
| CN117234494A (en) * | 2023-09-08 | 2023-12-15 | 红有软件股份有限公司 | Method for dynamically generating front-end page |
| CN117093218A (en) * | 2023-10-19 | 2023-11-21 | 浪潮通用软件有限公司 | Front-end interface rendering method, device and medium based on interface description |
| CN117093218B (en) * | 2023-10-19 | 2024-01-26 | 浪潮通用软件有限公司 | Front-end interface rendering method, device and medium based on interface description |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112558970B (en) | 2024-04-19 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112558970A (en) | Rendering generation method and device for front-end page, front-end equipment and storage medium | |
| CN112540763A (en) | Front-end page generation method and device, platform equipment and storage medium | |
| US10592319B2 (en) | API notebook tool | |
| CN111552473B (en) | Application processing method, device and equipment | |
| CN111158818B (en) | Page rendering method and device | |
| CN111045655B (en) | Page rendering method and device, rendering server and storage medium | |
| 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 | |
| CN112100550A (en) | Page construction method and device | |
| JP2017538991A (en) | Page processing for mobile apps | |
| CN113900958A (en) | Test case script generation method, system, medium and electronic device | |
| CN105786455B (en) | Data processing method and device and terminal | |
| CN108279882B (en) | Framework generation method, device, equipment and computer readable medium | |
| CN112269576A (en) | Component display method and device, server and storage medium | |
| CN103136100B (en) | A kind of method and system of Android test | |
| CN114077430A (en) | Interface generation method and device, electronic equipment and storage medium | |
| US20240248946A1 (en) | Local dynamic page generation method and apparatus, electronic device, and computer-readable storage medium | |
| CN111767229A (en) | Performance test method, device and equipment | |
| CN104081347A (en) | Graphical representation of an order of operations | |
| CN118259906A (en) | Multi-terminal page adaptation method, equipment and medium based on PaaS framework | |
| CN113419711A (en) | Page guiding method and device, electronic equipment and storage medium | |
| CN113721910A (en) | Interface code generation method and device, electronic equipment and computer readable medium | |
| CN113535175A (en) | Application program front-end code generation method and device, electronic equipment and medium | |
| CN114461960B (en) | Page generation method, page display method and page display device | |
| CN109101429A (en) | A kind of method and device of the browser page debugging of set-top box |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |