CN117667086A - Method for generating front-end page by dragging component - Google Patents
Method for generating front-end page by dragging component Download PDFInfo
- Publication number
- CN117667086A CN117667086A CN202311430344.1A CN202311430344A CN117667086A CN 117667086 A CN117667086 A CN 117667086A CN 202311430344 A CN202311430344 A CN 202311430344A CN 117667086 A CN117667086 A CN 117667086A
- Authority
- CN
- China
- Prior art keywords
- page
- model
- component
- cloud database
- generating
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 21
- 238000011161 development Methods 0.000 claims abstract description 19
- 238000009877 rendering Methods 0.000 claims abstract description 15
- 238000004891 communication Methods 0.000 claims description 4
- 238000013439 planning Methods 0.000 abstract description 6
- 230000018109 developmental process Effects 0.000 description 17
- 238000013461 design Methods 0.000 description 9
- 230000000694 effects Effects 0.000 description 9
- 238000012986 modification Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 230000008859 change Effects 0.000 description 3
- 238000005457 optimization Methods 0.000 description 3
- 238000010276 construction Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 238000000926 separation method Methods 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 238000012384 transportation and delivery Methods 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 238000004458 analytical method Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 239000003607 modifier Substances 0.000 description 1
- 230000002688 persistence Effects 0.000 description 1
- 230000002035 prolonged effect Effects 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 238000004904 shortening Methods 0.000 description 1
- 230000033772 system development Effects 0.000 description 1
- 238000012549 training Methods 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
Classifications
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method for generating a front page by a dragging component, which belongs to the technical field of computers and comprises the following steps: firstly, building a model required by application operation according to a predefined functional module by a development platform, instantiating the built model, and storing the model in the cloud database in a form of structured data; and step two, the operation platform acquires a model instance stored in the cloud database, analyzes and operates the structured modeling data in the model instance through a corresponding engine, and renders an application system page and expresses business logic through a page rendering engine to obtain the application system. The method for generating the front-end page has the characteristics of low threshold, convenience in decoupling with software and high multiplexing degree, and can solve the problems in the prior art. The planning threshold is high, and customization compatibility is poor.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a method for generating a front page by a dragging component.
Background
As the pace of enterprise digital transformation continues to increase, various management systems have evolved. However, the traditional management system development mode needs developers to develop pages from zero, and has long period and much manpower.
The drag component generates the page, which is a technology for realizing rapid development through visual modeling, and can greatly improve the efficiency and quality of software development. Especially for small and medium enterprises, the page generated by the dragging component can greatly reduce the informatization construction cost of the small and medium enterprises, and can better meet the iteration requirement of the small and medium enterprises.
The drag component of the prior art is actually a front-end component, and has some attribute configuration, and thus has many drawbacks, such as (1) that for non-technicians or beginners, a certain amount of learning and training may still be required to be proficient in use; (2) For some special requirements or customization requirements, it may not be fully satisfied; (3) The drag component designer configuration interaction event may contain more redundant rendering and interaction logic, resulting in reduced performance of the application. Especially when designing complex pages or using a large number of components, care needs to be taken to optimize performance.
Disclosure of Invention
The invention aims to provide a method for generating a front-end page by a dragging assembly, which has the characteristics of low threshold, convenience in decoupling with software and high multiplexing degree, and can solve the problems in the prior art. The planning threshold is high, and customization compatibility is poor.
In order to achieve the above purpose, the technical scheme adopted by the invention is as follows:
a method for generating a front page by a drag component, the method for generating a front page by a drag component running on a development system, the development system comprising: the system comprises a development platform, an operation platform and a cloud database;
the development platform is in communication connection with the cloud database, and is used for building a model required by application operation according to a predefined functional module, instantiating the built model and storing the model in the cloud database in a form of structured data;
the operation platform is in communication connection with the cloud database and is used for acquiring a model instance stored in the cloud database, analyzing and operating the structured modeling data in the model instance through a corresponding engine, and rendering an application system page and expressing business logic to obtain an application system;
the method for generating the front page by the dragging component comprises the following steps: firstly, building a model required by application operation according to a predefined functional module by a development platform, instantiating the built model, and storing the model in the cloud database in a form of structured data;
and step two, the operation platform acquires a model instance stored in the cloud database, analyzes and operates the structured modeling data in the model instance through a corresponding engine, and renders an application system page and expresses business logic through a page rendering engine to obtain the application system.
As a further optimization of the scheme of the application, the page rendering engine includes the steps of firstly, storing configuration attributes of each component into json data packets according to frame grammar;
step two, traversing each component according to a nested sequence during rendering, acquiring configuration attributes of the components, and dynamically loading the configuration of the components to component nodes;
and step three, binding the special events of the components.
Compared with the prior art, the invention has the following beneficial effects:
(1) The page planning delivery cycle is shorter, because the software development process is shortened to three steps of analysis, configuration and test, time is not required to be spent in the process of irrelevant services such as design, coding, deployment and the like, only a small amount of service tests are required to be carried out, so that the configuration is ensured to be free from errors, and the delivery cycle can be shortened by at least 80%.
(2) The page planning threshold is lower, and because the invention realizes the separation of business and codes through the modeling and the engine, the development of application type software is not required to be realized through programming, so that business personnel with a certain IT background can develop the software, and the development threshold of the application type software is greatly reduced.
(3) The development platform assembly is quite rich due to the shortening of the period and the reduction of the threshold, so that more manpower and development period are saved, and the software development cost is greatly reduced.
(4) The invention makes the specific business logic of application software stored in the form of structured data, and realizes separation from program code (mainly the engine group code of the operation platform), if there is new business demand, it is unnecessary to change the bottom program code of the operation platform, and the demand change can be realized by adjusting the modeling data of the application. In addition, since code is not required to be considered, handover maintenance of software development work becomes more convenient.
(5) The page planning multiplexing degree is higher, because the software developed based on the system of the invention runs in the running platform, a set of engine group codes is essentially shared, and only different functions are combined through different modeling data rendering, namely, most of service combinations can be met through a shared running platform.
(6) The method realizes decoupling of software functions and technology, and when the running platform upgrades the capability (such as performance optimization, compatibility optimization and the like) of an engine group and even upgrades the technical stack and the framework of the whole running platform, the application modeling data is not required to be modified, so that effects can be generated on all application software on the running platform, and the life cycle of the software is greatly prolonged.
Drawings
FIG. 1 is a schematic diagram of an exemplary drag assembly according to the present invention;
FIG. 2 is a schematic diagram of a drag generation page according to the present invention;
FIG. 3 is a component property area of the present invention;
FIG. 4 is a component date property configuration interface of the present invention;
FIG. 5 is a custom binding event configuration interface for a business component of the present invention;
FIG. 6 is a flow chart of the drag generating assembly of the present invention;
FIG. 7 is a flow chart of an automatic rendering method of the present invention.
Detailed Description
The invention is further described with reference to the following detailed drawings in order to make the technical means, the creation characteristics, the achievement of the purpose and the effect of the implementation of the invention easy to understand.
In order to solve the problem that the existing drag generation page has high planning threshold and poor customization compatibility, the drag method of the application is based on a development system comprising a development platform, an operation platform and a cloud database, and the method for generating a front-end page by a drag component is shown in fig. 6, and comprises the following steps: firstly, building a model required by application operation according to a predefined functional module by a development platform, instantiating the built model, and storing the model in the cloud database in a form of structured data; and step two, the operation platform acquires a model instance stored in the cloud database, analyzes and operates the structured modeling data in the model instance through a corresponding engine, and renders an application system page and expresses business logic through a page rendering engine to obtain the application system.
The page rendering engine is shown in fig. 7, and includes the steps of firstly, storing configuration attributes of each component into json data packets according to frame grammar; step two, traversing each component according to a nested sequence during rendering, acquiring configuration attributes of the components, and dynamically loading the configuration of the components to component nodes; and step three, binding the special events of the components.
Specifically, for service logic, a field data structure is configured and generated in a platform, data structure modeling is related to service data persistence of a page, and a table structure in a physical database is stored, wherein the table structure comprises information such as basic table attributes (field names and remarks), columns, data types, lengths, primary keys, non-null keys, indexes, constraints, descriptions and the like. The business rule modeling is related to the component type and business logic of the page, and stores the information of the business component type, data source, verification rule, linkage rule, business logic and the like of the page. The interface layout modeling is related to the layout style of the page presented in the browser, and stores the page layout style corresponding to the terminal (PC end). When modeling a page, the page is mainly divided into two main categories: form entry page and form business data display page. The page layout is of a responsive type, and is not of a non-responsive type, so that most page scene requirements of PC end users are met. When the page is modeled, a user draws the page by dragging a visual designer provided by the platform in a drag-and-drop mode, and configures information such as page name, field name, data source, check rule, linkage rule and the like. And then, the page dragging component platform converts the information configured by the user into structural data (JSON format) of data structure modeling, business rule modeling and interface layout modeling through modeling warehouse service, and stores the structural data into a cloud database. The page flag information includes a data ID, a data creator, a data creation time, a data modifier, a data modification time, a page name, and a page operation event. The user can find the page data configured before through the data so as to facilitate the next modification. The whole process is transparent to the user, and the user can complete the construction of the data of the application software in the running process only by focusing on the layout style of the page and the configuration of the business rules. The interface designer defines and provides properties and functionality for a variety of drag components.
In actual use, as shown in FIG. 1, the components include text boxes, buttons, images, forms, etc., and the user generates corresponding components on the page by clicking and dragging the components to the target location, as shown in FIG. 2. The user can drag the component to any location of the page while also supporting undo and redo operations.
An interface is provided for the user to set the properties of each component, as shown in fig. 3, which may include color, size, font, background, etc., as shown in fig. 4. The user can adjust these properties by himself to achieve a personalized page design. The system provides the self-adaptive effect of all components to automatically support pages, namely, the system adapts to various screen sizes without deformation.
In this example, the designer provides common layout components (such as a row, a column, two columns, three columns, a group, a tab, etc.) and business components (such as a single line of text, a plurality of lines of text, a number, a rich text, a single box, a plurality of boxes, a time date, a file upload, a personnel department selection, a sub-list, a multi-list association, etc.), and the design of the business page can be completed by dragging. The design interface of the page designer consists of three parts, wherein the left part is an optional component panel, and a layout component/business component/field component which is expected to be added is selected from the panel and added in a dragging mode. The middle part is a graphic interface design effect display panel, and a user drags the layout components/service components/field components from the left selectable component panel to the graphic interface design effect display panel and places the graphic interface design effect display panel at a proper position to finish the primary design of the interface. The right part is a configuration page, and a user performs configuration and modification of parameters in the corresponding configuration page displayed on the right side in a layout component/service component/field component which needs to perform detailed data configuration in the graphical interface design effect display panel. And selecting a field component from the left side, dragging the field component to the middle effect display panel, automatically binding data by the component, and updating the corresponding component on the page when the data change. And selecting a service component from the left side, dragging the service component to the middle effect display panel, wherein the service component has fixed service characteristics, and executing corresponding events by default when the service component is operated. If the component is submitted, when the component is operated, the data representing the form page is submitted to a server to be updated to a cloud database; and deleting the component, and deleting cloud service data of the currently selected row when the component is operated. At the same time, these components can bind other custom dynamic business logic as shown in FIG. 5.
The color of the page component can be set to be the global theme color, and the color is set by one key, so that respective operations are not needed, and the time and the operation cost are saved.
The foregoing has shown and described the basic principles and main features of the present invention and the advantages of the present invention. It will be understood by those skilled in the art that the present invention is not limited to the embodiments described above, and that the above embodiments and descriptions are merely illustrative of the principles of the present invention, and various changes and modifications may be made without departing from the spirit and scope of the invention, which is defined in the appended claims. The scope of the invention is defined by the appended claims and equivalents thereof.
Claims (2)
1. A method for generating a front page by a dragging component is characterized in that: the method for generating the front page by the dragging component operates on a development system, and the development system comprises the following steps: the system comprises a development platform, an operation platform and a cloud database;
the development platform is in communication connection with the cloud database, and is used for building a model required by application operation according to a predefined functional module, instantiating the built model and storing the model in the cloud database in a form of structured data;
the operation platform is in communication connection with the cloud database and is used for acquiring a model instance stored in the cloud database, analyzing and operating the structured modeling data in the model instance through a corresponding engine, and rendering an application system page and expressing business logic to obtain an application system;
the method for generating the front page by the dragging component comprises the following steps: firstly, building a model required by application operation according to a predefined functional module by a development platform, instantiating the built model, and storing the model in the cloud database in a form of structured data;
and step two, the operation platform acquires a model instance stored in the cloud database, analyzes and operates the structured modeling data in the model instance through a corresponding engine, and renders an application system page and expresses business logic through a page rendering engine to obtain the application system.
2. The method for generating a front page by a drag component according to claim 1, wherein: the page rendering engine comprises the steps of firstly, storing configuration attributes of each component into json data packets according to frame grammar;
step two, traversing each component according to a nested sequence during rendering, acquiring configuration attributes of the components, and dynamically loading the configuration of the components to component nodes;
and step three, binding the special events of the components.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311430344.1A CN117667086A (en) | 2023-10-31 | 2023-10-31 | Method for generating front-end page by dragging component |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311430344.1A CN117667086A (en) | 2023-10-31 | 2023-10-31 | Method for generating front-end page by dragging component |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117667086A true CN117667086A (en) | 2024-03-08 |
Family
ID=90063087
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311430344.1A Pending CN117667086A (en) | 2023-10-31 | 2023-10-31 | Method for generating front-end page by dragging component |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117667086A (en) |
-
2023
- 2023-10-31 CN CN202311430344.1A patent/CN117667086A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN114035773B (en) | Configuration-based low-code form development method, system and device | |
| US20190220556A1 (en) | Modeling and simulation | |
| CN106020950B (en) | The identification of function call graph key node and identification method based on Complex Networks Analysis | |
| JP3136035B2 (en) | Automatic layout generator for database system interface and method for generating the same | |
| US8479093B2 (en) | Metamodel-based automatic report generation | |
| US7707486B2 (en) | Logical spreadsheets | |
| CN110673848B (en) | Enterprise information management system configuration device based on JavaWeb | |
| US20080307490A1 (en) | Methods and apparatus for building and executing natural language workflow functions | |
| CN114461200A (en) | Low-code development application and method based on cloud SaaS platform | |
| CN110543303A (en) | Visual business platform | |
| CN111784108B (en) | Modeling method and device of main data management platform | |
| CN111625226A (en) | Prototype-based human-computer interaction design implementation method and system | |
| CN103593414A (en) | Showing method and device of webpages in browser | |
| Renfro | Econometric software: The first fifty years in perspective | |
| CN116468010A (en) | Report generation method, device, terminal and storage medium | |
| JP2020017277A (en) | Web reporting design system for programming event operation, based on graphic interface | |
| US20060047723A1 (en) | Custom database system and method of building the same | |
| JPH10254689A (en) | Application constitution design supporting system for client/server system | |
| US11663199B1 (en) | Application development based on stored data | |
| US20100011018A1 (en) | Custom database system and method of building the same | |
| CN113010168A (en) | User interface generation method based on scene tree | |
| CN117667086A (en) | Method for generating front-end page by dragging component | |
| CN110222032A (en) | A kind of generalised event model based on software data analysis | |
| CN115713309A (en) | Internal auditing system | |
| US9372844B2 (en) | Automatically generating a business process flow GUI using a symbolic annotation language |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |