A software online development platform and development method

By utilizing the page designer and API configuration of the online software development platform, WYSIWYG online development was achieved, solving the problems of multi-role coordination and maintenance difficulties in traditional platforms, and improving development efficiency and system stability.

CN111984176BActive Publication Date: 2026-03-06FUJIAN ECAN INFORMATION TECH CO LTD
View PDF 3 Cites 0 Cited by

Patent Information

Application Number
CN202010650490.5
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2020-07-08
Publication Date
2026-03-06
Estimated Expiration
2040-07-08

Smart Images

  • Figure CN111984176B_ABST
    Figure CN111984176B_ABST
Patent Text Reader

Abstract

This invention provides an online software development platform and method. The online software development platform includes: a page designer for designing page content through multiple drag-and-drop controls; a dataset configuration module for configuring data sources, configuring various business-related data models on the configured data sources, and associating and organizing the various data models to form a dataset; a dataset binding module for allowing users to select a dataset from at least one dataset and bind it to the page's drag-and-drop controls to populate the page with data; a code enhancement module providing front-end enhancement APIs, back-end enhancement APIs, and back-end enhancement APIs for users to configure business enhancement code online to enhance control events; and a saving module for saving all page configuration information and setting it as a menu. This invention allows for fully online configuration, supports multi-user collaborative configuration, and provides a WYSIWYG experience, thus overcoming the shortcomings of traditional software development platforms.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to an online software development platform. Background Technology

[0002] The characteristics of traditional software development platforms are: (1) They are heavily code-based, and the functions cannot be WYSIWYG, which creates barriers between various functions. As a result, multiple roles (such as business personnel, interface animation designers, database designers, software development engineers, etc.) need to complete the corresponding designs in different development stages. The entire development cycle is long and the response to requirement changes is slow. (2) Various technical frameworks and implementation methods are intertwined in one project. Different developers write various code implementations based on their own technical experience, which makes later maintenance difficult and technology iterations cumbersome.

[0003] Software development using traditional software development platforms typically involves first designing a database model and building a project framework. Then, based on specific business requirements, the software functionalities are gradually developed and finally delivered to the client. This process includes:

[0004] Database model design is generally carried out through logical modeling using PowerDesigner (a very comprehensive database design tool), which is then converted into a specific physical model and generates SQL scripts for the specific database. This process uses PDM files (files generated after PowerDesigner design) to store the design. Often, only one person can edit the design and then send it to another person for further editing, or multiple people can edit different parts and then one person can integrate them. The whole process is cumbersome and not agile in terms of version management and collaborative design.

[0005] Building a project framework is a common process in enterprise applications. While mature technical frameworks vary, they are remarkably similar, generally including a view layer, a controller layer, and a data processing layer. The implementation of each layer and the mechanisms between them are largely the same. Therefore, the basic framework is often built by copying a project or relying on a parent project. This process involves managing a significant amount of redundant code.

[0006] After the project's technical framework is established, developers combine business requirements to implement the business logic of each layer based on the framework. This involves front-end design, back-end implementation, and front-end / back-end functional integration. If changes occur, the entire process needs to be restarted, which is tedious and inefficient. Furthermore, the inconsistent code quality from developers at different levels significantly impacts the overall functional quality of the project, posing uncontrollable risks.

[0007] It is evident that there are still many shortcomings in using traditional development platforms for software development. Summary of the Invention

[0008] The technical problem this invention aims to solve is to provide a software online development platform development method where all business implementations can be fully configured online, offering a WYSIWYG (What You See Is What You Get) experience. This eliminates the need for coordinating multiple personnel resources and relying on advanced technologies required in traditional software development, truly lowering the threshold for software development and maintenance, and allowing for convenient and rapid adaptation to software changes. This overcomes the shortcomings of traditional software development platforms.

[0009] In a first aspect, the present invention provides an online software development platform, comprising:

[0010] The page designer is used to design the content displayed on the page. It has multiple built-in drag-and-drop controls and provides a window for configuring properties and styles for each drag-and-drop control.

[0011] The dataset configuration module configures the data source, configures various business-related data models on the configured data source, and links and organizes the various data models to form a dataset. There must be at least one dataset. It also supports multi-person collaborative configuration, and the configuration information is globally synchronized after being saved in the system.

