CN116431139A

CN116431139A - Component assembly model, interface generation method, device, medium and equipment

Info

Publication number: CN116431139A
Application number: CN202310400470.6A
Authority: CN
Inventors: 王世杰
Original assignee: Kangjian Information Technology Shenzhen Co Ltd
Current assignee: Kangjian Information Technology Shenzhen Co Ltd
Priority date: 2023-04-10
Filing date: 2023-04-10
Publication date: 2023-07-14

Abstract

The invention discloses a component assembly model, an interface generation method, a device, a medium and equipment, and relates to the technical field of Internet and digital medical treatment. The assembly model comprises a plurality of nodes, each node corresponds to one assembly, and each node further comprises at least one setting bit of a data setting bit, a slot setting bit and an action setting bit, wherein the data setting bit is used for setting at least one state quantity and a data value of the state quantity; the slot setting bit is used for setting at least one child node of the node; the action setting bit is used to set at least one action and data processing logic of the action. The assembly model can express interface data and interaction logic, realize complex interaction, effectively reduce the complexity of business logic, and can be directly used by most programming languages and software, and can be mutually converted under different frames, thereby effectively reducing the workload of interface development.

Description

Component assembly model, interface generation method, device, medium and equipment

Technical Field

The invention relates to the technical fields of internet and digital medical treatment, in particular to a component assembly model, an interface generation method, a device, a medium and equipment.

Background

At present, front-end responsive interface development frameworks have emerged and developed for many years, which can achieve binding of data and document object models (Document Object Model, DOM), provide componentized tools, and can greatly improve the efficiency of front-end development work.

Currently, in the process of developing a framework using an interface, developers have become accustomed to defining components first, then using component assembly interfaces, and then adding working modes of data and business logic. However, the different frameworks vary from one framework to another. Thus, the component assembly description written by the developer under a certain framework can only be used under the framework, and when the developer wants to replace a framework to complete a similar interface, the description work needs to be repeated.

In the prior art, there are several tools for inter-transferring components or files between different frames. However, if there are N frames, N x (N-1) conversion tools are required, and known conversion tools cannot be fully compatible, which has drawbacks in that it is labor-intensive and complex. Some visual building tools exist in the industry and can be also regarded as a representation model of interface assembly, and a user does not need to care about a frame used at the back, but most of the available interfaces of the tools are simple and limited, static and little interactive, and only can meet simple business requirements.

Disclosure of Invention

In view of this, the present application provides a method, an apparatus, a medium, and a device for generating an assembly model, and aims to solve the technical problem that the front end interface is heavy in workload of repeated description across frames, and the assembly model capable of being across frames cannot realize complex interaction requirements.

According to a first aspect of the present invention, there is provided a component assembly model comprising a plurality of nodes, each of the nodes corresponding to a component, and each of the nodes further comprising at least one of a data setting bit, a slot setting bit, and an action setting bit, wherein,

the data setting bit is used for setting at least one state quantity and a data value of the state quantity;

the slot setting bit is used for setting at least one child node of the node;

the action setting bit is used for setting at least one action and data processing logic of the action.

According to a second aspect of the present invention, there is provided an interface generating method applied to the above-described component mounting model, the method comprising:

generating assembly expression data of a target interface through the assembly model based on an interface structure of the target interface;

Converting the assembly expression data into a view expression corresponding to a target view frame, and setting the view expression in the target view frame to obtain a document object model of a target interface;

and performing interface rendering based on the document object model to obtain a target interface.

According to a third aspect of the present invention, there is provided an interface generating apparatus comprising:

the interface description module is used for generating assembly expression data of the target interface through the assembly model based on the interface structure of the target interface;

the interface assembly module is used for converting the assembly expression data into view expressions corresponding to a target view frame, and setting the view expressions in the target view frame to obtain a document object model of a target interface;

and the interface generation module is used for carrying out interface rendering based on the document object model to obtain a target interface.

According to a fourth aspect of the present invention, there is provided a storage medium having stored thereon a computer program which, when executed by a processor, implements the above-described interface generation method.

According to a fifth aspect of the present invention, there is provided a computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the above interface generation method when executing the program.

According to the assembly model of the assembly, through setting the corresponding assembly in the node and setting at least one of the data setting bit, the slot setting bit and the action setting bit, specific interface functions can be realized through the assembly according to actual design requirements of the interface, the nested structure of the interface is realized through the child nodes, the data source of the interface is realized through the state quantity of the node and the data value of the state quantity, and the data updating logic of the interface is realized through the action of the node and the data processing logic of the action. Compared with the prior art, which only describes the interface structure, but does not describe the description mode of the data source and the data update logic, the assembly model of the assembly can express the interface data and the interaction logic, does not depend on the JS script embedded in the model, can realize complex interaction, and effectively reduces the complexity of business logic. In addition, the interface is easy to analyze and convert, the interface expression mode can be directly used by most programming languages and software, can be used as data to be stored for recycling, and can be converted under different frames, so that the workload of interface development is effectively reduced.

According to the interface generation method, the device, the storage medium and the computer equipment, the assembly expression data of the target interface is generated through the assembly model, the interface data and the interaction logic of the target interface can be directly expressed, complex interaction can be realized without depending on the JS script embedded in the model, and the complexity of business logic is effectively reduced. In addition, the assembly expression data are converted into view expressions corresponding to the target view frames, the view expressions are arranged in the target view frames, a document object model of the target interface is obtained, and further, interface rendering is carried out based on the document object model, so that the target interface is obtained, the assembly expression data of the target interface can be mutually converted under different frames, and therefore the development workload of the interface is effectively reduced.

The foregoing description is only an overview of the technical solutions of the present application, and may be implemented according to the content of the specification in order to make the technical means of the present application more clearly understood, and in order to make the above-mentioned and other objects, features and advantages of the present application more clearly understood, the following detailed description of the present application will be given.

Drawings

The accompanying drawings, which are included to provide a further understanding of the invention and are incorporated in and constitute a part of this application, illustrate embodiments of the invention and together with the description serve to explain the invention and do not constitute a limitation on the invention. In the drawings:

FIG. 1 is a schematic view showing a structure of a component mounting model according to an embodiment of the present invention;

FIG. 2 is a schematic diagram of a counter interface provided by an embodiment of the present invention;

fig. 3 is a schematic flow chart of an interface generating method according to an embodiment of the present invention;

fig. 4 shows a schematic structural diagram of an interface generating device according to an embodiment of the present invention.

Detailed Description

The invention will be described in detail hereinafter with reference to the drawings in conjunction with embodiments. It should be noted that, in the case of no conflict, the embodiments and features in the embodiments may be combined with each other.

At present, most front-end developers are familiar with a componentized development mode, namely, firstly, a component to be used is defined, then an interface is built by using the component according to a mode provided by a framework, further, data is added in the built interface description, business logic is added in a mode of embedding Js scripts, and finally, the framework is used for completing DOM rendering. However, the interface constructed in this way has poor portability, and when the interface needs to be implemented in a plurality of different view frames, the description work of the interface needs to be repeated, which seriously reduces the working efficiency of interface development.

In order to reduce the workload of repeated description of the interface, make the representation of the front-end interface simpler and clearer, and can realize complex interaction requirements, in one embodiment, as shown in fig. 1, a component assembly model is provided, and the component assembly model includes a plurality of nodes. Where each node corresponds to a component, and the component refers to various objects displayed in a window system (such as a browser, etc.), such as buttons (buttons), list boxes (lists), dialog boxes (dialogs), and so on. In addition, each node further comprises at least one setting bit of a data setting bit, a slot setting bit and an action setting bit, wherein the setting bits belong to the same-level relationship, each two setting bits are associated, and can be mutually referred to, called or read. Wherein the data setting bit is used for setting at least one state quantity and a data value of the state quantity, the slot setting bit is used for setting at least one child node of the node, and the action setting bit is used for setting at least one action and data processing logic of the action. In this embodiment, the data set in the data setting bit is used to characterize the internal state of the component corresponding to the node, each action set in the action setting bit may perform an operation on the data set in the data setting bit, each child node set in the slot setting bit may read the data set in the data setting bit, and may also invoke the action set in the action setting bit. It should be noted that, for each node in the component assembly model, one set bit or a plurality of set bits of the data set bit, the slot set bit, and the action set bit may be included, and the set bit in each node may be increased or decreased according to the actual situation.

