A method and apparatus for constructing a universal single-page page

By constructing a general single-screen page method, dynamic pages are generated using scene parameters and business capabilities. Combined with the TypeScript and Spring framework, the problem of tight coupling between the page and the front-end and back-end is solved, achieving flexible interaction and high reusability, and quickly responding to personalized needs.

CN116225406BActive Publication Date: 2026-04-07YGSOFT INC
View PDF 2 Cites 0 Cited by

Patent Information

Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2021-12-02
Publication Date
2026-04-07

AI Technical Summary

Technical Problem

In existing technologies, the page is tightly coupled with the front-end and back-end processing methods, which cannot be flexibly configured, resulting in low reusability, inability to quickly respond to customers' personalized needs, and system upgrades require customized development.

Method used

By constructing a general single-screen page method, dynamic single-screen pages are generated using scene parameters and business capabilities. The source code of the front-end and back-end frameworks is generated by combining TypeScript and Spring frameworks, which supports flexible interaction between front-end and back-end processing methods and extends business capabilities through scene assembly features.

Benefits of technology

It enables flexible interaction between the page and the front-end and back-end processing methods, improves reusability, allows for rapid response to changes in requirements, reduces development workload, and enhances personalized configuration capabilities.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN116225406B_ABST
    Figure CN116225406B_ABST
Patent Text Reader

Abstract

The application relates to a method and device for constructing a general single-screen page, and belongs to the technical field of application development, and solves the problems of tight coupling of a page with front-end and back-end processing methods and inability to dynamically adjust in the prior art. The method comprises the following steps: creating a scene according to scene parameters, a current application model and business capabilities; generating single-screen page information of the scene according to page parameters, generating page format content according to configuration information of each region of the single-screen page when a page setting mode in the page parameters is a wizard drawing; generating an application source code package based on application export; running the application source code package, obtaining scene configuration information and model information to which the scene belongs according to a scene ID, generating a dynamic single-screen page according to the model information and the page format content when the scene configuration information contains the page format content, otherwise, accessing source code of the single-screen page in the application source code package; and loading data to the single-screen page according to a rendering sequence of the single-screen page. The method realizes flexible construction and dynamic adjustment of the single-screen page.
Need to check novelty before this filing date? Find Prior Art

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of application development, and in particular to a method and device for constructing a general single-screen page. BACKGROUND

[0002] With the development of informatization, almost all industries have adopted paperless office, and online reporting, approval, and inquiry are performed through computers and mobile devices. There are a large number of single-screen pages for entering information in the system, such as reimbursement forms, loan forms, and warehouse entry forms. Enterprises are increasingly concerned about how to reuse page processing logic, reduce page development time, and quickly respond to changes in user requirements.

[0003] In the prior art, there are methods for directly developing pages and front-end and back-end logic processing using open source technology, and methods for designing and developing pages by online configuration and dragging controls to generate code and then binding business logic. Two sets of programs need to be developed for the front-end pages of computers and mobile devices.

[0004] The pages and front-end and back-end logic developed using the prior art are tightly coupled, and cannot be flexibly configured to increase the front-end and back-end method processing of the page. For similar functions, multiple processing methods need to be developed according to different scenarios, the reuse degree is low, and during the running period, the generated page code and the compiled back-end code are accessed. If the system program needs to be adjusted, whether it is the front-end page or the back-end logic, the development personnel can only customize and develop it, and the upgrade system can only take effect, which cannot quickly respond to the individual needs of customers. SUMMARY

[0005] In view of the above analysis, the embodiments of the present application aim to provide a method and device for constructing a general single-screen page to solve the problem of tight coupling between the existing page and the front-end and back-end processing method and the inability to dynamically adjust.

[0006] In one aspect, the embodiments of the present application provide a method for constructing a general single-screen page, comprising the following steps:

[0007] Creating a scene according to a scene parameter, a model of a current application, and a business capability;

[0008] Generating single-screen page information of the scene according to a page parameter, and generating page format content according to configuration information of each region of the single-screen page when the page setting mode in the page parameter is a wizard drawing;

[0009] Exporting a generated application source code package based on the application; the application source code package includes source code and a description file of the model, the business capability, the scene, and the single-screen page;

[0010] Running the application source code package, according to the scene ID, obtaining scene configuration information and scene model information, when the scene configuration information contains page format content, generating a dynamic single-screen page according to the model information and the page format content, otherwise, accessing the source code of the single-screen page in the application source code package; according to the rendering order of the single-screen page, loading data to display to the single-screen page.

[0011] Further improvement based on the above method, the business capability is the front-end and / or back-end processing method, including the pre-set general business capability, and the business capability created according to the business capability parameter, wherein:

[0012] When the method mode in the business capability parameter is front-end, then based on the TypeScript framework, generate the client framework source code, including: client execution class source code and client execution method source code;

[0013] When the method mode in the business capability parameter is back-end, then based on the Spring framework, generate the server framework source code according to the business capability parameter, including: server execution class source code, class annotation source code and server execution method source code;

[0014] When the method mode in the business capability parameter is front-end and back-end, then generate the client framework code and the server framework code at the same time, and increase the pre-method source code of the server action execution and the post-method source code of the server action execution in the client framework source code.

[0015] Further improvement based on the above method, generating the single-screen page information of the scene according to the page parameter, including:

[0016] Obtaining the page name, page setting mode and page terminal type in the page parameter; generating the page path according to the scene identification and the page name in the scene parameter; generating the PC single-screen page information and / or mobile single-screen page information according to the page terminal type, and storing in the database.

[0017] Further improvement based on the above method, configuring each region of the single-screen page based on the model belonging to the scene, the configuration information of each region of the single-screen page includes:

[0018] The property name, display name, property type, occupied column and display order of the model in the title region, theme region and detail region;

[0019] The property name and its formula in the statistical region;

[0020] Whether the attachment list region and the process track region are included in the additional region;

[0021] The button name, button icon and button associated scene / business capability of the button region.

[0022] Based on further improvements to the above method, page format content is generated according to the configuration information of each area of ​​a single-screen page, including:

[0023] Store the configuration information of the scene, style type, and title area of ​​the single-screen page in the format wizard master table;

[0024] Store the configuration information of the theme area and detail area of ​​the single-screen page in the format detail table;

[0025] Store the configuration information of the additional areas of a single-screen page in the format additional table;

[0026] Store the configuration information for the button area of ​​a single-screen page in a format function table; and,

[0027] The configuration information for each region is combined into a JSON format and stored in a format file table.

[0028] Based on further improvements to the above method, the scenario also includes one or more features; the features are used to process front-end and / or back-end data;

[0029] The types of characteristics include: verification type, calculation type, descriptive type, event type, and processing type;

[0030] Event-based features include: pre-events and post-events, the implementation methods of which are configured in the scenario;

[0031] A descriptive characteristic is a description file;

[0032] The features are defined as verification, computation, and processing. Based on the configured front-end or back-end processing method, the corresponding feature framework source code is generated. The configured input parameters are then processed in the methods of the feature framework source code in a custom manner.

[0033] The application source package also includes the source code and description files for the features.

[0034] Based on further improvements to the above method, the implementation methods for pre-events and post-events are configured in the scene, including:

[0035] Based on the set subscription method and subscription type, select one business capability or custom source code from the preset general business capabilities as the implementation method for the pre-event and post-event; the subscription method includes front-end subscription and back-end subscription, and the subscription type includes business capability subscription and custom subscriber.

[0036] Based on further improvements to the above method, loading data onto a single-screen page according to the rendering order of the single-screen page includes:

[0037] Based on the front-end listener events in a single-screen page, call the event before data loading;

[0038] Based on the scenario configuration information, obtain the scenario-related features and business capabilities, and call the scenario-related features and business capabilities according to the execution timing to process front-end and / or back-end data. Among them, based on the type of feature and the front-end and / or back-end processing methods of feature and business capability, execute one or more of the following: front-end subscription method of pre-event, front-end execution method of feature, method before execution of server-side action of business capability, back-end subscription method of pre-event, server-side execution method of business capability, back-end execution method of feature, back-end subscription method of post-event, method after execution of server-side action in business capability, and front-end subscription method of post-event.

[0039] Based on the front-end listener events in the single-screen page, call the data loading post-event to obtain the processed data;

[0040] Based on the two-way binding between single-screen page controls and model attributes, the corresponding single-screen page control is obtained according to the attribute name in the processed data, and the attribute value is displayed in the single-screen page control.

[0041] On the other hand, embodiments of the present invention provide an apparatus for constructing a universal single-screen page, comprising:

[0042] The business capability creation module is used to generate business capability framework source code based on business capability parameters, receive the edited business capability source code, and create business capabilities.

[0043] The scenario creation module is used to create scenarios based on scenario parameters, the current application's model, and business capabilities.

[0044] The page creation module is used to generate single-screen page information for a scene based on the model to which the scene belongs and the page parameters. When the page setting method in the page parameters is wizard drawing, the page format content is generated based on the configuration information of each area of ​​the single-screen page.

[0045] The import / export module is used to export application source code based on the application, and to import customized application source code packages.

[0046] Scene services are used to obtain scene configuration information based on scene ID, and to invoke the business capabilities associated with the scene according to the execution timing based on the scene configuration information.

[0047] The page controller is used to call single-screen page controls and render the single-screen page based on the page format content or the single-screen page in the application source code.

[0048] The single-screen controller is used to control the rendering order of single-screen pages, call the scene service to load data, and call the page controller to display the single-screen page.

[0049] Further improvements to the above-mentioned device also include a feature creation module, which is used to generate feature framework source code based on feature parameters, receive the edited feature source code, and create features;

[0050] The scene definition module is also used to extract scene-related features from multiple features;

[0051] In the scenario service, the scenario configuration information includes the business capabilities and features associated with the scenario. Based on the scenario configuration information, the business capabilities and features associated with the scenario are invoked according to the execution timing.

[0052] Compared with the prior art, the present invention can achieve at least one of the following beneficial effects:

[0053] 1. Pages are bound to scenarios. By associating business capabilities and features with scenarios, flexible interaction between pages and front-end and back-end processing methods is achieved, which improves the reusability of pages and front-end and back-end processing methods and is conducive to the accumulation of enterprise software assets.