[0012] The dataset binding module allows users to select one dataset from at least one dataset and bind it to a drag-and-drop control on the page, so that the page can be populated with data by dragging and dropping the control.

[0013] The code enhancement module provides front-end enhancement APIs, back-end enhancement APIs, and post-front-end enhancement APIs for users to configure business enhancement code online to enhance control events; and

[0014] The save module is used to save all the configuration information of the page and obtain the URL, and then set the URL as a menu.

[0015] Secondly, the present invention provides an online software development method, comprising the following steps:

[0016] S1. Design of page content display, which involves dragging and dropping the built-in drag-and-drop controls of the page designer onto the page, and configuring the properties and styles of each drag-and-drop control;

[0017] S2. Configure the dataset, which means configuring the data source. Configure the various data models related to the business on the configured data source, and organize the various data models to form a dataset. There must be at least one dataset. If multiple people are configuring collaboratively, the configuration information is saved and then synchronized globally in the system.

[0018] S3, Dataset Binding, which means selecting a dataset from at least one dataset and binding it to the drag-and-drop control on the page so that the page can be populated with data by dragging and dropping the control;

[0019] S4. Event-based code enhancement, which allows users to configure business enhancement code online through front-end enhancement API, back-end enhancement API, and front-end post-enhancement API to enhance control events.

[0020] S5. Save all the configuration information of the page to get the URL, and set the URL as the menu.

[0021] The one or more technical solutions provided in this embodiment of the invention have at least the following technical effects or advantages: The platform comprises two parts, namely the front-end and the back-end: The front-end implements a general page designer based on Vue. Developers only need to drag and drop components and bind the negotiated business back-end interfaces to complete the page display; The back-end is based on the Java language, follows the J2EE specification, and incorporates a large amount of engineering practice, including layered design, role-based access control, encryption and confidentiality strategies, etc. It implements and integrates data source management, data model management, dataset management, component service management, and business service management, so that when users create a new project, they can directly perform data modeling on the development platform, then configure the dataset, then bind the dataset to the controls in the page designer through component service management, and finally combine it with business service management to implement the page logic. The entire process is completed online with online configuration and online writing of appropriate business enhancement code. All enhancement code (business operations) is completed through the API exposed by the platform, shielding the details of the underlying framework and avoiding instability of the software system due to the uneven skill levels of developers.

[0022] The above description is merely an overview of the technical solution of the present invention. In order to better understand the technical means of the present invention and to implement it in accordance with the contents of the specification, and to make the above and other objects, features and advantages of the present invention more apparent and understandable, specific embodiments of the present invention are described below. Attached Figure Description

[0023] The present invention will be further described below with reference to the accompanying drawings and embodiments.

[0024] Figure 1 This is a schematic diagram of the system framework of the present invention;

[0025] Figure 2a This is a schematic diagram of the configuration window of the system page designer of the present invention;

[0026] Figure 2b This is a schematic diagram of the configuration window of the system page designer of the present invention;

[0027] Figure 2c This is a schematic diagram of the configuration window of the system page designer of the present invention;

[0028] Figure 2dThis is a schematic diagram of the configuration window of the system page designer of the present invention;

[0029] Figure 3 This is a software architecture block diagram of the platform in Embodiment 1 of the present invention;

[0030] Figure 4 This is a flowchart of the synchronization method in Embodiment 1 of the present invention;

[0031] Figure 5 This is a flowchart of the online software development method in Embodiment 2 of the present invention. Detailed Implementation

[0032] This application provides an online software development platform and method, enabling all business implementations to be fully configured online with a WYSIWYG approach. This eliminates the need for coordinating multiple personnel resources and relying on technology required in traditional software development, truly lowering the threshold for software development and maintenance, and allowing for convenient and rapid adaptation to software changes.

[0033] The overall concept of the technical solution in this application embodiment is as follows: The online software development platform implements a page designer on the front end based on Vue, with multiple built-in draggable controls. Each control has a configuration window for its properties and styles, allowing users to design the content displayed on the page by dragging and dropping controls and configuring their interaction relationships. Furthermore, based on the JAVA language and following J2EE design specifications, a general processing backend is implemented, providing data model management, dataset management, and general business object operation APIs. Based on page control events, controls are associated with data to complete the data display. All business implementations are configured entirely online.

[0034] Before introducing specific embodiments, the system framework corresponding to the platform and method of this application will be introduced first, such as... Figure 1 As shown, the system is roughly divided into two parts: the front-end and the back-end.

[0035] The front-end provides a universal page designer that can be implemented based on Vue. It includes multiple draggable controls, allowing developers to simply drag and drop controls and bind them to pre-agreed backend business interfaces to complete the page display. Figure 2a As shown, the built-in controls, such as buttons, single-line text, radio buttons, check boxes, date pickers, drop-down lists, tables, and layout containers, are located on the left side of the page designer window, while the right side of the window is used to configure the properties and styles of the controls.

[0036] The backend, based on the Java language and conforming to the J2EE specification, incorporates extensive engineering practices, including layered design, role-based access control, and encryption / security strategies. Figures 2b to 2d As shown, it implements and integrates data source management ( Figure 2b ), data model management ( Figure 2c ), Dataset Management Figure 2d The platform includes component service management and business service management, allowing users to directly model data on the development platform when creating a new project. They can then configure the dataset, bind it to controls in the page designer through component service management, and finally implement the page logic through business service management. The entire process is completed online, with appropriate business enhancement code written online. All enhancement code (business operations) is completed through the platform's exposed APIs, shielding the underlying framework details and preventing software system instability caused by uneven developer skill levels.

[0037] Example 1

[0038] like Figure 3 As shown, this embodiment provides an online software development platform, including:

[0039] The page designer is used to design the content displayed on a page. It includes multiple drag-and-drop controls and provides a configuration window for the properties and styles of each drag-and-drop control; for example... Figure 2a As shown, the drag-and-drop controls built into the page designer include: button controls, single-line text controls, radio button controls, checkbox controls, date picker controls, dropdown controls, table controls, and layout container controls. In practice, the page designer can be implemented based on Vue. In fact, as long as the design specifications (i.e., the types of controls, the attributes and content of the controls, and the interactive effects) are met, the page designer can be implemented entirely using mainstream front-end technology frameworks.

[0040] The dataset configuration module configures the data source, configures various business-related data models on the configured data source, and links and organizes the various data models to form a dataset. There must be at least one dataset. It also supports multi-person collaborative configuration, and the configuration information is globally synchronized after being saved in the system.

[0041] The dataset binding module allows users to select one dataset from at least one dataset and bind it to a drag-and-drop control on the page, so that the page can be populated with data by dragging and dropping the control.

[0042] The code enhancement module provides front-end enhancement APIs, back-end enhancement APIs, and post-front-end enhancement APIs for users to configure business enhancement code online to enhance control events; and

[0043] The save module is used to save all the configuration information of the page and obtain the URL, and then set the URL as a menu.

[0044] The control events include "click", "double click", "select", "mouse in", and "loss of focus".

[0045] like Figures 2b to 2d As shown, the dataset configuration module further includes:

[0046] The data source management unit allows users to configure data sources and perform operations such as adding, deleting, modifying, and querying data sources. After the configuration information is saved, a Hikari database connection pool is generated globally based on the configuration information. The data source can be automatically switched when in use, realizing the integration of operations on different business databases, which facilitates the management of database resources and improves the utilization rate of database connections.

[0047] The data model management unit allows users to define and manage data models online, supporting collaborative configuration by multiple users. It also provides data model generation and synchronization functions. Data model management, essentially business table definition management, is primarily implemented through two entities: DataTable and DataColumn. DataTable mainly records the data source and table name of the platform table. DataColumn includes the table ID, table name, column name, index type, primary key status, nullability, column type, default value, column length, column sorting, and comments (users can generate the required business tables after configuring DataTable and DataColumn on the platform). Users can define data models online, with full support for collaborative configuration by multiple users. The platform shields the differences in data types between different databases (providing common data types for data field selection, and automatically generating tables based on the data source type), greatly improving work efficiency. Furthermore, the platform provides data model generation / synchronization functions (synchronizing model definitions with database tables), such as... Figure 4 As shown, the synchronization process is as follows:

[0048] (1) Obtain the corresponding script generator SqlMaker according to the data source type and check if the table exists. If it does not exist, proceed to steps (2) and (4); if it exists, proceed to steps (3) and (4).

