CN110007917B - Visual page generation and browsing method based on browser - Google Patents
Visual page generation and browsing method based on browser Download PDFInfo
- Publication number
- CN110007917B CN110007917B CN201910173789.3A CN201910173789A CN110007917B CN 110007917 B CN110007917 B CN 110007917B CN 201910173789 A CN201910173789 A CN 201910173789A CN 110007917 B CN110007917 B CN 110007917B
- Authority
- CN
- China
- Prior art keywords
- page
- component
- display
- data set
- data
- 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.)
- Active
Links
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
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y04—INFORMATION OR COMMUNICATION TECHNOLOGIES HAVING AN IMPACT ON OTHER TECHNOLOGY AREAS
- Y04S—SYSTEMS INTEGRATING TECHNOLOGIES RELATED TO POWER NETWORK OPERATION, COMMUNICATION OR INFORMATION TECHNOLOGIES FOR IMPROVING THE ELECTRICAL POWER GENERATION, TRANSMISSION, DISTRIBUTION, MANAGEMENT OR USAGE, i.e. SMART GRIDS
- Y04S10/00—Systems supporting electrical power generation, transmission or distribution
- Y04S10/50—Systems or methods supporting the power network operation or management, involving a certain degree of interaction with the load-side end user applications
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a visual page generating and browsing method based on a browser, which comprises the following steps: 1) configuring a data set, namely configuring the data set required by a visual page based on a browser, determining a data structure of the data set, and acquiring a source and dynamic parameters; 2) designing a visual interface, and configuring a page layout component and a display component; 3) compiling scripts, compiling page interaction logic and service processing logic scripts and finishing interaction response processing; 4) generating a page, storing and generating a page template file; 5) and browsing the page, and analyzing the page template file to generate an application page. The page editing is based on browser operation and does not need to be installed, and the visual operation reduces the coding work; the method for realizing linkage of the page components is simplified, the traditional method for realizing events through a coding mode is changed into the method for realizing linkage relation among the components through configuration, and the method is quick and efficient and does not need coding.
Description
Technical Field
The invention relates to the technical field of power grid dispatching automation, in particular to a visual page generating and browsing method based on a browser.
Background
With the development of browser technology, in the current power grid dispatching automation system, the page editing and browsing mode of the traditional C/S architecture is difficult to meet the rapid change of business requirements and the light-weight requirement on the operating environment. The power grid dispatching automation system is based on Web application functions, when the power grid dispatching automation system is put into operation on site, page layout, style and other display effects are required to be adjusted adaptively according to local user requirements, the traditional coding mode faces the problems of long development period, function code solidification, difficulty in maintaining site engineering and the like, developers are required to modify original codes and debug again according to the site requirements, then the power grid dispatching automation system is put into operation on site for testing, the local requirements of users are difficult to respond quickly, and the burden of product developers is increased.
Disclosure of Invention
In order to solve the defects in the prior art, the invention provides a visual page generation and browsing method based on a browser, product research personnel can realize page design in a visual mode based on dragging, engineering personnel can adjust page layout and style in a visual mode on site, the local requirements of users can be responded quickly, the requirements of efficient development and easy maintenance of Web application of a power grid dispatching automation system are met, and the problems of long development period, function code solidification and difficult maintenance of site engineering in the traditional coding mode are solved.
In order to achieve the above purpose, the invention adopts the following technical scheme: a visual page generation and browsing method based on a browser is characterized in that: the method comprises the following steps:
1) configuring a data set, namely configuring a data set required by a visual page based on a browser, determining a data structure of the data set, and acquiring a source and dynamic parameters;
2) realizing visual interface design based on a browser, and configuring a page layout component and a display component;
3) compiling scripts, compiling page interaction logic and service processing logic scripts and finishing interaction response processing;
4) generating a page, storing and generating a page template file;
5) and browsing the page, and analyzing the page template file to generate an application page.
The method for generating and browsing the visual page based on the browser is characterized in that: the data set data structure determines a data model of the data set; the data set acquisition source comprises static data, asynchronous request dynamic data and database data; the dynamic parameters comprise dynamic parameter variable names and data type information obtained by data acquisition.
The method for generating and browsing the visual page based on the browser is characterized in that: the step 2) comprises the following specific steps: dragging the page layout component to complete the page layout design; dragging the page display component to a corresponding position in the layout component, configuring display component attributes, associating a data set, setting an interaction event and a linkage event, and realizing linkage between multiple components of the page; and configuring a page display component for display and designing the overall style of the page.
The method for generating and browsing the visual page based on the browser is characterized in that: the method for realizing linkage among multiple components of the page comprises the following steps: and when the components are changed, the refreshing operation of the associated components is triggered to realize the linkage between different components of the page.
The method for generating and browsing the visual page based on the browser is characterized in that: the page template file comprises a display template area, a logic script area and a display style area; the display template area is stored according to the component hierarchical structure; the logic script area stores data set configuration, component model definition, component data association, component interface interaction logic scripts, a display style area and stores the display style configuration of each component in the page template.
The method for generating and browsing the visual page based on the browser is characterized in that: the step 5) comprises the following specific steps:
1) analyzing the hierarchical structure of the display template area component to realize the analysis of the layout component and the display component; generating a component tree static object model, wherein the component tree static object model is used for describing a component hierarchical structure of a page template file display template area;
2) analyzing the logical script area data set configuration to generate a data set object, analyzing a component object on a component tree static object model associated with a component model, analyzing a component interaction event setting binding component, associating the component tree static object model, generating a component tree dynamic object model, and using the component tree dynamic object model to describe the component tree dynamic property and the response event model structure;
3) analyzing the display style area, and binding the configuration of each component style in the dynamic object model of the component tree; and finally generating a display page according to the dynamic object model of the component tree.
The invention achieves the following beneficial effects:
1) the page editing is based on browser operation and does not need to be installed, and the visual operation reduces the coding work;
2) the page development process is divided into a data set configuration part, an interface layout design part, an assembly configuration part, a style design part and a script compiling part, the research and development and engineering responsibilities are clear, and the engineering localization maintenance is convenient;
3) the method for realizing linkage of the page components is simplified, the traditional method for realizing events in a coding mode is changed into the method for realizing linkage relation among the components, and the method is quick and efficient and does not need coding;
4) the page template analysis algorithm is simple and flexible, complex page analysis and rendering are supported, and the application page requirements are met.
Drawings
FIG. 1 is a flow chart of the present invention; FIG. 2 is a schematic diagram of a component linkage implementation;
FIG. 3 is a diagram illustrating a standard structure of a page template file;
FIG. 4 is a flowchart of a page template file parsing algorithm.
Detailed Description
The invention is further described below with reference to the accompanying drawings. The following examples are only for illustrating the technical solutions of the present invention more clearly, and the protection scope of the present invention is not limited thereby.
As shown in fig. 1, a method for generating and browsing a visual page based on a browser includes the following steps:
1) configuring a data set, namely configuring a data set required by a visual page based on a browser, determining a data structure of the data set, and acquiring a source and dynamic parameters;
the data set is a data source displayed by a page, the data set configuration comprises a configuration data structure, a data acquisition source and dynamic parameters, the data structure determines a data model structure of the data set, the data model structure comprises field names, data types and data length information, and different data structures can be defined according to the requirements of different display components; the data acquisition sources comprise static data, asynchronous request dynamic data, database data and the like; the dynamic parameter defines the variable name of the dynamic parameter and the data type information of data acquisition, different values can be transmitted as required, and different data can be acquired through a data acquisition source.
2) Realizing a visual interface design based on a browser, and providing a page layout component and a display component; selecting a page layout component to complete the page layout design; dragging the page display component to a corresponding position in the layout component, configuring display component attributes, associating a data set, and setting an interaction event and a linkage event; configuring a display effect of a page display component and designing an overall style of a page;
the method comprises the steps of realizing visual interface design in a dragging mode based on a browser, and dividing the interface design into two steps of layout design and component configuration. The layout design divides the page into various parts by selecting proper layout components to meet the page layout requirement; the method comprises the steps of component configuration, dragging required display components to proper positions in a page layout, configuring basic attributes, style appearances and associated data sets of the display components, setting component interaction events and processing method names and linkage relations among multiple components of the page.
As shown in fig. 2, the method for realizing linkage between multiple components of the page comprises the following steps: the method comprises the steps of configuring a component linkage event and an output parameter thereof, associating a component input parameter mapping relation, triggering an associated component refreshing operation when the component changes, realizing dynamic refreshing of an associated component data set according to the input parameter, automatically calculating the change of the data set through the association relation of the data set and the component, and displaying the associated component again to realize linkage among different components of a page.
3) Compiling scripts, compiling page interaction logic and service processing logic scripts and finishing interaction response processing;
writing an interface component interaction event processing method through a script to realize logic and respond to component interaction event operation; and compiling a data operation script, processing the data acquired through the data set according to the service logic requirements, and displaying the result through a display component.
4) Generating a page, storing and generating a page template file;
exporting page data set configuration, visual interface design and script compiling results to generate a page template file, wherein the page template file is used for describing a Web page structure of a power grid dispatching automation system and comprises a display template area, a logic script area and a display style area, the structure description standard of the page template file is defined as shown in figure 3, the display template area stores the attribute and the upper-lower level relation of each node of a layout component and a display component according to the interface interaction component hierarchical structure, and the component nodes store component names, component types, component model identifiers, component interaction events and component display settings; the logic script area stores scripts such as data set configuration, component model definition, component data association, component interface interaction logic and the like, displays the style area, and stores the display style configuration of each component in the page template.
5) And browsing the page, and analyzing the page template file to generate an application page.
As shown in fig. 4, when the page template file is loaded, parsing is performed according to the standard structure of the page template file, the core is a page template parsing algorithm based on an abstract syntax tree, and the flow of parsing the page template file to generate the application page algorithm is shown in fig. 4, and includes the steps of:
1) analyzing the hierarchical structure of the display template area components 2-8 to realize the analysis of the layout components and the display components; generating a component tree static object model 9, wherein the component tree static object model is used as a logic structure for describing a component hierarchical structure of a page template file display template area;
2) analyzing a logical script area data set configuration generation data set object 11, analyzing a component object 12 on a component model association component tree static object model, analyzing a component interaction event setting binding component 13, associating a component tree static object model 14, generating a component tree dynamic object model, wherein the component tree dynamic object model is used for describing a component tree component dynamic property and responding to an event model structure;
3) analyzing a display style area 15, and binding the configuration 16 of each component style in the dynamic object model of the component tree; and finally, rendering a final display page 17 according to the component tree dynamic object model.
The page editing is based on browser operation and does not need to be installed, and the visual operation reduces the coding work; the Web page development process of the power grid dispatching automation system is divided into a data set configuration part, an interface layout design part, an assembly configuration part, a style design part and a script compiling part, the research and development and engineering responsibilities are clear, the page logic and the display effect configuration are separated, and the engineering localization maintenance is facilitated; the method for realizing the linkage of the simplified page components changes the traditional method for realizing events through a coding mode into the method for realizing the linkage relation among the configured components, is quick and efficient, does not need coding, is simple and flexible in page template analysis, and can support the page requirements of loads.
The above description is only a preferred embodiment of the present invention, and it should be noted that, for those skilled in the art, several modifications and variations can be made without departing from the technical principle of the present invention, and these modifications and variations should also be regarded as the protection scope of the present invention.
Claims (5)
1. A visual page generation and browsing method based on a browser is characterized in that: the method comprises the following steps:
1) configuring a data set, namely configuring a data set required by a visual page based on a browser, determining a data structure of the data set, and acquiring a source and dynamic parameters;
2) realizing visual interface design based on a browser, and configuring a page layout component and a display component;
3) compiling scripts, compiling page interaction logic and service processing logic scripts and finishing interaction response processing;
4) generating a page, storing and generating a page template file;
5) browsing the page, and analyzing the page template file to generate an application page;
the step 5) comprises the following specific steps:
1) analyzing the hierarchical structure of the display template area component to realize the analysis of the layout component and the display component; generating a component tree static object model, wherein the component tree static object model is used for describing a component hierarchical structure of a page template file display template area;
2) analyzing the data set configuration of the logic script area to generate a data set object, analyzing a component object on a component model association component tree static object model, analyzing a component interaction event to set a binding component, associating the component tree static object model, generating a component tree dynamic object model, and using the component tree dynamic object model to describe the component tree dynamic property and the response event model structure;
3) analyzing the display style area, and binding the configuration of each component style in the dynamic object model of the component tree; and finally generating a display page according to the dynamic object model of the component tree.
2. The method for generating and browsing visual pages based on browser as claimed in claim 1, wherein: the data set data structure determines a data model of the data set; the data set acquisition source comprises static data, asynchronous request dynamic data and database data; the dynamic parameters comprise dynamic parameter variable names and data type information obtained by data acquisition.
3. The method for generating and browsing visual pages based on browser as claimed in claim 1, wherein: the step 2) comprises the following specific steps: dragging the page layout component to complete the page layout design; dragging the page display component to a corresponding position in the layout component, configuring display component attributes, associating a data set, setting an interaction event and a linkage event, and realizing linkage between multiple components of the page; and configuring a page display component for display and designing the overall style of the page.
4. The method for generating and browsing visual page based on browser as claimed in claim 3, wherein: the method for realizing linkage among multiple components of the page comprises the following steps: and when the components are changed, the refreshing operation of the associated components is triggered to realize the linkage between different components of the page.
5. The method for generating and browsing visual pages based on browser as claimed in claim 1, wherein: the page template file comprises a display template area, a logic script area and a display style area; the display template area is stored according to the component hierarchical structure; the logic script area stores data set configuration, component model definition, component data association, component interface interaction logic scripts, a display style area and stores the display style configuration of each component in the page template.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910173789.3A CN110007917B (en) | 2019-03-08 | 2019-03-08 | Visual page generation and browsing method based on browser |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910173789.3A CN110007917B (en) | 2019-03-08 | 2019-03-08 | Visual page generation and browsing method based on browser |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110007917A CN110007917A (en) | 2019-07-12 |
| CN110007917B true CN110007917B (en) | 2022-09-30 |
Family
ID=67166722
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910173789.3A Active CN110007917B (en) | 2019-03-08 | 2019-03-08 | Visual page generation and browsing method based on browser |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110007917B (en) |
Families Citing this family (25)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112445949A (en) * | 2019-08-30 | 2021-03-05 | 北京科东电力控制***有限责任公司 | Configuration type visual display method, device and system |
| CN111079047B (en) * | 2019-11-28 | 2020-09-15 | 蜂助手股份有限公司 | Web-oriented page construction system |
| CN111045707B (en) * | 2019-12-20 | 2024-04-09 | 深圳市珍爱捷云信息技术有限公司 | Method, apparatus, computer device and storage medium for updating applet |
| CN111240659A (en) * | 2019-12-23 | 2020-06-05 | 福建亿能达信息技术股份有限公司 | Page design method based on Vue |
| CN111221523A (en) * | 2019-12-24 | 2020-06-02 | 方正株式(武汉)科技开发有限公司 | Optimized manufacturing method and system of Web page linkage control, server and medium |
| CN111158670A (en) * | 2019-12-27 | 2020-05-15 | 河北航天信息技术有限公司 | Visual auxiliary software development method and system |
| CN111208982B (en) * | 2020-01-08 | 2023-03-07 | 杭州雷钧数字智云科技有限公司 | ERP system rapid customization platform based on visual configuration mode |
| CN111274509B (en) * | 2020-01-14 | 2021-08-17 | 拉扎斯网络科技（上海）有限公司 | Object list page display method and device |
| CN112416339A (en) * | 2020-02-17 | 2021-02-26 | 上海哔哩哔哩科技有限公司 | Page development method and device and computer equipment |
| CN111460059A (en) * | 2020-03-02 | 2020-07-28 | 平安国际智慧城市科技股份有限公司 | Ambient air quality data visualization method, device, equipment and storage medium |
| CN111399817A (en) * | 2020-03-16 | 2020-07-10 | 杭州涂鸦信息技术有限公司 | Method and system for generating intelligent equipment control panel through real-time preview |
| CN111966349B (en) * | 2020-07-09 | 2022-08-09 | 杭州睿疆科技有限公司 | Method, device and computer equipment for developing programs based on BS (browser/server) architecture |
| CN111966266A (en) * | 2020-07-31 | 2020-11-20 | 上海泛微网络科技股份有限公司 | Page layout method and related equipment |
| CN112114797B (en) * | 2020-09-03 | 2023-04-07 | 成都中科合迅科技有限公司 | Configurable visualization development method and system |
| CN112130856B (en) * | 2020-09-29 | 2023-11-03 | 重庆紫光华山智安科技有限公司 | Strong-expansibility front-end visual interface generation method, system, medium and terminal |
| CN112631571B (en) * | 2020-11-25 | 2024-06-18 | 浙江蓝卓工业互联网信息技术有限公司 | Linkage method and device for components in web editor |
| CN112486459B (en) * | 2020-11-27 | 2024-06-04 | 杭州大搜车汽车服务有限公司 | Method, device, computer equipment and readable storage medium for generating active page |
| CN113419724A (en) * | 2021-06-28 | 2021-09-21 | 北京致远互联软件股份有限公司 | Visual page layout method |
| CN113835693B (en) * | 2021-09-15 | 2024-03-08 | 欧电云信息科技(江苏)有限公司 | Code generation method, device, electronic equipment and storage medium |
| CN113886740A (en) * | 2021-09-30 | 2022-01-04 | 上海柯林布瑞信息技术有限公司 | Json-based page configuration system and computer |
| CN114296722A (en) * | 2021-12-10 | 2022-04-08 | 浙江嘉兴数字城市实验室有限公司 | Visual rapid development method and system applied to digital reform |
| CN114780084B (en) * | 2022-06-22 | 2022-08-30 | 成都七柱智慧科技有限公司 | Configuration system for collaborative multi-type interactive interface design |
| CN115268911A (en) * | 2022-08-01 | 2022-11-01 | 广州道然信息科技有限公司 | Television application construction method based on layout and components |
| CN116974558B (en) * | 2023-06-13 | 2024-02-23 | 天翼爱音乐文化科技有限公司 | Marketing billing activity H5 page development platform and development method |
| CN116880826B (en) * | 2023-09-07 | 2023-12-08 | 厦门畅享信息技术有限公司 | Visualized code generation method |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104049978A (en) * | 2014-06-27 | 2014-09-17 | 北京思特奇信息技术股份有限公司 | Method and system for achieving visualized edition and combination of codes |
| CN109240692A (en) * | 2018-11-16 | 2019-01-18 | 重庆满惠网络科技有限公司 | A kind of method for building up and system of the web database exploitation based on common template |
-
2019
- 2019-03-08 CN CN201910173789.3A patent/CN110007917B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104049978A (en) * | 2014-06-27 | 2014-09-17 | 北京思特奇信息技术股份有限公司 | Method and system for achieving visualized edition and combination of codes |
| CN109240692A (en) * | 2018-11-16 | 2019-01-18 | 重庆满惠网络科技有限公司 | A kind of method for building up and system of the web database exploitation based on common template |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110007917A (en) | 2019-07-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110007917B (en) | Visual page generation and browsing method based on browser | |
| CN109254771B (en) | Monitoring page generation method and device | |
| CN116225429A (en) | Pulling type component frame-based ipage webpage type low-code development platform | |
| CN103345387B (en) | The method realizing component reusing technology based on component package | |
| CN101944027A (en) | User interface generation method | |
| CN113094042B (en) | Browser-based realization and analysis method for custom component of power automation system | |
| CN104965714A (en) | Code generation method and system of application software | |
| CN112286512A (en) | UI management subsystem of avionics simulation test platform | |
| CN112199086A (en) | Automatic programming control system, method, device, electronic device and storage medium | |
| CN111124379B (en) | Page generation method and device, electronic equipment and storage medium | |
| CN104657384A (en) | Dynamic allocation report data processing method based on two-dimension relationship | |
| CN102135873A (en) | Method and device for creating user interface | |
| CN111241349A (en) | Wiring diagram data display method and system based on graph conversion | |
| CN111625226A (en) | Prototype-based human-computer interaction design implementation method and system | |
| CN112182236A (en) | Knowledge graph construction method and system and electronic equipment | |
| CN101876917A (en) | Control development method and device | |
| CN110968294A (en) | Business domain model establishing system and method | |
| KR20150078840A (en) | Storage medium, method and system for storinging integrated platform for developing mobile user interface | |
| CN110134396A (en) | A kind of Development Framework and method based on Nodejs development interface component | |
| Yang et al. | Development and optimization of CAD system based on big data technology | |
| CN103593188A (en) | System and method for managing what-you-see-is-what-you-get menus of instrument | |
| CN116909553A (en) | Page online development and local compiling operation system | |
| CN115525321A (en) | Distributed task generation method, device, equipment and storage medium | |
| CN115202647A (en) | Data analysis visualization method and system | |
| CN112199075B (en) | Intelligent information processing method and framework system based on micro-service |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |