CN114661402A - Interface rendering method and device, electronic equipment and computer readable medium - Google Patents
Interface rendering method and device, electronic equipment and computer readable medium Download PDFInfo
- Publication number
- CN114661402A CN114661402A CN202210317490.2A CN202210317490A CN114661402A CN 114661402 A CN114661402 A CN 114661402A CN 202210317490 A CN202210317490 A CN 202210317490A CN 114661402 A CN114661402 A CN 114661402A
- Authority
- CN
- China
- Prior art keywords
- component
- rendering
- interface
- definition information
- target
- 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
- 238000009877 rendering Methods 0.000 title claims abstract description 239
- 238000000034 method Methods 0.000 title claims abstract description 74
- 230000014509 gene expression Effects 0.000 claims description 55
- 238000004590 computer program Methods 0.000 claims description 9
- 230000004044 response Effects 0.000 claims description 5
- 230000008901 benefit Effects 0.000 abstract description 4
- 238000012423 maintenance Methods 0.000 abstract description 3
- 230000006870 function Effects 0.000 description 69
- 238000010586 diagram Methods 0.000 description 14
- 230000006399 behavior Effects 0.000 description 12
- 238000012545 processing Methods 0.000 description 9
- 230000008569 process Effects 0.000 description 8
- 230000001960 triggered effect Effects 0.000 description 5
- 238000004891 communication Methods 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 239000003795 chemical substances by application Substances 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000009471 action Effects 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000000750 progressive effect Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 238000004458 analytical method Methods 0.000 description 1
- 238000013475 authorization Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000007781 pre-processing Methods 0.000 description 1
- 238000003672 processing method Methods 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
- 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/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
The application discloses an interface rendering method, an interface rendering device, electronic equipment and a computer readable medium, which relate to the technical field of computers, and the method comprises the following steps: receiving an interface rendering request, and acquiring a corresponding interface identifier and a to-be-rendered component identifier; calling the dynamic rendering component to acquire rendering configuration information corresponding to the interface identifier, and determining component definition information corresponding to each component identifier to be rendered from the rendering configuration information; calling a preset middleware, expanding the definition information of each component based on the target attribute, and further generating the definition information of the target component; and performing rendering of the interface corresponding to the interface identification based on the target component definition information. The method has the advantages that each node on the interface is expanded through the middleware to be rendered into the component, the component with a complex structure can be rendered according to simple definition, some special operations are flexibly expanded before each node on the interface is rendered, the complexity of rendering data is reduced, the rendering performance is improved, and the maintenance of interface definition data is facilitated.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to an interface rendering method and apparatus, an electronic device, and a computer-readable medium.
Background
The front end develops the interface through a progressive framework (Vue) for building a user interface, with the need to dynamically render the interface from data, for which the interface is typically presented in a manner that dynamically parses json data and converts to Vue rendering processes.
In the process of implementing the present application, the inventor finds that at least the following problems exist in the prior art:
the dynamic interface rendering realized based on the vue technology has low rendering performance under the situation that the interface is complex and the data complexity is high, and the interface definition data is not easy to maintain.
Disclosure of Invention
In view of this, embodiments of the present application provide an interface rendering method and apparatus, an electronic device, and a computer readable medium, which can solve the problems that, in the existing dynamic interface rendering implemented based on the vue technology, rendering performance is low under the situation that an interface is complex and data complexity is high, and interface definition data is not easy to maintain.
To achieve the above object, according to an aspect of an embodiment of the present application, there is provided an interface rendering method including:
receiving an interface rendering request, and acquiring a corresponding interface identifier and a to-be-rendered component identifier;
calling the dynamic rendering component to acquire rendering configuration information corresponding to the interface identifier, and further determining component definition information corresponding to each component identifier to be rendered from the rendering configuration information;
calling a preset middleware to expand the definition information of each component based on the target attribute so as to generate the definition information of the target component;
and performing rendering of the interface corresponding to the interface identification based on the target component definition information.
Optionally, before performing rendering of the interface corresponding to the interface identification based on each target component definition information, the method further includes:
acquiring rendering position information corresponding to the target assembly definition information;
generating a component attribute expression based on the rendering position information and the target attribute of the target object;
the target component definition information is updated based on the component attribute expression.
Optionally, before updating the target component definition information based on the component property expression, the method further comprises:
calling a function adding method in an initialization event of the dynamic rendering component to realize a custom function;
and executing the custom function.
Optionally, performing rendering of the interface corresponding to the interface identification based on each target component definition information, including;
in response to determining that the component placeholder attributes are included in the target component definition information, rendering the corresponding component to a location of the component placeholder corresponding to the component placeholder attributes based on the target component definition information.
Optionally, before invoking the preset middleware, the method further includes:
and defining the middleware in the initialization event of the dynamic rendering component according to the target attribute and the preset prefix display position.
Optionally, before performing rendering of the interface corresponding to the interface identification based on each target component definition information, the method further includes:
acquiring rendering position information corresponding to the target assembly definition information;
generating a component attribute expression based on the rendering position information and the objective function;
the target component definition information is updated based on the component attribute expression.
Optionally, performing rendering on the interface corresponding to the interface identifier based on each target component definition information, including:
and calling the node rendering component to recursively render the component node to be rendered corresponding to each component identifier to be rendered on the interface corresponding to the interface identifier based on the definition information of each target component so as to generate an example corresponding to each component node to be rendered.
In addition, the present application also provides an interface rendering apparatus, including:
the receiving unit is configured to receive an interface rendering request and acquire a corresponding interface identifier and an identifier of a component to be rendered;
the component definition information determining unit is configured to call the dynamic rendering components to acquire rendering configuration information corresponding to the interface identifiers, and further determine component definition information corresponding to each component identifier to be rendered from the rendering configuration information;
the extension unit is configured to call preset middleware to extend the component definition information based on the target attribute so as to generate target component definition information;
a rendering unit configured to perform rendering of an interface corresponding to the interface identification based on each target component definition information.
Optionally, the apparatus further comprises an updating unit configured to:
acquiring rendering position information corresponding to the target assembly definition information;
generating a component attribute expression based on the rendering position information and the target attribute of the target object;
the target component definition information is updated based on the component attribute expression.
Optionally, the apparatus further comprises a function execution unit configured to:
calling a function adding method in an initialization event of the dynamic rendering component to realize a custom function;
and executing the custom function.
Optionally, the rendering unit is further configured to;
in response to determining that the component placeholder attributes are included in the target component definition information, rendering the corresponding component to a location of the component placeholder corresponding to the component placeholder attributes based on the target component definition information.
Optionally, the interface rendering apparatus further includes a middleware definition unit configured to:
and defining the middleware in the initialization event of the dynamic rendering component according to the target attribute and the preset prefix display position.
Optionally, the interface rendering apparatus further includes an updating unit configured to:
acquiring rendering position information corresponding to the target assembly definition information;
generating a component attribute expression based on the rendering position information and the objective function;
the target component definition information is updated based on the component attribute expression.
Optionally, the rendering unit is further configured to:
and calling the node rendering component to recursively render the component node to be rendered corresponding to each component identifier to be rendered on the interface corresponding to the interface identifier based on the definition information of each target component so as to generate an example corresponding to each component node to be rendered.
In addition, the present application also provides an interface rendering electronic device, including: one or more processors; the storage device is used for storing one or more programs, and when the one or more programs are executed by one or more processors, the one or more processors realize the interface rendering method.
In addition, the present application also provides a computer readable medium, on which a computer program is stored, which when executed by a processor implements the interface rendering method as described above.
One embodiment of the above invention has the following advantages or benefits: the method comprises the steps of obtaining corresponding interface identification and identification of a component to be rendered by receiving an interface rendering request; calling the dynamic rendering component to acquire rendering configuration information corresponding to the interface identifier, and further determining component definition information corresponding to each component identifier to be rendered from the rendering configuration information; calling a preset middleware to expand the definition information of each component based on the target attribute so as to generate the definition information of the target component; and performing rendering of the interface corresponding to the interface identification based on the target component definition information. The method has the advantages that each node on the interface is expanded through the middleware to be rendered into the component, the component with a complex structure can be rendered according to simple definition, some special operations are flexibly expanded before each node on the interface is rendered, the complexity of rendering data is reduced, the rendering performance is improved, and the maintenance of interface definition data is facilitated.
Further effects of the above-mentioned non-conventional alternatives will be described below in connection with the embodiments.
Drawings
The drawings are included to provide a further understanding of the application and are not to be construed as limiting the application. Wherein:
fig. 1 is a schematic diagram of a main flow of an interface rendering method according to a first embodiment of the present application;
fig. 2 is a schematic diagram of a main flow of an interface rendering method according to a second embodiment of the present application;
FIG. 3 is a schematic diagram of an application scenario of an interface rendering method according to a third embodiment of the present application;
FIG. 4 is a schematic diagram of the main units of an interface rendering apparatus according to an embodiment of the present application;
fig. 5 is a schematic structural diagram of a computer system suitable for implementing the terminal device or the server according to the embodiment of the present application.
Detailed Description
The following description of the exemplary embodiments of the present application, taken in conjunction with the accompanying drawings, includes various details of the embodiments of the application for the understanding of the same, which are to be considered exemplary only. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the present application. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness. According to the technical scheme, the data acquisition, storage, use, processing and the like meet relevant regulations of national laws and regulations.
Fig. 1 is a schematic diagram of a main flow of an interface rendering method according to a first embodiment of the present application, and as shown in fig. 1, the interface rendering method includes:
step S101, receiving an interface rendering request, and acquiring a corresponding interface identifier and an identifier of a component to be rendered.
In this embodiment, an execution subject (for example, a server) of the interface rendering method may receive the interface rendering request by way of wired connection or wireless connection. For example, an interface rendering process may be triggered when the executing agent detects that a component receives a set of data. That is, the user sends a set of data to trigger sending of an interface rendering request to the execution main body, and when the execution main body receives the transferred set of data, that is, the interface rendering request is received, subsequent interface rendering based on the set of data can be performed.
And the execution body renders the nodes to obtain the interface. The node is rendered into the interface based on the tree data structure, when the current node is rendered, the next node is found from the child attribute of the node, and the rendering is executed recursively. And carrying the interface identifier and the identifier of the component to be rendered in the interface rendering request. The interface identifier is used to indicate which interface is rendered. The component to be rendered identifies which level of nodes in the tree data structure to render.
The embodiment of the present application is implemented based on Vue3(Vue3 is a basic framework for executing the process, and is version 3.0 of Vue), and there are two basic components in interface rendering, one is a unified entry component JRender for receiving json data, and the other is a node JNode for rendering each component.
JRender is an vue component for receiving json data that functions to receive interface definitions to render and pass values for interface interactions from the outside, the properties of the JRender component are as follows:
attribute name: nodes
The following steps are described: definition of root node data to render, json data to render
Vue is a set of progressive frameworks used to build user interfaces. Unlike other large frames, Vue is designed to be applied layer by layer from the bottom up. Vue, the core library only focuses on the viewing layer, not only is it easy to get on hand, but also it is easy to integrate with third party libraries or existing projects. On the other hand, Vue is also fully capable of providing drivers for complex single page applications when used in conjunction with modern tool chains and various supporting class libraries.
The JRender component provides an event onSetup during initialization, can customize the rendering behavior of each node in the event onSetup, operates the data of the current node to achieve the function of customized rendering, receives a callback function by the event, and provides two methods as parameters, wherein the onBeforRender is defined by the data of the node before each node is rendered, the data of the node can be changed according to conditions in the method, and the setFunctional method is used for increasing the functions supported in the expression when the data associated with the attributes of the component is increased.
The event definition for a component is as follows:
event name: onSetup
The following steps are described: events triggered by a component during an initialization phase, extended behavior may be defined herein
Parameters are as follows: onBeforeRenderfunction; the following steps are described: pre-method performed by each node prior to rendering, where the node may be processed
Parameters are as follows: setFunctional; type (2): function; the following steps are described: registering custom functions
The JNode is used for rendering nodes of the components, the JNode component has only one attribute and is used for receiving the definition of the components to be rendered currently, an onBeforeRender (which is an event and is triggered before rendering) is triggered in the JNode, the definition of the current components is processed, the components of the current nodes are rendered by using a createElement method of Vue during rendering, the children attribute of the current components generates a new group of JNode nodes, the JNode nodes are transmitted to a rendering function, and the whole interface is rendered recursively.
The JNeon attribute is as follows:
attribute name: node
The following steps are described: rendered current node data
The node attribute of the JNeon is an object and represents a data definition used by each node for describing a rendering interface, and the node attribute comprises the following components:
attribute name: component; the following steps are described: the type name of the node is defined, and the type name can be an html element tag name or vue component name
Attribute name: (iii) tips; the following steps are described: the rendering related attributes of the current node are different according to different types, for example, the attribute of an html layer element and the attribute of an vue component are different, and the corresponding document is specifically required to be referred to, wherein the props is that the attribute of any element can be freely written into the attribute
The attribute name: children; the description is as follows: the definition of the sub-element of the current node is an array, and the definition of each element in the array is the same as that in the current table
Step S102, calling the dynamic rendering components to obtain rendering configuration information corresponding to the interface identifiers, and further determining component definition information corresponding to each component identifier to be rendered from the rendering configuration information.
And a dynamic rendering component, namely a JRender component. The execution subject can invoke the JRender component to obtain rendering configuration information corresponding to the interface identification. JRender is a dynamic rendering component, receives nodes attributes as data to be rendered, and can define middleware and functions in setup events to expand rendering behaviors. The data definition is as follows, the definition of a component generally includes three attributes of component, prop and child, the component represents the component type, which may be the html component name, or the component name in any vue component library, prop is the attribute definition of the component, and child attribute is the component subset element. Wherein the rendering configuration information may include nodes attributes.
And determining component definition information corresponding to each component identifier to be rendered from the rendering configuration information, namely determining the nodes attribute corresponding to each component identifier to be rendered from the rendering configuration information. That is to say, the component definition information may identify a corresponding node attribute for each component to be rendered, where specifically, the node attribute is as follows:
attribute name: nodes
The following steps are described: definition of root node data to render, json data to render
Step S103, calling a preset middleware to expand each component definition information based on the target attribute, and further generating target component definition information.
Specifically, before invoking the preset middleware, the method further includes:
and defining the middleware in the initialization event of the dynamic rendering component according to the target attribute and the preset prefix display position.
The target property, for example, may be a formItem property for each component. The preset prefix display position may be, for example, a form display prefix sleeved outside each input assembly. By way of example, defining a middleware implementation places a form item display prefix outside each input component prior to rendering according to the formItem properties of each component, and defines the rendering middleware using an onBeforeRender in the initialization event (setup event) of the dynamic rendering component.
The execution body may use middleware to process the data prior to rendering during rendering of the component. Defining middleware by an onBeforeRender method in the initialization event onSetup of the dynamic rendering component, expanding the behavior before rendering, receiving a parameter by the onBeforeRender function, returning the final definition to be rendered of the component, and processing the definition of the component to be rendered to obtain a final result, namely the definition information of the target component.
After defining the middleware, the execution body can judge whether the component defines a formItem attribute before rendering each component, and if the component defines the formItem attribute, a form item can be added on the outer layer of the component through the processing of the middleware and a prefix is displayed before rendering the component.
By way of example, the element-ui form component extends data processing behavior beyond before rendering:
a form, exemplary, "component": el-form "is defined, and an internal input component, exemplary, child element (child) defining the current node,: component": el-input "is defined. The component represents the type name definition of the node, and the type name can be an html element tag name or vue component name.
When an execution main body renders a form 'el-form' on an interface, two input components are arranged inside the execution main body, if a form item needs to be added on the outer layer of the input components, a middle component needs to be defined, so that a form item display prefix, for example, a character string beginning with '$', is sleeved outside each input component before rendering according to the formItem attribute of each component. The onBeforeRender is used to define the rendering middleware in the setup event of the dynamic rendering component. Through the middleware processing, when the object of the agent acquires the form display prefix, the statement behind the form display prefix is converted into a real program, so that the component definition information is simplified.
As another scenario, the execution body may utilize middleware to simplify the definition of the interactable component. And defining an input box component, and realizing that the rendering of an input box in the html can change the data value through input.
After simplifying the inputtable interaction definitions through middleware, the component definition information can be simplified to contain only the type name definition (e.g., "component": input ") and definition value (e.g.," value ": model.
The simultaneous implementation of the association and update behavior of the component values is achieved only by setting the value attribute.
And step S104, performing rendering of the interface corresponding to the interface identification based on the definition information of each target assembly.
Specifically, the rendering of the interface corresponding to the interface identification is performed based on each target component definition information, including;
in response to determining that the component placeholder attributes are included in the target component definition information, rendering the corresponding component to a location of the component placeholder corresponding to the component placeholder attributes based on the target component definition information.
For example, the slot (component placeholder) feature of vue is supported as follows:
and in different slots of the rendered vue component, in a component library, if the component supports the slot option, the component can be rendered into the corresponding slot by setting the slot attribute on a certain component in the dynamic rendering configuration. For example, configured as follows, a component that declares a property slot may be rendered into the header of an el-card component. Defining a node, rendering the component into an el-card (component type); the child nodes under the node are rendered into p-tags (i.e., tags representing a paragraph in html).
Specifically, before performing rendering of the interface corresponding to the interface identification based on each target component definition information, the method further includes:
acquiring rendering position information corresponding to the target assembly definition information;
generating a component attribute expression based on the rendering position information and the objective function;
the target component definition information is updated based on the component attribute expression.
As an application scenario of the embodiment of the present application, the execution subject may register a function and use it in a component attribute expression. The self-defined function can be defined through an addFunction method in the initialization event of the dynamic rendering component, the addFunction receives two parameters, the first parameter represents the name of the self-defined function, the second parameter represents the realization of the self-defined function, and the defined self-defined function can be used in an attribute expression.
The initial character of "$:" represents a component attribute expression, and the component attribute expression is realized after rendering and analysis.
Case 1: an attribute that can be used for a component is associated with an attribute of a piece of data, and when the attribute of the component changes, the attribute of the associated data is driven to be updated.
Case 2: it can also be used to associate a function with a certain attribute of a component, especially if the component attribute is an event, and the component triggers the event to execute the function.
In the embodiment of the present application, the description of case 2 is given above, and the position information refers to a parent-child relationship in the tree data structure. The components in the embodiment of the application have parent-child relationship and are not the positions displayed on the interface. That is, the rendering position information corresponding to the target component definition information may be the parent node in the tree data structure corresponding to the target component definition information or which level of child node corresponding to the parent node. The execution subject can determine which level of nodes in the tree data structure to render based on the target component definition information.
The target function may be a custom function, such as 'ADD', (value1, value 2). The attribute of the component can be represented as an expression in the form of $: < expression > character string, the expression is analyzed by the dynamic rendering component and converted into a program implementation, and the expression can represent a value and can also represent a function (function). The execution body may determine that it is a component to be rendered based on the rendering position, and further generate a component property expression, e.g., $ ADD (model.value1, model.value2), based on the objective functions 'ADD', (value1, value 2).
After the execution agent generates the component property expression, the target component definition information may be updated based on the component property expression.
The following are exemplified: custom functions are implemented and used in the attribute expressions.
Custom functions are used in the component property expressions to execute custom program logic. Calling addFunction in the dynamic rendering component initialization event implements a custom function ADD, illustratively, addFunction ('ADD', (value1, value2), which ultimately outputs the sum of value1 and value2 (i.e., return value1+ value 2).
The execution body defines a component to be rendered, inputs values through two input boxes and displays the result after addition, the input components of the scene are defined through middleware, and the result after addition is displayed by using a self-defined ADD function in a component lnerText attribute expression for displaying the value of the calculation result.
In the embodiment, an interface rendering request is received, and a corresponding interface identifier and an identifier of a component to be rendered are obtained; calling the dynamic rendering component to acquire rendering configuration information corresponding to the interface identifier, and further determining component definition information corresponding to each component identifier to be rendered from the rendering configuration information; calling a preset middleware to expand the definition information of each component based on the target attribute so as to generate the definition information of the target component; and performing rendering of the interface corresponding to the interface identification based on the target component definition information. Rendering each node on the interface into a component behavior through the middleware extension, achieving the purpose of rendering the component with a complex structure according to simple definition, flexibly extending some special operations before rendering each node on the interface, reducing the complexity of rendering data, improving the rendering performance, and being more beneficial to maintaining the interface definition data.
Fig. 2 is a schematic main flow diagram of an interface rendering method according to a second embodiment of the present application, and as shown in fig. 2, the interface rendering method includes:
step S201, receiving an interface rendering request, and acquiring a corresponding interface identifier and an identifier of a component to be rendered.
Step S202, calling the dynamic rendering components to obtain rendering configuration information corresponding to the interface identifiers, and further determining component definition information corresponding to each component identifier to be rendered from the rendering configuration information.
Step S203, a preset middleware is called to expand each component definition information based on the target attribute, and further, target component definition information is generated.
Step S204, obtaining rendering position information corresponding to the target assembly definition information.
In step S205, a component attribute expression is generated based on the rendering position information and the target attribute of the target object.
In step S206, the target component definition information is updated based on the component attribute expression.
And using "$:" the initial character represents a component attribute expression, and the component attribute expression is realized after rendering and analyzing.
Case 1: an attribute that can be used for a component is associated with an attribute of a piece of data, and when the attribute of the component changes, the attribute of the associated data is driven to be updated.
Case 2: it can also be used to associate a function with a certain attribute of a component, especially if the component attribute is an event, and the component triggers the event to execute the function.
In the embodiment of the present application, the description of the above case 1 is provided, and by associating the attribute of the component with the target attribute of the target object, when the attribute of the component changes, the target attribute of the associated target object is also updated in a corresponding change. The following are exemplified: the component attribute associated data implements a functional expression:
the attribute of the component can be represented as an expression in the form of $ < expression > character string, the expression is analyzed by the dynamic rendering component and converted into a program to be implemented, and the expression can represent a value and can also represent a function (function).
The implementation result is that a paragraph is rendered in html, wherein the innerText is the text in the paragraph, and $ model.
The implementation result is to render an input box in html, the result entered when entering an operation updates the text attribute of the object model, and the values displayed in the input box are also updated together.
Wherein: "onInput" $ (e) ═ model.text ═ e.target.value "means that the input event is associated with an expression, which is a function, the implementation of the html native input event.
Specifically, before updating the target component definition information based on the component attribute expression, the method further includes: calling a function adding method in an initialization event of the dynamic rendering component to realize a custom function; and executing the custom function.
Step S207, performing rendering of the interface corresponding to the interface identification based on each target component definition information.
Specifically, the rendering of the interface corresponding to the interface identification is performed based on each target component definition information, and includes: calling the node rendering component to recursively render the component node corresponding to each component identifier to be rendered on the interface corresponding to the interface identifier based on the target component definition information so as to generate an example corresponding to each component node to be rendered.
Jode is a dynamic rendering component, when a tree structure is recurred, createElement is executed, and finally generated data of each node is an instance of the Jode component.
Fig. 3 is a schematic view of an application scenario of an interface rendering method according to a third embodiment of the present application. The interface rendering method is applied to VUE interface rendering based on data driving. As shown in FIG. 3, JRender is a dynamic rendering component, receives nodes attribute as data to be rendered, and can define middleware and functions in setup event to extend rendering behavior.
The Jode is used for rendering nodes of the components, the Jode component has only one attribute and is used for receiving the definition of the current component to be rendered from the JRender, the onBeforeRender is triggered in the Jode, the definition of the current component is processed, the components of the current node are rendered by using a createElement method of Vue during rendering, the children attribute of the current component generates a new group of Jode nodes, the Jode nodes are transmitted to a rendering function, and the whole interface is rendered recursively.
The nodes of the JNeode can extend new attributes, which can simplify and customize data rules.
The embodiment of the application realizes the rendering of the interface based on two basic components JRender and JNOde, and the relationship between the two components is shown in FIG. 3.
The basic implementation logic of the specific front-end rendering process is as follows:
(1) defining a current node component;
(2) calling all the originally defined onBeforeRender processing methods;
(3) declaring a variable temporary storage node attribute;
(4) traversing all registered rendering preprocessing methods (onBeforeRenders) and executing;
(5) the createlement method of call vue creates a JNode and renders.
In the embodiment of the application, in the method for rendering data into an interface component, the dynamic rendering component is an vue component, and data can be rendered into an interface.
The following are exemplified: an interface is rendered according to data, and a dynamic rendering component is added to the vue file to realize the following: vue placing a Jrender component in the template to receive the configuration; a configuration for the interface to render is defined.
JRender is a dynamic rendering component, receives nodes attribute as data to be rendered, and can define middleware and functions in setup events to extend rendering behaviors.
The data definition is as follows, the definition of a component generally includes three attributes of component, prop and child, the component represents the component type, which may be the html component name, or the component name in any vue component library, prop is the attribute definition of the component, and child attribute is the component subset element.
In the embodiment of the application, the component attribute supports the binding relationship between the identifier and the data by using the expression, after the expression is packaged by the Proxy object of js, the expression can be converted into the real corresponding relationship with the data when the attribute is acquired, the attribute can be associated with certain data or bound with certain event, and the function can be used in the attribute expression to realize the conversion of the data. The example implementation is as follows: converting the value of value into corresponding relation with data; and calling a handler function and returning the converted value.
In the embodiment of the application, the method comprises the following steps:
the definition mode of the component is as follows: the JRender is used for rendering a dynamic interface in vue files; component attributes nodes for receiving the configuration; a component event setup for extending the rendered behavior;
the way of implementing the component property expression: setting the attribute to be associated with a certain attribute or an associated function in the form of "$: < expression >;
middleware processing before component rendering: in the setup event, a function is introduced by executing an onBeforeRender method, the function is used for expanding the behavior of each component before rendering, a parameter is received and is the current component to be rendered, and a return value is processed data;
registering custom functions and using in component property expressions: in the setup event, a custom function usable in the attribute expression is added by an addFunction method, and has two parameters, the first parameter is a method name, and the second parameter is an implementation of the custom function.
The slot support method comprises the following steps: the slot property is set on the component, so that the component can be rendered to a position corresponding to a slot of a parent level by using the slot property of vue;
the interface can be dynamically rendered according to the data, the efficiency of rendering the interface is improved, and the user experience is improved under the condition that the interface is complex and the page performance is not influenced; the rendering behavior of each node can be expanded through a middleware form, the rendering of a complex structure can be realized according to a simple definition, and some special operations can be flexibly expanded before the rendering of each node; the definition of the function is described through the expression, so that the function definition can be stored in data, and the function is enriched by supporting the self-defined function; the slot property of vue is supported as a container internal placeable subset component and rendered to the corresponding slot location. Therefore, higher rendering performance is achieved under the situation that the interface is complex and the data complexity is high, and the interface definition data is easy to maintain.
Fig. 4 is a schematic diagram of main units of an interface rendering apparatus according to an embodiment of the present application. As shown in fig. 4, the interface rendering apparatus 400 includes a receiving unit 401, a component definition information determining unit 402, an extending unit 403, and a rendering unit 404.
The receiving unit 401 is configured to receive an interface rendering request, and obtain a corresponding interface identifier and an identifier of a component to be rendered.
The component definition information determining unit 402 is configured to call the dynamic rendering component to obtain rendering configuration information corresponding to the interface identifier, and further determine component definition information corresponding to each component identifier to be rendered from the rendering configuration information.
An extension unit 403 configured to call a preset middleware to extend each component definition information based on the target attribute, thereby generating target component definition information.
A rendering unit 404 configured to perform rendering of an interface corresponding to the interface identification based on each target component definition information.
In some embodiments, the interface rendering apparatus further comprises an updating unit, not shown in fig. 4, configured to: acquiring rendering position information corresponding to the target assembly definition information; generating a component attribute expression based on the rendering position information and the target attribute of the target object; the target component definition information is updated based on the component attribute expression.
In some embodiments, the apparatus further comprises a function execution unit, not shown in fig. 4, configured to: calling a function adding method in an initialization event of the dynamic rendering component to realize a custom function; and executing the custom function.
In some embodiments, the rendering unit 404 is further configured to; in response to determining that the component placeholder attributes are included in the target component definition information, rendering the corresponding component to a location of the component placeholder corresponding to the component placeholder attributes based on the target component definition information.
In some embodiments, the interface rendering apparatus further includes a middleware definition unit, not shown in fig. 4, configured to: and defining the middleware in the initialization event of the dynamic rendering component according to the target attribute and the preset prefix display position.
In some embodiments, the interface rendering apparatus further comprises an updating unit, not shown in fig. 4, configured to: acquiring rendering position information corresponding to the target assembly definition information; generating a component attribute expression based on the rendering position information and the target function; the target component definition information is updated based on the component attribute expression.
In some embodiments, the rendering unit 404 is further configured to: and calling the node rendering component to recursively render the component node to be rendered corresponding to each component identifier to be rendered on the interface corresponding to the interface identifier based on the definition information of each target component so as to generate an example corresponding to each component node to be rendered.
It should be noted that, in the present application, the interface rendering method and the interface rendering apparatus have a corresponding relationship in the specific implementation content, so the repeated content is not described again.
Referring now to FIG. 5, shown is a block diagram of a computer system 500 suitable for use in implementing a terminal device of an embodiment of the present application. The terminal device shown in fig. 5 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present application.
As shown in fig. 5, the computer system 500 includes a Central Processing Unit (CPU)501 that can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM)502 or a program loaded from a storage section 508 into a Random Access Memory (RAM) 503. In the RAM503, various programs and data necessary for the operation of the computer system 500 are also stored. The CPU501, ROM502, and RAM503 are connected to each other via a bus 504. An input/output (I/O) interface 505 is also connected to bus 504.
The following components are connected to the I/O interface 505: an input portion 506 including a keyboard, a mouse, and the like; an output section 507 including a display such as a Cathode Ray Tube (CRT), a liquid crystal credit authorization query processor (LCD), and the like, and a speaker and the like; a storage portion 508 including a hard disk and the like; and a communication section 509 including a network interface card such as a LAN card, a modem, or the like. The communication section 509 performs communication processing via a network such as the internet. The driver 510 is also connected to the I/O interface 505 as necessary. A removable medium 511 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 510 as necessary, so that a computer program read out therefrom is mounted into the storage section 508 as necessary.
In particular, according to embodiments disclosed herein, the processes described above with reference to the flow diagrams may be implemented as computer software programs. For example, embodiments disclosed herein include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated by the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 509, and/or installed from the removable medium 511. The above-described functions defined in the system of the present application are executed when the computer program is executed by the Central Processing Unit (CPU) 501.
It should be noted that the computer readable medium shown in the present application may be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may include, 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 of the computer readable storage medium may include, but are not limited to: 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 or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present application, 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. In this application, however, 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 many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. 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, RF, etc., or any suitable combination of the foregoing.
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The units described in the embodiments of the present application may be implemented by software or hardware. The described units may also be provided in a processor, and may be described as: a processor includes a receiving unit, a component definition information determining unit, an extending unit, and a rendering unit. Wherein the names of the elements do not in some way constitute a limitation on the elements themselves.
As another aspect, the present application also provides a computer-readable medium, which may be contained in the apparatus described in the above embodiments; or may be separate and not incorporated into the device. The computer readable medium carries one or more programs, and when the one or more programs are executed by one of the devices, the device receives an interface rendering request, and acquires a corresponding interface identifier and an identifier of a component to be rendered; calling the dynamic rendering component to acquire rendering configuration information corresponding to the interface identifier, and further determining component definition information corresponding to each component identifier to be rendered from the rendering configuration information; calling a preset middleware to expand the definition information of each component based on the target attribute so as to generate the definition information of the target component; and performing rendering of the interface corresponding to the interface identification based on the target component definition information.
According to the technical scheme of the embodiment of the application, each node on the interface is expanded through the middleware to be rendered into the action of the component, the rendering of the component with a complex structure can be realized according to simple definition, some special operations are flexibly expanded before the rendering of each node on the interface, the complexity of rendering data is reduced, the rendering performance is improved, and the maintenance of interface definition data is facilitated.
The above-described embodiments are not intended to limit the scope of the present disclosure. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions can occur, depending on design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present application shall be included in the protection scope of the present application.
Claims (10)
1. An interface rendering method, comprising:
receiving an interface rendering request, and acquiring a corresponding interface identifier and a to-be-rendered component identifier;
calling dynamic rendering components to obtain rendering configuration information corresponding to the interface identifiers, and further determining component definition information corresponding to each component identifier to be rendered from the rendering configuration information;
calling a preset middleware to expand the definition information of each component based on the target attribute so as to generate the definition information of the target component;
and performing rendering of the interface corresponding to the interface identification based on each target component definition information.
2. The method of claim 1, wherein prior to said performing rendering of the interface corresponding to the interface identification based on each of the target component definition information, the method further comprises:
acquiring rendering position information corresponding to the target assembly definition information;
generating a component attribute expression based on the rendering position information and the target attribute of the target object;
updating the target component definition information based on the component attribute expression.
3. The method of claim 2, wherein prior to said updating the target component definition information based on the component property expression, the method further comprises:
calling a function adding method in an initialization event of the dynamic rendering component to realize a custom function;
and executing the custom function.
4. The method of claim 1, wherein the performing rendering of the interface corresponding to the interface identification based on each of the target component definition information comprises;
in response to determining that the target component definition information includes a component placeholder attribute, rendering the corresponding component to a location of a component placeholder corresponding to the component placeholder attribute based on the target component definition information.
5. The method of claim 1, wherein prior to said invoking the preset middleware, the method further comprises:
and defining middleware in the initialization event of the dynamic rendering component according to the target attribute and the preset prefix display position.
6. The method of claim 1, wherein prior to said performing rendering of the interface corresponding to the interface identification based on each of the target component definition information, the method further comprises:
acquiring rendering position information corresponding to the target assembly definition information;
generating a component attribute expression based on the rendering position information and the objective function;
updating the target component definition information based on the component attribute expression.
7. The method according to any one of claims 1 to 6, wherein the performing rendering of the interface corresponding to the interface identification based on each target component definition information comprises:
calling a node rendering component to recursively render a component node to be rendered corresponding to each component identifier to be rendered on the interface corresponding to the interface identifier based on each target component definition information, so as to generate an instance corresponding to each component node to be rendered.
8. An interface rendering apparatus, comprising:
the receiving unit is configured to receive an interface rendering request and acquire a corresponding interface identifier and a component identifier to be rendered;
the component definition information determining unit is configured to call a dynamic rendering component to acquire rendering configuration information corresponding to the interface identifier, and further determine component definition information corresponding to each component identifier to be rendered from the rendering configuration information;
the extension unit is configured to call preset middleware to extend each component definition information based on the target attribute so as to generate target component definition information;
a rendering unit configured to perform rendering of an interface corresponding to the interface identification based on each of the target component definition information.
9. An interface rendering electronic device, comprising:
one or more processors;
a storage device to store one or more programs,
when executed by the one or more processors, cause the one or more processors to implement the method of any one of claims 1-7.
10. A computer-readable medium, on which a computer program is stored, which, when being executed by a processor, carries out the method according to any one of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210317490.2A CN114661402A (en) | 2022-03-29 | 2022-03-29 | Interface rendering method and device, electronic equipment and computer readable medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210317490.2A CN114661402A (en) | 2022-03-29 | 2022-03-29 | Interface rendering method and device, electronic equipment and computer readable medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114661402A true CN114661402A (en) | 2022-06-24 |
Family
ID=82032433
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210317490.2A Pending CN114661402A (en) | 2022-03-29 | 2022-03-29 | Interface rendering method and device, electronic equipment and computer readable medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114661402A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117093218A (en) * | 2023-10-19 | 2023-11-21 | 浪潮通用软件有限公司 | Front-end interface rendering method, device and medium based on interface description |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103577207A (en) * | 2012-08-01 | 2014-02-12 | 阿里巴巴集团控股有限公司 | Loading method and loading device for interface components in custom interface system |
| US20150205470A1 (en) * | 2012-09-14 | 2015-07-23 | Ca, Inc. | Providing a user interface with configurable interface components |
| US20180101506A1 (en) * | 2016-10-06 | 2018-04-12 | Microsoft Technology Licensing, Llc | User Interface |
| US10802660B1 (en) * | 2015-07-29 | 2020-10-13 | Intuit Inc. | Metadata-driven binding of platform-agnostic content to platform-specific user-interface elements |
-
2022
- 2022-03-29 CN CN202210317490.2A patent/CN114661402A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103577207A (en) * | 2012-08-01 | 2014-02-12 | 阿里巴巴集团控股有限公司 | Loading method and loading device for interface components in custom interface system |
| US20150205470A1 (en) * | 2012-09-14 | 2015-07-23 | Ca, Inc. | Providing a user interface with configurable interface components |
| US10802660B1 (en) * | 2015-07-29 | 2020-10-13 | Intuit Inc. | Metadata-driven binding of platform-agnostic content to platform-specific user-interface elements |
| US20180101506A1 (en) * | 2016-10-06 | 2018-04-12 | Microsoft Technology Licensing, Llc | User Interface |
Non-Patent Citations (3)
| Title |
|---|
| JQUERY EASYUI: "EasyUI DataGrid onBeforeRender 使用记录_easyui 中 render用法", pages 0001, Retrieved from the Internet <URL:https://blog.csdn.net/FOR_CHINA2012/article/details/42677599> * |
| 刘黎志，吴云韬，牛志梅: "数据库应用开发技术", 31 May 2021, 华中科技大学出版社, pages: 0245 * |
| 我在村口等小芳: "前端渲染插件JRender的使用", pages 0001, Retrieved from the Internet <URL:https://zhuanlan.zhihu.com/p/67063665> * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| 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 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106919509B (en) | Client generation method and device and electronic equipment | |
| CN108614776B (en) | Dynamic construction method and system for cross-language protocol test request | |
| CN107402746B (en) | Method and device for automatically generating code file | |
| CN111343181B (en) | Message processing method and system, data pool and computer readable storage medium | |
| CN112506602B (en) | Page generation method and device, electronic equipment and computer readable medium | |
| CN110941655B (en) | Data format conversion method and device | |
| CN110727429B (en) | Front-end page generation method, device and equipment | |
| CN113656124B (en) | Login page generation method and device | |
| CN112926008B (en) | Method, device, electronic equipment and storage medium for generating form page | |
| CN109582317B (en) | Method and apparatus for debugging hosted applications | |
| CN116028028B (en) | Request function generation method, device, equipment and storage medium | |
| CN114218890A (en) | Page rendering method and device, electronic equipment and storage medium | |
| CN110109983B (en) | Method and device for operating Redis database | |
| CN111125597B (en) | Webpage loading method, browser, electronic equipment and storage medium | |
| CN112130830A (en) | Interface generation method and device and electronic equipment | |
| CN113094138B (en) | Interface display method and device, electronic equipment and storage medium | |
| CN112947900A (en) | Web application development method and device, server and development terminal | |
| CN114661402A (en) | Interface rendering method and device, electronic equipment and computer readable medium | |
| CN113050921A (en) | Webpage conversion method, device, storage medium and computer equipment | |
| CN114090365A (en) | Method, device and equipment for performing function test by using dynamic link library | |
| CN116450238A (en) | Vue interface rendering method and device, storage medium and electronic equipment | |
| CN115809056B (en) | Component multiplexing implementation method and device, terminal equipment and readable storage medium | |
| CN111596905A (en) | Method, device, storage medium and terminal for generating java object | |
| CN116860286A (en) | Page dynamic update method, device, electronic equipment and computer readable medium | |
| CN114637937A (en) | Page display method and device, electronic equipment and computer readable storage 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 |