[0049] (2) Generate table creation statements using the script generator SqlMaker;

[0050] (3) Determine the synchronization type. If it is normal synchronization, generate update statements through the script generator SqlMaker; if it is forced synchronization, generate table creation statements through the script generator SqlMaker. Simply put, normal synchronization directly changes the table structure. Forced synchronization means that there are some tables that already have data. If the original data type and the target data type do not match, the table structure change will fail. Therefore, you can use the strategy of deleting the table first and then creating the table.

[0051] (4) Execute the generated SQL set and the synchronization ends.

[0052] The script generator SqlMaker is a table operation SQL generator interface encapsulated by the platform of this invention. Currently, the platform of this invention supports mainstream SqlMaker, including MySQL, SQL Server and Oracle. It mainly generates SQL for updating tables, SQL for deleting tables, converts the configured column type to the database column type, SQL for adding columns, and SQL for adding indexes.

[0053] The dataset management unit allows users to organize data according to business scenarios and provides data support configuration for business activities. Configuration items include data source ID, main table name, main table configuration, related table configuration, filter condition configuration, and sorting configuration. A dataset is essentially a collection of business data related to business activities. Therefore, it should be composed of several data models combined through relevant relationships and conditions. Thus, dataset management can be constructed using the DataSet entity, including: data source ID, main table name, main table configuration (column names, types, lengths, constraints, etc.), related table configuration (primary key column names, related key names, relationship, related table column configuration, etc.), filter condition configuration, and sorting configuration. Through dataset management, data can be clearly organized according to business scenarios, providing data support configuration for business activities. After the dataset configuration is complete, the page designer can obtain the dataset configuration information through a standardized interface, allowing users to select configuration options.

[0054] The data source management unit, data model management unit, and dataset management unit are arranged sequentially. In other words, the user configures the data source (where the database is located), then configures the business-related data models on the data source, and finally associates and organizes the data models together to form a dataset.

[0055] The dataset binding module further includes:

[0056] The Component Service Management Unit is a general service interface abstracted by the platform, used to bind datasets to drag-and-drop controls in the page designer; the page displays the data by binding the datasets provided by the platform.

[0057] The Business Service Management Unit is a general service interface abstracted by the platform, used to implement page logic processes, such as providing business operation interfaces for parsing "code enhancement".

[0058] The dataset binding module is also used to bind the relationship between the list of draggable controls that are of interest to the listener and the query parameters of the current draggable control. When the data object involved in the corresponding control list changes, the query of the current draggable control will be automatically triggered to achieve the purpose of linked value setting.

[0059] Regarding event-based code enhancement

[0060] The platform design implements a code enhancement mechanism based on control events to meet the needs of complex business operations. Web page elements often include events such as "click," "double-click," "select," "mouse in," and "loss of focus." In existing technologies, developers typically need to manually register web page elements, then write the relevant data retrieval logic in the front-end code, and then send the data to the back-end. Back-end developers then need to validate, process, and store the data in the database. This invention's online software development platform designs three code enhancement strategies based on control events: front-end enhancement, back-end enhancement, and post-front-end enhancement. These strategies respectively support business operations that need to be processed before specific control events occur, business operations that need to be completed by the back-end when events occur, and business changes that need to occur when the front-end retrieves data returned from the back-end after an event. To simplify user operations, such as retrieving current data from page elements and setting initial table data, this invention's online software development platform encapsulates a large number of convenient and easy-to-use JavaScript APIs (some APIs are shown in Table 1), enabling configuration personnel to skillfully manipulate page elements and complete business requirements after becoming familiar with the APIs. Similarly, the platform also encapsulates a large number of Java APIs, providing configuration personnel with the ability to modify tables related to the dataset and return the operation results to the front end, so as to facilitate the modification of page elements after the completion of business functions. Some backend enhanced APIs are shown in Table 2.

[0061] Table 1 Front-end Enhancement APIs

[0062]

[0063]

[0064] Table 2 Backend Enhancement API

[0065]

