CN115390840A - Visual page generation method, device and system - Google Patents
Visual page generation method, device and system Download PDFInfo
- Publication number
- CN115390840A CN115390840A CN202210917579.2A CN202210917579A CN115390840A CN 115390840 A CN115390840 A CN 115390840A CN 202210917579 A CN202210917579 A CN 202210917579A CN 115390840 A CN115390840 A CN 115390840A
- Authority
- CN
- China
- Prior art keywords
- data
- component
- page
- preset
- information
- 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
- 230000000007 visual effect Effects 0.000 title claims abstract description 61
- 238000000034 method Methods 0.000 title claims abstract description 51
- 238000009877 rendering Methods 0.000 claims abstract description 35
- 238000013506 data mapping Methods 0.000 claims abstract description 17
- 238000013507 mapping Methods 0.000 claims abstract description 8
- 230000003993 interaction Effects 0.000 claims description 34
- 230000002452 interceptive effect Effects 0.000 claims description 28
- 238000012800 visualization Methods 0.000 claims description 23
- 238000013499 data model Methods 0.000 claims description 14
- 238000013461 design Methods 0.000 claims description 9
- 238000007726 management method Methods 0.000 claims description 8
- 238000012986 modification Methods 0.000 claims description 5
- 230000004048 modification Effects 0.000 claims description 5
- 230000001960 triggered effect Effects 0.000 claims description 5
- 230000002457 bidirectional effect Effects 0.000 claims description 4
- 238000001914 filtration Methods 0.000 claims description 3
- 238000004590 computer program Methods 0.000 claims description 2
- 238000011161 development Methods 0.000 abstract description 26
- 238000004904 shortening Methods 0.000 abstract description 3
- 238000010586 diagram Methods 0.000 description 15
- 230000006870 function Effects 0.000 description 5
- 238000013079 data visualisation Methods 0.000 description 4
- 230000000694 effects Effects 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000002085 persistent effect Effects 0.000 description 1
- 230000000284 resting effect 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/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
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/28—Databases characterised by their database models, e.g. relational or object models
- G06F16/284—Relational databases
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method, a device and a system for generating a visual page, electronic equipment and a computer readable storage medium, wherein the method comprises the following steps: when the component parameters selected by a user are obtained, rendering a display component template based on the component parameters; acquiring service data corresponding to the component parameters according to a preset data mapping relation; and binding the service data on the component corresponding to the component template to generate a visual page. The invention can preset the mapping relation between the data and the page components, can directly edit the SQL instruction control interface engine to extract corresponding business data when developing the page, and call the corresponding components according to the business data to display the data to generate the visual page, thereby not only unifying the development standards, but also reducing the difficulty of page development, greatly shortening the time of page development and improving the efficiency of page development.
Description
Technical Field
The invention relates to the technical field of page development, in particular to a method, a device and a system for generating a visual page.
Background
Data visualization originated from 1960s computer graphics, and people created graphic charts using computers, visualized extracted data, and presented various attributes and variables of the data. Along with the development of economy, the capacity of data used by people is more and more, and in order to improve the visual display effect, a visual platform needs to be expanded so as to increase the application field of the visual display platform, so that the expression form of data visualization can be continuously changed, and the real-time dynamic effect and the user interaction use function can be further increased.
The current common data visualization development method is to design a database and a business table structure to store different data; then, compiling a service interface matched with the front-end matching data at the back end; when the front end determines the data to be displayed and writes an HTML page, calling a corresponding service interface based on the data to be displayed to extract corresponding service data from a database, and constructing a corresponding visual page by using the service data for a user to check.
However, the conventional visualization page development method has the following technical problems: with the high-speed development of front-end technologies, various front-end frameworks, components and tools are layered endlessly, the complexity of front-end application scenarios is higher and higher, and more data types need to be displayed. If each kind of data writes a corresponding service interface, not only a large amount of resources are needed to develop the service interface, but also the requirements on talents are high, the development cost is high, the development time is long, and the efficiency is low.
Disclosure of Invention
The invention provides a method, a device and a system for generating a visual page, wherein the method can preset the mapping relation between data and page components, directly edit an SQL instruction control interface engine to extract corresponding business data when the page is developed, and call the corresponding components according to the business data to display the data so as to generate the visual page, so that the page development time is shortened, and the page development efficiency is improved.
The first aspect of the embodiments of the present invention provides a method for generating a visual page, where the method includes:
when the component parameters selected by a user are obtained, rendering and displaying a component template based on the component parameters;
acquiring service data corresponding to the component parameters according to a preset data mapping relation;
and binding the service data on the component corresponding to the component template to generate a visual page.
In a possible implementation manner of the first aspect, the rendering a presentation component template based on the component parameter includes:
acquiring page component information triggered by a user from the component selection data based on a preset rendering engine;
if the page component information meets the configuration right, reading the page component information to obtain a component option;
searching a corresponding component template from a component library according to the component option;
and selecting the component configuration information into a display interface through a preset vue.
In a possible implementation manner of the first aspect, the obtaining, by a preset interaction engine, service data corresponding to the component parameter according to a preset data mapping relationship includes:
accessing a preset background interaction engine based on a preset rendering engine so that the preset interaction engine reads the component configuration information to obtain a data source;
editing and generating a query instruction corresponding to the data source according to a preset data mapping relation, and sending the query instruction to a preset database;
and collecting the corresponding service data returned by the preset database.
In a possible implementation manner of the first aspect, after the step of generating the visualization page, the method further includes:
acquiring interactive information of a user trigger page, wherein the interactive information comprises newly added information, edited information, saved information and deleted information;
and updating the visual page by adopting the interaction information.
In a possible implementation manner of the first aspect, the performing, by using the interaction information, an update operation on the visualization page includes:
acquiring a current data source of the visual page;
sending the current data source to a preset background interaction engine in an Http mode, so that the preset background interaction engine generates a modification instruction based on the current data source editing, and returns updated data;
and updating the visual page by adopting the updating data.
In a possible implementation manner of the first aspect, before the step of obtaining the component parameter selected by the user, the method further includes:
constructing a table structure related to business data, and setting data association between the business data in the table structure and a preset database to obtain a data mapping relation;
setting a plurality of interactive interfaces based on the service data in the table structure, and constructing a background interactive engine by adopting the interactive interfaces;
and determining the corresponding relation between each service data in the table structure and the corresponding component, and distributing configuration authority to each corresponding component.
A second aspect of the embodiments of the present invention provides an apparatus for generating a visual page, where the apparatus includes:
the rendering module is used for rendering and displaying the component template based on the component parameters when the component parameters selected by a user are obtained;
the acquisition module is used for acquiring the service data corresponding to the component parameters according to a preset data mapping relation;
and the generating module is used for binding the service data on the component corresponding to the component template to generate a visual page.
A third aspect of an embodiment of the present invention provides a system for generating a visualized page, where the system includes:
the data source management module is used for managing a data model, a data relation and a bidirectional mapping database;
the interface management module is used for managing a data interface, configuring a data model used by the interface, a returned data column and filtering the data authority of the interface;
the page visualization design module is used for providing various common visualization components based on the web, designing page elements in a dragging mode and binding the data model relation of each component;
the user access module is used for providing access links of related pages for users to access;
the page rendering engine module is used for dynamically rendering a page to a user according to the visual configuration and loading data through a back-end interface;
the back-end interface engine module is used for reading and writing related service data according to the operation of a user and storing the data into a database persistently according to the data model and the data relation;
and the database module is used for storing the data returned by the rear-end interface engine module.
Compared with the prior art, the method and the device for generating the visual page provided by the embodiment of the invention have the beneficial effects that: the invention can preset the mapping relation between the data and the page components, can directly edit the SQL instruction control interface engine to extract corresponding business data when developing the page, and call the corresponding components according to the business data to display the data to generate the visual page, thereby not only unifying the development standards, but also reducing the difficulty of page development, greatly shortening the time of page development and improving the efficiency of page development.
Drawings
Fig. 1 is a schematic flowchart of a method for generating a visual page according to an embodiment of the present invention;
FIG. 2 is a first diagram illustrating the classification of components according to an embodiment of the present invention;
FIG. 3 is a diagram illustrating the classification of components according to an embodiment of the present invention;
FIG. 4 is a third diagram illustrating the classification of components provided by an embodiment of the present invention;
FIG. 5 is a flowchart illustrating operation of a page update provided by an embodiment of the present invention;
FIG. 6 is an operational flow diagram of a method for generating a visual page according to an embodiment of the present invention;
fig. 7 is a schematic structural diagram of a device for generating a visual page according to an embodiment of the present invention;
FIG. 8 is a schematic diagram illustrating a system for generating a visual page according to an embodiment of the present invention;
fig. 9 is a schematic structural diagram of a system for generating a visualized page according to an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The current common data visualization development method is to firstly design a database and design a business table structure so as to store different data; then, compiling a service interface matched with the front-end matching data at the back end; when the front end determines the data to be displayed and writes an HTML page, calling a corresponding service interface based on the data to be displayed to extract corresponding service data from a database, and constructing a corresponding visual page by using the service data for a user to check.
However, the conventional visualization page development method has the following technical problems: with the high-speed development of front-end technologies, various front-end frameworks, components and tools are layered endlessly, the complexity of front-end application scenarios is higher and higher, and more data types need to be displayed. If each kind of data writes a corresponding service interface, not only a large amount of resources are needed to develop the service interface, but also the requirements on talents are high, the development cost is high, the development time is long, and the efficiency is low.
In order to solve the above problem, a method for generating a visual page provided by the embodiment of the present application will be described and explained in detail by the following specific embodiments.
Referring to fig. 1, a flowchart illustrating a method for generating a visualized page according to an embodiment of the present invention is shown.
In an embodiment, the method can be applied to a visualized page generation system, the system is provided with an interface, the interface is provided with an access page, the access page can interact with a user through the interface, and the page can be visualized in the interface.
By way of example, the method for generating the visualization page may include:
s11, when the component parameters selected by the user are obtained, rendering and displaying the component template based on the component parameters.
In one embodiment, the component parameter may be component information selected by the user when interacting with the system through the link access page.
In one embodiment, when a user starts the system, the system may generate a link access page containing a plurality of component options for the user to select.
After the user selects the component parameters, the corresponding component templates can be determined by utilizing the component parameters, and the component templates are rendered and displayed, so that the user can check the corresponding component display effect.
In an embodiment, different users may have different operation permissions, and it is necessary to determine whether the user has the operation permission to invoke the component to perform component rendering, so as to avoid the situation of false triggering. Wherein, as an example, step S11 may comprise the following sub-steps:
s111, acquiring page component information triggered by a user from the component selection data based on a preset rendering engine.
Specifically, the page component information is component information selected by the user, for example, form component information, icon component information, chart component information, and the like.
And S112, if the page component information meets the configuration right, reading the page component information to obtain a component option.
In an embodiment, ID information of a user logging in a system may be obtained, whether the ID information has a right to call component information is determined, if yes, it is determined that page component information meets a requirement of a configuration right, and the page component information may be authorized independently to obtain a component option.
Wherein the component options may be specific components.
S113, searching a corresponding component template from the component library according to the component option.
In one embodiment, the system may be provided with a component library, which is made up of a plurality of component templates, one for each component.
And S114, selecting the component configuration information to a display interface through a preset vue.
In actual operation, templates of corresponding components can be read from the component library one by one according to component options, and then rendered into a page through vue.
In an embodiment, a plurality of components stored in the component library can also be displayed in the access page, so that a user can select a component from the component library in a visual dragging mode and drag the component to the design area. The system finds a rendering template of the component from the component library according to the component dragged by the user, renders the rendering template on an interface, and provides user configuration according to preset parameters of the component.
The user needs to configure the data source associated with the component for subsequent user interaction, and the interaction engine stores the business data.
In order to set the user' S right and facilitate the subsequent searching of the service data required by the component, for example, before step S11, the method may further include the following steps:
s21, constructing a table structure related to the business data, and setting data association between the business data in the table structure and a preset database to obtain a data mapping relation.
The table structure may be a table structure in which the service data is stored in a relational database, and the table structure needs to design a name, an encoding, a data type, a data length, whether nullable or not, a default value, and a sequence number of each field. The data source incidence relation refers to a main external key incidence relation between a table and a table in a database, and the table structure needs to specify a main key column, if the external key incidence table exists, the field needs to be set as an external key column and an incidence external key table.
The system can read the designated table structure by one key in the database.
The utility table structure is used for declaring the storage of data and the storage relation between the data to the system. When the system is used for subsequent user interaction, the system automatically reads and writes data from the database according to the data relation.
Such as a user management function, account information relating to the user, and personal information of the user. The 2 data sources can be designed as follows: sys _ user, sys _ user _ profile, and the contract user data are stored in the two tables, and the contract sys _ user _ profile foreign key is associated with sys _ user.
The column, data type and data relation of each data model are defined through the data model and are mapped into the database table structure one by one, and the business data operated by a user is stored into the specific business table structure of the database through the mapping relation.
S22, setting a plurality of interactive interfaces based on the service data in the table structure, and constructing a background interactive engine by adopting the interactive interfaces.
The interactive interface may refer to a background interface for querying the specified business data. The interactive interface is used for declaring data to be read from which data sources by the interface, how the data sources are associated to query the data, and which fields need to be returned to the front-end system by the queried data to the system.
When a user accesses the interface through an access page, the interaction engine splices an SQL table according to a data source related to the interface, splices an SQL ON relation according to a data source main foreign key relation and splices a SQL Select field according to an interface query field from the interface design configuration, so that a generated SQL statement is executed in a database, and the data is returned through the interface after being acquired.
S23, determining the corresponding relation between each service data in the table structure and the corresponding component, and distributing configuration authority to each corresponding component.
Referring to fig. 2 to 4, a first classification diagram of the component provided in the embodiment of the present invention, a second classification diagram of the component provided in the embodiment of the present invention, and a third classification diagram of the component provided in the embodiment of the present invention are respectively shown.
The types of rights control for the configuration rights include, but are not limited to, display, hide, enable, disable, and the like. I.e. whether the component is to be displayed, hidden, enabled, disabled. The preset condition rule is as follows:
in an alternative embodiment, the rule may be executed based on the user's role, i.e., the user has a configured role.
For example: the reset password function of the user management list is only authorized to be used by an administrator. That adds an "enable" rule for the button component of "reset password": with user role control, the user role configures the "administrator". When the page is rendered to the button, the authority rule is judged to exist, if the current login user contains the role of 'administrator', the button is started, and if not, the hiding is forbidden.
In an alternative embodiment, the rule is executed according to the workflow link, i.e., when the approval form goes to a certain link.
For example: and a leave application function is adopted, and after the employee submits the application, the superior leader fills in a reply opinion in a link of 'examination and approval of the superior leader'. That adds a "display enabled" rule for the input box component of the superior leadership reply opinions: workflow link control is adopted, and link configuration 'leader examination and approval' is adopted. When the page is rendered to the input box, the existence of the authority rules is judged, and the input box is started to be displayed according to the fact that the current examination and approval link is the 'superior leader examination and approval' link, otherwise, the hiding is forbidden.
In an optional embodiment, when the built-in rule is not enough to control the right, the front-end JS method can be customized, whether the rule is established or not is judged according to the customization method, and the rule is executed when the rule is established.
For example: and a leave application function, wherein if the employee application type belongs to the schedule, the related items of the schedule need to be selected. That adds a "display enabled" rule for the checkbox component of the tune-up associated item: and adopting a user-defined JS method, writing codes in the JS method and judging whether the user application type selects the resting. When the page renders the selection box, judging that the user-defined JS permission rule exists, executing the JS method according to data filled by the user, enabling the selection box to be displayed if the JS method returns true, and forbidding hiding if the JS method returns true.
A user can configure the component authority through a system preset authority rule, and the system records authority information of related components for a subsequent rendering engine.
And S12, acquiring the service data corresponding to the component parameters according to a preset data mapping relation.
The service data is data required by the components corresponding to the component parameters during display.
For example, if the component parameter corresponds to a chart component, the business data may be an image, a table, and various items of data within the table.
In one embodiment, step S12 may include the following sub-steps:
and S121, accessing a preset background interaction engine based on a preset rendering engine, so that the preset interaction engine reads the component configuration information to obtain a data source.
And S122, editing and generating a query instruction corresponding to the data source according to a preset data mapping relation, and sending the query instruction to a preset database.
Alternatively, the query instruction may be an SQL statement.
And S123, collecting the corresponding service data returned by the preset database.
Specifically, after the component rendering is completed, the rendering engine accesses the background interaction engine through the interface, the background reads the data source relationship (namely, the relation between the service data and the component) configured on the page according to the page code transmitted from the front end, and generates a query instruction according to the data source relationship, wherein the query instruction may include a query condition of the service data. And sending the query instruction to a database, executing the query instruction in the database, querying corresponding service data and returning the service data to the front-end page.
S13, binding the service data on the component corresponding to the component template to generate a visual page.
After the business data is obtained, the business data board can be pushed against the component corresponding to the component template, and then the component template is rendered, so that the visual page is generated.
Specifically, after the page rendering engine at the front end acquires the service data, the data is bound to the component through data bidirectional binding of vue.
Referring to fig. 5, an operation flow diagram of a method for generating a visualized page according to an embodiment of the present invention is shown.
In an embodiment, after viewing the visualization page, the user may need to adjust the visualization page, and in order to update the visualization page according to the adjustment of the user, the method may further include:
s14, acquiring interactive information of the user triggered page, wherein the interactive information comprises newly added information, edited information, saved information and deleted information.
Specifically, a user may trigger interactive components in a visualization page, and each interactive component may be bound to a corresponding interactive event, so that interaction information of the user may be collected through the interactive components. For example, an interactive component that triggers a delete event, through which information for the user's delete action is obtained.
And S15, updating the visual page by adopting the interaction information.
After the interaction information is obtained, the visualized page may be updated based on the interaction information, for example, some data may be deleted, some data may be added, and the like.
In one embodiment, step S15 may include the following sub-steps:
and S151, acquiring a current data source of the visual page.
S152, sending the current data source to a preset background interaction engine in an Http mode, so that the preset background interaction engine generates a modification instruction based on the current data source, and returning updated data.
And S153, updating the visual page by adopting the updating data.
For example, when a user triggers an added interactive component, the rendering engine triggers a related event, acquires a table structure of a current page, and acquires a corresponding component template from the table structure to obtain a current data source. And after the background interaction engine receives the business data submitted by the front end, SQL statements such as insert, update, delete and the like are spliced according to the configured data source and the main foreign key relation of the form and then executed in a database, so that the added data is stored. Meanwhile, the visualization page can add the added data into the page, so that the page is updated.
Referring to fig. 6, an operation flow diagram of a method for generating a visualized page according to an embodiment of the present invention is shown.
Specifically, when a user accesses a page, acquiring component configuration information selected by the user; rendering a component template based on the component configuration information; and then acquiring business data corresponding to the component template, and adding the business data into the corresponding component template in a data binding mode to generate a visual page.
In this embodiment, the embodiment of the present invention provides a method for generating a visual page, which has the following beneficial effects: the invention can preset the mapping relation between the data and the page components, can directly edit the SQL instruction control interface engine to extract the corresponding service data when developing the page, and calls the corresponding components according to the service data to display the data to generate the visual page, thereby not only unifying the development standard, but also reducing the difficulty of page development, greatly shortening the time length of page development and improving the efficiency of page development.
An embodiment of the present invention further provides a device for generating a visual page, and referring to fig. 7, a schematic structural diagram of the device for generating a visual page according to the embodiment of the present invention is shown.
By way of example, the generation apparatus of the visualization page may include:
a rendering module 701, configured to render and display a component template based on component parameters selected by a user when the component parameters are obtained;
an obtaining module 702, configured to obtain service data corresponding to the component parameter according to a preset data mapping relationship;
a generating module 703, configured to bind the service data to the component corresponding to the component template, and generate a visual page.
Optionally, the rendering module is further configured to:
acquiring page component information triggered by a user from the component selection data based on a preset rendering engine;
if the page component information meets the configuration right, reading the page component information to obtain a component option;
searching a corresponding component template from a component library according to the component options;
js frame through preset vue, and selecting the component configuration information to a display interface.
Optionally, the obtaining module is further configured to:
accessing a preset background interaction engine based on a preset rendering engine so that the preset interaction engine reads the component configuration information to obtain a data source;
editing and generating a query instruction corresponding to the data source according to a preset data mapping relation, and sending the query instruction to a preset database;
and collecting the corresponding service data returned by the preset database.
Optionally, the apparatus further comprises:
the trigger module is used for acquiring interactive information of a user trigger page, wherein the interactive information comprises newly added information, edited information, saved information and deleted information;
and the updating module is used for updating the visual page by adopting the interaction information.
Optionally, the update module is further configured to:
acquiring a current data source of the visual page;
sending the current data source to a preset background interaction engine in an Http mode, so that the preset background interaction engine generates a modification instruction based on the current data source editing, and returns updated data;
and updating the visual page by adopting the updating data.
Optionally, the apparatus further comprises:
the table building module is used for building a table structure related to the business data, setting data association between the business data in the table structure and a preset database, and obtaining a data mapping relation;
the construction engine module is used for setting a plurality of interactive interfaces based on the service data in the table structure and constructing a background interactive engine by adopting the interactive interfaces;
and the distribution module is used for determining the corresponding relation between each service data in the table structure and the corresponding component and distributing the configuration authority to each corresponding component.
An embodiment of the present invention further provides a system for generating a visual page, and referring to fig. 8 to 9, a schematic composition diagram of the system for generating a visual page according to an embodiment of the present invention and a schematic structural diagram of the system for generating a visual page according to an embodiment of the present invention are respectively shown.
By way of example, the generation system of the visualization page may include:
the data source management module is used for managing a data model, a data relation and a bidirectional mapping database;
the interface management module is used for managing a data interface, configuring a data model used by the interface, a returned data column and filtering the data authority of the interface;
the page visualization design module is used for providing various common visualization components based on the web, designing page elements in a dragging mode and binding the data model relation of each component;
the user access module is used for providing access links of related pages for users to access;
the page rendering engine module is used for dynamically rendering a page to a user according to the visual configuration and loading data through a back-end interface;
the back-end interface engine module is used for reading and writing related service data according to the operation of a user and storing the data into a database in a persistent mode according to a data model and a data relation;
and the database module is used for storing the data returned by the back-end interface engine module.
It can be clearly understood by those skilled in the art that, for convenience and brevity, the specific working process of the apparatus described above may refer to the corresponding process in the foregoing method embodiment, and is not described herein again.
Further, an embodiment of the present application further provides an electronic device, including: a memory, a processor and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the method for generating a visual page according to the above embodiments.
Further, the present application provides a computer-readable storage medium, where computer-executable instructions are stored, where the computer-executable instructions are used to cause a computer to execute the method for generating a visualized page according to the foregoing embodiment.
While the foregoing is directed to the preferred embodiment of the present invention, it will be understood by those skilled in the art that various changes and modifications may be made without departing from the spirit and scope of the invention.
Claims (10)
1. A method for generating a visual page, the method comprising:
when the component parameters selected by a user are obtained, rendering and displaying a component template based on the component parameters;
acquiring service data corresponding to the component parameters according to a preset data mapping relation;
and binding the service data on the component corresponding to the component template to generate a visual page.
2. A method of generating a visualization page as recited in claim 1, wherein said rendering a presentation component template based on said component parameters comprises:
acquiring page component information triggered by a user from the component selection data based on a preset rendering engine;
if the page component information meets the configuration right, reading the page component information to obtain a component option;
searching a corresponding component template from a component library according to the component options;
js frame through preset vue, and selecting the component configuration information to a display interface.
3. The method for generating a visual page according to claim 2, wherein the obtaining, by a preset interaction engine, the service data corresponding to the component parameter according to a preset data mapping relationship includes:
accessing a preset background interaction engine based on a preset rendering engine so that the preset interaction engine reads the component configuration information to obtain a data source;
editing and generating a query instruction corresponding to the data source according to a preset data mapping relation, and sending the query instruction to a preset database;
and collecting the corresponding service data returned by the preset database.
4. A method of generating a visualization page as recited in claim 1, wherein after the step of generating a visualization page, the method further comprises:
acquiring interactive information of a user trigger page, wherein the interactive information comprises newly added information, edited information, saved information and deleted information;
and updating the visual page by adopting the interaction information.
5. The method for generating the visual page according to claim 4, wherein the performing the update operation on the visual page by using the interaction information includes:
acquiring a current data source of the visual page;
sending the current data source to a preset background interaction engine in an Http mode, so that the preset background interaction engine generates a modification instruction based on the current data source editing, and returns updated data;
and updating the visual page by adopting the updating data.
6. A method of generating a visualization page as recited in claim 1, wherein prior to the step of obtaining user-selected component parameters, the method further comprises:
constructing a table structure related to business data, and setting data association between the business data in the table structure and a preset database to obtain a data mapping relation;
setting a plurality of interactive interfaces based on the service data in the table structure, and constructing a background interactive engine by adopting the interactive interfaces;
and determining the corresponding relation between each service data in the table structure and the corresponding component, and distributing configuration authority to each corresponding component.
7. An apparatus for generating a visual page, the apparatus comprising:
the rendering module is used for rendering and displaying the component template based on the component parameters when the component parameters selected by a user are obtained;
the acquisition module is used for acquiring the service data corresponding to the component parameters according to a preset data mapping relation;
and the generating module is used for binding the service data on the component corresponding to the component template to generate a visual page.
8. A visual page generation system, which is applied to the visual page generation method according to any one of claims 1 to 6, and comprises:
the data source management module is used for managing a data model, a data relation and a bidirectional mapping database;
the interface management module is used for managing a data interface, configuring a data model used by the interface, a returned data column and filtering the data authority of the interface;
the page visualization design module is used for providing various common visualization components based on the web, designing page elements in a dragging mode and binding the data model relation of each component;
the user access module is used for providing access links of related pages for users to access;
the page rendering engine module is used for dynamically rendering a page to a user according to the visual configuration and loading data through a back-end interface;
the back-end interface engine module is used for reading and writing related service data according to the operation of a user and storing the data into a database persistently according to the data model and the data relation;
and the database module is used for storing the data returned by the rear-end interface engine module.
9. An electronic device, comprising: memory, processor and computer program stored on the memory and executable on the processor, characterized in that the processor implements the method of generating a visualization page according to any of claims 1 to 6 when executing the program.
10. A computer-readable storage medium storing computer-executable instructions for causing a computer to perform the method of generating a visualized page according to any one of claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210917579.2A CN115390840A (en) | 2022-08-01 | 2022-08-01 | Visual page generation method, device and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210917579.2A CN115390840A (en) | 2022-08-01 | 2022-08-01 | Visual page generation method, device and system |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115390840A true CN115390840A (en) | 2022-11-25 |
Family
ID=84118615
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210917579.2A Pending CN115390840A (en) | 2022-08-01 | 2022-08-01 | Visual page generation method, device and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115390840A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117093219A (en) * | 2023-10-20 | 2023-11-21 | 成都华栖云科技有限公司 | Visualization method based on data source, electronic equipment and storage medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111443911A (en) * | 2020-03-24 | 2020-07-24 | 五八有限公司 | Page development method and device, electronic equipment and computer storage medium |
| CN111708537A (en) * | 2020-06-18 | 2020-09-25 | 深圳前海微众银行股份有限公司 | Page rendering method and device based on component template and readable storage medium |
| CN113094037A (en) * | 2021-04-20 | 2021-07-09 | 上海携宁计算机科技股份有限公司 | Interaction method, development platform, equipment and storage medium for forms and workflows |
| CN114089958A (en) * | 2020-07-31 | 2022-02-25 | 中国石油天然气股份有限公司 | Form visual configuration method and device |
| CN114281323A (en) * | 2021-03-30 | 2022-04-05 | 北京百特运通科技有限公司 | Front-end form generation method and system |
-
2022
- 2022-08-01 CN CN202210917579.2A patent/CN115390840A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111443911A (en) * | 2020-03-24 | 2020-07-24 | 五八有限公司 | Page development method and device, electronic equipment and computer storage medium |
| CN111708537A (en) * | 2020-06-18 | 2020-09-25 | 深圳前海微众银行股份有限公司 | Page rendering method and device based on component template and readable storage medium |
| CN114089958A (en) * | 2020-07-31 | 2022-02-25 | 中国石油天然气股份有限公司 | Form visual configuration method and device |
| CN114281323A (en) * | 2021-03-30 | 2022-04-05 | 北京百特运通科技有限公司 | Front-end form generation method and system |
| CN113094037A (en) * | 2021-04-20 | 2021-07-09 | 上海携宁计算机科技股份有限公司 | Interaction method, development platform, equipment and storage medium for forms and workflows |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117093219A (en) * | 2023-10-20 | 2023-11-21 | 成都华栖云科技有限公司 | Visualization method based on data source, electronic equipment and storage medium |
| CN117093219B (en) * | 2023-10-20 | 2023-12-26 | 成都华栖云科技有限公司 | Visualization method based on data source, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP7460689B2 (en) | Software application development based on spreadsheets | |
| US7650335B2 (en) | High-level database management system | |
| US7730410B2 (en) | System and method for customizing form elements in a form building application | |
| RU2421797C2 (en) | Indication, definition and detection of electronic table document parameters | |
| KR20120002579A (en) | Extending collaboration capabilities to external data | |
| AU2016265680B2 (en) | Techniques for configuring a generic program using controls | |
| Fill | SeMFIS: a flexible engineering platform for semantic annotations of conceptual models | |
| CN110249356B (en) | Sharing method and system for user-defined ERP function | |
| JP5112085B2 (en) | Office flow generation apparatus and method | |
| US20110225484A1 (en) | Cloud based modeling for enhancing spreadsheets | |
| JP2019506645A (en) | Page construction method, terminal, storage medium, and page construction device | |
| CN112685025A (en) | Method and system for quickly building front-end page | |
| CN113407284A (en) | Navigation interface generation method and device, storage medium and electronic equipment | |
| CN115390840A (en) | Visual page generation method, device and system | |
| KR101902191B1 (en) | Apparatus and method for dynamic customization and execution of query based software logic for multitenant | |
| CN114238724A (en) | Data visualization method and device | |
| KR102198686B1 (en) | Method for creating business screen and system for performing the same | |
| JP4439246B2 (en) | Document browsing control method, document browsing program, and document browsing program generation system | |
| US11449493B2 (en) | Persistent and configurable multidimensional data constraints | |
| US20210150476A1 (en) | Where-used information for user interface | |
| CN117035664A (en) | Template-based trust approval standardized processing method, device, equipment and medium | |
| JP2022141592A (en) | Community-oriented and cloud-based digital annealing platform | |
| CN117992035A (en) | Service model modeling method, device, equipment and storage medium | |
| CN115952232A (en) | Cloud data visualization method and device, terminal and storage medium | |
| CN117931164A (en) | Form application design method and system based on low codes |
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: 20221125 |
|
| RJ01 | Rejection of invention patent application after publication |