阅读说明：本技术 浏览器拖拽开发中单页面级别的页面下钻工具 (Single-page-level page drill-down tool for browser dragging development ) 是由 林飞 夏俊 易永波 古元 毛华阳 华仲峰 于 2021-07-04 设计创作，主要内容包括：浏览器拖拽开发中单页面级别的页面下钻工具涉及信息技术领域。本发明由根页面定义器、单页面关系树更新模块、组件位置定位模块、组件跳转配置模块和组件事件交互配置模块组成；本发明的单页面下钻可以让制作人员更加精细的控制跳转页面的加载,同时已经加载的页面不需要重复加载,跳转的页面可以根据业务的合适时机做到按需加载,这样极大了提示页面加载的效率。(A page drill-down tool for single page level in browser dragging development relates to the technical field of information. The invention is composed of a root page definer, a single page relation tree updating module, a component position positioning module, a component skipping configuration module and a component event interaction configuration module; the single-page drill-down method can enable a manufacturer to more finely control the loading of the jump page, meanwhile, the loaded page does not need to be repeatedly loaded, and the jump page can be loaded as required according to the proper time of the service, so that the page loading efficiency is greatly prompted.)

1. The browser dragging and developing single-page-level page drilling tool is characterized by comprising a root page definer, a single-page relation tree updating module, a component position positioning module, a component skipping configuration module and a component event interaction configuration module;

the root page definer is responsible for defining the size of the root page and generating a canvas and a cover layer according to the size of the root page;

the single-page relation tree updating module is responsible for generating a single-page relation tree, and the single-page relation tree is composed of a root page, a level-one sub page to an N level sub page, and a level-one dialog box to an N level dialog box; the N-level sub-page is a lower page of the N minus 1-level sub-page, the N-level dialog box is a lower dialog box of the N minus 1-level sub-page, and the N-level dialog box is a lower dialog box of the N minus 1-level dialog box; the single-page relation tree updating module defines the sizes of all levels of sub-pages and all levels of dialog boxes;

the single-page relation tree updating module defines a global drill-down function which starts from a root page and is effective to all levels of sub-pages, and the global drill-down function specifies that the following arbitrary conditions are required to be met when drilling down is executed: the progressive drilling can be completed only by drilling from the upper page to the lower page, can be completed only by drilling from the upper page to the lower dialog box, and can be completed only by drilling from the upper dialog box to the lower dialog box;

the single-page relation tree updating module defines a global hidden function which is effective to all levels of sub-pages starting from a root page, and the global hidden function specifies: after the page is drilled downwards, hiding a previous page and displaying a next page;

the single-page relation tree updating module defines a global covering function which starts from a root page and is effective to all levels of sub-pages, and the global covering function specifies the following drilling time: when the dialog box is drilled down from the upper page, the upper page is covered by the covering layer, and when the dialog box is drilled down from the upper dialog box, the upper dialog box is covered by the covering layer;

the single-page relation tree updating module generates unique identifiers for all levels of sub-pages and all levels of dialog boxes, and stores size and level information through the unique identifiers;

the single-page relation tree updating module configures backspacing levels for each level of subpages and dialog boxes, and the backspacing levels can be defined in a cross-level manner but must be ensured to be on a drill-down path, so that the backspacing levels of the drill-down path are prevented from being broken down;

the component position positioning module defines the position and the size of a component in the sub-page, records the position and the size by combining the sub-page identifier and the component identifier, and reports the position and the size to the single-page relation tree updating module after recording; the component position positioning module defines the position and the size of a component in the dialog box, records the position and the size by combining the dialog box identifier and the component identifier, and reports the position and the size to the single-page relation tree updating module after recording;

the component skip configuration module configures the lower-level page identifier for component skip, wherein the skip meaning is to drill down through the component, and the sub-page does not have the drill down capability and is to drill down through the component in the sub-page; when the component is drilled down to the dialog box, the component skip configuration module configures the dialog box identifier of the lower level that the component skips; the component skip configuration module reports the configured information to the single-page relation tree updating module;

the component event interaction configuration module independently configures the configuration of the dialog box and the drill-down page into a general component module and gives a general component identifier to generate a general component, and the dialog box and the drill-down page carried by the general component do not belong to the content recorded by the single-page relationship tree; the component event interaction configuration module reports the sub-page identifier of the general component to the single-page relation tree updating module;

the single-page relation tree updating module integrates the reporting information of the component position positioning module, the reporting information of the component skipping configuration module and the reporting information of the component event interaction configuration module to generate a page configuration file.

Technical Field

The invention relates to the technical field of information.

Background

The development of the Web application has been developed at a high speed for decades, the Web application is more and more popular, and the competition for companies engaged in the development of the Web application is more and more intense, so how to complete the development of the Web application in an efficient and low-cost manner is one of the important problems that many enterprises engaged in the development of the Web application want to solve.

In the field of data visualization in subdivision of Web application development, very big companies have tool products for quickly constructing data visualization pages, such as: DataV of arriyun, cloud picture of tengcong cloud. All the tools are characterized in that a Web page is divided into small reusable components, and a data visualization page is quickly constructed through mouse dragging operation and component configuration operation. The tool improves the production efficiency of the Web end data visualization page, can repeatedly use excellent visualization resources, and more importantly, reduces the technical threshold of the Web data visualization page, so that a person who is not professionally engaged in Web front-end development can complete the research and development of the high-quality Web page.

However, such tool products that use a dragging mode to complete the development of a data visualization page still cannot meet various complex production requirements, for example: the display elements required by the clients exceed the scope of the tool providing components, and a large amount of jumping and drilling-down service demands exist in the visual page. Therefore, a company with a large amount of data visualization services and good web front-end technical capability can self-research similar dragging tool products to meet development and change of own services, and meanwhile, the tools can be used for accumulating own data visualization capabilities, so that own unique competitive power and commercial value are formed in the aspect of data visualization.

The drag tool product can enable the design and research and development work of the page to become simpler, but compared with the capability of developing the visual page of the traditional Web front end, the capability of making the page by the drag tool product is insufficient, for example, a scene to be solved by the invention is just a key technology in a solution for the problem of page drill-down in the drag tool product. First, the concept and processing mode of the Web front-end page drill-down will be summarized and understood as follows:

drilling down is an important concept in data warehouse, and is defined in technical terms of computer science as follows:

an analysis operation in the data warehouse descends along the hierarchy of a particular attribute dimension, and more detailed data is obtained.

The page drill-down in the data visualization of the Web front end is essentially an implementation scheme of the data warehouse drill-down at the browser end. If we are completely the Web front end of the station, the Web front end of the drill-down page of the data visualization is essentially: clicking a certain display element in a page, the page jumps or is similar to a pop-up dialog box to display the operation mode of the new data.

In the method, by combining with the drill-down definition in the data warehouse, the problem that data association exists between the clicked element and a page which is jumped out later or a similar dialog box page is that the clicked element transmits data carried by the clicked element to the drill-down page or dialog box, and the new page or dialog box can display data with different contents according to different data contents.

From the upper analysis, the page drill-down includes two major functions, one is page jump and one is data transfer problem.

The method for solving the problem of page drill-down in the dragging tool is to complete page jump and data transfer operations in a mode of page development based on dragging. Generally, the page jump function in the dragging tool is usually to complete the page drill-down in a mode of switching URLs, that is, the whole page jump, which is the same as the mode of page synchronous submission before the web front end appears, because the page jump is the switching of the whole page and a large number of network IO requests are performed, which results in the slow page loading speed.

However, the speed of the network is getting faster and faster no matter the network is fixed network or mobile network, the loading speed may not be a pain point of special importance any more, and the slow loading is generally acceptable, but the problem of the maximum URL jump of the page or the processing of data transmission has a great problem. The transfer methods of page data of different URLs are generally classified into two types:

class 1: the server writes the data into a page, then sends the page to a client browser, and the browser processes the data;

class 2: data transfer is carried out on a browser client through a client technology, for example, transfer information is added after a URL, and a client storage mechanism of the browser is used.

For a dragging tool, the way of writing data by the server side of class 1 generally conflicts with the design concept of the dragging tool, and almost similar tools are rarely adopted in the industry. Class 2 is a commonly used data transfer scheme, but there are some problems that are difficult to solve with this scheme, which is as follows:

problem 1: the security problem is that the value of the page is easy to be used by people through the client-side transmission, and because the value transmission of the client-side is basically readable text, people can freely change the sensitive information of the parameter acquisition system. Even if an encryption algorithm for transmitting data is used, encryption and decryption are carried out at a browser end, and the safety can not be guaranteed fundamentally;

problem 2: the analysis problem of the transferred data is that when the user jumps from one page to another page, the display of the content of the jumped page is different due to different transfer values, for a dragging tool, the jumped page needs to analyze the transferred data, and the analyzed data influences the display of each component data in the jumped page. This data parsing is often difficult to unify, as follows:

scene 1: jumping from the A page to the B page, wherein the value transmitted by the A page is city = wuhan & type =1;

scene 2: c page jumps to D page, the value passed by C page is name = xxx & firm = qq;

the two values are transmitted by page jumping in the above scene, but the service meanings of the two values are obviously different, and because the specific jumping scene is logically bound with the actual service of the page, the page after jumping is manufactured in a dragging tool, the service meaning of data transmission is always needed to be considered in advance, and each display component is analyzed by specific data, which has higher difficulty for some operators not belonging to programmers, more importantly, the page is related to data analysis at a page level when being dragged, and the process design often causes the system availability to be greatly reduced;

problem 3: the interaction capacity between the jump pages is weak. Here i use an example scenario to illustrate:

when the A page jumps to the B page, data of the A can be transmitted to the B page, and the B page is constructed by using the transmitted data when initializing and loading, the B page which jumps in practical application may need to return to the A page, and at this time, the B page in turn needs to transmit a value to the A, but the A is already loaded, so the value transmission may need to initialize the A page again or because the A page is not in line with business requirements after reinitialization, the affected data in the A page needs to be dynamically changed. However, in the scene, no corresponding solution exists in most dragging tools at present.

In the actual production application, if a jump relationship exists between the page A and the page B, the jump from the page A to the page B and the jump from the page B can also be performed from the previous page A, which is a scene meeting the actual service requirements.

The problems are all the problems which are difficult to solve based on the URL mode page jump, and are more difficult in the scene that the page development is limited by the dragging tool.

The above mentioned is the jump problem between pages, and the scene of popping up dialog box in Web development is the same common service function as jump page. Most dialog boxes in the industry are functions carried by a certain component, and complete dialog box solutions are rarely available. In general, the dialog box with the dragging tool is realized by using iframe to reference a page, and the principle of page jump is not very different from that of the dialog box with the dragging tool. Therefore, the problems related to page jumping in the dragging tool also exist in the dialog box, and the scene of the dialog box is often understood as a part of the page, so that the problem that the interaction capacity between the jumping pages is weak is particularly highlighted in the scene of the dialog box.

In a development mode in a drag tool, if a page clicks an internal button or component to jump to other pages, then the pages after jumping need to be established with the page at the same level, if many pages are jumped, then a plurality of pages are established, and the business relationship between the pages is more complex in practice, so that the page management of the drill scene in the data visualization tool is very troublesome. In traditional web front-end development, pages with correlation relations are often realized by establishing a directory structure. How to effectively manage the page relation of the drill-down in the dragging tool is an important problem.

An important characteristic of page drill-down is data transfer, but the data transfer of the drill-down is often not similar to the data transfer between page components, so the analysis of the data transfer between pages often leads the data transfer between components to generate a branched flow, and the problem of data processing in a dragging tool becomes more complicated when the time comes.

Finally, from the perspective of user experience and user operation, if most of users are non-professional front-end technicians, the analysis processing of data must be considered first if the skipped page is to meet the business requirements, and such a process would increase the difficulty for many non-front-end technicians to master the business process of dragging the tool skip, thereby making it difficult to popularize such a function, resulting in reduced tool availability.

The synchronous jump of the page in the form of URL and the function of embedding the iframe popup dialog box can not effectively solve all the problems of page drill-down, but a plurality of daily scenes are very practical. If we only consider the above disadvantage of the drill-down mode, we really want to have a drill-down function based on single page in the drag tool, that is, how we complete the page jump, pop-up dialog box, data transfer and component interaction, etc. under the condition that the URL is not changed in one page.

The page drilling tool at the single page level in the browser dragging development can be used together with the prior art, and the patented prior art comprises the following steps: the patent application number is 2020106481369, the application name is dragging development component and event interaction definer for data visualization development, the patent application number is 2020106540598, and the application name is method and device for data management of dragging component in large-screen data visualization development.

Compared with the prior art, the invention has the following characteristics:

1. in a dragging tool, a canvas is used for completing the research and development work of page drilling;

2. for a page jump scene, when a page after being developed and jumped is essentially to hide components belonging to a main page, namely, a canvas is emptied, a sub-page can be drawn on the canvas;

3. for a scene of a dialog box, when a page is developed in a dragging tool, the dialog box needing to be dragged can be displayed in the tool in advance, canvas is also the principle canvas, and the dialog box is used as a reference to draw the page through dragging;

4. in a dialog box scene, the dragging operation is actually the page typesetting layout according to the main page as a coordinate reference system, and a problem exists here, although components drawn in the dialog box appear to be in the category of the dialog box and have a hierarchical relationship with the dialog box, the dragging operation is not the same, so that the components in the dialog box can be displayed before a background box of the dialog box when the page is browsed, and if the dialog box and the components of the dialog box can really achieve a parent-child class reference system in a browsing mode, the display problem can be solved.

The page drill-down of the single page level essentially only expands the content of the page in a limited display space through element hiding/displaying and corresponding interaction, so when page initialization with drill-down capability is loaded, the drilled-down page and a dialog box can be used as hidden elements of the page, if the page loading is initialized to load all page display component elements at one time, the page loading efficiency is low, if the drill-down of the page can be loaded as required, namely the page is loaded when the page is required to be displayed, the execution efficiency is greatly improved, and the drill-down of a plurality of dragging tools is carried out at one time, so that the scene performance cost of the drill-down of the tools is very high.

Disclosure of Invention

In view of the defects of the prior art, the page drill-down tool at the single-page level in browser dragging development provided by the invention comprises a root page definer, a single-page relation tree updating module, a component position positioning module, a component skip configuration module and a component event interaction configuration module;

the root page definer is responsible for defining the size of the root page and generating a canvas and a cover layer according to the size of the root page;

the single-page relation tree updating module is responsible for generating a single-page relation tree, and the single-page relation tree is composed of a root page, a level-one sub page to an N level sub page, and a level-one dialog box to an N level dialog box; the N-level sub-page is a lower page of the N minus 1-level sub-page, the N-level dialog box is a lower dialog box of the N minus 1-level sub-page, and the N-level dialog box is a lower dialog box of the N minus 1-level dialog box; the single-page relation tree updating module defines the sizes of all levels of sub-pages and all levels of dialog boxes;

the single-page relation tree updating module defines a global drill-down function which starts from a root page and is effective to all levels of sub-pages, and the global drill-down function specifies that the following arbitrary conditions are required to be met when drilling down is executed: the progressive drilling can be completed only by drilling from the upper page to the lower page, can be completed only by drilling from the upper page to the lower dialog box, and can be completed only by drilling from the upper dialog box to the lower dialog box;

the single-page relation tree updating module defines a global hidden function which is effective to all levels of sub-pages starting from a root page, and the global hidden function specifies: after the page is drilled downwards, hiding a previous page and displaying a next page;

the single-page relation tree updating module defines a global covering function which starts from a root page and is effective to all levels of sub-pages, and the global covering function specifies the following drilling time: when the dialog box is drilled down from the upper page, the upper page is covered by the covering layer, and when the dialog box is drilled down from the upper dialog box, the upper dialog box is covered by the covering layer;

the single-page relation tree updating module generates unique identifiers for all levels of sub-pages and all levels of dialog boxes, and stores size and level information through the unique identifiers;

the single-page relation tree updating module configures backspacing levels for each level of subpages and dialog boxes, and the backspacing levels can be defined in a cross-level manner but must be ensured to be on a drill-down path, so that the backspacing levels of the drill-down path are prevented from being broken down;

the component position positioning module defines the position and the size of a component in the sub-page, records the position and the size by combining the sub-page identifier and the component identifier, and reports the position and the size to the single-page relation tree updating module after recording; the component position positioning module defines the position and the size of a component in the dialog box, records the position and the size by combining the dialog box identifier and the component identifier, and reports the position and the size to the single-page relation tree updating module after recording;

the component skip configuration module configures the lower-level page identifier for component skip, wherein the skip meaning is to drill down through the component, and the sub-page does not have the drill down capability and is to drill down through the component in the sub-page; when the component is drilled down to the dialog box, the component skip configuration module configures the dialog box identifier of the lower level that the component skips; the component skip configuration module reports the configured information to the single-page relation tree updating module;

the component event interaction configuration module independently configures the configuration of the dialog box and the drill-down page into a general component module and gives a general component identifier to generate a general component, and the dialog box and the drill-down page carried by the general component do not belong to the content recorded by the single-page relationship tree; the component event interaction configuration module reports the sub-page identifier of the general component to the single-page relation tree updating module;

the single-page relation tree updating module integrates the reporting information of the component position positioning module, the reporting information of the component skipping configuration module and the reporting information of the component event interaction configuration module to generate a page configuration file.

Advantageous effects

Effect 1: drag the instrument preparation page, the drill-down of page all is one of the function bottleneck of dragging the instrument all the time, consequently many drag the instrument and can only define oneself as the show of big screen display promptly cool dazzling the show of page, if drag the instrument can more effective support drill-down function, then drag the instrument and be to the very big increase of data visualization ability, can do more deep data analysis work on the preparation basis of cool dazzling the page, this also is to cool extending of dazzling big screen ability.

Effect 2: the support of most dragging tools for drilling down is a URL (uniform resource locator) jumping mode, the loading efficiency of the mode is low, and components in each jumping page need to be initialized, so that the user experience of the jumping operation in many scenes is poor.

Effect 3: the URL page drilling or the iframe page drilling is adopted, data transmission between pages can encounter a plurality of technical barriers, and sometimes a safety problem exists.

Effect 4: at present, public large-screen tools usually pay attention to the effect of one-screen display, and customers in an actual production environment meet the display effect and pay more and more attention to the experience of interaction effect, which is a trend of future large-screen development, while drilling of most similar products in the industry based on a single page is often insufficient in support, and the invention is compliant with the trend of making up for the corresponding technical development trend.

Drawings

FIG. 1 is a system block diagram of the present invention.

Detailed Description

Example one

Referring to fig. 1, the page drill-down tool at a single-page level in browser dragging development provided by the present invention is composed of a root page definer 1, a single-page relationship tree updating module 2, a component position positioning module 3, a component skip configuration module 4, and a component event interaction configuration module 5;

the root page definer 1 is responsible for defining the size of a root page and generating a canvas and a cover layer according to the size of the root page;

the single-page relation tree updating module 2 is responsible for generating a single-page relation tree, and the single-page relation tree is composed of a root page, a level-one sub page to a level-N sub page, and a level-one dialog box to a level-N dialog box; the N-level sub-page is a lower page of the N minus 1-level sub-page, the N-level dialog box is a lower dialog box of the N minus 1-level sub-page, and the N-level dialog box is a lower dialog box of the N minus 1-level dialog box; the single-page relation tree updating module 2 defines the sizes of all levels of sub-pages and all levels of dialog boxes;

the single-page relation tree updating module 2 defines a global drill-down function which starts from the root page and is effective to all levels of sub-pages, and the global drill-down function stipulates that the following arbitrary conditions are required when drilling down is executed: the progressive drilling can be completed only by drilling from the upper page to the lower page, can be completed only by drilling from the upper page to the lower dialog box, and can be completed only by drilling from the upper dialog box to the lower dialog box;

the single-page relation tree updating module 2 defines a global hidden function which is effective to all levels of sub-pages starting from a root page, and the global hidden function specifies: after the page is drilled downwards, hiding a previous page and displaying a next page;

the single-page relation tree updating module 2 defines a global covering function which starts from the root page and is effective to all levels of sub-pages, and the global covering function specifies the following drilling time: when the dialog box is drilled down from the upper page, the upper page is covered by the covering layer, and when the dialog box is drilled down from the upper dialog box, the upper dialog box is covered by the covering layer;

the single-page relation tree updating module 2 generates unique identifiers for all levels of sub-pages and all levels of dialog boxes, and stores size and level information through the unique identifiers;

the single-page relation tree updating module 2 configures backspacing levels for each level of subpages and dialog boxes, and the backspacing levels can be defined in a cross-level manner but must be ensured to be on a drill-down path, so that the backspacing levels of the drill-down path are prevented from being broken down;

the component position positioning module 3 defines the position and size of the component in the sub-page, records the position and size by combining the sub-page identifier and the component identifier, and reports the position and size to the single-page relation tree updating module after recording; the component position positioning module 3 defines the position and the size of a component in the dialog box, records the position and the size by combining the dialog box identifier and the component identifier, and reports the position and the size to the single-page relation tree updating module 2 after recording;

the component skip configuration module 4 configures the lower-level page identifier for component skip, wherein the skip meaning is to drill down through the component, and the sub-page does not have the drill down capability and is to drill down through the component in the sub-page; when the component is drilled down to the dialog box, the component skip configuration module 4 configures the dialog box identifier of the lower level where the component skips; the component skip configuration module 4 reports the configured information to the single-page relation tree updating module 2;

the component event interaction configuration module 5 independently configures the configuration of the dialog box and the drill-down page into a general component module and gives a general component identifier to generate a general component, and the dialog box and the drill-down page carried by the general component do not belong to the content recorded by the single-page relationship tree; the module 5 for interactive configuration of component event reports the sub-page identifier of the general component to the updating module 2 of the single-page relation tree;

the single-page relation tree updating module 2 integrates the information reported by the component position positioning module 3, the information reported by the component jump configuration module 4 and the information reported by the component event interaction configuration module 5 to generate a page configuration file.