CN113220278A - Page construction method, system, medium and device suitable for multiple scenes - Google Patents
Page construction method, system, medium and device suitable for multiple scenes Download PDFInfo
- Publication number
- CN113220278A CN113220278A CN202110625831.8A CN202110625831A CN113220278A CN 113220278 A CN113220278 A CN 113220278A CN 202110625831 A CN202110625831 A CN 202110625831A CN 113220278 A CN113220278 A CN 113220278A
- Authority
- CN
- China
- Prior art keywords
- page
- data
- data source
- module
- application
- 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
- 238000010276 construction Methods 0.000 title description 2
- 238000000034 method Methods 0.000 claims abstract description 31
- 238000004806 packaging method and process Methods 0.000 claims abstract description 12
- 230000000007 visual effect Effects 0.000 claims description 8
- 238000004590 computer program Methods 0.000 claims description 6
- 238000011161 development Methods 0.000 abstract description 34
- 238000012360 testing method Methods 0.000 abstract description 10
- 230000001133 acceleration Effects 0.000 abstract description 2
- 238000010586 diagram Methods 0.000 description 8
- 238000007726 management method Methods 0.000 description 6
- 230000008569 process Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 238000010420 art technique Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 230000008878 coupling Effects 0.000 description 1
- 238000010168 coupling process Methods 0.000 description 1
- 238000005859 coupling reaction Methods 0.000 description 1
- 238000013523 data management Methods 0.000 description 1
- 238000013499 data model Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005553 drilling Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 238000005065 mining Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000004044 response Effects 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/20—Software design
-
- 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/34—Graphical or visual programming
-
- 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/36—Software reuse
-
- 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
Abstract
The invention provides a page building method suitable for multiple scenes, which comprises the following steps: step S1: defining a data source to be accessed and creating the data source; step S2: establishing data query according to the established data source; step S3: constructing a page aiming at the use scenes, wherein each use scene can be processed according to data; step S4: combining the constructed page results into an application; step S5: and packaging and publishing the application generated by combination. The invention also provides a page building method, a system and a device suitable for multiple scenes, and a computer readable medium. The invention can reduce the investment of front-end development/test resources by providing the page building method suitable for multiple scenes, and realizes the acceleration of the development of the page and the quick landing of the function.
Description
Technical Field
The invention relates to the technical field of web development, in particular to a page building method, a system, a medium and a device suitable for multiple scenes.
Background
In application development facing background in an enterprise, the currently mainstream Web application development mode is front-end and back-end separated development, the front end processes appearance and logic development of a Web page, and the back end focuses on data processing and provides an Application Programming Interface (API) required by the front end page. Background applications in enterprises are generally focused on data management, authority management and the need for mining and presenting data values. The traditional development mode is used for solving the problems that the development period is long, the development/test resource consumption is large, and the expansion is not easy to occur when the traditional development mode is used for the scenes.
Through search, patent document CN106909361B discloses a web development method and device based on a template engine, including: acquiring a required component from a third-party framework or a component library; packaging the obtained components according to a preset format to form a component template; introducing the required component template according to the label of the component template, and forming a corresponding webpage template; and analyzing the webpage template and the component template corresponding to the webpage template through a preset template analysis engine to form a corresponding page. This prior art forms a component template, but still requires a developer to call a predefined component and write code when developing a page.
Patent document CN109710248A discloses a building method based on a Web development sub-module framework, and this prior art supports the general architecture to be unchanged, the sub-module framework is built in a hierarchical manner, each service module is internally provided with a complete Web code layer structure, and an interface layer for external services is also provided, which is specially used for data interaction of other modules. The prior art focuses on solving the problem of too high module coupling degree when a service end develops service logic, but cannot solve the problem of investment of front-end development/test resources.
Patent document CN103617037B discloses a development method for a web development system and a web development system, which generates or modifies script codes when the web development system runs; analyzing the generated or modified script codes through a script parser to generate object types of new functions or modify object types of existing functions; and generating an object of the new function or an object of the modified existing function by the object manager according to the generated object type of the new function or the modified object type of the existing function, and organizing calling relations between the object and other objects. This prior art technique still requires the developer to write portions of the logic in the page designer and code editor to associate the elements in the page with the code.
Therefore, it is highly desirable to develop and design a web development system and method that has a short development period, consumes less development/test resources, and is easy to expand.
Disclosure of Invention
Aiming at the defects in the prior art, the invention aims to provide a page building method, a system, a medium and a device suitable for multiple scenes, which can reduce the investment of front-end development/test resources, have short development period and low development/test resource consumption and are easy to expand.
The page building method suitable for multiple scenes provided by the invention comprises the following steps:
step S1: defining a data source to be accessed and creating the data source;
step S2: establishing data query according to the established data source;
step S3: constructing a page aiming at the use scenes, wherein each use scene can be processed according to data;
step S4: combining the constructed page results into an application;
step S5: and packaging and publishing the application generated by combination.
Preferably, step S1 includes:
step S1.1: selecting a data source model;
step S1.2: configuring the selected data source, and presenting different configuration parameters on a user interface according to different data source types;
step S1.3: multiple data sources of the same type are created for storage.
Preferably, step S2 includes:
step 2.1: selecting a created data source;
step 2.2: the data query model is visually configured, and different visual configuration interfaces exist in different types of data sources;
step S2.3: and storing the configured data query model.
Preferably, step S3 includes:
step S3.1: judging the types of the built pages according to the functional scenes, wherein the types of the built pages comprise a large-screen page, a Dashboard and a user-defined page;
step S3.2: selecting a large screen page for configuration;
step S3.3: selecting a Dashboard for configuration;
step S3.4: and selecting a custom page for configuration.
Preferably, step S4 includes:
step S4.1: customizing the application basic information;
step S4.2: selecting a defined page type configuration page set;
step S4.3: and saving the configured page set.
Preferably, step S5 includes:
step S5.1: combining and packaging the stored pages into a web application;
step S5.2: and publishing the packaged web application.
The invention provides a page building system suitable for multiple scenes, which comprises:
a data source module: creating a data source and butting external system data;
the query module: selecting a data source created by a data source module, creating a query statement, and visually checking data;
the page definition module: creating a large screen page, a Dashboard and a custom page, and applying a query statement created by a query module to a visual chart;
an application definition module: combining the pages in the page definition module into an application;
an application release module: and packaging and issuing the application generated by combining the application definition modules.
Preferably, the method further comprises the following steps:
a metadata management module: managing a data source, and storing metadata of a data source module and a page definition module;
a task execution module: executing the query statement created by the page definition module to query data;
a task management module: and scheduling and managing data queries generated by the large-screen page and the Dashboard.
According to the present invention, a computer-readable storage medium is provided, in which a computer program is stored, which, when being executed by a processor, carries out the above-mentioned method steps.
The multi-scene-applicable page building device provided by the invention comprises the multi-scene-applicable page building system or the computer-readable storage medium storing the computer program.
Compared with the prior art, the invention has the following beneficial effects:
1. the page building method suitable for multiple scenes can reduce the investment of front-end development/test resources, and realize the acceleration of the development of the page and the quick landing of the function.
2. The invention can obviously accelerate the development speed of the web application aiming at a specific scene.
3. The invention avoids manual page editing and can obviously reduce bug generation.
Drawings
Other features, objects and advantages of the invention will become more apparent upon reading of the detailed description of non-limiting embodiments with reference to the following drawings:
FIG. 1 is a schematic flow chart of a page building method suitable for multiple scenes in the present invention;
FIG. 2 is a schematic structural diagram of a multi-scenario-applicable page building system according to the present invention;
FIG. 3 is a schematic diagram illustrating a defining process of the Dashboard of the present invention;
FIG. 4 is a schematic diagram illustrating a definition process of a large-screen page according to the present invention;
FIG. 5 is a schematic diagram illustrating a definition process of a custom page according to the present invention.
Detailed Description
The present invention will be described in detail with reference to specific examples. The following examples will assist those skilled in the art in further understanding the invention, but are not intended to limit the invention in any way. It should be noted that it would be obvious to those skilled in the art that various changes and modifications can be made without departing from the spirit of the invention. All falling within the scope of the present invention.
As shown in fig. 1, the invention provides a page building method suitable for multiple scenes, which comprises the following steps:
step S1: defining the data source to be accessed, and creating the data source.
Step S1.1: selecting a data source model;
step S1.2: configuring the selected data source, and presenting different configuration parameters on a user interface according to different data source types;
step S1.3: multiple data sources of the same type are created for storage.
Step S2: and establishing a data query according to the created data source.
Step 2.1: selecting a created data source;
step 2.2: the data query model is visually configured, and different visual configuration interfaces exist in different types of data sources;
step S2.3: and storing the configured data query model.
Step S3: and constructing a page aiming at the use scenes, wherein each use scene can be processed according to the data.
Step S3.1: judging the types of the built pages according to the functional scenes, wherein the types of the built pages comprise a large-screen page, a Dashboard and a user-defined page;
as shown in fig. 4, step S3.2: and selecting a large screen page for configuration.
Step S3.2.1: a large screen component provided within the system is selected to the central canvas. Component types include (but are not limited to) the chart classes: a plurality of graphs, column charts, bar charts, pie charts, scatter diagrams, etc. 20; map type: provincial and urban maps, map fly-line; a decorative component; a 3D animation part; a picture; characters; time, etc.
Step S3.2.2: and a positioning member. The position of the components, the size of the components, the angle of the components, the level of the components, the alignment of a plurality of components, the upper, lower, left and right sides, the horizontal centering, the vertical centering and the like are randomly arranged according to requirements.
Step S3.2.3: the component data is configured. The data comprises static data, the data query defined in step 2. Static data is compiled in a spreadsheet fashion.
Step S3.2.4: the configuration component displays details. Display details of the visual configuration component.
Step S3.2.5: and (5) repeating the steps S3.2.1 to S3.2.4 to form the large-screen content.
As shown in fig. 3, step S3.3: and selecting the Dashboard for configuration.
Step S3.3.1: the type of chart provided by the system is selected and added to the central layout area. And dragging the diagram part to the central layout area by the mouse, and adjusting the position of the diagram.
Step S3.3.2: and adjusting the width and the height of the chart according to the requirements of the user interface. Systems currently support arbitrary row and column layout of charts. The layout has high flexibility and can meet various layout requirements.
Step S3.3.3: and querying data of the configuration chart. There are two ways in which a data query can be created: the first method is to select the data source created in step S1 as the data source of the current chart, configure the query content and store it; the second one is to select the data query created in step S2.
The data query configuration may vary for different types of data sources. The data query of the statistic class has a uniform data model definition: filters, metrics, dimensions, and metric statistical functions.
The data query module manages the stored data query model. The data query model can be multiplexed between the dashboards of the Dashboard and the large-screen page, namely N graphs in the same Dashboard use the same data query, so that when the Dashboard sends a data query request, the N graphs only send the data query request once, the calculation resources of the server are reduced, and the query response speed is accelerated.
Step S3.3.4: the configuration diagram shows details. A series of configuration items such as X-axis, Y-axis, Tooltip, legend, etc. of the configuration chart. The visual configurator capable of flexibly customizing the chart attributes is realized by utilizing the antv/g2plot library.
Step S3.3.5: and configuring the drilling function of the chart according to the actual business requirements. Including but not limited to jumping to a third party system, triggering another chart in the current Dashboard to change the display data, etc.
Step 3.3.6: and (6) repeating the steps S3.3.1 to S3.3.5 to form the Dashboard.
As shown in fig. 5, step S3.4: and selecting a custom page for configuration.
Step S3.4.1: drag the component to the canvas and layout. The system provides more than 100 components: a basic component and some service components encapsulated according to common service scenes.
Step S3.4.2: and configuring data for the component and logic triggered by the component event. The component data may use the data queries created by the data sources created in step 1. Logic triggered by a component event includes (but is not limited to) triggering display or hiding of other components that depend on the same data, and data updating of other components.
Step S3.4.3: and repeating the steps S3.4.1 to S3.4.2, generating the digital subscriber line of the custom page, and saving the digital subscriber line to the server.
Step S4: and combining the constructed page results into the application.
Step S4.1: customizing the application basic information;
step S4.2: selecting a defined page type configuration page set;
step S4.3: and saving the configured page set.
Step S5: and packaging and publishing the application generated by combination. Combining and packaging the stored pages into a web application; and publishing the packaged web application.
Step S5.1: combining and packaging the stored pages into a web application;
step S5.2: and publishing the packaged web application.
As shown in fig. 2, the present invention further provides a page building system suitable for multiple scenes, including:
a data source module: and creating a data source and interfacing external system data. For example, selecting to dock a MySQL data source, configuring an IP address, a port, a user name and a password, a database name and other information in a form after selecting the type of the MySQL data source, and storing after testing the connectivity.
The query module: and selecting a data source created by the data source module, creating a query statement, and visually checking data. After the created data source is selected, a data table corresponding to the database can be seen, the statement is executed after SQL is input in the query statement edit box, the query result of the SQL can be seen, and the result can be visually presented as a table, a curve graph, a pie chart and the like.
The page definition module: and creating a large screen page, a Dashboard and a custom page, and applying a query statement created by using a query module to the visual chart. Selecting the components to the canvas, and configuring the data sources of the components.
An application definition module: and combining the pages in the page definition module into the application. Defining the page needed by the application and setting page routing information.
An application release module: and packaging and issuing the application generated by combining the application definition modules.
A metadata management module: and managing data sources, and storing metadata of the data source module and the page definition module.
A task execution module: and executing the query statement created by the page definition module to query the data.
A task management module: and scheduling and managing data queries generated by the large-screen page and the Dashboard.
The authority management module: providing accessibility to data as well as pages.
The invention also provides a computer-readable storage medium having stored thereon a computer program which, when being executed by a processor, carries out the steps of the method as described above.
The invention also provides a multi-scene-suitable page building device, which comprises the multi-scene-suitable page building system or the computer-readable storage medium storing the computer program.
The method is executed in a designed frame, and the control range of the frame cannot be exceeded due to different configurations, so developers and testers only need to perform complete tests on the frame, the investment of front-end development/test resources can be reduced, the development and function landing of pages can be accelerated, and the traditional development mode needs to rewrite codes every time, possibly has similar functions to the previous project development, but cannot ensure that no Bug is generated. The scheme designed by the invention is written once and configured randomly.
Traditional development needs to compile adaptation of backend data sources for different data sources, but the invention embeds common data sources and can operate only by simple configuration. In the traditional development, the query data is written by programmers in business logic and has low flexibility, while the data query of the application is customized by customers and has high flexibility, and the data query can be multiplexed in a plurality of pages. The traditional page development needs to invest in front-end developers, and the page definition of the invention aims at three scenes, namely a Dashboard type, a large screen type and a completely self-defined page, wherein the self-defined page can cover most common page logics. The three scenes do not need any coding, and the content can be fed back in real time by the client through direct observation and editing.
Those skilled in the art will appreciate that, in addition to implementing the system and its various devices, modules, units provided by the present invention as pure computer readable program code, the system and its various devices, modules, units provided by the present invention can be fully implemented by logically programming method steps in the form of logic gates, switches, application specific integrated circuits, programmable logic controllers, embedded microcontrollers and the like. Therefore, the system and various devices, modules and units thereof provided by the invention can be regarded as a hardware component, and the devices, modules and units included in the system for realizing various functions can also be regarded as structures in the hardware component; means, modules, units for performing the various functions may also be regarded as structures within both software modules and hardware components for performing the method.
The foregoing description of specific embodiments of the present invention has been presented. It is to be understood that the present invention is not limited to the specific embodiments described above, and that various changes or modifications may be made by one skilled in the art within the scope of the appended claims without departing from the spirit of the invention. The embodiments and features of the embodiments of the present application may be combined with each other arbitrarily without conflict.
Claims (10)
1. A page building method suitable for multiple scenes is characterized by comprising the following steps:
step S1: defining a data source to be accessed and creating the data source;
step S2: establishing data query according to the established data source;
step S3: constructing a page aiming at the use scenes, wherein each use scene can be processed according to data;
step S4: combining the constructed page results into an application;
step S5: and packaging and publishing the application generated by combination.
2. The page building method applicable to multiple scenes according to claim 1, wherein the step S1 comprises:
step S1.1: selecting a data source model;
step S1.2: configuring the selected data source, and presenting different configuration parameters on a user interface according to different data source types;
step S1.3: multiple data sources of the same type are created for storage.
3. The page building method applicable to multiple scenes according to claim 1, wherein the step S2 comprises:
step 2.1: selecting a created data source;
step 2.2: the data query model is visually configured, and different visual configuration interfaces exist in different types of data sources;
step S2.3: and storing the configured data query model.
4. The page building method applicable to multiple scenes according to claim 1, wherein the step S3 comprises:
step S3.1: judging the types of the built pages according to the functional scenes, wherein the types of the built pages comprise a large-screen page, a Dashboard and a user-defined page;
step S3.2: selecting a large screen page for configuration;
step S3.3: selecting a Dashboard for configuration;
step S3.4: and selecting a custom page for configuration.
5. The page building method applicable to multiple scenes according to claim 1, wherein the step S4 comprises:
step S4.1: customizing the application basic information;
step S4.2: selecting a defined page type configuration page set;
step S4.3: and saving the configured page set.
6. The page building method applicable to multiple scenes according to claim 5, wherein the step S5 comprises:
step S5.1: combining and packaging the stored pages into a web application;
step S5.2: and publishing the packaged web application.
7. The utility model provides a be suitable for page of multi-scenario and build system which characterized in that includes:
a data source module: creating a data source and butting external system data;
the query module: selecting a data source created by a data source module, creating a query statement, and visually checking data;
the page definition module: creating a large screen page, a Dashboard and a custom page, and applying a query statement created by a query module to a visual chart;
an application definition module: combining the pages in the page definition module into an application;
an application release module: and packaging and issuing the application generated by combining the application definition modules.
8. The multi-scenario-applicable page building system according to claim 7, further comprising:
a metadata management module: managing a data source, and storing metadata of a data source module and a page definition module;
a task execution module: executing the query statement created by the page definition module to query data;
a task management module: and scheduling and managing data queries generated by the large-screen page and the Dashboard.
9. A computer-readable storage medium, in which a computer program is stored which, when being executed by a processor, carries out the steps of the method of any one of claims 1 to 6.
10. A multi-scenario-applicable page building apparatus comprising the multi-scenario-applicable page building system of any one of claims 7 to 8 or the computer-readable storage medium of claim 9 in which a computer program is stored.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110625831.8A CN113220278A (en) | 2021-06-04 | 2021-06-04 | Page construction method, system, medium and device suitable for multiple scenes |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110625831.8A CN113220278A (en) | 2021-06-04 | 2021-06-04 | Page construction method, system, medium and device suitable for multiple scenes |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113220278A true CN113220278A (en) | 2021-08-06 |
Family
ID=77082867
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110625831.8A Pending CN113220278A (en) | 2021-06-04 | 2021-06-04 | Page construction method, system, medium and device suitable for multiple scenes |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113220278A (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112015413A (en) * | 2020-08-25 | 2020-12-01 | 同方股份有限公司 | Programming-free data visualization Web display system and implementation method thereof |
| CN113031936A (en) * | 2019-12-25 | 2021-06-25 | 中国航天系统工程有限公司 | Method and system for automatically setting up page and immediately releasing page |
-
2021
- 2021-06-04 CN CN202110625831.8A patent/CN113220278A/en active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113031936A (en) * | 2019-12-25 | 2021-06-25 | 中国航天系统工程有限公司 | Method and system for automatically setting up page and immediately releasing page |
| CN112015413A (en) * | 2020-08-25 | 2020-12-01 | 同方股份有限公司 | Programming-free data visualization Web display system and implementation method thereof |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7734560B2 (en) | Loose coupling of pattern components with interface regeneration and propagation | |
| US20110258534A1 (en) | Declarative definition of complex user interface state changes | |
| US20120272213A1 (en) | Dynamic generation of formatted user interfaces in software environments | |
| CN106021211A (en) | Intelligent form system and generation method thereof | |
| CN102135873B (en) | A kind of method and apparatus creating user interface | |
| CN115617327A (en) | Low code page building system, method and computer readable storage medium | |
| CN106484394A (en) | A kind of fast software development system with double engines | |
| CN104572131A (en) | Method and device for configuring business form | |
| US20170242780A1 (en) | Graphical Sequence Builder | |
| US20060020931A1 (en) | Method and apparatus for managing complex processes | |
| CN114089958A (en) | Form visual configuration method and device | |
| CN112363794A (en) | Rendering method of front-end list type component and electronic equipment | |
| US8843884B1 (en) | Interactive graphical construction of parametric components of typical cross section frameworks | |
| US8122381B2 (en) | Context debugger | |
| CN114546364A (en) | Configuration method of visual chart assembly | |
| CN113326044A (en) | Development method, system and storage medium based on control library | |
| CN111045707B (en) | Method, apparatus, computer device and storage medium for updating applet | |
| US8704852B2 (en) | Methods for generating one or more composite image maps and systems thereof | |
| CN115562652B (en) | Component style processing method and system for low-code development platform | |
| US20130024836A1 (en) | Interactive Graphical Construction of Parametric Components of Typical Cross Section Frameworks | |
| CN113220278A (en) | Page construction method, system, medium and device suitable for multiple scenes | |
| CN109814864A (en) | A kind of data visualization method, visualization system, Web browsing system and equipment | |
| CN111078782A (en) | Industrial big data visualization system and method | |
| CN114398282A (en) | Test script generation method, device, equipment and storage medium | |
| CN115130442A (en) | Report generation method and device, storage medium and computer equipment |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210806 |