Specifically, referring to the procedure in the above paragraph, the procedure in the paragraph is a data model corresponding to a node in the component assembly model, where "component" represents a component corresponding to the node, and the component is "container", that is, a container is a relatively special component, which may include other components, whereas if a component is not a container, other components cannot be included therein, and in this embodiment, the component is a rendering implementation of the node, and the correspondence needs to be found in a component library of the view frame. "data" represents a data setting bit in a node, and data values of at least one state quantity and a state quantity can be set in brackets on the data setting bit, and data set in the data setting bit can be used for representing an internal state of a component corresponding to the node. "tips" represents an attribute setting bit in a node, and at least one attribute and an attribute value of the attribute, such as a component size, a component color, a component position, a text corresponding to the component, a picture corresponding to the component, etc., may be set in brackets on the attribute setting bit, and each attribute set in the attribute setting bit may read data set in the data setting bit, and adjust the attribute value of the attribute of the component according to the read data, so as to change the form of the component. In this embodiment, the attribute setting bit does not have to exist in the node, and may be added according to the actual situation of the interface.

Further, "slots" represents a slot setting bit in a node, at least one child node of the node may be set in a middle bracket on the slot setting bit, where the middle bracket includes at least one big bracket, one child node may be set in each big bracket, and the child node may interact with data set in a data setting bit and actions set in an action setting bit of a current node to read data in the current node, or call actions in the current node. It should be noted that, the child node is a node having a subordinate relationship with the current node, and the setting manner is the same as that of the current node, that is, the data model corresponding to each node in the component assembly model is the same. "actions" represents an action setting bit in a node, at least one action and data processing logic of the action can be set in a bracket on the action setting bit, where the action and the data processing logic set in the action setting bit can be used to receive interaction actions of a component and make feedback, i.e. when a user makes interaction actions on the component, the data processing logic of the corresponding action in the node can be triggered, so that data on the data setting bit in the node can be operated to change a data value of a certain state quantity, for example, an action of a certain node is "click", i.e. clicking, and when the user clicks the component corresponding to the node, the data processing logic corresponding to "click" can be executed to implement a certain function.

In this embodiment, the component assembly model may be described using a JSON (JavaScript Object Notation, JS object numbered musical notation) format, and the JSON format expression may be directly used by most programming languages and software, and the assembled JSON expression may also be stored as data for reuse, so as to improve the development efficiency of the interface. In addition, the components in the component assembly model can be realized by any currently commonly used view frames, such as a reaction, a Vue or a Webcomponent frame, and the like, under any frame, when an interface is generated through the component assembly model, the components are only required to be defined according to a mode provided by the frame, and assembly expression data (namely structure data) of the interface is imported into the frame, so that a developer can embed the interface into applications based on various view frames when expressing the interface, and the interface is separated from the frame and the platform.

The following describes a process of assembling expression data by the above-described component assembly model, taking a counter interface as shown in fig. 2 as an example, wherein the assembling expression data (structure data) of the counter interface is as follows:

specifically, referring to the above procedure, the procedure is the assembly expression data (i.e. the structure data) of the counter interface, and as can be seen from the above procedure, the type of the component corresponding to the first node is "container", the state quantity corresponding to the first node is "count", that is, the initial data value of the count is "0", the actions corresponding to the first node are two, namely "inc" and "dec", that is, increasing and decreasing, respectively, the two actions are respectively corresponding to the data processing logic of adding and adding, and the data processing logic of the two actions are both logic for calculating the count. Further, two sub-nodes are set in the slot setting bit of the node, the type of the component corresponding to the first sub-node is screen, namely a display, the attribute of the component is text, namely characters, the attribute value of the attribute is the state quantity count corresponding to the last node, namely the characters initially displayed by the display are the data value 0 of the counter; the type of the component corresponding to the second child node is still a container, two child nodes are also arranged in the slot setting bit of the child node, the types of the components corresponding to the two child nodes are button, the attributes of the two button components are text, the characters displayed on the two buttons are inc and dec, namely increase and decrease, the actions corresponding to the two child nodes are click, namely click, the two actions respectively call the data processing logic of the two actions of the first node, and when a user clicks the inc button, the data processing logic for adding 1 to the count value is executed; when the user clicks the "dec" button, data processing logic is executed that decrements the count value by 1.

Further, referring to fig. 1, after assembly expression data (i.e., structure data) of the counter interface is completed, an assembly machine corresponding to the assembly model may be loaded into an assembly library of any view frame, and the assembly expression data of the counter interface is read by the assembly machine, so that the assembly expression data is converted into a view expression of the counter interface, where a result of the view expression depends on a view frame selected by the assembly library, for example, the selected view frame is a compact frame, a result of the conversion is a description of the assembly by the compact frame, then the converted view expression may be set in the corresponding view frame, and rendering to the DOM, i.e., a document object model of the counter interface is completed, and finally, interface rendering is performed based on the document object model of the counter interface, so as to obtain the counter interface. It will be appreciated that the actions performed by the assembly machine may also be performed manually. In the digital medical technology field in particular, the component assembly model can be used for generating assembly expression data of various interfaces in application programs related to the medical field, wherein the interfaces in the application programs related to the medical field can comprise a registration interface, a business payment interface, a report viewing interface, a medical record printing interface and the like of a hospital.

According to the component assembly model provided by the embodiment, through setting the corresponding components in the nodes and setting at least one setting bit of the data setting bit, the slot setting bit and the action setting bit, specific interface functions can be realized through the components according to actual design requirements of the interfaces, the nested structure of the interfaces is realized through the child nodes, the data sources of the interfaces are realized through the state quantity of the nodes and the data value of the state quantity, and the data update logic of the interfaces is realized through the actions of the nodes and the data processing logic of the actions. Compared with the prior art, which only describes the interface structure, but does not describe the description mode of the data source and the data update logic, the assembly model of the assembly can express the interface data and the interaction logic, does not depend on the JS script embedded in the model, can realize complex interaction, and effectively reduces the complexity of business logic. In addition, the interface is easy to analyze and convert, the interface expression mode can be directly used by most programming languages and software, can be used as data to be stored for recycling, and can be converted under different frames, so that the workload of interface development is effectively reduced.

In one embodiment, the node in the component assembly model may further include an attribute setting bit, where the attribute setting bit may be associated with a data setting bit in the node, where the attribute setting bit may set at least one attribute of a component corresponding to the node, each attribute corresponds to an attribute value, and the attribute value may be read in a data setting bit corresponding to a current node, may be read in a data setting bit corresponding to a parent node of the current node, or may be directly set. By setting the attribute in the attribute setting bit and reading or setting the attribute value of the attribute, the attribute value of the attribute of the component can be adjusted to change the form of the component. In this embodiment, the attribute set in the attribute setting bit may include at least one of a component size, a component color, a component position, a text corresponding to the component, and a picture corresponding to the component, or may include other types of attributes, and the types and the number of the attributes may be increased or decreased according to actual situations, which is not specifically limited in this embodiment.

In one embodiment, a lifecycle setting bit associated with the data setting bit may be further included in a node in the component assembly model, the lifecycle setting bit may be associated with the data setting bit in the node, wherein the lifecycle setting bit may set at least one lifecycle stage and data processing logic for the lifecycle stage. In this embodiment, the lifecycle stages may include at least one stage of a creation stage, a mounting stage, an update stage, and an unloading stage, and for each lifecycle stage, definitions such as create, didMount, update, unMount may be added, and data processing logic of each lifecycle stage is set in a lifecycle setting bit according to these definitions, where the data processing logic of each lifecycle stage may be implemented by a function, and a function set on the lifecycle setting bit may read data in a data setting bit corresponding to a current node, or may read data in a data setting bit corresponding to a parent node of the current node. For example, for the example of counter interface above, if one wants to have the counter self-increment by 1 per second, this can be accomplished by adding the following timer logic at the life cycle didMount stage.

“lifetimes”：

{

“didMount”：“setInterval((s)＝>setState({count:s.count+1})，1000)”

}

In this embodiment, the life cycle setting bits and the data setting bits, the slot setting bits, the action setting bits and the attribute setting bits all belong to the peer relationship, and in these setting bits, each two setting bits have a relationship, and can be referred to, called or read from each other, and the life cycle setting bits can be set in any node in the component assembly model according to the actual condition of the interface. According to the embodiment, the life cycle setting bit is arranged in the component assembly model, so that the business logic can be customized and set in each stage of the life cycle of the interface, complex interaction of each life cycle stage is realized, and the complexity of the business logic is further reduced. In addition, it should be noted that other setting bits may be added to the component assembly model according to actual requirements, and the embodiment is not limited herein specifically.

In one embodiment, the components corresponding to each node may be pre-packaged in a component library corresponding to the view frame, wherein the component library is packaged with a plurality of types of components and description files of each type of components, definitions on attributes, slots and actions may be recorded in the description files, and types of components may include at least one of a container, text, a button, a picture, a list box, a dialog box and a display. In this embodiment, all components required for setting up the interface may be implemented in a component library, where relevant descriptions about properties, slots, and actions are required, so that these items may be set as needed when expressing the node. Further, the components in the component library can be implemented by any view frame, such as a act, vue or Web component frame, and after the view frame is determined, the components can be defined according to the manner provided by the frame. It should be noted that, each view frame has its own component specification, and defining a component according to the manner provided by the frame refers to describing the component by code according to the component specification of the view frame.