[0054] 2. Pages are drawn using a wizard, which is convenient and quick. The stored page format content is based on model attributes. Pages are dynamically generated through page controls and style types, without relying on the page source code. They can be changed as needed during implementation, quickly responding to changes in requirements.

[0055] 3. By leveraging the scenario assembly feature, the front-end and back-end processing of business capabilities are expanded, allowing business capabilities to focus on the implementation of core functions in the business domain, reducing workload and development efficiency, and enabling different scenario requirements to be met with the same set of processing methods, thereby improving personalized configuration capabilities.

[0056] 4. Automatically control the invocation of pages, features, and business capabilities, as well as the interaction of front-end and back-end data, based on different execution times.

[0057] In this invention, the above-described technical solutions can be combined with each other to achieve more preferred combinations. Other features and advantages of this invention will be set forth in the following description, and some advantages may become apparent from the description or be learned by practicing the invention. The objects and other advantages of this invention can be realized and obtained from what is particularly pointed out in the description and drawings. Attached Figure Description

[0058] The accompanying drawings are for illustrative purposes only and are not intended to limit the invention. Throughout the drawings, the same reference numerals denote the same parts.

[0059] Figure 1 This is a flowchart of the method for constructing a general single-screen page in Embodiment 1 of the present invention. Detailed Implementation

[0060] Preferred embodiments of the present invention will now be described in detail with reference to the accompanying drawings, which form part of this application and are used together with the embodiments of the present invention to illustrate the principles of the present invention, but are not intended to limit the scope of the present invention.

[0061] Example 1,

[0062] One specific embodiment of the present invention discloses a method for constructing a universal single-screen page, such as... Figure 1 As shown, it includes the following steps:

[0063] S11: Create a scenario based on scenario parameters, the current application's model, and business capabilities;

[0064] It should be noted that this embodiment is based on the application dimension. The application includes multiple models, business capabilities, scenarios and pages. Each scenario corresponds to one model and one business capability. Scenarios involving page data interaction include PC pages and / or mobile pages.

[0065] The model is a data entity model, which includes the attribute name, attribute type, attribute length, attribute precision, and whether null values ​​are allowed for the data entity. By referencing other models, the relationship between entities is established.

[0066] Preferably, the metadata of the database tables is obtained by collecting the tables and used as the initial data entity model, and then the associated fields are adjusted to reference the corresponding entity models.

[0067] Business capabilities are reusable and extensible front-end and / or back-end processing methods, including pre-built general business capabilities and business capabilities created based on business capability parameters. Pre-built business capabilities are applicable to multiple application projects, including: single add, single update, single delete, batch add, batch update, export, and print.

[0068] To improve reusability, business capabilities are typically single-function business methods. Business capability parameters include: business method name, Chinese name of the method, method pattern, method parameters, method return type, method type, inherited methods, and reference model. Based on these parameters, the source code for the business capability framework is generated.

[0069] The business method name and its Chinese name are used to generate the class name and class comments of the business capability server-side execution class;

[0070] Method parameters and method return type are used to limit the number, types, and return type of the input parameters of the executed method;

[0071] The reference model is used to set the data entity model corresponding to the business capability, and bind the set data entity model in the server-side execution class;

[0072] Inheritance methods are used to specify that the current business capability is an extension of a pre-built business capability or a business capability in the current application project that references the same model;

[0073] Method types are used to distinguish read and write functionalities of business capabilities in annotations of server-side execution classes, including: query classes and management classes;

[0074] The method pattern is used to define when business capabilities are executed, generating different framework source code, including: front-end, back-end, and front-end and back-end.

[0075] Specifically, when the method pattern is front-end, it generates client-side framework source code based on the TypeScript framework, including: client-side execution class source code and client-side execution method source code;

[0076] When the method pattern is backend, the server-side framework source code is generated based on the Spring framework and according to the business capability parameters, including: server-side execution class source code, class annotation source code, and server-side execution method source code;

[0077] When the method pattern is front-end and back-end, client framework code and server framework code are generated simultaneously, and the source code of the method before the server action is executed and the source code of the method after the server action is executed are added to the client framework source code.

[0078] For example, different framework source codes can be defined as different Velocity templates. When editing the source code, the variables in the template are replaced according to the actual configured parameters, so as to obtain framework source code that conforms to the actual parameters.

[0079] For method types, when the method type is a query class, the annotation "query" is added to the class annotation of the backend server-side execution class. When the method type is a management class, the annotation "manager" is added. Then, when calling the execution method of the query class, the URL of the access address is constrained with "* / query / *", which makes it easier for the proxy service to distribute to the read service or the write service according to the URL, thereby achieving read-write separation.

[0080] It should be noted that when generating the framework source code based on the business capability parameters, the execution class implements the relevant interfaces and methods in the platform framework by default. This is the conventional implementation method and will not be explained in detail.

[0081] The generated framework source code can be edited online. Preferably, the source code can be edited in a browser using Monaco-editor. Alternatively, the source code package can be exported and edited using development tools.

[0082] Based on the business capability parameters and the edited business capability source code, business capabilities are generated and stored in the database business capability table. The business capability ID is unique, and the business capability source code is stored in a large field format.