[0066] Note: SqlResultBean is an execution result set encapsulated by the online software development platform, including resultId (i.e., the result ID, which represents the primary key ID returned for a newly added record if it is a new record) and resultList (i.e., the result set, which is a List). <Map<String,Object> The data storage object of the structure can generally contain all business records, as well as resultRowNums (i.e., the number of records returned).

[0067] Based on the same inventive concept, this application also provides a method for online software development using the online software development platform in Embodiment 1, as detailed in Embodiment 2.

[0068] Example 2

[0069] like Figure 5 As shown, this embodiment provides an online software development method, including the following steps:

[0070] S1. Design of page display content, that is, dragging and dropping the built-in drag-and-drop controls of the page designer onto the page, and configuring the properties and styles of each drag-and-drop control; the built-in drag-and-drop controls of the page designer include: button controls, single-line text controls, radio button controls, check box controls, date picker controls, drop-down list controls, table controls, and layout container controls;

[0071] S2. Configure the dataset, which means configuring the data source. Configure the various data models related to the business on the configured data source, and organize the various data models to form a dataset. There must be at least one dataset. If multiple people are configuring collaboratively, the configuration information is saved and then synchronized globally in the system.

[0072] Organize data according to business scenarios and configure data support for business activities. Configuration items include data source ID, main table name, main table configuration, related table configuration, filter condition configuration, and sorting configuration.

[0073] S3, Dataset Binding, involves selecting one dataset from at least one dataset and binding it to a drag-and-drop control on the page to populate the page with data via drag-and-drop. Additionally, it binds the relationship between the list of drag-and-drop controls of interest and the query parameters of the currently drag-and-drop control.

[0074] S4. Event-based code enhancement, which allows users to configure business enhancement code online through front-end enhancement API, back-end enhancement API, and front-end post-enhancement API to enhance control events; the control events include "click", "double-click", "select", "mouse enters" and "loses focus".

[0075] S5. Save all the configuration information of the page to get the URL, and set the URL as the menu.

[0076] Since the method described in Embodiment 2 of the present invention uses the apparatus employed in the method of Embodiment 1 of the present invention, those skilled in the art will understand that the features of the platform described in Embodiment 1 of the present invention are all designed for the platform development process, and therefore will not be described in detail here.

[0077] The technical solutions provided in this application embodiment have at least the following technical effects or advantages: The methods, apparatus, devices, and media provided in this application embodiment, and the online software development platform, implement a page designer on the front end based on Vue, with multiple built-in draggable controls and a configuration window for attributes and styles for each control. Users can design the content displayed on the page by dragging and dropping controls and configuring the linkage between them. Furthermore, based on the JAVA language and following J2EE design specifications, a general processing backend is implemented, providing data model management, dataset management, and general business object operation APIs. Based on page control events, controls are associated with data to complete data display. Moreover, all business implementations are fully configurable online.

[0078] While specific embodiments of the present invention have been described above, those skilled in the art should understand that the specific embodiments described are merely illustrative and not intended to limit the scope of the present invention. Equivalent modifications and variations made by those skilled in the art in accordance with the spirit of the present invention should be covered within the scope of protection of the claims of the present invention.

Claims

1. A software online development platform, characterized in that: The application comprises: a page designer for designing page display content, with multiple drag-and-drop controls and attribute and style configuration windows for each drag-and-drop control; a dataset configuration module for configuring data sources, configuring various data models related to the business on the configured data sources, and organizing the various data models to form a dataset, with at least one dataset; and supporting multi-person collaborative configuration, with the configuration information saved and synchronized globally in the system; a dataset binding module for users to select a dataset from at least one dataset and bind it to a drag-and-drop control of the page to fill the page with data through the drag-and-drop control; a code enhancement module providing front-end pre-enhancement API, back-end enhancement API, and front-end post-enhancement API based on control events, respectively, for supporting the business that needs to be processed before the occurrence of a specific event of the control, the business operation that needs to be completed by the background after the occurrence of the event, and the business changes that need to be generated by the foreground to obtain the data returned by the background after the occurrence of the event, for users to configure the business enhancement code online to enhance the code of the control event; and a saving module for saving all configuration information of the page to obtain a URL and setting the URL as a menu; The dataset configuration module further comprises: a data source management unit for users to configure data sources and perform addition, deletion, modification, and query on the data sources; and after the configuration information is saved, generating a Hikari database connection pool based on the configuration information for global synchronization in the system, which can automatically switch the data source when used; a data model management unit for users to define data models through online configuration to manage the data models, support multi-person collaborative configuration, and provide data model generation and synchronization functions; the synchronization process is as follows: (1) obtaining a corresponding script generator SqlMaker according to the data source type, checking whether the table exists, if not, entering steps (2) and (4), if exists, entering steps (3) and (4); (2) generating table creation statements through the script generator SqlMaker; (3) judging the synchronization type, if it is normal synchronization, generating update statements through the script generator SqlMaker; if it is forced synchronization, generating table creation statements through the script generator SqlMaker; in simple terms, normal synchronization is to directly modify the table structure, and forced synchronization indicates that there are some tables with data, and if the original data type and the target data type do not meet the requirements, the table structure modification will fail, so the strategy of deleting the table first and then creating the table can be adopted; (4) executing the generated SQL set, and the synchronization ends; a dataset management unit for users to organize data for business scenarios and provide data support configuration for business activities, with configuration items including data source id, data table main table name, main table configuration, associated table configuration, filtering condition configuration, and sorting configuration; The dataset binding module further comprises: a component service management unit for binding the dataset to the drag-and-drop control in the page designer; a business service management unit for implementing the process of page logic; The data set binding module is also used for binding the relationship between the list of drag controls of interest and the query parameters of the current drag control, and when the data object involved in the corresponding control list changes, the query of the current drag control is triggered automatically to achieve the purpose of linkage setting.

2. The software online development platform of claim 1, characterized in that: The drag controls built-in the page designer include button controls, single-line text controls, single-selection box controls, check box controls, date selector controls, drop-down box controls, table controls and layout container controls; The control events include "single click", "double click", "selection", "mouse entry" and "loss of focus".

3. A method for online development of software, characterized by: The method comprises the following steps: S1, design of page display content, that is, drag the drag controls built-in the page designer to the page, and configure the properties and styles of each drag control; S2, configure data sets, that is, configure data sources, configure each data model related to the business on the configured data source, associate and organize each data model to form a data set, and the data set is at least one; if multiple people collaborate to configure, the configuration information is saved and synchronized globally in the system; data is also organized for the business scenario, and data support configuration is performed for the business activities, and the configuration items include data source id, data table main table name, main table configuration, associated table configuration, filtering condition configuration and sorting configuration; The global synchronization process is as follows: (1) obtain the corresponding script generator SqlMaker according to the data source type, check whether the table exists, if not, go to step (2) and (4), if yes, go to step (3) and (4); (2) generate table creation statements through the script generator SqlMaker; (3) judge the synchronization type, if it is normal synchronization, generate update statements through the script generator SqlMaker; if it is forced synchronization, generate table creation statements through the script generator SqlMaker; simply speaking, normal synchronization is to directly change the table structure, and forced synchronization means that there are some tables with data, if the original data type and the target data type do not meet the requirements, the table structure change will fail, so the strategy of deleting the table first and then creating the table can be adopted; (4) execute the generated SQL set, and the synchronization is completed; S3, data set binding, that is, select a data set from at least one data set and bind it to the drag controls of the page to fill the data of the page through the drag controls; also bind the relationship between the list of drag controls of interest and the query parameters of the current drag control; S4, code enhancement based on control events, that is, through front-end enhancement API, back-end enhancement API and front-end back-end enhancement API, respectively used to support the business that needs to be processed before the occurrence of a specific event of the control, the business operation that needs to be completed by the background after the occurrence of the event, and the business changes that need to be generated by the foreground to obtain the data returned by the background after the occurrence of the event, for users to configure online business enhancement code to enhance the code of the control event; S5, save all the configuration information of the page to obtain a URL, and set the URL as a menu.

4. The method of claim 3, wherein: The built-in drag control of the page designer includes button control, single-line text control, single-selection box control, check box control, date selector control, drop-down box control, table control and layout container control. The control events include "single click", "double click", "selection", "mouse entry" and "losing focus".

Citation Information

Patent Citations

  • WEB-based online form development tool

    CN102360296A

  • Source code auxiliary generating tool and generating method thereof

    CN107357942A

  • Code generation method and device, computer equipment and storage medium

    CN111309303A