CN109240690B

CN109240690B - Interface generation method and device for data form

Info

Publication number: CN109240690B
Application number: CN201810929435.2A
Authority: CN
Inventors: 郁盛杰
Original assignee: Advanced New Technologies Co Ltd
Current assignee: Advanced New Technologies Co Ltd; Advantageous New Technologies Co Ltd
Priority date: 2018-08-15
Filing date: 2018-08-15
Publication date: 2021-06-18
Anticipated expiration: 2038-08-15
Also published as: CN109240690A

Abstract

The embodiment of the specification provides an interface generation method and device for a data form, wherein the method is realized by executing a task of the data form; the task includes: a View layer task and a Model layer task; the method comprises the following steps: executing the View layer task and the Model layer task respectively comprises the following processing: executing a task component in the task, wherein the task component inherits a task common component which is a component shared by a plurality of tasks; when the task common component is executed, executing a basic component inherited by the task common component; executing at least one basic operation function comprised by the basic component; and after the execution of the View layer task and the Model layer task is finished, generating a data form corresponding to the task.

Description

Interface generation method and device for data form

Technical Field

The present disclosure relates to the field of computer technologies, and in particular, to an interface generation method and apparatus for a data form.

Background

An application program can comprise a front end and a background, the development of the front end field can be carried out on a data research and development platform, the platform can comprise a plurality of tasks, and each task corresponds to the data operation related to the front end. Tasks are operations that wrap a stage of data processing in data development, for example, an import task is an operation of data import and a calculation task is an operation of data calculation processing. Moreover, new tasks can be added on the data research and development platform through task development.

By executing the developed task, a data form corresponding to the task can be output. An information entry interface may be included in the dataform, which may include a variety of interface elements, such as a text entry box, a drop-down selection box, and the like. For the task development of each data form, componentization development is generally carried out, and the presentation of the whole form is realized by developing each component of the form.

Disclosure of Invention

In view of this, one or more embodiments of the present disclosure provide a method and an apparatus for generating an interface of a data form, so as to improve extensibility and maintainability of form development.

Specifically, one or more embodiments of the present disclosure are implemented by the following technical solutions:

in a first aspect, a method for generating an interface of a data form is provided, where the method is implemented by executing a task of the data form; the task includes: a View layer task and a Model layer task; the method comprises the following steps:

the execution of the View layer task and the Model layer task respectively comprises the following processing steps:

executing a task component in the task, wherein the task component inherits a task common component which is a component shared by a plurality of tasks;

when the task common component is executed, executing a basic component inherited by the task common component;

executing at least one basic operation function comprised by the basic component;

after the execution of the View layer task and the Model layer task is finished, generating a data form corresponding to the task; and the base component in the View layer task corresponds to the base component in the Model layer task, the task common component in the View layer task corresponds to the task common component in the Model layer task, and the task component in the View layer task corresponds to the task component in the Model layer task.

In a second aspect, a system for generating an interface of a data form is provided, wherein the system corresponds to a task of the data form; the tasks include: a View layer task and a Model layer task; the View layer task and the Model layer task respectively comprise the following components:

a base component comprising at least one base operation function;

a task common component that inherits the base component, and that is a component common to a plurality of tasks;

a task component that inherits the task common component;

and the base component in the View layer task corresponds to the base component in the Model layer task, the task common component in the View layer task corresponds to the task common component in the Model layer task, and the task component in the View layer task corresponds to the task component in the Model layer task.

In a third aspect, an interface generating device for a dataform is provided, the device comprising a memory, a processor, and computer instructions stored on the memory and executable on the processor, the processor implementing the following steps when executing the instructions: executing the task of the dataform; the tasks include: a View layer task and a Model layer task; the execution of the View layer task and the Model layer task respectively comprises the following processing steps:

In the method and the device for generating the interface of the data form according to one or more embodiments of the present specification, a class inheritance system is designed in the field of front-end development by applying an object-oriented design idea, and in the front-end development level, both the View layer and the Model layer adopt one-to-one corresponding inheritance structures, which is very unique, and thus, the flexibility, the expansibility and the maintainability of front-end task development are significantly improved.

Drawings

In order to more clearly illustrate one or more embodiments or technical solutions in the prior art in the present specification, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments described in one or more embodiments of the present specification, and other drawings can be obtained by those skilled in the art without inventive exercise.

FIG. 1 is a schematic diagram of a data development platform provided in one or more embodiments of the present disclosure;

FIG. 2 is a front end framework system for task development provided by one or more embodiments of the present disclosure;

fig. 3 is a flowchart of a form generation method provided in one or more embodiments of the present specification.

Detailed Description

In order to make those skilled in the art better understand the technical solutions in one or more embodiments of the present disclosure, the technical solutions in one or more embodiments of the present disclosure will be clearly and completely described below with reference to the drawings in one or more embodiments of the present disclosure, and it is obvious that the described embodiments are only a part of the embodiments of the present disclosure, and not all embodiments. All other embodiments that can be derived by one of ordinary skill in the art from one or more embodiments of the disclosure without making any creative effort shall fall within the scope of protection of the disclosure.

The method provided by at least one embodiment of the present specification may be applicable to development of middle and background software of an enterprise, and development of front end of software, that is, a presentation interface of software, may be included in development of the middle and background software of the enterprise. The middle background software may include: finance, manpower, internal project management and other internal company software. And the front-end presentation interface of the software can be a data form, and the form interface can be developed and the operation of a user on the form can be processed by the method of at least one embodiment of the specification.

FIG. 1 illustrates a data development platform 11 for front-end development, which, as shown in FIG. 1, may include a variety of tasks, i.e., operations that wrap a stage of data processing in data development. For example, the import task corresponds to a data import operation, and the calculation task corresponds to a data calculation processing operation. Tasks on the platform include, but are not limited to, for example, Computing tasks (Computing tasks), Virtual tasks (Virtual tasks), Import tasks (Import tasks), Export tasks (Export tasks), function tasks, and the like.

Each task may output a data form, an interface of the form may be presented to a user, and the user may input information in the interface of the form and perform an operation in the form, for example, input text in a text box or select an option in a selection box. Each task has its own corresponding form interface element, form operation or state management, and different tasks may have different form interface elements or operations, etc. The interface elements of the form may include, but are not limited to, a text input box, a drop-down selection box, a radio box, etc., or may be a combination of several input boxes, determined according to the business meaning. In the following description of the embodiments, one component may correspond to one interface element and be reusable.

As described above, since different tasks may include the same or different interface elements, i.e., different components, if each task is to independently develop its own interface component, a large amount of code may be repeatedly written, which is not efficient and flexible, and the code needs to be rewritten each time a new task is developed, which is not good enough in expandability.

Based on this, the form interface generation method provided in at least one embodiment of the present specification provides a front-end development framework system of a data form, and the system can enable development of tasks to have better extensibility and maintainability when the tasks at the front end are developed.

The language for task development may use, for example, TypeScript, which is an object-oriented programming language developed and maintained by Microsoft, and is a superset of JavaScript, and contains all elements of JavaScript, and may be loaded with JavaScript code to run and extend the syntax of JavaScript. The JavaScript is a lightweight interpreted scripting language, can be embedded into an HTML page and executed at a browser end, can realize rich interactive functions of the browser end, and brings smooth and various user experiences for users.

Referring to fig. 2, fig. 2 illustrates a front-end framework system for task development in the method, which corresponds to the data development platform 11 in fig. 1. Namely, the data development platform 11 may include: view layer frame (Task View frame), and Model layer frame (Task Model frame).

The View layer framework can be used for developing a View layer of a task, and the Model layer framework can be used for developing a Model layer of a task. Specifically, in the front-end development code, task development may include developing a View layer and a Model layer of a task. These two layers are each responsible for different aspects of the dataform. The View layer is a View layer and can be responsible for page rendering of the form, and the View layer can comprise read components one by one. The Model layer is a data layer and can encapsulate operations such as query and save of the form and state management, for example, the form is loading, submitting, and the like.