In the above embodiment, all components required by the target interface (interface to be generated) may be packaged into a component library, then the target interface is described according to the component assembly model, so as to obtain assembly expression data of the target interface, further an assembly machine is implemented, and finally the component library and the assembly expression data are read by the assembly machine, so as to output the page DOM. It will be appreciated that if the assembler and component library are prepared in advance, then only two tasks of describing the interface according to the component assembly model and calling the assembler to complete DOM output are left to be done by the developer, in this way, the workload of the developer, particularly the repetitive workload of transplanting the interface into other view frames, can be greatly reduced. In this embodiment, when the interface is transplanted to another view frame for implementation, only the description mode of each component in the component library needs to be modified according to the new view frame, and the assembly expression data of the interface does not need to be modified. In addition, a plurality of view frames can be accessed to realize the component library at the beginning of interface development, so that a developer can realize the generation of the interface without considering view frames which can be used in the future when expressing the interface, and the assembly expression data of the interface can be directly embedded into applications based on various view frames.

In one embodiment, the assembly model of the assembly further comprises an assembly machine, wherein the assembly machine can be used for reading the state quantity, the child node, the action and the attribute of the assembly corresponding to each node in the assembly model of the assembly and each node, and generating a document object model of the interface according to the state quantity, the child node, the action and the attribute of the assembly corresponding to the node, namely generating the DOM. In this embodiment, after the assembly machine loads the component library, the assembly expression data of the interface can be read, then the assembly machine can convert the assembly expression data of the interface into the view expression of the interface, wherein the view expression depends on the view frame selected by the component library, and finally, the view expression can be set in the view frame to complete rendering to the DOM.

In the above embodiment, the method to be executed by the assembly machine is essentially to replace a developer to complete the assembly work of the assembly to be manually completed in the past, that is, the assembly machine needs to assemble the expression data corresponding to each node in sequence according to the subordinate relation of each node in the assembly expression data of the interface and the expression definition of each component in the component library until all the nodes in the assembly expression data of the interface are assembled, so as to obtain the view expression corresponding to the view frame. Wherein, the realization assembly machine needs to use a recursive function, and the recursive function needs to execute the following steps: firstly, creating a data model for a current node according to the state quantity of the current node and the data value of the state quantity, binding the data model with children nodes, actions and attributes of the current node, analyzing all the children nodes of the current node, setting analysis results of all the children nodes in components corresponding to the current node, further establishing a context execution environment for the actions of the node, transmitting the context execution environment into the components corresponding to the current node and the children nodes of the current node, setting attributes for the components corresponding to the current node according to the attributes and attribute values of the attributes of the current node, finally, returning view expression of the current node, calling the capability provided by the view, converting the view expression into a Document Object Model (DOM) of an interface, and generating a componentized front-end interface by mounting the document object model on a page.

In one embodiment, as shown in fig. 1, an interface generating method is provided, and the method is applied to a computer device such as a server or a client, and the method includes the following steps:

101. and generating assembly expression data of the target interface through the assembly model based on the interface structure of the target interface.

102. And converting the assembly expression data into a view expression corresponding to the target view frame, and setting the view expression in the target view frame to obtain a document object model of the target interface.

103. And performing interface rendering based on the document object model to obtain a target interface.

Specifically, the assembly expression data (i.e., structure data) of the target interface may be generated by using the assembly model based on the interface structure of the target interface, where the assembly expression data of the target interface includes interface data and data processing logic, and a process of generating the assembly expression data of the target interface by using the assembly model may refer to a related description about the counter interface building process in the embodiment of the assembly model, which is not described herein again. Further, after the assembly expression data of the target interface is completed, the assembly expression data of the target interface may be converted into a view expression of the target interface, where a result of the view expression depends on a view frame corresponding to a component in the assembly expression data, for example, the view frame corresponding to the component is a compact frame, a result of the conversion is a description of the component by the compact frame, then the converted view expression may be set in the corresponding view frame (i.e., set in the target view frame), so as to complete rendering to a DOM, i.e., a document object model of the target interface, and finally, interface rendering is performed based on the document object model of the target interface, so as to obtain the target interface. In the digital medical technical scene, the target interface can be various interfaces in application programs related to the medical field, such as a registration interface, a business payment interface, a report viewing interface, a medical record printing interface and the like of a hospital. In this embodiment, the assembly process may be performed by an assembly machine, or may be performed manually, and in addition, with respect to the description of the assembly model and the assembly expression data, reference may be made to the corresponding description in the assembly model described in the foregoing embodiments, which is not repeated herein.

In this embodiment, the component assembly model may be described using a JSON format, and the JSON format expression may be directly used by most programming languages and software, and JSON assembly expression data of the target interface may also be stored as data for reuse, so as to improve the development efficiency of the interface. In addition, the components in the component assembly model can be realized by using any currently commonly used view frames, such as a reaction, a Vue or a Webcomponent frame, and the like, under any frame, when an interface is generated through the component assembly model, the components are only required to be defined according to a mode provided by the frame, and assembly expression data of the interface is imported into the frame, so that a developer can embed the interface into applications based on various view frames when expressing the interface, and the interface is separated from the frame and the platform.

According to the interface generation method provided by the embodiment, the assembly expression data of the target interface is generated through the assembly model, the interface data and interaction logic of the target interface can be directly expressed, complex interaction can be realized without depending on the JS script embedded in the model, and the complexity of business logic is effectively reduced. In addition, the assembly expression data are converted into view expressions corresponding to the target view frames, the view expressions are arranged in the target view frames, the document object model of the target interface is obtained, and further, the interface rendering is carried out based on the document object model, so that the target interface is obtained, the assembly expression data of the target interface can be mutually converted under different frames, and therefore the development workload of the interface is effectively reduced.

In one embodiment, the process of assembling the interface in step 102 may be implemented by an assembling machine, where the assembling machine may read a component corresponding to each node in the assembly expression data of the target interface and a state quantity, a child node, an action, and an attribute of each node, and generate a document object model of the interface according to the component corresponding to each node and the state quantity, the child node, the action, and the attribute of the node, and the specific process is as follows: firstly, loading an assembly machine into a component library corresponding to a target view frame, and reading assembly expression data through the assembly machine, wherein a plurality of types of components are packaged in the component library, then, according to the subordinate relation of each node in the assembly expression data, assembling the expression data corresponding to each node in sequence according to the expression definition of each component in the component library, and finally, when all the nodes are assembled, obtaining the view expression corresponding to the target view frame. The assembly of the interface is realized through the assembly machine, so that the efficiency of the interface assembly can be effectively improved, and the workload required by manually assembling the interface is saved.

In one embodiment, the implementation of the assembler needs to use a recursive function, and the recursive function needs to assemble the expression data corresponding to each node in turn according to the subordinate relation of each node in the assembly expression data and the expression definition of each component in the component library. Referring to the structure of the component mounting model of fig. 1, in the present embodiment, the process of mounting the nodes by the mounting machine is as follows: firstly, a data model is created for the node according to the state quantity of the node and the data value of the state quantity, the data model is bound with the child nodes, actions and attributes of the node, then each child node of the node is analyzed, analysis results of each child node are set in a component corresponding to the node, further, a context execution environment is built for the actions of the node, the context execution environment is transferred into the component corresponding to the node and the child nodes of the node, and finally, the attributes are set for the component corresponding to the node according to the attributes and attribute values of the node. By the method, the components, state quantity, actions and attributes of all nodes in the assembly expression data can be integrated, so that the business interaction flow of all the nodes is realized, and the interaction function of the whole interface is realized.

It should be noted that, other corresponding descriptions of each functional unit related to the interface generating method provided in this embodiment may refer to corresponding descriptions in the component assembly model described in each embodiment, which are not described herein again.

Further, as a specific implementation of the method described in the foregoing embodiments, the present embodiment provides an interface generating device, as shown in fig. 4, where the device includes: an interface description module 21, an interface assembly module 22, and an interface generation module 23, wherein,

an interface description module 21, configured to generate assembly expression data of a target interface through the assembly model based on an interface structure of the target interface;

the interface assembling module 22 is configured to convert the assembling expression data into a view expression corresponding to a target view frame, and set the view expression in the target view frame to obtain a document object model of a target interface;

the interface generating module 23 may be configured to perform interface rendering based on the document object model to obtain a target interface.