[0083] Storing business capability information in a database is more intuitive and easier to query and view than using existing technologies that rely on utility JAR files to call methods.

[0084] In the current application, scenarios are created based on scenario parameters, pre-built models, and business capabilities.

[0085] The scenario parameters include: scenario ID, scenario name, scenario identifier, model, and application. These are descriptive parameters. The business logic of the scenario is implemented through business capabilities. Therefore, a business capability needs to be specified in the scenario.

[0086] Specifically, acquiring the business capabilities associated with a scenario includes: querying business capabilities that reference the same model as the scenario, merging them with pre-defined general business capabilities, and then selecting one as the business capability associated with the scenario. The generated scenario information is stored in a scenario table in the database, with a unique scenario ID, and the association between scenarios and business capabilities is stored in an association table in the database.

[0087] S12: Generate single-screen page information for the scene based on page parameters. When the page setting method in the page parameters is wizard drawing, generate page format content based on the configuration information of each area of ​​the single-screen page.

[0088] It should be noted that page configuration is performed for scenarios requiring page data interaction. For example, this is used for scenarios involving adding and modifying business information.

[0089] Generate single-screen page information for the scene based on page parameters, including:

[0090] Retrieve the page name, page setup method, and page terminal type from the page parameters; generate the page path based on the scene identifier and page name from the scene parameters; generate PC single-screen page information and / or mobile single-screen page information based on the page terminal type, and store them in the database.

[0091] It should be noted that the page path is generated based on the scene identifier and page name in the scene parameters, including:

[0092] When configuring the page, the generated page path is displayed as the preset page path + page name. For example, if the preset page path is pages, then the page path is displayed as: / pages / {page name}.

[0093] When generating the source code, the page source code is generated in the scene's page directory. The page source code path is: / {application identifier} / {scene identifier}.vue.web / src / pages / {page name}.vue.

[0094] When the page settings in the page parameters are set to wizard rendering, the page format content is generated based on the configuration information of each area of ​​the single-screen page; otherwise, when exporting and generating the application source code package, the source code of the single-screen page is generated in the corresponding path based on the single-screen page information.

[0095] Based on the model to which the scene belongs, when drawing single-screen page information using the wizard, the single-screen page is divided into a title area, a topic area, a details area, an additional area, and a button area. The configuration information for each area includes:

[0096] The attribute names, display names, attribute types, columns used, and display order of the models in the title area, subject area, and detail area;

[0097] The attribute names and their formulas in the statistical region;

[0098] Does the additional area include an attachment list area and a process trajectory area?

[0099] The button area includes the button name, button icon, and the associated scenario / business capability.

[0100] Saving configuration information involves two parts. First, the configuration information for each region is saved separately in a master-detail table format, facilitating online display and adjustment of the configuration information. Second, the configuration information for each region is combined into a JSON format and stored in a large field of a format file table, enabling rapid generation of dynamic single-screen pages. Specifically:

[0101] Store the configuration information of the scene, style type, and title area of ​​the single-screen page in the format wizard master table;

[0102] Store the configuration information of the theme area and detail area of ​​the single-screen page in the format detail table;

[0103] Store the configuration information of the additional areas of a single-screen page in the format additional table;

[0104] Store the configuration information for the button area of ​​a single-screen page in a format function table; and,

[0105] The configuration information for each region is combined into a JSON format and stored in a format file table.

[0106] These two parts of data primarily consist of model attributes, configuring the attributes and function buttons displayed in each area. They do not specify the controls and styles for each attribute. During configuration, attributes and controls are loosely coupled. At runtime, page controls for PC or mobile devices are retrieved based on the page's terminal type. Then, page controls are mapped to attribute types, and page styles are mapped to style types, facilitating dynamic adjustments and expansions of the page during implementation. Furthermore, by mapping terminal type to terminal source code templates, configuration for both PC and mobile pages can be achieved simultaneously with a single configuration via the format wizard.

[0107] In page data interaction functions, it is common to involve initializing and loading page data, validating data before submission, or converting the format of data after acquisition. If these front-end data processing and interactions are tied to the page, it not only leads to low reusability of the page and processing methods, but also makes it inconvenient to adjust the page.

[0108] Preferably, the validation and transformation of front-end data and the processing of input data and output results of back-end methods in the function are achieved by associating one or more features with the scenario. This not only allows the business capabilities to be mainly used for core business processing and the business capabilities to be reused, but also allows the data processing to be abstracted into general methods. The features of the scenario can be constructed through flexible combination, thereby expanding the data processing capabilities of the page and business capabilities.

[0109] Specifically, features can be generalized within the same application to process front-end and / or back-end data. Each feature is a reusable business capability component, and customized business can be provided by assembling different features.

[0110] The types of characteristics include: verification type, calculation type, descriptive type, event type, and processing type;

[0111] Event-based features include: pre-events and post-events. The implementation methods for pre-events and post-events are configured in the scene and belong to scene-level features.

[0112] A descriptive characteristic is a description file;

[0113] The characteristics are defined as validation, computation, and processing. Based on the front-end or back-end processing method, the corresponding characteristic framework source code is generated, and the input parameters are processed in the methods of the characteristic framework source code in a custom way.

[0114] For example, a descriptive feature is a configuration file for default parameters. In the implementation methods of other types of features, this configuration file is read to obtain the default parameters; the front-end validation feature is to check whether certain attributes in the input parameters are empty; the back-end validation feature is to check whether certain attributes in the input parameters meet the business conditions; the front-end computational feature is to perform addition calculations on the input parameters; and the front-end processing feature is to translate the dictionary values ​​in the input parameters according to the data dictionary.

[0115] Similarly, based on the feature parameters, the framework source code of the feature's front-end and / or back-end methods is generated. Then, based on the feature source code edited online, the feature is generated and stored in the feature table in the database. The feature ID is unique, and the feature source code is stored in a large field format.

[0116] In a scenario, one or more features can be added based on actual business needs, and the relationship between the scenario and the features is stored in a database association table.

[0117] If pre-events and post-events from the event-type features are added to the scenario, then a business capability or custom event source code will be selected from the preset general business capabilities as the implementation method for the pre-event and post-event, depending on the set subscription method and subscription type; the subscription method includes front-end subscription and back-end subscription, and the subscription type includes business capability subscription and custom subscriber;

[0118] If a non-event-based feature is added, the parameter value is configured according to the feature's input parameters.

[0119] For example, the pre-event in the feature is set as a backend subscription. By customizing the subscriber and editing the generated subscription framework source code, the permission information of the currently logged-in user can be retrieved from the cache and set in the scene context. This allows the permission information of the currently logged-in user to be retrieved from the scene context as a filter condition for querying business data within the scene's business capabilities. For the input parameters of the computational feature, the default value for the number system type is set to 2.

[0120] This ability to assemble scenarios allows different scenarios to include different features, and scenario-level event extensions can be achieved through pre-events and post-events, thus enabling the same page and business capabilities to have personalized processing behaviors in different scenarios.

[0121] S13: Based on the application, export and generate the application source code package; the application source code package includes: source code and description files for models, business capabilities, scenarios, and single-screen pages;

[0122] It should be noted that if features are created in the application, and / or features are associated with scenarios, the application source code package also includes the feature source code and description files. Specifically, based on the application, the exported application source code package includes:

[0123] ① Obtain the model in the application and generate the Java source code of the data entity corresponding to the model;

[0124] ② Obtain the business capabilities in the application and generate business capability description files, business capability front-end JavaScript source code, and / or business capability back-end Java source code;

[0125] Specifically, based on the preset naming conventions and paths, the source code stored in large fields in the database is written into JS files and / or Java files and generated in the corresponding paths; the business capability information stored in the database tables is obtained, and the attributes and values ​​are written into the business capability description file in JSON format, and the corresponding JS file path and / or Java class path is added.

[0126] When calling a JS file on the front end, it can be dynamically imported using es import, for example, let actionModule = await import(' / src / action / ' + jsModuleName); when using a Java file on the back end, it can be loaded and instantiated using a class loader, for example, Class.forName(javaPath).

[0127] ③ Obtain the features in the application and generate feature description files, feature front-end JavaScript source code and / or feature back-end Java source code;

[0128] Specifically, feature description files, feature front-end JavaScript source code, and / or feature back-end Java source code are generated based on feature information in the database table, in a manner similar to that of business capabilities.

[0129] ④ Generate scenario description files and scenario-related configuration files based on the scenario and its associated business capabilities and characteristics;

[0130] Specifically, the process involves retrieving scenario information from the database table, generating a scenario description file, obtaining the relationships between scenarios and business capabilities, and between scenarios and features from the database table, and generating a scenario association configuration file.

[0131] ⑤ Obtain single-screen page information and generate single-screen page source code;

[0132] It should be noted that whether the single-screen page is set up using a wizard or a custom method, single-screen page source code will be generated. Specifically, when the single-screen page is set up using a wizard, the single-screen page source code template is obtained based on the terminal type of the single-screen page information. Based on the single-screen page control components, the corresponding type of control is obtained according to the attribute type in the page format content. According to the style type in the single-screen page information, the corresponding style file is imported, and the source code for each area of ​​the single-screen page is generated. When the single-screen page is set up using a custom method, the single-screen page source code template is obtained based on the terminal type of the single-screen page information. The corresponding style file and its associated model are imported, and the single-screen page source code framework is generated. The page code needs to be customized offline.

[0133] For example, a Vue file is generated, the corresponding JS for Vue is included, and the trigger event v-click="doFunc(function ID)" for the button is generated in the Vue file according to the button configured in the single-screen page and the business capability or scenario bound to the button. The function ID is the specific business capability ID or scenario ID.

[0134] ⑥ Generate configuration files, front-end JavaScript source code, and back-end Java source code for the general framework;

[0135] Specifically, this includes: the JavaScript files referenced by the front-end JavaScript source code for business capabilities and features, the source code of the interface classes and inherited Java classes implemented by the back-end Java source code, and the configuration files and Java source code related to the reference model of business capabilities.

[0136] The exported application source code package can be imported into a project in a Java development tool for execution or run after further customization.

[0137] S14: Run the application source code package, obtain the scene configuration information and the model information to which the scene belongs based on the scene ID. If the scene configuration information contains page format content, generate a dynamic single-screen page based on the model information and page format content. Otherwise, access the source code of the single-screen page in the application source code package; load and display data to the single-screen page according to the rendering order of the single-screen page.

[0138] It should be noted that business capabilities and scenarios, as execution methods, can be individually bound to buttons and menus, or encapsulated as services for invocation. This operation can be configured through an online interface or customized offline.

[0139] When the service starts, the business capability description file, feature description file, and scenario description file are loaded into the cache for instantiation of business capabilities, features, and scenarios. This allows the instance object to be retrieved from the description file based on the corresponding ID when a business capability, feature, or scenario is invoked.

[0140] When the program runs, it uses a scene as the access point, associated with a menu. The scene ID is passed into the menu's click event. Based on the scene ID, scene configuration information is retrieved, resulting in the application identifier, the model identifier to which the scene belongs, and the scene identifier. The access address is then concatenated based on these identifiers, for example, http: / / ip:port / {application identifier} / mapp / {model identifier} / scene / {scene identifier}. Within the scene, the program determines whether to access the already generated single-screen page source code or dynamically generate a single-screen page based on the page format content, depending on whether the scene configuration information contains page format content. Compared to existing technologies, this approach does not rely on page source code, allowing for flexible implementation and rapid response to changing requirements.

[0141] It is important to note that since the source code package can still be exported and scenes and pages can still be added and adjusted online, or the associated business capabilities and features of a scene can be adjusted, or the customized source code package can be imported into the platform device for real-time online adjustments or additions, in order to obtain the latest configuration, the records in the database table should be retrieved first when running the program. Specifically, based on the scene ID, the scene configuration information should be retrieved, including:

[0142] Based on the scenario ID, retrieve the latest scenario information and associated business capabilities and characteristics from the scenario table and the association table, and use them as the latest scenario content;

[0143] Get single-screen page information based on scene ID. When the page setting method is wizard drawing, get the page format content in the format file table based on single-screen page ID and add it to the latest scene content.

[0144] Read the scene description file and scene association configuration file from the source code package as the original content;

[0145] The latest scene content is used as the main source, while also covering the original scene content, to obtain scene configuration information.

[0146] According to the rendering order of the single-screen page, the data is loaded and displayed on the single-screen page. Preferably, the single-screen page is a Vue page, and the page data processing is performed in the mounted lifecycle of Vue.

[0147] The single-screen page processing process includes:

[0148] ① Based on the front-end listener events in a single-screen page, call the event before data loading;

[0149] ② Based on the scenario configuration information, obtain the scenario-related features and business capabilities, and call the scenario-related features and business capabilities according to the execution timing to process front-end and / or back-end data. Among them, based on the type of feature and the front-end and / or back-end processing methods of feature and business capability, execute one or more of the following: front-end subscription method of pre-event, front-end execution method of feature, pre-execution method of service-side action of business capability, back-end subscription method of pre-event, service-side execution method of business capability, back-end execution method of feature, back-end subscription method of post-event, post-execution method of service-side action in business capability, and front-end subscription method of post-event.

[0150] ③ Based on the front-end listener events in the single-screen page, call the data loading event to obtain the processed data;

[0151] ④ Based on the two-way binding between single-screen page controls and model attributes, the corresponding single-screen page control is obtained according to the attribute name in the processed data, and the attribute value is displayed in the single-screen page control.

[0152] Preferably, Node.js is introduced into the single-screen page. The EventEmitter class in the Node module provides methods for listening to events. The event before data loading is published by the emit method, the relevant data processing methods in the single-screen page are called, and then the unified control methods on the front end are called. Based on the obtained scene ID and scene configuration information, the scene is executed, the backend data is obtained, and finally the event after data loading is published by the emit method, and the backend data is processed again to obtain the processed data.

[0153] Compared with existing technologies, this embodiment provides a method for constructing a universal single-screen page. The page is drawn via a wizard, which is convenient and fast. The stored page format content is primarily based on model attributes. Pages are dynamically generated using page controls and style types, independent of the page source code. This allows for on-demand adaptation during implementation, quickly responding to changing requirements. Through scene assembly features, the front-end and back-end processing of business capabilities are expanded, allowing business capabilities to focus on the implementation of core business domain functions, reducing workload and improving development efficiency. Different scenario requirements are met using the same processing method, improving personalized configuration capabilities. The method automatically controls the invocation of pages, features, and business capabilities, as well as the interaction of front-end and back-end data, based on different execution times. Pages are bound to scenes, associating business capabilities and features with scenes, enabling flexible interaction between pages and front-end and back-end processing methods. This improves the reusability of pages and front-end / back-end processing methods, which is beneficial for the accumulation of enterprise software assets.

[0154] Example 2,

[0155] An apparatus for constructing a universal single-screen page is provided, thereby implementing the method for constructing a single-screen page in Embodiment 1. The specific implementation of each module is described in the corresponding description in Embodiment 1. The apparatus includes:

[0156] The business capability creation module is used to generate business capability framework source code based on business capability parameters, receive the edited business capability source code, and create business capabilities.

[0157] The scenario creation module is used to create scenarios based on scenario parameters, the current application's model, and business capabilities.

[0158] The page creation module is used to generate single-screen page information for a scene based on the model to which the scene belongs and the page parameters. When the page setting method in the page parameters is wizard drawing, the page format content is generated based on the configuration information of each area of ​​the single-screen page.

[0159] The import / export module is used to export application source code based on the application, and to import customized application source code packages.

[0160] Scene services are used to obtain scene configuration information based on scene ID, and to invoke the business capabilities associated with the scene according to the execution timing based on the scene configuration information.

[0161] The page controller is used to call single-screen page controls and render the single-screen page based on the page format content or the single-screen page in the application source code.

[0162] The single-screen controller is used to control the rendering order of single-screen pages, call the scene service to load data, and call the page controller to display the single-screen page.

[0163] Preferably, it also includes a feature creation module, used to generate feature framework source code based on feature parameters, receive the edited feature source code, and create features;

[0164] The scene definition module is also used to extract scene-related features from multiple features;

[0165] In the scenario service, the scenario configuration information includes the business capabilities and features associated with the scenario. Based on the scenario configuration information, the business capabilities and features associated with the scenario are invoked according to the execution timing.

[0166] It should be noted that single-screen page controls are divided into enumerations, general entity selection controls, tables, dates, input boxes, etc.

[0167] Business capabilities and scenarios are invoked through bound buttons and menus. Page configuration is provided for scenarios involving data interaction, offering both wizard-driven rendering and custom settings. When using wizard-driven rendering, page content is generated by configuring the attributes of each area of ​​the page. At runtime, the corresponding page controls and styles are retrieved to dynamically generate a single-screen page. When using custom settings, the source code framework for generating single-screen pages is exported for offline secondary customization development.

[0168] It should be noted that when exporting the generated application source code package for offline secondary customization, in order to import it back into the platform device, the newly added source code files are added in the form of inheritance or reference. In this way, after importing the customized source code package or source code project back into the device, business capabilities, features, scenarios and wizard-drawn pages can continue to be updated online.

[0169] Preferably, an online application deployment process is provided, including: application generation, compilation and building, application execution and application release. The application is packaged and deployed to servers in different environments through background commands, which facilitates the deployment and upgrade of applications by operation and maintenance personnel.

[0170] Compared with existing technologies, this embodiment provides a device for building a universal single-screen page. It provides the creation and source code writing of reusable business capabilities and features through online configuration, and intuitively displays them to facilitate invocation and assembly in various scenarios. The wizard-driven drawing makes it simple and convenient to create and adjust the interface. By controlling the execution timing, it can reasonably perform the interaction between the page and different features and business capabilities of the front-end and back-end, making it flexible and easy to use. The source code export function enables offline secondary customization and independent deployment, and the source code import function enables secondary dynamic configuration.

[0171] Those skilled in the art will understand that all or part of the processes of the methods described in the above embodiments can be implemented by a computer program instructing related hardware, and the program can be stored in a computer-readable storage medium. The computer-readable storage medium may be a disk, optical disk, read-only memory, or random access memory, etc.

[0172] The above description is only a preferred embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any changes or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in the present invention should be included within the scope of protection of the present invention.

Claims

1. A method for constructing a universal single-screen page, characterized in that, Includes the following steps: Create a scenario based on scenario parameters, the current application's model, and business capabilities; The single-screen page information of the scene is generated based on the page parameters. When the page setting method in the page parameters is wizard drawing, the page format content is generated based on the configuration information of each area of ​​the single-screen page. Based on the application, export and generate the application source code package; The application source code package includes: source code and description files for models, business capabilities, scenarios, and single-screen pages; Run the application source code package, obtain the scene configuration information and the model information to which the scene belongs based on the scene ID. If the scene configuration information contains page format content, generate a dynamic single-screen page based on the model information and page format content. Otherwise, access the source code of the single-screen page in the application source code package; load and display data to the single-screen page according to the rendering order of the single-screen page. The business capabilities are front-end and / or back-end processing methods, including pre-defined general business capabilities and business capabilities created based on business capability parameters, wherein: When the method pattern in the business capability parameters is front-end, the client framework source code is generated based on the TypeScript framework, including: client execution class source code and client execution method source code; When the method pattern in the business capability parameter is backend, the server-side framework source code is generated based on the Spring framework and the business capability parameter, including: server-side execution class source code, class annotation source code, and server-side execution method source code. When the method mode in the business capability parameters is front-end and back-end, the client framework source code and the server framework source code are generated simultaneously, and the server-side action execution method source code and the server-side action execution method source code are added to the client framework source code.

2. The method for constructing a universal single-screen page according to claim 1, characterized in that, The step of generating single-screen page information for the scene based on page parameters includes: Obtain the page name, page setup method, and page terminal type from the page parameters; generate the page path based on the scene identifier and the page name from the scene parameters; generate PC single-screen page information and / or mobile single-screen page information based on the page terminal type, and store them in the database.

3. The method for constructing a universal single-screen page according to claim 2, characterized in that, Configure each region of the single-screen page based on the model to which the scene belongs. The configuration information for each region of the single-screen page includes: The attribute names, display names, attribute types, columns used, and display order of the models in the title area, subject area, and detail area; The attribute names and their formulas in the statistical region; Does the additional area include an attachment list area and a process trajectory area? The button area includes the button name, button icon, and the associated scenario / business capability.

4. The method for constructing a universal single-screen page according to claim 3, characterized in that, The step of generating page format content based on the configuration information of each area of ​​a single-screen page includes: Store the configuration information of the scene, style type, and title area of ​​the single-screen page in the format wizard master table; Store the configuration information of the theme area and detail area of ​​the single-screen page in the format detail table; Store the configuration information of the additional areas of a single-screen page in the format additional table; Store the configuration information for the button area of ​​a single-screen page in a format function table; and, The configuration information for each region is combined into a JSON format and stored in a format file table.

5. The method for constructing a universal single-screen page according to claim 1, 2, or 4, characterized in that, The scenario also includes one or more features; these features are used to process front-end and / or back-end data; The types of the aforementioned characteristics include: verification type, calculation type, descriptive type, event type, and processing type; The event-type characteristics include: pre-events and post-events, and the implementation methods of the pre-events and post-events are configured in the scenario; The descriptive characteristic is a description file; The aforementioned verification, computation, and processing characteristics generate corresponding characteristic framework source code based on the configured front-end or back-end processing method, and the configured input parameters are processed in the methods of the characteristic framework source code through a custom approach. The application source code package also includes the source code and description files for the features.

6. The method for constructing a universal single-screen page according to claim 5, characterized in that, The implementation methods for the preceding and following events are configured in the scene, including: Based on the set subscription method and subscription type, select one business capability or custom source code from the preset general business capabilities as the implementation method for the pre-event and post-event; the subscription method includes front-end subscription and back-end subscription, and the subscription type includes business capability subscription and custom subscriber.

7. The method for constructing a universal single-screen page according to claim 6, characterized in that, Based on the rendering order of the single-screen page, the data loaded and displayed on the single-screen page includes: Based on the front-end listener events in a single-screen page, call the event before data loading; Based on the scenario configuration information, obtain the scenario-related features and business capabilities, and call the scenario-related features and business capabilities according to the execution timing to process front-end and / or back-end data. Among them, according to the type of the feature and the front-end and / or back-end processing methods of the feature and business capability, execute one or more of the following: front-end subscription method of the pre-event, front-end execution method of the feature, pre-execution method of the server-side action of the business capability, back-end subscription method of the pre-event, server-side execution method of the business capability, back-end execution method of the feature, back-end subscription method of the post-event, post-execution method of the server-side action in the business capability, and front-end subscription method of the post-event. Based on the front-end listener events in the single-screen page, call the data loading post-event to obtain the processed data; Based on the two-way binding between single-screen page controls and model attributes, the corresponding single-screen page control is obtained according to the attribute name in the processed data, and the attribute value is displayed in the single-screen page control.

8. An apparatus for constructing a universal single-screen page, characterized in that, include: The business capability creation module is used to generate business capability framework source code based on business capability parameters, receive the edited business capability source code, and create business capabilities. The business capabilities are front-end and / or back-end processing methods, including pre-defined general business capabilities and business capabilities created based on business capability parameters. Specifically: when the method pattern in the business capability parameters is front-end, client-side framework source code is generated based on the TypeScript framework, including client-side execution class source code and client-side execution method source code; when the method pattern in the business capability parameters is back-end, server-side framework source code is generated based on the Spring framework, including server-side execution class source code, class annotation source code, and server-side execution method source code; when the method pattern in the business capability parameters is both front-end and back-end, both the client-side framework source code and the server-side framework source code are generated simultaneously, and the client-side framework source code includes pre-execution server-side action method source code and post-execution server-side action method source code. The scenario creation module is used to create scenarios based on scenario parameters, the current application's model, and business capabilities. The page creation module is used to generate single-screen page information for the scene based on the model to which the scene belongs and the page parameters. When the page setting method in the page parameters is wizard drawing, the page format content is generated based on the configuration information of each area of ​​the single-screen page. The import / export module is used to export application source code based on the application, and to import customized application source code packages. Scene services are used to obtain scene configuration information based on scene ID, and to invoke the business capabilities associated with the scene according to the execution timing based on the scene configuration information. The page controller is used to call single-screen page controls and render the single-screen page based on the page format content or the single-screen page in the application source code. The single-screen controller is used to control the rendering order of single-screen pages, call the scene service to load data, and call the page controller to display the single-screen page.

9. The apparatus for constructing a universal single-screen page according to claim 8, characterized in that, It also includes a feature creation module, which generates feature framework source code based on feature parameters, receives the edited feature source code, and creates features; The scene creation module is also used to obtain the scene-related features from multiple features; In the scenario service, the scenario configuration information includes the business capabilities and characteristics associated with the scenario. Based on the scenario configuration information, the business capabilities and characteristics associated with the scenario are invoked according to the execution timing.

Citation Information

Patent Citations

  • Component-based page generation method and device, electronic equipment and storage medium

    CN110825374A

  • Page building method, system and device for multiple scenes, and medium

    CN113220278A