CN116225429A - Pulling type component frame-based ipage webpage type low-code development platform - Google Patents
Pulling type component frame-based ipage webpage type low-code development platform Download PDFInfo
- Publication number
- CN116225429A CN116225429A CN202211728162.8A CN202211728162A CN116225429A CN 116225429 A CN116225429 A CN 116225429A CN 202211728162 A CN202211728162 A CN 202211728162A CN 116225429 A CN116225429 A CN 116225429A
- Authority
- CN
- China
- Prior art keywords
- component
- data
- interface
- configuration
- components
- 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
- 238000011161 development Methods 0.000 title claims abstract description 62
- 230000000007 visual effect Effects 0.000 claims abstract description 22
- 238000012423 maintenance Methods 0.000 claims abstract description 16
- 230000002452 interceptive effect Effects 0.000 claims abstract description 8
- 238000013461 design Methods 0.000 claims description 25
- 238000007726 management method Methods 0.000 claims description 23
- 230000006870 function Effects 0.000 claims description 19
- 238000009877 rendering Methods 0.000 claims description 18
- 238000010276 construction Methods 0.000 claims description 12
- 238000000034 method Methods 0.000 claims description 12
- 238000012360 testing method Methods 0.000 claims description 10
- 238000013499 data model Methods 0.000 claims description 9
- 239000000463 material Substances 0.000 claims description 8
- 238000013523 data management Methods 0.000 claims description 6
- 238000012545 processing Methods 0.000 claims description 6
- 230000003993 interaction Effects 0.000 claims description 5
- 230000008859 change Effects 0.000 claims description 4
- 238000012795 verification Methods 0.000 claims description 4
- 230000006978 adaptation Effects 0.000 claims description 3
- 238000004458 analytical method Methods 0.000 claims description 3
- 230000002457 bidirectional effect Effects 0.000 claims description 3
- 238000004422 calculation algorithm Methods 0.000 claims description 3
- 238000012938 design process Methods 0.000 claims description 3
- 230000000694 effects Effects 0.000 claims description 3
- 230000003862 health status Effects 0.000 claims description 3
- 238000005259 measurement Methods 0.000 claims description 3
- 230000004048 modification Effects 0.000 claims description 3
- 238000012544 monitoring process Methods 0.000 claims description 3
- 230000008520 organization Effects 0.000 claims description 3
- 230000000644 propagated effect Effects 0.000 claims description 3
- 238000013500 data storage Methods 0.000 claims description 2
- 238000012986 modification Methods 0.000 claims description 2
- 230000000737 periodic effect Effects 0.000 claims description 2
- 230000018109 developmental process Effects 0.000 description 37
- 238000010586 diagram Methods 0.000 description 8
- 230000000977 initiatory effect Effects 0.000 description 3
- 239000003086 colorant Substances 0.000 description 2
- 238000013079 data visualisation Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000013515 script Methods 0.000 description 2
- 238000013473 artificial intelligence Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 230000027455 binding Effects 0.000 description 1
- 238000009739 binding Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 238000012827 research and development Methods 0.000 description 1
- 230000011218 segmentation Effects 0.000 description 1
- 238000012384 transportation and delivery Methods 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/44—Encoding
- G06F8/447—Target code generation
Abstract
The invention discloses an ipage webpage type low-code development platform based on a dragging type component framework, and relates to the field of development platforms. At present, the layer-type development of the power industry is troublesome. The system comprises a data layer, an intelligent operation and maintenance layer, an integrated access layer and an application development framework layer; the application development framework layer divides the webpage development mode into a data asset module, a model driving module, an application development engine module and a component warehouse module; the user can realize the display and interactive operation of the basic data through the customized and personalized drag type configuration, and a low-code configuration platform for supporting the visual configuration of the front-end interface is formed; and utilizing the cloud component to perform visual configuration by adopting operations including clicking and dragging, and constructing a layer application. According to the technical scheme, the application building threshold is reduced, dependence on professional development engineers is reduced, the business department automatically builds an application platform in a dragging and stacking mode, personalized requirements of the business department are met, and labor cost is reduced.
Description
Technical Field
The invention relates to the field of development platforms, in particular to an ipage webpage type low-code development platform based on a dragging type component framework.
Background
There are also some similar products at home and abroad, such as kepler.gl, which is an open source tool developed by Uber for performing space data visualization, through which kepler.gl is an interface package opened towards Python, data in various formats can be transferred into jupyter notebook by writing Python codes, various abundant space data visualization functions built in the interactive window embedded into a personal computer can be used, and visualization of a data map can be realized without any programming basis, but kepler.gl is greatly limited by MapBox company, map sources other than MapBox company cannot be selected, and the method is not friendly to domestic developers. The new Del sink under the Meinabai family flag encapsulates Openlayers based on Vue, xdh-map3, xdh-map provides 20 components such as text, graphics and thermodynamic diagram, a developer does not need to know expertise related to a map, and can realize a general map function even without writing extra codes, but the functions are not perfect enough, such as a map layer only supports a tile map layer and a GeoJSON vector map layer, and the limitation is larger. At present, both domestic and foreign, each large supplier has both general-purpose and vertical products when developing multi-layer application. However, the general type is much more complex than the products in the vertical field, but none of them is biased towards the power industry in the vertical field. Since the power industry has high customizability for business data configuration, and it is difficult for the next few years to have a layer-type development tool suitable for the power industry appear.
Disclosure of Invention
The technical problems to be solved and the technical task to be put forward in the invention are to perfect and improve the prior art scheme, and provide an ipage webpage type low-code development platform based on a dragging type component frame so as to efficiently realize the purpose of layer development in the power industry. For this purpose, the present invention adopts the following technical scheme.
The system comprises an ipage webpage type low-code development platform based on a drag type component framework, wherein the development platform comprises a data layer, an intelligent operation and maintenance layer, an integrated access layer and an application development framework layer;
data layer: the system comprises a database, personnel information and interface basic metadata information, wherein the database and personnel information are used for recording data in each project development stage;
intelligent operation and maintenance layer: the system is used for providing an independent and open historical/real-time data acquisition and algorithm analysis platform and integrating IT data and business index data; the dependency on different team component libraries is dynamically analyzed, so that the own characteristic component warehouse of the team is ensured; monitoring the performance indexes of interfaces of all systems, and collecting buried points for interface error information, service health status and using liveness;
integrated access layer: the method is used for authority access, service access of a business center station and third party private service access;
application development framework layer: dividing the webpage development mode into a data asset module, a model driving module, an application development engine module and a component warehouse module; the user can realize the display and interactive operation of the basic data through the customized and personalized drag type configuration, and a low-code configuration platform for supporting the visual configuration of the front-end interface is formed; and the editor based on the low-code configuration platform renders the components according to requirements by adding markers in the component files of the component warehouse module, the cloud components facing diversified service scenes are formed after the combined atomic components in the component warehouse module are uploaded, and visual configuration is carried out by adopting operations comprising clicking and dragging by utilizing the cloud components, so that the layer application is constructed.
The invention solves the problems that the level and time investment of page developers are seriously depended, the front-end technology stack is increased, the front-end technology stack is thickened, the selection is difficult, the difficulty of the hand is increased, and the like, and provides the method for forming the free configuration and the component expansion by utilizing the low-code platform, so that the resource waste caused by repeated construction can be reduced, and the demand delivery efficiency is improved.
As a preferable technical means: the data asset module is used for integrating service interface documents, interface debugging, interface use cases, interface automatic testing, data modeling and dictionary management; the data synchronization problem among a plurality of systems is solved through one set of system and one data.
As a preferable technical means: according to the standard data center construction mode, the method is divided into a majority of standard establishment and model design 2; the on-line design of the standard and model design can be established on line, no on-line maintenance of separate data standard documents and data model documents is needed, after the model design is completed by common developers, the model is submitted to an administrator for verification, and the on-line/change operation is allowed after the model is verified; wherein the data bin level, the standard design and the model element belong to table level definition, and the data word list, the word root and the code table belong to field level definition; ensuring service safety through a strategy comprising high-availability deployment of service and periodic backup of data; the bottom layer can integrate a data security component, and in terms of service security, the characteristics of row and column authority control, various authentication modes and national encryption are supported, so that the user data security is ensured.
As a preferable technical means: the model driving module helps a user to complete the design and management of a data model and a logic table by constructing model data of a power grid model, a service scene and measurement information; enabling a user to manage a hierarchical structure of the data model and designing a logic table field; under the constraint of data standard, the field design refers to standard data element definition in the model design process, and sets the standard quality rule related to the logic table, so as to ensure that different logic table designers operate according to the uniform caliber.
As a preferable technical means: the application development engine module provides custom components and component library management capability based on own component extension protocol, and the custom requirements of the service are realized through the functions, the attributes and the styles of the custom components.
As a preferable technical means: the component warehouse module is used for providing metadata of the one-key generation component, and generating scenerization components required by each service by assembling and event maintenance of a plurality of atomic components through business division; and a diversified assembly material center is built by relying on a middle and background material asset package protocol, so that a developer is helped to quickly build a service module to optimize an application scene.
As a preferable technical means: the platform performs corresponding core function division on working space management, data management and project management through role authority allocation; the working space management function configures different working spaces and manages configuration services comprising items, data and interfaces through the spaces; the data management function is used for realizing the bidirectional adaptation of data, and processing and converting basic data according to the need to provide the basic data for an interface; the project management function interface configuration realizes the display and interactive operation of basic data through user-defined and personalized drag configuration; the abstract data and the interface elements are bound in two directions, rich interaction support is provided, and a display effect is achieved, so that a low-code configuration platform supporting the visual configuration of the front-end interface is formed.
As a preferable technical means: the platform adopts a visual configuration system matched with the layer rendering assembly for use, so that the operation uses a visual interface to build the layer page in a customized way;
based on a standard programming interface for processing the extensible markup language, referring to a document object model when a component rendering engine is constructed, adding the category, the attribute set and the influence factor of the component into a rendering tree, and expanding the semantics of the component;
the effective content of the whole interface is stored on metadata leaf nodes, and the rest nodes store component positions, content blocks, appearance characteristics and expansion events; describing a line graph coordinate system by using the component labels and the attribute emphasis rendering information; the component influence factors are used for expressing the relative degree of the influence of the components on the interface content, and comprehensively considering the category of the components and the label emphasis attribute construction; the categories include containers, data displays, forms, charts, maps, business; the influencing factors are propagated, and the components below the container components are transmitted downwards; the DSL model adds the component object to add the mouse event, the component cache traversal and the style support, and the user drags the component, adjusts the attribute and configures the event.
A component Definition Structure (DSL) determines corresponding field information by defining each component, which includes 3 parts: the unique tag body of the BaseComponent component is used for identifying a identifier of a browser based on html text markup language rules; a BaseConfig component configuration item, which defines the type, appearance and attribute configuration items of the component; the initial value of the DefaultConfig component is defined, and the initial rendering related information of the component is defined;
DSL layer agrees with the assembly to the data protocol, including the editable attribute, edit type, initial value of the assembly, facilitate the assembly expansion of later stage, help the development of the back-end language and data storage; the component configuration item agrees that if 3 or more components have common configuration attributes, the components are uniformly maintained under the component/bas, and the components are maintained and used as required by common components; if the components are required to be displayed and used in the grid editor and the layer editor in the component application convention, the components of the current version are required to be maintained to the corresponding path positions.
As a preferable technical means: the visual configuration system is provided with an assembly interface, and the assembly interface is provided with a navigation area and a working space area;
the workspace area is an area where organization members co-develop, and in the workspace, group members cooperate together in different roles to complete creation and modification of data sources, data sets, forms/charts, dashboards, frameworks, components.
As a preferable technical means: when the click working space triggers the project management module to carry out page configuration, displaying a configuration interface, wherein the configuration interface is divided into three areas, a left area is a component column, and functional components are placed in the component column; the middle area is a programming area, the programming area uses grids to carry out typesetting and layout, and functional components are placed in the grids in a dragging mode; the right area is an attribute configuration area, the attribute of the component is configured, and after clicking the component in the selected compiling area, the specific content item of the corresponding component is displayed.
The beneficial effects are that: according to the technical scheme, the application building threshold is reduced, dependence on professional development engineers is reduced, the business department automatically builds an application platform in a dragging and stacking mode, personalized requirements of the business department are met, labor cost is reduced, the process of repeated communication with research and development departments is reduced, and the whole development period of a project is shortened. In the later operation and maintenance, the iteration speed based on the iPrime is high, and the flexibility is higher. And the cross-platform deployment application is supported, the advantages are obvious compared with the traditional software development, and the application scene is richer.
Drawings
Fig. 1 is a functional block diagram of an assembly interface of the present invention.
Fig. 2 is a flow chart of the present invention.
Fig. 3 is an interface assembly diagram of the present invention.
Fig. 4 is a system architecture diagram of the present invention.
FIG. 5 is a logical view of a data asset of the present invention.
FIG. 6 is a diagram of interface engine driving logic of the present invention.
Fig. 7 (a), 7 (b) are component DSL rendering mechanical diagrams of the present invention.
Fig. 8 is a schematic diagram of the component materials of the present invention.
FIG. 9 is an interface assembly logic diagram of the present invention.
Detailed Description
First, some technical terms are explained:
python: an object-oriented computer programming language is commonly applied to the directions of scientific calculation and statistics, artificial intelligence, software development and the like.
Openlayers: the system is a class library package specially developed and provided for the webpage GIS client and is used for realizing map data access published in a standard format.
DSL: (DomainSpecificLanguage) is a computer programming language with limited expressive power for a field. Are commonly used in the field or problem of focus specification.
The technical scheme of the invention is further described in detail below with reference to the attached drawings.
As shown in fig. 4, the ip web page type low code development platform based on the drag component framework comprises a data layer, an intelligent operation and maintenance layer, an integrated access layer and an application development framework layer;
data layer: the system comprises a database, personnel information and interface basic metadata information, wherein the database and personnel information are used for recording data in each project development stage;
intelligent operation and maintenance layer: the system is used for providing an independent and open historical/real-time data acquisition and algorithm analysis platform and integrating IT data and business index data; the dependency on different team component libraries is dynamically analyzed, so that the own characteristic component warehouse of the team is ensured; monitoring the performance indexes of interfaces of all systems, and collecting buried points for interface error information, service health status and using liveness;
integrated access layer: the method is used for authority access, service access of a business center station and third party private service access;
application development framework layer: dividing the webpage development mode into a data asset module, a model driving module, an application development engine module and a component warehouse module; the user can realize the display and interactive operation of the basic data through the customized and personalized drag type configuration, and a low-code configuration platform for supporting the visual configuration of the front-end interface is formed; and the editor based on the low-code configuration platform renders the components according to requirements by adding markers in the component files of the component warehouse module, the cloud components facing diversified service scenes are formed after the combined atomic components in the component warehouse module are uploaded, and visual configuration is carried out by adopting operations comprising clicking and dragging by utilizing the cloud components, so that the layer application is constructed.
As shown in FIG. 5, the data assets are intended to serve interface documentation, interface debugging, interface use cases, interface automation testing, data modeling, dictionary management integration collaboration. The data synchronization problem among a plurality of systems is solved through one set of system and one data. The standard data center construction model is divided into "standard establishment" and "model design" 2. The on-line design of the standard and the model can be established on line, the contents such as a separate data standard document, a data model document and the like are not required to be maintained off line, after the model design is completed by common developers, the models are required to be submitted to an administrator for verification, and the on-line/change operation is allowed after the models are subjected to the verification. Wherein the data bin level, the standard design and the model element belong to table level definition, and the data word list, the word root and the code table belong to field level definition; the service safety is ensured through strategies such as high-availability service deployment, regular data backup and the like; the bottom layer can integrate a data security component, can support characteristics of row and column authority control, various authentication modes, national encryption and the like in the aspect of service security, and ensures the security of user data.
The model driving is to help users to complete the design and management of the data model and the logic table by building model data such as a power grid model, a business scene, measurement information and the like. The user can manage the hierarchical structure of the data model and design the logical table fields. Under the constraint of data standard, the field design needs to set the standard quality rule related to the logic table by referring to standard data element definition in the model design process, so that different logic table designers can operate according to the uniform caliber.
As shown in fig. 6 and fig. 7 (a) and 7 (b), an application development engine module; based on the own component extension protocol, the customized component and the component library management capability are provided, and the customized requirement of the service can be more conveniently realized through the functions, the attributes and the styles of the customized component.
As shown in fig. 8, the component repository module provides one-key generation component DSL schema metadata, and can assemble and maintain multiple atomic components by dividing services, so as to generate the scenerization components required by each service. And a diversified assembly material center is built by relying on a middle and background material asset package protocol, so that a developer is helped to quickly build a service module to optimize an application scene.
The platform construction of the technical scheme comprises the following steps:
and (3) a step of: based on the support of the bottom layer service, a back-end software tool for realizing the front-end application requirement is quickly constructed by combining the actual conditions of the service, the operation habit, the project construction mode and the like;
and II: the platform divides corresponding core functions of working space management, data management, project management and the like through role authority allocation, the working space management functions configure different working spaces, and configuration services such as project, data, interfaces and the like are managed through the spaces; the data management function is used for realizing the bidirectional adaptation of data, and processing and converting basic data according to the need to provide the basic data for an interface; the project management function interface configuration realizes the display and interactive operation of basic data through user-defined and personalized drag configuration;
3. the abstract data and the interface elements are bound in two directions, rich interaction support is provided, and a graceful display effect is achieved, so that a low-code configuration platform supporting front-end interface visual configuration is formed, an editor based on the low-code configuration platform renders the assembly through an assembly basic definition driving template engine, a cloud assembly facing diversified service scenes is formed, and meanwhile, the requirements of each service are met;
4. the developed layer rendering engine performs visual configuration on the developed cloud component by using simple clicking, dragging and other operations, and can construct a layer application;
aiming at visual development, the visual configuration system matched with the layer rendering component is designed, so that a user can build a layer page in a customized way by using a visual interface under the condition of no interface development programming experience, and a reference value is provided for subsequent development and application.
As shown in fig. 1, the third and fourth steps are specifically described as follows:
the standard programming interface for processing the extensible markup language based on W3C organization recommendation refers to a document object model when a component rendering engine is constructed, adds the category, the attribute set and the influence factor of the component into a rendering tree, and extends the semantics of the component.
The active content of the entire interface is stored on metadata leaf nodes, with the remaining nodes hosting component locations, content chunks, appearance characteristics, and extension events. The line map coordinate system is clearly described using component tags and attributes to emphasize rendering information, such as axis attributes of the < GLine > line map component. In addition, the impact of different classes of nodes on their descendant node content blocks is also different.
The component influence factor is used to indicate the relative degree of influence of the component on the interface content, and the larger the value is, the higher the influence degree is. Component impact factors comprehensively consider the class (container, data presentation, form, chart, map, business, etc.) and label emphasis attribute construction of the component. While the influencing factors are propagated, the components below the container components should be passed down. I (component) = Σni=influence (P); p is a container node, and n is a container node tree.
The DSL model adds the component object to add the mouse event, the component cache traversal and the style support, and the user drags the component, adjusts the attribute and configures the event.
The front-end component is an important component in the technical scheme, the component definition structure determines corresponding field information by defining each component, and the component design structure comprises 3 parts: the BaseButton component main body and BaseButtonConfig define the types, the appearances, the attribute configuration items and the DSL of the default. The component configuration item agrees that if 3 or more components have common configuration attributes, the components are uniformly maintained under the component/bas, and the components are maintained and used as required by common components; if the components are required to be displayed and used in the grid editor and the layer editor in the component application convention, the components of the current version are required to be maintained to the corresponding path positions.
According to the technical scheme, under the condition that a user does not have any interface development programming experience, the visual layer page can be quickly constructed, the complex and tedious program modification is solved, and a foundation is laid for subsequent continuous development.
As shown in FIG. 2, the platform flow is divided into five modules of demand design, data modeling, interface development, program testing and deployment operation and maintenance based on agile development mode.
After the user logs in the platform through the conventional registration, the user can be firstly dispatched to the project of the corresponding project team, and the project manager performs role division on project personnel.
Data modeling phase: after a demand person issues a demand document, a data modeling person designs a model physical table, and builds service modeling required by demand based on a power grid model specification; after the demand is changed, the platform prescribes that the demand to which the project belongs is frozen in the stage of initiating the demand change notification, and the project must wait for uploading the modified demand document to restart.
Interface development stage: the method can be started after the demand document is released, service configuration personnel configure service address definition, parameter entering format definition and parameter exiting format definition on a platform, and multiple interfaces are combined through service arrangement; and uploading the design manuscript and the picture material file to the platform by an interface assembler.
Referring to fig. 3, a user can complete configuration development of the interface through the following steps in the platform assembly interface.
The user clicks or drags the components in the left component library, registers external materials such as massive front-end components through the front-end components, and generates a protocol file according to the description of the materials description protocol. The device comprises a basic information part and an attribute description information part, which are used for displaying a setting panel;
in the middle is that the platform converts the protocol file into a view, which is end-user oriented, through the component rendering engine (see S03), which needs to handle internal data flows, lifecycles, event bindings, component interactions, etc: then all materials in the editor are converted into description data of a service interface construction protocol by layout setting, assembly setting, interaction setting, logic arrangement and the like; and finally, exporting the interface in the modes of on-line release, off-line release and componentized release.
A demand test stage: and respectively initiating interface use case tests and interface use case tests by an interface manager and an interface assembler. Test cases are added on the platform by the testers, and test results are generated and fed back to development. And after the test is completely passed, the testers confirm the released version and inform project operation and maintenance personnel by the platform.
Deployment operation and maintenance stage: releasing the confirmed project versions to various environments by deployment operation staff; the operation and maintenance also needs to collect the problems in the project process into a feedback platform for the next test release.
Referring to fig. 9, the present embodiment proposes a method for forming a freely configurable device by using a low code platform, comprising the following steps:
s1: based on the support of the bottom layer service, a back-end software tool for realizing the front-end application requirement is quickly constructed by combining the actual conditions of the service, the operation habit, the project construction mode and the like; the part is not tired, and a freely configured low code platform can be formed through the construction of a background;
s2: the usage mode of the low-code platform takes the working space as a unit, and working content collection is conducted in an isolated mode. The working spaces are completely isolated, and basic configuration information is shared in the same space. The project space is built first, and after the interface configuration permission is allocated to the user, the user needs to be allocated to different teams. Team as the minimum unit of project initiation to maintain system projects of different professions. The user can freely add project modules and folder segmentation interface functions under the project space, and interface types provide grid type forms, layer type free canvas and module type micro-applications.
S3: the method is derived into the whole configuration flow through the steps of creating a data source, creating a data set, creating a project, configuring a page and publishing, and comprises the following specific steps:
s301, after selecting the working space, designating data sources (including database, file, etc.), configuring/introducing data structure, defining data exchange interface parameter format and filtering/converting result data, and supporting interface data interface.
S302: creating file and directory definitions in the project, selecting a referenced data set and designating page association flow. Manage project state and export project result file (html/js/css).
S303: page configuration includes typesetting, configuration components, association models, configuration fill-in and fillable items, add page (initialization) events, add operation logic events (page logic, interface logic); and finally, exporting the result file by taking the project as a unit.
In the above step, the page configuration of S303 operates in detail as follows:
s303-1: and determining a layout mode, and calling the grid layers from the component library to typeset and layout. The grid supports custom typesetting at row level 1-24 and functional components are placed in the grid. And setting the components including attributes, styles, events, models and the like through the configuration area, and adjusting according to the actual page conditions.
S303-2: configuring a component style attribute, and selecting a corresponding style according to corresponding page requirements, wherein the style comprises basic settings such as colors, fonts and the like; configuring component attributes, clicking a component of a selected compiling area, and referring to specific content items of the corresponding component; event state of the event attribute setting component, including click, input, clear reset, etc.; the components in the model attribute are associated with the model attribute: 1. and selecting a component, selecting a model and a model table, and clicking the model attribute to complete association.
S303-3: the setting of event attributes can be divided into three events: logic events, interface events, aggregate interfaces; the logical event may define the interface operations (e.g., hiding, disabling, custom script) that need to be performed when the "master component" sends an event of a specified type. Multiple controlled components and scripts may be added; the interface event can call the data set interface to perform operations such as data query, storage and the like.
S4: grid-assisted alignment, repositioning and scaling of the layers may be performed, and background images and background colors may also be added to the layers. Layers can be activated, moved, scaled, duplicated, deleted to achieve the layout of the desired style.
And finally, building the layer page through page configuration, and rendering and exporting a corresponding page style.
The above-mentioned ip web page type low-code development platform based on the drag component framework is a specific embodiment of the present invention, has already shown the essential characteristics and improvements of the present invention, and can be modified in terms of shape, structure, etc. according to the actual use requirement, under the teaching of the present invention, all of which are within the scope of protection of the present invention.
Claims (10)
1. The utility model provides a drag-type component frame-based ipage web page type low code development platform which is characterized in that: the development platform comprises a data layer, an intelligent operation and maintenance layer, an integrated access layer and an application development framework layer;
data layer: the system comprises a database, personnel information and interface basic metadata information, wherein the database and personnel information are used for recording data in each project development stage;
intelligent operation and maintenance layer: the system is used for providing an independent and open historical/real-time data acquisition and algorithm analysis platform and integrating IT data and business index data; the dependency on different team component libraries is dynamically analyzed, so that the own characteristic component warehouse of the team is ensured; monitoring the performance indexes of interfaces of all systems, and collecting buried points for interface error information, service health status and using liveness;
integrated access layer: the method is used for authority access, service access of a business center station and third party private service access;
application development framework layer: dividing the webpage development mode into a data asset module, a model driving module, an application development engine module and a component warehouse module; the user can realize the display and interactive operation of the basic data through the customized and personalized drag type configuration, and a low-code configuration platform for supporting the visual configuration of the front-end interface is formed; and the editor based on the low-code configuration platform renders the components according to requirements by adding markers in the component files of the component warehouse module, the cloud components facing diversified service scenes are formed after the combined atomic components in the component warehouse module are uploaded, and visual configuration is carried out by adopting operations comprising clicking and dragging by utilizing the cloud components, so that the layer application is constructed.
2. The drag-component-framework-based ipag web-style low-code development platform of claim 1, wherein: the data asset module is used for integrating service interface documents, interface debugging, interface use cases, interface automatic testing, data modeling and dictionary management; the data synchronization problem among a plurality of systems is solved through one set of system and one data.
3. The drag-component-framework-based ipag web-style low-code development platform of claim 2, wherein: according to the standard data center construction mode, the method is divided into a majority of standard establishment and model design 2; the on-line design of the standard and model design can be established on line, no on-line maintenance of separate data standard documents and data model documents is needed, after the model design is completed by common developers, the model is submitted to an administrator for verification, and the on-line/change operation is allowed after the model is verified; wherein the data bin level, the standard design and the model element belong to table level definition, and the data word list, the word root and the code table belong to field level definition; ensuring service safety through a strategy comprising high-availability deployment of service and periodic backup of data; the bottom layer can integrate a data security component, and in terms of service security, the characteristics of row and column authority control, various authentication modes and national encryption are supported, so that the user data security is ensured.
4. The drag-component-framework-based ipag web-style low-code development platform of claim 1, wherein: the model driving module helps a user to complete the design and management of a data model and a logic table by constructing model data of a power grid model, a service scene and measurement information; enabling a user to manage a hierarchical structure of the data model and designing a logic table field; under the constraint of data standard, the field design refers to standard data element definition in the model design process, and sets the standard quality rule related to the logic table, so as to ensure that different logic table designers operate according to the uniform caliber.
5. The drag-component-framework-based ipag web-style low-code development platform of claim 1, wherein: the application development engine module provides custom components and component library management capability based on own component extension protocol, and the custom requirements of the service are realized through the functions, the attributes and the styles of the custom components.
6. The drag-component-framework-based ipag web-style low-code development platform of claim 1, wherein: the component warehouse module is used for providing metadata of the one-key generation component, and generating scenerization components required by each service by assembling and event maintenance of a plurality of atomic components through business division; and a diversified assembly material center is built by relying on a middle and background material asset package protocol, so that a developer is helped to quickly build a service module to optimize an application scene.
7. The drag-component-framework-based ipag web-style low-code development platform of claim 1, wherein: the platform performs corresponding core function division on working space management, data management and project management through role authority allocation; the working space management function configures different working spaces and manages configuration services comprising items, data and interfaces through the spaces; the data management function is used for realizing the bidirectional adaptation of data, and processing and converting basic data according to the need to provide the basic data for an interface; the project management function interface configuration realizes the display and interactive operation of basic data through user-defined and personalized drag configuration; the abstract data and the interface elements are bound in two directions, rich interaction support is provided, and a display effect is achieved, so that a low-code configuration platform supporting the visual configuration of the front-end interface is formed.
8. The drag-component-framework-based ipag web-style low-code development platform of claim 7, wherein: the platform adopts a visual configuration system matched with the layer rendering assembly for use, so that the operation uses a visual interface to build the layer page in a customized way;
based on a standard programming interface for processing the extensible markup language, referring to a document object model when a component rendering engine is constructed, adding the category, the attribute set and the influence factor of the component into a rendering tree, and expanding the semantics of the component;
the effective content of the whole interface is stored on metadata leaf nodes, and the rest nodes store component positions, content blocks, appearance characteristics and expansion events; describing a line graph coordinate system by using the component labels and the attribute emphasis rendering information; the component influence factors are used for expressing the relative degree of the influence of the components on the interface content, and comprehensively considering the category of the components and the label emphasis attribute construction; the categories include containers, data displays, forms, charts, maps, business; the influencing factors are propagated, and the components below the container components are transmitted downwards; adding a component object to the DSL model to add a mouse event, component cache traversal and style support, and enabling a user to drag the component, adjust the attribute and configure the event;
a component Definition Structure (DSL) determines corresponding field information by defining each component, which includes 3 parts: the unique tag body of the BaseComponent component is used for identifying a identifier of a browser based on html text markup language rules; a BaseConfig component configuration item, which defines the type, appearance and attribute configuration items of the component; the initial value of the DefaultConfig component is defined, and the initial rendering related information of the component is defined;
DSL layer agrees with the assembly to the data protocol, including the editable attribute, edit type, initial value of the assembly, facilitate the assembly expansion of later stage, help the development of the back-end language and data storage; the component configuration item agrees that if 3 or more components have common configuration attributes, the components are uniformly maintained under the component/bas, and the components are maintained and used as required by common components; if the components are required to be displayed and used in the grid editor and the layer editor in the component application convention, the components of the current version are required to be maintained to the corresponding path positions.
9. The drag-component-framework-based ipag web-style low-code development platform of claim 8, wherein: the visual configuration system is provided with an assembly interface, and the assembly interface is provided with a navigation area and a working space area;
the workspace area is an area where organization members co-develop, and in the workspace, group members cooperate together in different roles to complete creation and modification of data sources, data sets, forms/charts, dashboards, frameworks, components.
10. The drag-component-framework-based ipag web-style low-code development platform of claim 9, wherein: when the click working space triggers the project management module to carry out page configuration, displaying a configuration interface, wherein the configuration interface is divided into three areas, a left area is a component column, and functional components are placed in the component column; the middle area is a programming area, the programming area uses grids to carry out typesetting and layout, and functional components are placed in the grids in a dragging mode; the right area is an attribute configuration area, the attribute of the component is configured, and after clicking the component in the selected compiling area, the specific content item of the corresponding component is displayed.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211728162.8A CN116225429A (en) | 2022-12-29 | 2022-12-29 | Pulling type component frame-based ipage webpage type low-code development platform |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211728162.8A CN116225429A (en) | 2022-12-29 | 2022-12-29 | Pulling type component frame-based ipage webpage type low-code development platform |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116225429A true CN116225429A (en) | 2023-06-06 |
Family
ID=86577754
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211728162.8A Pending CN116225429A (en) | 2022-12-29 | 2022-12-29 | Pulling type component frame-based ipage webpage type low-code development platform |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116225429A (en) |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116560630A (en) * | 2023-07-05 | 2023-08-08 | 北京六趣网络科技有限公司 | Logic building block architecture and working method thereof |
| CN116991408A (en) * | 2023-09-26 | 2023-11-03 | 南京新桐数字科技有限公司 | Dynamic station building method and system based on generation type AI |
| CN117289916A (en) * | 2023-11-24 | 2023-12-26 | 美云智数科技有限公司 | Digital intelligent PaaS platform system |
| CN117312324A (en) * | 2023-11-13 | 2023-12-29 | 思创智汇(广州)科技有限公司 | Form model association query system and method based on low-code engine |
| CN117331548A (en) * | 2023-11-30 | 2024-01-02 | 厦门泛卓信息科技有限公司 | Low-code development system based on intelligent building software |
| CN117435678A (en) * | 2023-12-18 | 2024-01-23 | 山东山大华天软件有限公司 | System integration method and system based on intermediate data pool and visual customization |
| CN117472379A (en) * | 2023-12-25 | 2024-01-30 | 中船奥蓝托无锡软件技术有限公司 | Automatic generation method and system for low-code platform interaction interface |
| CN117519704A (en) * | 2024-01-08 | 2024-02-06 | 慧新全智工业互联科技(青岛)有限公司 | Automatic construction method for database application interface |
| CN117573121A (en) * | 2023-11-20 | 2024-02-20 | 中国人寿保险股份有限公司上海数据中心 | Graphical custom insurance document template generation method |
| CN117435678B (en) * | 2023-12-18 | 2024-04-23 | 山东山大华天软件有限公司 | System integration method and system based on intermediate data pool and visual customization |
-
2022
- 2022-12-29 CN CN202211728162.8A patent/CN116225429A/en active Pending
Cited By (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116560630B (en) * | 2023-07-05 | 2023-09-01 | 北京六趣网络科技有限公司 | Logic building block product and working method thereof |
| CN116560630A (en) * | 2023-07-05 | 2023-08-08 | 北京六趣网络科技有限公司 | Logic building block architecture and working method thereof |
| CN116991408A (en) * | 2023-09-26 | 2023-11-03 | 南京新桐数字科技有限公司 | Dynamic station building method and system based on generation type AI |
| CN116991408B (en) * | 2023-09-26 | 2023-12-12 | 南京新桐数字科技有限公司 | Dynamic station building method and system based on generation type AI |
| CN117312324A (en) * | 2023-11-13 | 2023-12-29 | 思创智汇(广州)科技有限公司 | Form model association query system and method based on low-code engine |
| CN117573121A (en) * | 2023-11-20 | 2024-02-20 | 中国人寿保险股份有限公司上海数据中心 | Graphical custom insurance document template generation method |
| CN117289916A (en) * | 2023-11-24 | 2023-12-26 | 美云智数科技有限公司 | Digital intelligent PaaS platform system |
| CN117331548A (en) * | 2023-11-30 | 2024-01-02 | 厦门泛卓信息科技有限公司 | Low-code development system based on intelligent building software |
| CN117331548B (en) * | 2023-11-30 | 2024-01-23 | 厦门泛卓信息科技有限公司 | Low-code development system based on intelligent building software |
| CN117435678A (en) * | 2023-12-18 | 2024-01-23 | 山东山大华天软件有限公司 | System integration method and system based on intermediate data pool and visual customization |
| CN117435678B (en) * | 2023-12-18 | 2024-04-23 | 山东山大华天软件有限公司 | System integration method and system based on intermediate data pool and visual customization |
| CN117472379A (en) * | 2023-12-25 | 2024-01-30 | 中船奥蓝托无锡软件技术有限公司 | Automatic generation method and system for low-code platform interaction interface |
| CN117472379B (en) * | 2023-12-25 | 2024-03-08 | 中船奥蓝托无锡软件技术有限公司 | Automatic generation method and system for low-code platform interaction interface |
| CN117519704A (en) * | 2024-01-08 | 2024-02-06 | 慧新全智工业互联科技(青岛)有限公司 | Automatic construction method for database application interface |
| CN117519704B (en) * | 2024-01-08 | 2024-04-23 | 慧新全智工业互联科技(青岛)有限公司 | Automatic construction method for database application interface |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN116225429A (en) | Pulling type component frame-based ipage webpage type low-code development platform | |
| US10997246B2 (en) | Managing and automatically linking data objects | |
| US10379710B2 (en) | Modeling system for graphic user interface | |
| Heer et al. | Software design patterns for information visualization | |
| CN114035773B (en) | Configuration-based low-code form development method, system and device | |
| US7536676B2 (en) | Object process graph application controller-viewer | |
| US9087296B2 (en) | Navigable semantic network that processes a specification to and uses a set of declaritive statements to produce a semantic network model | |
| CN106021211A (en) | Intelligent form system and generation method thereof | |
| CN101944027A (en) | User interface generation method | |
| CN110807015A (en) | Big data asset value delivery management method and system | |
| CN106775752A (en) | Forestry informationlization platform construction method and Forestry informationlization platform based on Business Process Modeling | |
| CN111984176A (en) | Software online development platform and development method | |
| WO2006120926A1 (en) | Input form design device and input form design method | |
| Song et al. | Using UML to model relational database operations | |
| Weaver | Improvise: a user interface for interactive construction of highly-coordinated visualizations | |
| CN117010198A (en) | Multi-user multi-view model modeling interaction method based on SysML | |
| CN106020801A (en) | Graphic fourth-generation language (4GL) and application generation system thereof | |
| Brambilla et al. | Model-driven design of service-enabled web applications | |
| CN116107555A (en) | GUI model driven low-code platform based on energy industry and use method | |
| Pantelios | Development of a QGIS plugin for the CityGML 3D City Database | |
| CN101268438A (en) | Data processing apparatus | |
| CN113343656A (en) | Secondary editing method of chart configuration element data model | |
| CN112181483A (en) | Plasma control system software development platform and method | |
| Frasincar | Hypermedia presentation generation for semantic web information systems | |
| Noack et al. | An integrated simulation environment for cfd and other computational disciplines |
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 |