In a specific application scenario, the interface assembly module 22 is specifically configured to load an assembly machine into a component library corresponding to a target view frame, and read the assembly expression data through the assembly machine, where multiple types of components are packaged in the component library; according to the subordinate relation of each node in the assembly expression data, according to the expression definition of each component in the component library, assembling the expression data corresponding to each node in sequence; and when all the nodes are assembled, obtaining a view expression corresponding to the target view frame.

In a specific application scenario, the interface assembly module 22 is specifically configured to create a data model for the node according to the state quantity of the node and the data value of the state quantity, and bind the data model with the child nodes, actions and attributes of the node; analyzing each sub-node of the node, and setting the analysis result of each sub-node in a component corresponding to the node; establishing a context execution environment for the action of the node, and transmitting the context execution environment into a component corresponding to the node and a child node of the node; and setting the attribute for the component corresponding to the node according to the attribute of the node and the attribute value of the attribute.

In a specific application scenario, the component assembly model includes a plurality of nodes, wherein each node corresponds to one component, and each node further includes at least one setting bit of a data setting bit, a slot setting bit and an action setting bit, where the data setting bit is used to set at least one state quantity and a data value of the state quantity; the slot setting bit is used for setting at least one child node of the node; the action setting bit is used for setting at least one action and data processing logic of the action.

In a specific application scenario, the node in the component assembly model further includes an attribute setting bit, where the attribute setting bit is used to set at least one attribute and an attribute value of the attribute, and the attribute includes at least one of a component size, a component color, a component position, a text corresponding to the component, and a picture corresponding to the component.

In a specific application scenario, the node in the component assembly model further comprises a lifecycle setting bit, wherein the lifecycle setting bit is used for setting at least one lifecycle stage and data processing logic of the lifecycle stage, and the lifecycle stage comprises at least one of a creation stage, a mounting stage, an updating stage, and an unloading stage.

In a specific application scenario, the components corresponding to each node in the component assembly model are pre-packaged in a component library corresponding to the view frame, wherein the component library is packaged with multiple types of components and description files of each type of components, and the types of the components comprise at least one of a container, a text, a button, a picture, a list box, a dialog box and a display.

In a specific application scenario, the assembly model further comprises an assembly machine, wherein the assembly machine is used for reading the assembly corresponding to each node in the assembly model and the state quantity, the sub-node, the action and the attribute of each node, and generating the document object model of the interface according to the assembly, the state quantity, the sub-node, the action and the attribute.

It should be noted that, for other corresponding descriptions of each functional unit related to the interface generating apparatus provided in this embodiment, reference may be made to corresponding descriptions in the interface generating method and the component assembly model described in the foregoing embodiments, which are not described herein again.

Based on the interface generating method according to the above embodiments, correspondingly, the present embodiment further provides a storage medium, on which a computer program is stored, which when executed by a processor, implements the interface generating method according to the above embodiments.

Based on such understanding, the technical solution of the present application may be embodied in the form of a software product, where the software product to be identified may be stored in a non-volatile storage medium (may be a CD-ROM, a U-disc, a mobile hard disk, etc.), and include several instructions for causing a computer device (may be a personal computer, a server, or a network device, etc.) to execute the method described in each implementation scenario of the present application.

Based on the method shown in fig. 3 and the embodiment of the interface generating apparatus shown in fig. 4, in order to achieve the above object, this embodiment further provides a computer device for generating an interface, which may specifically be a personal computer, a server, a smart phone, a tablet computer, a smart watch, or other network devices, where the computer device includes a storage medium and a processor; a storage medium storing a computer program and an operating system; and a processor for executing a computer program to implement the interface generation method described in the above embodiments.

Optionally, the computer device may further include an internal memory, a communication interface, a network interface, a camera, a Radio Frequency (RF) circuit, a sensor, an audio circuit, a WI-FI module, a Display screen (Display), an input device such as a Keyboard (Keyboard), and the like, and optionally, the communication interface may further include a USB interface, a card reader interface, and the like. The network interface may optionally include a standard wired interface, a wireless interface (e.g., WI-FI interface), etc.

It will be appreciated by those skilled in the art that the computer device structure provided by the present embodiment for identification of an operational action is not limiting of the computer device and may include more or fewer components, or may combine certain components, or a different arrangement of components.

The storage medium may also include an operating system, a network communication module. The operating system is a program for managing the hardware of the computer device and the software resources to be identified, and supports the operation of the information processing program and other software and/or programs to be identified. The network communication module is used for realizing communication among all components in the storage medium and communication with other hardware and software in the information processing computer equipment.

From the above description of the embodiments, it will be apparent to those skilled in the art that the present application may be implemented by means of software plus necessary general hardware platforms, or may be implemented by hardware. By setting corresponding components in the nodes and setting at least one of data setting bits, slot setting bits and action setting bits, specific interface functions can be realized through the components according to actual design requirements of the interfaces, nested structures of the interfaces are realized through the child nodes, data sources of the interfaces are realized through state quantity of the nodes and data values of the state quantity, and data update logic of the interfaces is realized through actions of the nodes and data processing logic of the actions. Compared with the prior art, the assembly model of the assembly can express interface data and interaction logic, complex interaction can be realized without relying on JS scripts embedded in the model, and the complexity of business logic is effectively reduced. In addition, the interface is easy to analyze and convert, the interface expression mode can be directly used by most programming languages and software, can be used as data to be stored for recycling, and can be converted under different frames, so that the workload of interface development is effectively reduced.

Those skilled in the art will appreciate that the drawings are merely schematic illustrations of one preferred implementation scenario, and that the modules or flows in the drawings are not necessarily required to practice the present application. Those skilled in the art will appreciate that modules in an apparatus in an implementation scenario may be distributed in an apparatus in an implementation scenario according to an implementation scenario description, or that corresponding changes may be located in one or more apparatuses different from the implementation scenario. The modules of the implementation scenario may be combined into one module, or may be further split into a plurality of sub-modules.

The foregoing application serial numbers are merely for description, and do not represent advantages or disadvantages of the implementation scenario. The foregoing disclosure is merely a few specific implementations of the present application, but the present application is not limited thereto and any variations that can be considered by a person skilled in the art shall fall within the protection scope of the present application.

Claims

1. A component assembly model is characterized in that the component assembly model comprises a plurality of nodes, wherein each node corresponds to one component, and each node further comprises at least one setting bit of a data setting bit, a slot setting bit and an action setting bit, wherein,

The slot setting bit is used for setting at least one child node of the node;

2. The component assembly model of claim 1, wherein the node further comprises an attribute setting bit and/or a lifecycle setting bit, wherein the attribute setting bit is used to set at least one attribute and an attribute value of the attribute, the attribute comprising at least one of a component size, a component color, a component location, a text to component correspondence, a picture to component correspondence; the lifecycle set bit is for setting at least one lifecycle stage and data processing logic for the lifecycle stage, the lifecycle stage including at least one of a creation stage, a mount stage, an update stage, and an offload stage.

3. The component assembly model of claim 1 or 2, wherein the components corresponding to each node are pre-packaged in a component library corresponding to a view frame, wherein the component library has packaged therein a plurality of types of components and description files of each type of component, the types of components including at least one of a container, text, a button, a picture, a list box, a dialog box, and a display.

4. The component assembly model according to claim 1 or 2, further comprising an assembly machine, wherein the assembly machine is configured to read a component corresponding to each of the nodes in the component assembly model and a state quantity, a child node, an action, and an attribute of each of the nodes, and generate a document object model of an interface according to the component, the state quantity, the child node, the action, and the attribute.

5. An interface generating method, wherein the method is applied to the component mounting model according to any one of claims 1 to 4, the method comprising:

6. The interface generation method according to claim 5, wherein the converting the assembly representation data into a view representation corresponding to a target view frame includes:

Loading an assembly machine into a component library corresponding to a target view frame, and reading the assembly expression data through the assembly machine, wherein a plurality of types of components are packaged in the component library;

according to the subordinate relation of each node in the assembly expression data, according to the expression definition of each component in the component library, assembling the expression data corresponding to each node in sequence;

and when all the nodes are assembled, obtaining a view expression corresponding to the target view frame.

7. The interface generation method according to claim 6, wherein assembling the expression data corresponding to the node includes:

creating a data model for the node according to the state quantity of the node and the data value of the state quantity, and binding the data model with child nodes, actions and attributes of the node;

analyzing each sub-node of the node, and setting the analysis result of each sub-node in a component corresponding to the node;

establishing a context execution environment for the action of the node, and transmitting the context execution environment into a component corresponding to the node and a child node of the node;

And setting the attribute for the component corresponding to the node according to the attribute of the node and the attribute value of the attribute.

8. An interface generating device, the device comprising:

9. A storage medium having stored thereon a computer program, which when executed by a processor, implements the steps of the method of any of claims 5 to 7.

10. A computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that the computer program when executed by the processor implements the steps of the method according to any of claims 5 to 7.