The View layer of a task, i.e., the portion of the task that is in the View layer, may be referred to as a View layer task. The Model layer of a task, i.e., the portion of the task that is located in the Model layer, may be referred to as a Model layer task. Examples are as follows: referring to fig. 2, fig. 2 may include a plurality of tasks, and for example, the Computing Task is:

task < ITask Props > + CommonTask < ICommon TaskProps > + computing Task < IProps >, which may be a View layer Task included in the computing Task. Of course, there may be an inheritance (extensions) relationship between the above parts, which will be described in detail later.

Similarly, the TaskModel + CommonTaskModel + computingTaskModel, which may be a Model-level task included in the computing task. The View layer task and the Model layer task jointly form a task, the View layer task can be responsible for page rendering of the form, and the Model layer task can be responsible for management operation and state.

In addition, with continued reference to FIG. 2, both the View level framework and the Model level framework may be implemented in a hierarchical design, e.g., a three-level inheritance hierarchy may be used. The principle of the inheritance system is to collect some common component abstractions for each task to inherit (extensions). An existing class is inherited by extensions, the inherited class is called a parent class, and the new class is called a child class. For example, ComputingTask < IProps > of the View layer inherits CommonTask < ICommontatTaskProps >.

The three-layer inheritance system adopted in the framework is described as follows by taking View as an example in combination with fig. 2:

a first layer: a base component;

for example, in the View layer, the base component may be Task < ITask Props > in FIG. 2, located in a Task View Framework. In the Model layer, the base component may be a Task Model in FIG. 2, located in a Task Model Framework.

At least one basic operation function can be included in the basic component, for example, the Task < itaskpops > includes the basic operation functions of onPreSubmit (), renderForm (), and the like. The basic operation functions can be operations and event processing of a common base in a View layer or a Model layer, for example, the View layer can be operations of loading a basic form, requesting/rendering data, processing form submission and the like, and the Model layer can be operations of managing common interface states (loading, submitting).

In addition, the basic component may be the most general and basic operation and event processing of various tasks, for example, in fig. 2, according to the inheritance (extensions) relationship illustrated in fig. 2, development implementations of Computing Task, Virtual Task, Import Task, and Export Task are all used for the basic component. Of course, there may be more tasks in the data development platform, and the tasks are not limited to the tasks shown in fig. 2, and other tasks may use the basic component or other basic components.

A second layer: a task common component;

with continued reference to FIG. 2, for example, in the View layer, the Task Common components may be Common Task < ICommon Task Props > and Sync Task < ISync Task Props >; in the Model layer, the Task Common components may be Common Task models and Sync Task models.

Wherein the Task Common component is a component Common to multiple tasks, for example, Common Task < ICommon Task pross > can be Common to a computing Task and a virtual Task, and both tasks use the component; and Sync Task < ISync Task Props > may be a component common to both import and export tasks.

In addition, the task common component can also inherit the underlying component of the first layer. For example, the Common Task component Common of the View layer (Common Task tasks < ICommon Task Props >) may inherit the base component Task < ITask Props > of the first layer; also, the Task common component may also include its own independent function, e.g., render Task Name () in FIG. 2, i.e., when a component of a second layer "inherits" a component of a first layer, the component of the second layer will be able to include the component of the first layer and add its own independent content.

When the task common component inherits the basic component, the task common component can be more flexible: for example, the base component as a parent class may be implemented using an AOP (Aspect organized Programming) mode, and the task common component may rewrite some hook functions included in the base component, for example, hook functions before and after interface loading may be included in the base component, and when developing the task common component, the function extension may be implemented by rewriting these hooks, and at the same time, the "loaded" common functions in the base component may be multiplexed. The method has the advantages that the reusability and flexibility are considered in task development, and not only can general basic operations be reused, but also specific operation functions of certain tasks can be realized.

And a third layer: a task component;

the third layer is a specific task layer, and can distinguish various tasks, such as a calculation task, a virtual task, an introduction task, and the like. For example, in the View layer, Computing Task < IProps >, can be referred to as a Task component. Virtual Task < IProps > is another Task component. In the Model layer, Task components may be Computing Task models and Virtual Task models.

Wherein the Task component may inherit the Task Common component in the second layer, e.g., Computing Task < IProps > inherits Common Task < ICommon Task Props >. The task component can embody the characteristics of the task and can add independent content on the basis of inheriting the task common component. For example, the task component Import TaskModel of the Model layer can be added with the independent content eStplitColumnTemplate () on the basis of inheriting the SyncTaskModel.

The Model layer is also a similar three-layer inheritance system as described above and will not be described in detail.

For the three-layer inheritance system, the View layer and the Model layer are in one-to-one correspondence in the three layers. The base component in the View layer task corresponds to the base component in the Model layer task, the task common component in the View layer task corresponds to the task common component in the Model layer task, and the task component in the View layer task corresponds to the task component in the Model layer task.

Referring to fig. 2, the "correspondence" is explained as follows:

"correspond" means that the class of View frame and Model frame are corresponding, for example, CommonTask exists in View and CommonTask exists in Model. For example, to add a new Task, a XXXTask is added to the view layer, and a XXXTask model is added to the model layer, both inheriting a Task of the second layer.

As another example, a Computing Task may include: the Computing Task < IProps > of the View layer and the Computing Task Model of the Model layer, i.e., each specific Task may include a View layer and a Model layer. Thus, the Computing Task < IProps > corresponds to the Computing Task Model, which may be "corresponding to the same Task" and "corresponding to the same interface function of the same Task". As another example, SyncTask < ISyncTaskProps > in the View layer corresponds to a SyncTaskModel in the Model layer, where SyncTask < ISyncTaskProps > is used in connection with the rendering and rendering of the interface of the form, and SyncTaskModel is the interface state and operational management associated with the interface presented by SyncTask < ISyncTaskProps >.

With continued reference to fig. 2, in addition to the component structure of the three-layer inheritance system, the development of the task may also set a configuration item, and make a specific component rendering logic of various situations of a certain task into the configuration item, where the component rendering logic may be used to define a dynamic execution logic between multiple components included in the View layer task and the Model layer task. For example, the interface of the data form is dynamic, for example, when one box is selected in the interface, another box becomes a radio box or disappears, and the setting as the configuration item means that the logics can be described in a plain text (JSON) manner, and the interface can be displayed and the user operation can be processed according to the configuration.

"Use" in FIG. 2 represents the type of interface used by a class, where interface is the type in TypeScript, for example, at the Model level, a TaskModel class can Use the type of ITaskStore. The TypeScript Interface may be used to establish some code convention such that other developers must follow the code convention defined by the Interface when calling a method or creating a new class.

The technical implementation manner for realizing 'inheritance' in the three-layer inheritance system is described as follows:

in the View layer, in a TypeScript development mode, the attributes (tips) of the read component of the View layer can be defined by a generic type, wherein the generic type is a generalized type rather than a specific type, and the specific type is transmitted when a program runs. Examples are as follows: interface IProps { < br/> } { < br/> interface ISTATE { < br/> } export class Task extensions read. PureComponent < IProps, ISTATE > { < br/> }. Inheritance for each layer of components includes inheritance for properties, which can be inherited by the Props of the parent child.

In the Model layer, the components of the Model layer are objects, and the mixed-in inheritance of the objects can be adopted. For example, the Task Model is an object.

The above describes the three-tier inheritance hierarchy of the task framework in FIG. 2, and the following explains how new tasks can be added to the data development platform in accordance with the above-described hierarchy.

When developing a new task:

when a new task is added on the data development platform, the development is still carried out according to the inheritance system of FIG. 2.

For example, if the interface element of the dataform corresponding to the new task is similar to the currently existing framework, for example, the basic component and the task common component in the existing framework need to be used, then a new task, including the View layer and the Model layer, may be added to the third layer of fig. 2, still following the existing basic component and task common component, to inherit the existing component. In addition, if the interface dynamic change of the new task is changed, the configuration item can be updated, the new component rendering logic corresponding to the new task is executed, and the existing component codes do not need to be repeatedly written.

For another example, if the interface element of the data form corresponding to the new task is different from the current existing framework system, and there is an independent interface element of the new task, the current existing component can be reused, and then the component of the new task can be developed. For example, the component of the new task itself may be a new function corresponding to the new task added on the basis of inheriting the existing basic component, or a new function corresponding to the new task added in the basic component, and this may be the case that the new function may be used as an operation in the general basic component.

As can be seen from the framework system, the framework system of fig. 2 for front-end development of forms has the following effects:

on the one hand, task development is more flexible. For example, the subclasses in the framework can rewrite the hook functions of the parent classes, so that the functions of the subclasses can be freely realized, the public logic of the parent classes can be multiplexed, and the method is very flexible.

On the other hand, the task development is more scalable. For example, when a new task is added, only a View layer task and a Model layer task of one task need to be added, and the parent class in the framework is inherited.

On the other hand, the maintainability of the task development is better. The form development of the whole task is very complex, no good design code exists, and the form development is not easy to maintain, but the system framework of the example can effectively disassemble the whole complex logic to the framework and specific services, such as the framework of a View layer and the framework of a Model layer, each layer has different tasks, and the maintenance is easy.

In addition, the method applies the design idea of object-oriented, designs a class inheritance system in the field of front-end development, and on the front-end development level, the two layers of the View layer and the Model layer adopt the inheritance structures which are in one-to-one correspondence, so that the flexibility, the expansibility and the maintainability of the front-end task development are obviously improved.

When the task code is executed:

after a task is developed, the realization of the data form corresponding to the task can be realized by executing the logic code of the task. FIG. 3 illustrates a flow of a form generation method in which a task includes a plurality of components included in a View layer task and a Model layer task, which may be executed according to preconfigured component rendering logic, in performing the task. Moreover, the View layer task and the Model layer both adopt a three-layer inheritance system, and both the View layer task and the Model layer can execute the processing shown in fig. 3:

in step 300, executing a task component in the task, wherein the task component inherits a task common component which is a component shared by a plurality of tasks;

in step 302, when the task common component is executed, executing a basic component inherited by the task common component;

in step 304, executing at least one basic operation function included in the basic component;

in step 306, after the View layer task and the Model layer task are executed, a data form corresponding to the task is generated.

At least one embodiment of the present specification provides a system for generating an interface of a data form, where the system corresponds to a task of the data form; the tasks include: a View layer task and a Model layer task;

the View layer task and the Model layer task respectively comprise the following components:

a base component comprising at least one base operation function;

a task component that inherits the task common component;

In one example, the tasks include: a plurality of components included in the View layer task and the Model layer task; the system further comprises: preconfigured component rendering logic to process dynamic execution of the plurality of components in accordance with the component rendering logic.

In one example, when the task is a new task, the task includes at least one of: a new function corresponding to the new task included in the task common component or the base component; or, new component rendering logic corresponding to the new task.

In one example, the implementation of the inheritance includes at least one of:

the attribute of the React component of the View layer is defined by a generic type, and inheritance is realized through the generic type attribute of a father-passing son; alternatively, in the Model layer, inheritance is realized by an object mixing formula.

The apparatuses or modules illustrated in the above embodiments may be implemented by a computer chip or an entity, or by a product with certain functions. A typical implementation device is a computer, which may take the form of a personal computer, laptop computer, cellular telephone, camera phone, smart phone, personal digital assistant, media player, navigation device, email messaging device, game console, tablet computer, wearable device, or a combination of any of these devices.

For convenience of description, the above devices are described as being divided into various modules by functions, and are described separately. Of course, the functionality of the modules may be implemented in the same one or more software and/or hardware implementations in implementing one or more embodiments of the present description.

The execution order of the steps in the flows shown in the above-described figures is not limited to the order in the flow charts. Furthermore, the description of each step may be implemented in software, hardware or a combination thereof, for example, a person skilled in the art may implement it in the form of software code, and may be a computer executable instruction capable of implementing the corresponding logical function of the step. When implemented in software, the executable instructions may be stored in a memory and executed by a processor in the device.

For example, corresponding to the above method, one or more embodiments of the present specification also provide an interface generating device for a dataform, which may include a processor, a memory, and computer instructions stored on the memory and executable on the processor, wherein the processor is configured to execute the instructions to implement the following steps: executing the task of the dataform; the tasks include: a View layer task and a Model layer task; the execution of the View layer task and the Model layer task respectively comprises the following processing steps:

It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

As will be appreciated by one skilled in the art, one or more embodiments of the present description may be provided as a method, system, or computer program product. Accordingly, one or more embodiments of the present description may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, one or more embodiments of the present description may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.

One or more embodiments of the present description may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. One or more embodiments of the specification may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.

The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, for the data processing apparatus embodiment, since it is substantially similar to the method embodiment, the description is relatively simple, and for the relevant points, reference may be made to part of the description of the method embodiment.

The foregoing description has been directed to specific embodiments of this disclosure. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims may be performed in a different order than in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing may also be possible or may be advantageous.

The above description is only for the purpose of illustrating the preferred embodiments of the one or more embodiments of the present disclosure, and is not intended to limit the scope of the one or more embodiments of the present disclosure, and any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the one or more embodiments of the present disclosure should be included in the scope of the one or more embodiments of the present disclosure.

Claims

1. An interface generation method of a data form is realized by executing a task of the data form; the tasks include: a View layer task and a Model layer task; the method comprises the following steps:

after the execution of the View layer task and the Model layer task is finished, generating a data form corresponding to the task; a base component in the View layer task corresponds to a base component in the Model layer task, a task common component in the View layer task corresponds to a task common component in the Model layer task, and a task component in the View layer task corresponds to a task component in the Model layer task;

the View layer is a View layer, the View layer task is responsible for page rendering of the form, the Model layer is a data layer, and the Model layer task is responsible for encapsulation of operation and state management of the form.

2. The method of claim 1, the task comprising: a plurality of components included in the View layer task and the Model layer task; the method further comprises the following steps:

processing dynamic execution of the plurality of components according to preconfigured component rendering logic.

3. The method of claim 2, wherein the first and second light sources are selected from the group consisting of,

when the task is a new task, the task comprises at least one of the following items:

a new function corresponding to the new task included in the task common component or the base component;

or, new component rendering logic corresponding to the new task.

4. The method of claim 1, wherein the first and second light sources are selected from the group consisting of,

the implementation mode of the inheritance comprises at least one of the following modes:

5. The method as set forth in claim 1,

the base assembly includes: hook functions and public functions;

in the task common component inheriting the base component, the common function is multiplexed, and the hook function is updated.

6. An interface generation system of a data form corresponds to a task of the data form; the tasks include: a View layer task and a Model layer task;

a base component comprising at least one base operation function;

a task component that inherits the task common component;

7. The system of claim 6, the tasks comprising: a plurality of components included in the View layer task and the Model layer task; the system further comprises: preconfigured component rendering logic to process dynamic execution of the plurality of components in accordance with the component rendering logic.

8. The system of claim 7, when the task is a new task, the task including at least one of: a new function corresponding to the new task included in the task common component or the base component; or, new component rendering logic corresponding to the new task.

9. The system of claim 6, the implementation of inheritance comprising at least one of:

10. An interface generating device for a dataform, the device comprising a memory, a processor, and computer instructions stored on the memory and executable on the processor, the processor when executing the instructions performing the steps of: executing the task of the dataform; the tasks include: a View layer task and a Model layer task; the execution of the View layer task and the Model layer task respectively comprises the following processing steps: