CN111338625B - Data processing method, system, terminal equipment and storage medium - Google Patents
Data processing method, system, terminal equipment and storage medium Download PDFInfo
- Publication number
- CN111338625B CN111338625B CN202010103646.8A CN202010103646A CN111338625B CN 111338625 B CN111338625 B CN 111338625B CN 202010103646 A CN202010103646 A CN 202010103646A CN 111338625 B CN111338625 B CN 111338625B
- Authority
- CN
- China
- Prior art keywords
- data
- tab
- array
- source data
- data item
- 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
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
The invention provides a data processing method, a system, a terminal device and a storage medium, wherein the method comprises the following steps: displaying the data item at the area to be selected of the shuttle frame; monitoring a trigger event, and switching tabs according to an anchor point and the trigger event; selecting a data item in the tab, acquiring corresponding source data according to an identifier of the selected data item, and filtering to obtain a target array; the target array is displayed at the selected region of the shuttle box. The invention can use the shuttle frame and the tab at the same time, does not need to repeatedly write codes, is beneficial to the development of the front-end functional module, fundamentally improves the working efficiency of the front-end development and has important significance.
Description
Technical Field
The present invention relates to the field of data processing technologies, and in particular, to a data processing method, system, terminal device, and storage medium.
Background
The front-end development is a process of creating a Web page or App and other front-end interfaces and presenting the front-end interfaces to a user, and the user interaction interface of the Internet product is realized through HTML, CSS and JavaScript and various derived technologies, frames and solutions.
Throughout the whole front-end development history, since the name of a front-end engineer, in the process of developing technology which is different day by day, the front-end development becomes more and more engineered and standardized, a relatively complete front-end project development process needs to start from a standardized and componentized construction template, and after code compiling, code debugging and detecting, compiling and packaging and finally releasing on-line, each new project needs the front-end engineer to go through the process again.
However, the existing shuttle box does not support the Tabs tab, only code can be rewritten, a large amount of HTML code and JS code can be repeatedly written, and development of the front-end function module is not facilitated.
Disclosure of Invention
The invention aims to provide a data processing method, a system, terminal equipment and a storage medium, which can realize that a shuttle frame and an option card can be used simultaneously without repeatedly compiling codes, are beneficial to the development of a front-end functional module, fundamentally improve the working efficiency of front-end development and have important significance.
The technical scheme provided by the invention is as follows:
the invention provides a data processing method, which comprises the following steps:
displaying the data item at the area to be selected of the shuttle frame;
monitoring a trigger event, and switching tabs according to an anchor point and the trigger event;
selecting a data item in the tab, acquiring corresponding source data according to an identifier of the selected data item, and filtering to obtain a target array;
displaying a target array at a selected region of the shuttle box.
Further, the method comprises the following steps before the data item is displayed at the area to be selected of the shuttle box:
acquiring a grabbing instruction, grabbing source data corresponding to the grabbing instruction from a background server, and generating a corresponding data item according to attribute information of the source data.
Further, the monitoring the trigger event, and switching the tab according to the anchor point and the trigger event includes the steps of:
monitoring the trigger event through a monitor;
according to the trigger event, carrying out highlight cancellation operation and hiding operation on the corresponding tab label and the corresponding content in the shuttle frame assembly;
and highlighting the corresponding tab label through the position of the anchor point, and removing the hidden operation of the content of the display block corresponding to the tab label to realize tab switching.
Further, the step of selecting a data item in the tab, obtaining corresponding source data according to an identifier of the selected data item, and filtering to obtain a target array includes:
selecting a number of data items in the tab;
adding the source data corresponding to the selected data item to the selected array, and adding the source data corresponding to the selected data item and the identifier thereof to the data filtering array;
when the selected array comprises repeated data items through a preset screening method, deleting source data corresponding to the repeated data items according to a preset deleting method, and updating the selected array to obtain a target array;
and when the selected array does not comprise repeated data items through the preset screening method, determining the selected array as the target array.
The present invention also provides a data processing system comprising:
the display module is used for displaying the data item at the to-be-selected area of the shuttle frame;
the processing module is used for monitoring a trigger event and switching the tabs according to the anchor points and the trigger event;
the screening module is used for selecting data items in the tabs, acquiring corresponding source data according to identifiers of the selected data items and filtering to obtain a target array;
the display module is further used for displaying the target array at the selected area of the shuttle box.
Further, the method also comprises the following steps:
the acquisition module is used for acquiring a capture instruction, capturing source data corresponding to the capture instruction from a background server, and generating a corresponding data item according to attribute information of the source data.
Further, the processing module comprises:
the monitoring unit is used for monitoring the triggering event through a monitor;
the first processing unit is used for carrying out highlighting canceling operation and hiding operation on the corresponding tab label and the content in the shuttle frame assembly according to the trigger event;
and the second processing unit is used for carrying out highlight operation on the corresponding tab label through the position of the anchor point and carrying out hiding removal operation on the content of the display block corresponding to the tab label to realize tab switching.
Further, the screening module comprises:
the selection unit is used for selecting a plurality of data items in the tab;
the adding unit is used for adding the source data corresponding to the selected data item to the selected array and adding the source data corresponding to the selected data item and the identifier of the source data to the data filtering array;
the screening unit is used for deleting source data corresponding to repeated data items according to a preset deleting system when the selected array is searched by the preset screening system and comprises the repeated data items, and updating the selected array to obtain a target array;
the screening unit is further used for determining the selected array as the target array when the selected array does not include repeated data items through a preset screening method.
The data processing method, the data processing system, the terminal equipment and the storage medium provided by the invention can simultaneously use the shuttle frame and the option card, do not need to repeatedly write codes, are beneficial to the development of front-end functional modules, fundamentally improve the working efficiency of front-end development and have important significance.
Drawings
The above features, technical features, advantages and implementations of a data processing method, system, terminal device and storage medium will be further described in the following description of preferred embodiments in a clearly understandable manner with reference to the accompanying drawings.
FIG. 1 is a flow chart of one embodiment of a data processing method of the present invention;
FIG. 2 is a flow chart of another embodiment of a data processing method of the present invention;
FIG. 3 is a flow chart of another embodiment of a data processing method of the present invention;
FIG. 4 is a flow chart of another embodiment of a data processing method of the present invention;
FIG. 5 is a block diagram of one embodiment of a data processing system of the present invention;
FIG. 6 is a block diagram of another embodiment of a data processing system of the present invention;
FIG. 7 is a block diagram of another embodiment of a data processing system of the present invention;
FIG. 8 is a block diagram of another embodiment of a data processing system of the present invention;
fig. 9 is a schematic structural diagram of an embodiment of a terminal device of the present invention.
Detailed Description
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following description will be made with reference to the accompanying drawings. It is obvious that the drawings in the following description are only some examples of the invention, and that for a person skilled in the art, other drawings and embodiments can be derived from them without inventive effort.
For the sake of simplicity, only the parts relevant to the present invention are schematically shown in the drawings, and they do not represent the actual structure as a product. In addition, in order to make the drawings concise and understandable, components having the same structure or function in some of the drawings are only schematically illustrated or only labeled. In this document, "one" means not only "only one" but also a case of "more than one".
One embodiment of the present invention, as shown in fig. 1, is a data processing method, including:
s100, displaying a data item in a to-be-selected area of the shuttle frame;
specifically, a paging shuttle frame with huge data size is created, and the shuttle frame comprises a to-be-selected area and a selected area. As shown in fig. 8, all the data items are displayed in the candidate area.
S200, monitoring a trigger event, and switching tabs according to an anchor point and the trigger event;
specifically, the event represents an interaction between the program and the user, and the triggering event includes a click event, a keyboard event, a focus event, and the like. For example, a Button object Button is clicked in a list box or a combination box by a mouse, a check box and a radio box are checked, a Button is clicked, and the like, so that the Button is the event source which generates the corresponding click event.
The anchor points are the links in HTML and are named anchor point links (also called bookmark links), the anchor point links are often used for web pages with huge and fussy contents, and by clicking the named anchor points, the anchor points can point to a document, can point to a specific paragraph in the page, can be used as a convenient tool for 'accurate linking', and enable a linked object to be close to a focus.
An anchor is a hyperlink in the web page production, like a quick locator, an intra-page hyperlink. The anchor point is a locator, and the page can be scrolled to the position corresponding to the mark after clicking the anchor point.
S300, selecting a data item in the tab, acquiring corresponding source data according to an identifier of the selected data item, and filtering to obtain a target array;
in particular, a tab is a module that sets options, the tab provides functionality for displaying the content of a packet, and the tab label concisely describes the content of the packet associated with the label. All content in a set of tabs should be grouped according to a larger grouping principle, with the content of each tab being independent of the content of the other tabs. Tab labels should logically organize the related content and provide more meaningful differentiation.
Each tab represents a display section, each display section comprises a plurality of data items, different data item contents can be displayed by clicking different display sections, the space of a page is saved, and the data items displayed by each display section are matched with tab labels of the display section.
The tabs can be easily browsed and switched between different views, so that the content is displayed in a uniform position, and the content displayed in the tabs can be greatly different even among the tabs. For example, the display blocks corresponding to different tabs can respectively display problem sets (e.g., a human education problem set, a Xiang education problem set, etc.) of different display blocks.
The tabs may appear as fixed tabs or scrollable tabs depending on the platform and environment of use.
The fixed tabs display all the tabs at the same time, and the method is suitable for scenes needing to rapidly switch the tabs at fixed positions. The option widths in the fixed tabs are all the same, and the option width can be calculated by dividing the view width by the number of the tabs or can be obtained according to the label of the widest option.
Scrollable tabs can only display a portion of the tab at any one time, and may include longer tab labels and a greater number of tabs. Scrollable tabs are best suited for users to browse the content of different tabs directly by sliding without having to directly compare different tabs.
Each tab can display data items corresponding to the label content of the tab at the position of the display plate of each tab, the tabs are distinguished by characters and background colors, control buttons are arranged at the adaptive positions of the data items, and the control buttons are distinguished by outline. An operator can click a control button at the position of a required data item to select at the current tab, the front end calls a corresponding identifier according to the selected data item and feeds the identifier back to the background server, the background server can search corresponding source data for the front end according to the identifier, then the front end obtains the searched source data from the background server, and the obtained source data are filtered to obtain a target array.
S400, displaying the target array at the selected area of the shuttle box.
Specifically, after the front end screens out the target array, the selected area is displayed through the selected area of the shuttle frame.
The technical problem to be solved by the invention is to provide a method for visually screening data by front-end application to realize the visual selection of the front-end page for screening the required data, and when a shuttle frame and a tab are used simultaneously, a large amount of HTML codes and JS codes do not need to be repeatedly written, so that the problems of time consumption, repeated development and the like of front-end services are solved, and the quick multiplexing of the codes is realized, so that developers can construct different front-end function modules at the highest speed, the working efficiency of the front-end application development is fundamentally improved, the visual development of the front-end application is realized, and the development of the front-end function modules is greatly improved.
An embodiment of the present invention, as shown in fig. 2, is a data processing method, including:
s010 obtains a capture instruction, captures source data corresponding to the capture instruction from a background server, and generates corresponding data items according to attribute information of the source data;
s100, displaying a data item in a to-be-selected area of the shuttle frame;
s200, monitoring a trigger event, and switching tabs according to an anchor point and the trigger event;
s300, selecting a data item in the tab, acquiring corresponding source data according to the selected data item, and filtering to obtain a target array;
s400, displaying the target array at the selected area of the shuttle box.
Specifically, this embodiment is a modified embodiment corresponding to the above embodiment, and the same parts are specifically referred to the above embodiment, and are not described in detail here.
Compared with the above embodiments, the embodiment adds a front-end acquisition capture instruction, where the capture instruction includes attribute information required by a user, and the background server stores various source data whose data header includes the attribute information. Of course, the backend server may not store the active data, but may be capable of format converting the crawled source data such that a header of the crawled source data includes attribute information.
The attribute information includes data type, time stamp, data size, and the like.
And after the front end acquires the grabbing instruction, transmitting the grabbing instruction to the background server, and directly transmitting the locally stored source data which accord with the attribute information corresponding to the grabbing instruction to the front end by the background server according to the grabbing instruction.
And after acquiring the grabbing instruction, the front end transmits the grabbing instruction to the background server, and the background server crawls source data which accord with attribute information corresponding to the grabbing instruction in real time according to the grabbing instruction and transmits the source data to the front end.
After the front end acquires the source data from the background server, the corresponding candidate data items are obtained by analyzing and analyzing the attribute information corresponding to the source data, and an operator can determine the final data items according to the service requirements.
According to the invention, the front end automatically analyzes and analyzes the source data acquired by the background to obtain the corresponding candidate data items, and then determines the final data item according to the business requirements, so that the front end displays the data items in the to-be-selected area of the shuttle frame, and the situation that all the source data are displayed in a messy manner in the to-be-selected area, which causes that an operator cannot classify the data in a targeted and efficient manner, is greatly improved in data classification efficiency, and is beneficial to a developer to construct different front-end function modules at a high speed, the working efficiency of front-end application development is fundamentally improved, the visual development of front-end application is realized, and the development of the front-end function modules is greatly improved.
In an embodiment of the present invention, as shown in fig. 3, a data processing method includes:
s100, displaying a data item in a to-be-selected area of the shuttle box;
s210, monitoring a trigger event through a monitor;
specifically, this embodiment is a modified embodiment corresponding to the foregoing embodiment, and the same portions are specifically referred to the foregoing embodiment, and are not described in detail herein.
Event snooping is the basis and key for the entire Java message delivery. Three types of objects are involved: event Source (Event Source), event (Event), event Listener (Event Listener).
The event source is the place where the event occurs, usually the individual components, which may be a button, edit box, etc. The event listener is responsible for listening to events occurring at the event source and responding to various events accordingly. An event is an object that describes a change in the state of the event source. And registering a monitor according to the thread corresponding to the trigger control, and monitoring the latest value of the value in the event source through the monitor to obtain the corresponding trigger event.
S220, according to the trigger event, highlighting and hiding the corresponding tab tag and the corresponding content in the shuttle frame assembly;
specifically, after the HTML structure of the tab is laid out, it can be seen that the tab actually includes a tab label and a display section corresponding to the tab label. Illustratively, four tabs are included, and are respectively preschool education, elementary education, junior education, and high school education, with different tabs corresponding to respective display tiles. When an operator at the front end clicks on the "preschool education", the background of which tab tag of the preschool education changes from an original state (for example, gray is represented as an original state) to an activated state (for example, white is represented as an activated state), and meanwhile, the display block corresponding to the tab tag of the "preschool education" only displays the content of the "preschool education", and the rest display blocks hide the content included in the tab tag. Similarly, clicking other tab tags operates in the same way, and is not described in detail herein.
Capturing all tab tags in the shuttle frame assembly to generate an array, and respectively adding a unique serial number to each tab tag by using a for loop and simultaneously registering a trigger event. When a certain tab label is acquired and triggered by operation (such as clicking, keyboard and focusing), the background of all the tab labels is changed into an original state, and the contents of all the display sections are hidden.
S230, highlighting the corresponding tab label through the position of the anchor point, and removing the hidden operation of the content of the display block corresponding to the tab label to realize tab switching;
specifically, when the backgrounds of all the tab labels are changed into original states and the contents of all the display blocks are hidden, the anchor points are captured again to acquire the positions of the anchor points, unique sequence numbers of targets of the tab labels to be lightened and displayed are acquired according to the positions of the anchor points after the anchor points are captured, then the corresponding tab labels are subjected to highlight operation according to the unique sequence numbers of the targets, and the contents of the display blocks corresponding to the tab labels are subjected to unhidking operation to realize tab switching.
S300, selecting a data item in the tab, acquiring corresponding source data according to an identifier of the selected data item, and filtering to obtain a target array;
s400, displaying the target array at the selected area of the shuttle box.
According to the invention, the tab is applied in the shuttle frame, so that a large amount of HTML codes and JS codes are not required to be repeatedly compiled, and the problems of time consumption, repeated development and the like of front-end services are solved, thereby realizing the rapid multiplexing of the codes, enabling developers to construct different front-end function modules at the highest speed, fundamentally improving the working efficiency of front-end application development, realizing the visual development of the front-end application, and greatly improving the development of the front-end function modules.
An embodiment of the present invention, as shown in fig. 4, is a data processing method, including:
s100, displaying a data item in a to-be-selected area of the shuttle frame;
s200, monitoring a trigger event, and switching tabs according to an anchor point and the trigger event;
s310, selecting a plurality of data items in the tabs;
s320, adding the source data corresponding to the selected data item to the selected array, and adding the source data corresponding to the selected data item and the identifier thereof to the data filtering array;
specifically, this embodiment is a modified embodiment corresponding to the above embodiment, and the same parts are specifically referred to the above embodiment, and are not described in detail here.
When monitoring the trigger event in the Vue component, circularly canceling highlighting all tab labels, hiding the contents of all display version blocks, and independently setting highlighting for the tab label which is slid by the anchor point and canceling the hiding of the contents of the display version block to realize the tab. An operator selects a plurality of data items in any one tab through the front end according to business requirements, namely a certain data item is selected in the shuttle box tab, so that an identifier of the selected data item can be obtained, the front end transmits the identifier corresponding to the data item to the background, the background searches corresponding source data according to the identifier, then the background transmits the source data to the front end, and the front end adds the source data corresponding to the selected data item to the selected array. In addition, the identifier and the source data corresponding to the selected data item are added to the data filter array.
S330, when the selected array comprises repeated data items through a preset screening method, deleting source data corresponding to the repeated data items according to a preset deleting method, and updating the selected array to obtain a target array;
s340, when the selected array does not comprise repeated data items through the preset screening method, determining the selected array as the target array.
Specifically, whether the selected array already contains the selected data, that is, the repeated data items, is screened out through a preset screening method (including a map method, a filter method and the like), and if the selected array is not determined to be the target array. The map method maps the specified sequence according to the provided function. The filter method filters the specified sequence according to the provided function, filters out the elements that do not meet the conditions, and returns a new list consisting of the elements that meet the conditions. Therefore, the map method can be replaced by the filter method, the data items are screened, and whether the data items are selected or not is judged, namely whether the data items are repeated or not is judged.
If so, deleting the identifier corresponding to the data item and the source data corresponding to the identifier by using a preset deleting method (such as a splice method) in the data filtering array, and refreshing and updating the selected array to obtain the target array.
S400, displaying the target array at the selected area of the shuttle box.
According to the invention, through the modes of data filtering and anchor point positioning, the effect of applying the tab in the shuttle frame is realized, the anchor point is used as a mark, the tab switching is realized through clicking, and the usability of the shuttle frame is increased. And moreover, the selected data items can be correctly deleted by adopting the splice method, so that the code amount is reduced exponentially, and the development of a front-end functional module is facilitated. When the data needs to be classified and transmitted to the background, the problem is quickly solved by combining the option card and the shuttle frame, and the data category can be quickly acquired and transmitted to the background by adopting an anchor point positioning method.
The invention uses the tabs in the shuttle frame, is convenient for carrying out a large amount of data classification through the data types, can display the data of each type in classification, and when the background needs some data, the front end can directly select the needed data items in a certain tab and put the data items in the selected array, thereby reducing the code amount and being beneficial to module development. In addition, the anchor point is used as a mark for positioning, and the tab switching effect is rapidly realized.
One embodiment of the present invention, as shown in FIG. 5, is a data processing system comprising:
a display module 10, configured to display the data item at the region to be selected of the shuttle;
the processing module 20 is configured to monitor a trigger event, and switch tabs according to an anchor point and the trigger event;
the screening module 30 is configured to select a data item in the tab, obtain corresponding source data according to an identifier of the selected data item, and filter the source data to obtain a target array;
and the display module 10 is further configured to display the target array at the selected area of the shuttle box.
Specifically, a paging shuttle frame with huge data volume is created, and the shuttle frame comprises a to-be-selected area and a selected area. As shown in fig. 8, all the data items are displayed in the candidate area.
Events represent interactions between the program and the user, and triggering events include click events, keyboard events, focus events, and so forth. For example, a Button object Button is clicked in a list box or a combination box by a mouse, a check box and a radio box are checked, a Button is clicked, and the like, so that the Button is the event source which generates the corresponding click event.
The anchor points are the links in HTML and are named anchor point links (also called bookmark links), the anchor point links are often used for web pages with huge and fussy contents, and by clicking the named anchor points, the anchor points can point to a document, can point to a specific paragraph in the page, can be used as a convenient tool for 'accurate linking', and enable a linked object to be close to a focus.
An anchor is a hyperlink in the web page production, like a quick locator, an intra-page hyperlink. The anchor point is a locator, and the page can be scrolled to the position corresponding to the mark after clicking the anchor point.
A tab is a module that sets options that provide the functionality to display the contents of a packet, and the tab label concisely describes the contents of the packet associated with the label. All content in a set of tabs should be grouped according to a larger grouping principle, with the content of each tab being independent of the content of the other tabs. Tab tabs should logically organize related content and provide more meaningful differentiation.
Each tab represents a display section, each display section comprises a plurality of data items, different data item contents can be displayed by clicking different display sections, the space of a page is saved, and the data items displayed by each display section are matched with tab labels of the display section.
The tabs can be easily browsed and switched between different views, so that the content is displayed in a uniform position, and the content displayed in the tabs can be greatly different even among the tabs. For example, the display blocks corresponding to different tabs can respectively display problem sets (e.g., a human education problem set, a Xiang education problem set, etc.) of different display blocks.
The tabs may appear as fixed tabs or scrollable tabs depending on the platform and environment of use.
The fixed tabs display all the tabs at the same time, and the method is suitable for scenes needing to rapidly switch the tabs at fixed positions. The option widths in the fixed tabs are all the same, and the option width can be calculated by dividing the view width by the number of the tabs or can be obtained according to the label of the widest option.
Scrollable tabs can only display a portion of the tab at any one time, and may include longer tab labels and a greater number of tabs. Scrollable tabs are best suited for users to browse the content of different tabs directly by sliding without having to directly compare different tabs.
Each tab can display the data item corresponding to the label content at the position of the display plate, the tabs are distinguished by characters and background colors, control buttons are arranged at the adaptive positions of the data items, and the control buttons are distinguished by outline. An operator can click a control button at the position of a required data item to select at the current tab, the front end calls a corresponding identifier according to the selected data item and feeds the identifier back to the background server, the background server can search corresponding source data for the front end according to the identifier, then the front end obtains the searched source data from the background server, and the obtained source data are filtered to obtain a target array. And after the front end screens out the target array, displaying the selected area through the selected area of the shuttle frame.
The technical problem to be solved by the invention is to provide a method for visually screening data by front-end application to realize the visual selection of the front-end page for screening the required data, and when a shuttle frame and a tab are used simultaneously, a large amount of HTML codes and JS codes do not need to be repeatedly written, so that the problems of time consumption, repeated development and the like of front-end services are solved, and the quick multiplexing of the codes is realized, so that developers can construct different front-end function modules at the highest speed, the working efficiency of the front-end application development is fundamentally improved, the visual development of the front-end application is realized, and the development of the front-end function modules is greatly improved.
Based on the foregoing embodiment, further comprising:
and the acquisition module is used for acquiring the grabbing instruction, grabbing source data corresponding to the grabbing instruction from the background server, and generating a corresponding data item according to the attribute information of the source data.
Compared with the above embodiments, the embodiment adds a front-end acquisition capture instruction, where the capture instruction includes attribute information required by a user, and the background server stores various source data whose data header includes the attribute information. Of course, the backend server may not store the source data, but may be capable of format converting the crawled source data such that a header of the crawled source data includes attribute information.
The attribute information includes data type, time stamp, data size, and the like.
And after the front end acquires the grabbing instruction, transmitting the grabbing instruction to the background server, and directly transmitting the locally stored source data which accord with the attribute information corresponding to the grabbing instruction to the front end by the background server according to the grabbing instruction.
And after acquiring the grabbing instruction, the front end transmits the grabbing instruction to the background server, and the background server crawls source data which accord with attribute information corresponding to the grabbing instruction in real time according to the grabbing instruction and transmits the source data to the front end.
After the front end acquires the source data from the background server, the corresponding candidate data items are obtained by analyzing and analyzing the attribute information corresponding to the source data, and an operator can determine the final data items according to the service requirements.
According to the invention, the front end automatically analyzes and analyzes the source data acquired by the background to obtain the corresponding candidate data items, and then determines the final data items according to the service requirements, so that the front end can display the data items in the area to be selected of the shuttle frame, and the situation that all the source data are displayed in a messy manner in the area to be selected, so that an operator cannot classify the data in a targeted and efficient manner can be avoided, the data classification efficiency is greatly improved, a developer can construct different front-end function modules at the highest speed, the working efficiency of front-end application development is fundamentally improved, the visual development of front-end application is realized, and the development of the front-end function modules is greatly improved.
Based on the foregoing embodiment, as shown in fig. 6, the processing module 20 includes:
a monitoring unit 21, configured to monitor a trigger event through a monitor;
the first processing unit 22 is used for performing highlighting canceling operation and hiding operation on the corresponding tab labels and contents in the shuttle frame assembly according to the triggering event;
and the second processing unit 22 is configured to perform highlight operation on the corresponding tab tag through the position of the anchor point, and perform unhidden operation on the content of the display block corresponding to the tab tag to implement tab switching.
Specifically, event listening is the basis and key for the entire Java message passing. Three types of objects are involved: event Source (Event Source), event (Event), event Listener (Event Listener).
The event source is the place where the event occurs, usually the individual components, which may be a button, edit box, etc. The event listener is responsible for listening to events occurring at the event source and responding to various events accordingly. An event is an object that describes a change in the state of the event source. And registering a monitor according to the thread corresponding to the trigger control, and monitoring the latest value of the value in the event source through the monitor to obtain the corresponding trigger event.
After the HTML structure of the tab is laid out, it can be seen that the tab actually includes a tab label and a display section corresponding to the tab label. Illustratively, four tabs are included, and are respectively preschool education, elementary education, junior education, and high school education, with different tabs corresponding to respective display tiles. When the operator at the front end clicks on "preschool education", the background of which tab tag of the preschool changes from an original state (for example, gray is represented as the original state) to an activated state (for example, white is represented as the activated state), and meanwhile, the display plate block corresponding to the tab tag of the "preschool education" only displays the content of the "preschool education", and the rest display plates hide the content included in the tab block. Similarly, clicking other tab tags operates in the same way, and is not described in detail herein.
Capturing all tab tags in the shuttle frame assembly to generate an array, and respectively adding a unique serial number to each tab tag by using a for loop and simultaneously registering a trigger event. When a certain tab label is acquired and triggered by operation (such as clicking, keyboard and focusing), the background of all the tab labels is changed into an original state, and the contents of all the display sections are hidden.
When the backgrounds of all the tab labels are changed into original states and the contents of all the display blocks are hidden, the anchor points are captured again to obtain the positions of the anchor points, after the anchor points are captured, the target unique serial numbers of the tab labels to be lightened and displayed are obtained according to the positions of the anchor points, then the corresponding tab labels are highlighted according to the target unique serial numbers, and the contents of the display blocks corresponding to the tab labels are unhidden to realize the tab switching.
According to the invention, the tab is applied to the shuttle frame, a large amount of HTML codes and JS codes do not need to be written repeatedly, and the problems of time consumption, repeated development and the like of the front-end service are solved, so that the quick multiplexing of the codes is realized, developers can construct different front-end function modules at the highest speed, the working efficiency of the front-end application development is fundamentally improved, the visual development of the front-end application is realized, and the development of the front-end function modules is greatly improved.
Based on the foregoing embodiment, as shown in fig. 7, the screening module 30 includes:
a selection unit 31 for selecting a number of data items in a tab;
an adding unit 32, configured to add source data corresponding to the selected data item to the selected array, and add the source data corresponding to the selected data item and an identifier thereof to the data filter array;
the screening unit 33 is configured to, when the selected array is searched by the preset screening system and includes repeated data items, delete source data corresponding to the repeated data items according to the preset deletion system, and update the selected array to obtain a target array;
and the screening unit 33 is further configured to determine the selected array as the target array when the selected array is searched for data items that do not include duplicates by a preset screening method.
Specifically, while monitoring the trigger event in the Vue component, the method circularly cancels all tab labels to be highlighted and hides the contents of all display blocks, and then independently sets highlighting for the tab label that the anchor point slides through and cancels and hides the contents of the display block to realize the tab. An operator selects a plurality of data items in any one tab through the front end according to business requirements, namely a certain data item is selected in the shuttle box tab, so that an identifier of the selected data item can be obtained, the front end transmits the identifier corresponding to the data item to the background, the background searches corresponding source data according to the identifier, then the background transmits the source data to the front end, and the front end adds the source data corresponding to the selected data item to the selected array. In addition, the identifier and the source data corresponding to the selected data item are added to the data filter array.
And screening whether the selected array contains the selected data, namely repeated data items, by a preset screening method (comprising a map method, a filter method and the like), and if the selected array is not determined to be the target array. The map method maps the specified sequence according to the provided function. The filter method filters the specified sequence according to the provided function, filters out the elements that do not meet the conditions, and returns a new list consisting of the elements that meet the conditions. Therefore, the map method can be replaced by the filter method, the data items are screened, and whether the data items are selected or not is judged, namely whether the data items are repeated or not is judged.
If yes, a preset deleting method (such as a splice method) is used in the data filtering array to delete the identifier corresponding to the data item and the source data corresponding to the identifier, and the selected array is refreshed to obtain a target array.
According to the invention, through the modes of data filtering and anchor point positioning, the effect of applying the tab in the shuttle frame is realized, the anchor point is used as a mark, the tab switching is realized through clicking, and the usability of the shuttle frame is increased. And moreover, the selected data items can be correctly deleted by adopting the splice method, so that the code amount is reduced exponentially, and the development of a front-end functional module is facilitated. When the data needs to be classified and transmitted to the background, the problem is quickly solved by combining the option card and the shuttle frame, and the data category can be quickly acquired and transmitted to the background by adopting an anchor point positioning method.
The invention uses the tabs in the shuttle frame, is convenient for carrying out a large amount of data classification through the data types, can display the data of each type in classification, and when the background needs some data, the front end can directly select the needed data items in a certain tab and put the data items in the selected array, thereby reducing the code amount and being beneficial to module development. In addition, the anchor point is used as a mark for positioning, and the tab switching effect is rapidly realized.
It will be apparent to those skilled in the art that, for convenience and brevity of description, only the above-described division of program modules is illustrated, and in practical applications, the above-described distribution of functions may be performed by different program modules, that is, the internal structure of the apparatus may be divided into different program units or modules to perform all or part of the above-described functions. Each program module in the embodiments may be integrated in one processing unit, or each unit may exist alone physically, or two or more units are integrated in one processing unit, and the integrated unit may be implemented in a form of hardware, or may be implemented in a form of software program unit. In addition, the specific names of the program modules are only used for distinguishing one program module from another, and are not used for limiting the protection scope of the application.
One embodiment of the present invention, as shown in fig. 9, a terminal device 100, includes a processor 110, a memory 120, wherein the memory 120 is used for storing a computer program; the processor 110 is configured to execute the computer program stored in the memory 120 to implement the data processing method in the method embodiment corresponding to any one of fig. 1 to 4.
The terminal device 100 may be a desktop computer, a notebook, a palm computer, a tablet computer, a mobile phone, a human-computer interaction screen, or the like. The terminal device 100 may include, but is not limited to, a processor 110, a memory 120. Those skilled in the art will appreciate that fig. 9 is merely an example of the terminal device 100, does not constitute a limitation of the terminal device 100, and may include more or less components than those shown, or combine certain components, or different components, such as: the terminal device 100 may also include input/output interfaces, display devices, network access devices, communication buses, communication interfaces, and the like. A communication interface and a communication bus, and may further include an input/output interface, wherein the processor 110, the memory 120, the input/output interface and the communication interface complete communication with each other through the communication bus. The memory 120 stores a computer program, and the processor 110 is configured to execute the computer program stored in the memory 120 to implement the data processing method in the method embodiment corresponding to any one of fig. 1 to 4.
The Processor 110 may be a Central Processing Unit (CPU), other general purpose Processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other Programmable logic device, discrete Gate or transistor logic device, discrete hardware component, or the like. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
The memory 120 may be an internal storage unit of the terminal device 100, such as: hard disk or memory of the terminal device. The memory may also be an external storage device of the terminal device, such as: the terminal equipment is provided with a plug-in hard disk, an intelligent memory Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card) and the like. Further, the memory 120 may also include both an internal storage unit and an external storage device of the terminal device 100. The memory 120 is used for storing the computer programs and other programs and data required by the terminal device 100. The memory may also be used to temporarily store data that has been output or is to be output.
A communication bus is a circuit that connects the described elements and enables transmission between the elements. For example, the processor 110 receives commands from other elements through the communication bus, decrypts the received commands, and performs calculations or data processing according to the decrypted commands. Memory 120 may include program modules such as kernels (kernel), middleware (middleware), application Programming Interfaces (API), and applications. The program modules may be comprised of software, firmware or hardware, or at least two of the same. The input/output interface forwards commands or data entered by a user via the input/output interface (e.g., sensor, keyboard, touch screen). The communication interface connects the terminal device 100 with other network devices, user equipment, networks. For example, the communication interface may be connected to the network by wire or wirelessly to connect to external other network devices or user equipment. The wireless communication may include at least one of: wireless fidelity (WiFi), bluetooth (BT), near Field Communication (NFC), global Positioning Satellite (GPS) and cellular communications, among others. The wired communication may include at least one of: universal Serial Bus (USB), high-definition multimedia interface (HDMI), asynchronous transfer standard interface (RS-232), and the like. The network may be a telecommunications network and a communications network. The communication network may be a computer network, the internet of things, a telephone network. The terminal device 100 may be connected to the network through a communication interface, and a protocol by which the terminal device 100 communicates with other network devices may be supported by at least one of an application, an Application Programming Interface (API), middleware, a kernel, and a communication interface.
In an embodiment of the present invention, a storage medium stores at least one instruction, and the instruction is loaded and executed by a processor to implement the operations performed by the corresponding embodiments of the data processing method. For example, the computer readable storage medium may be a read-only memory (ROM), a random-access memory (RAM), a compact disc read-only memory (CD-ROM), a magnetic tape, a floppy disk, an optical data storage device, and the like.
They may be implemented in program code executable by a computing device such that it is executed by the computing device, or as individual integrated circuit modules, or as a plurality of modules or steps within a single integrated circuit module, when stored in a storage device. Thus, the present invention is not limited to any specific combination of hardware and software.
In the above embodiments, the descriptions of the respective embodiments have respective emphasis, and reference may be made to the related descriptions of other embodiments for parts that are not described or recited in detail in a certain embodiment.
Those of ordinary skill in the art will appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the implementation. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present application.
In the embodiments provided in the present application, it should be understood that the disclosed apparatus/terminal device and method may be implemented in other ways. For example, the above-described embodiments of the apparatus/terminal device are merely illustrative, and for example, the division of the modules or units is only one logical division, and there may be other divisions when actually implemented, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection of some interfaces, devices or units, and may be in an electrical, mechanical or other form.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.
The integrated modules/units, if implemented in the form of software functional units and sold or used as separate products, may be stored in a computer readable storage medium. Based on such understanding, all or part of the flow of the method according to the embodiments of the present invention may also be implemented by sending instructions to relevant hardware through a computer program, where the computer program may be stored in a computer-readable storage medium, and when the computer program is executed by a processor, the steps of the method embodiments may be implemented. Wherein the computer program comprises: computer program code which may be in the form of source code, data item code, an executable file or some intermediate form, etc. The computer-readable storage medium may include: any entity or device capable of carrying the computer program code, recording medium, usb disk, removable hard disk, magnetic disk, optical disk, computer Memory, read-Only Memory (ROM), random Access Memory (RAM), electrical carrier wave signals, telecommunications signals, software distribution medium, and the like. It should be noted that the content of the computer-readable storage medium can be increased or decreased according to the requirements of the legislation and patent practice in the jurisdiction, for example: in some jurisdictions, computer-readable media does not include electrical carrier signals and telecommunications signals in accordance with legislative and proprietary practices.
It should be noted that the above embodiments can be freely combined as necessary. The foregoing is only a preferred embodiment of the present invention, and it should be noted that, for those skilled in the art, various modifications and amendments can be made without departing from the principle of the present invention, and these modifications and amendments should also be considered as the protection scope of the present invention.
Claims (10)
1. A data processing method, characterized by comprising the steps of:
displaying the data item at the area to be selected of the shuttle frame;
monitoring a trigger event, and switching tabs according to an anchor point and the trigger event;
selecting a data item in the tab, acquiring corresponding source data according to an identifier of the selected data item, and filtering to obtain a target array; control buttons are arranged at the adaptive positions of the data items, after the control buttons at the required data item positions are clicked and selected at the current tab position, the front end calls corresponding identifiers according to the selected data items and feeds the identifiers back to the background server, and the background server searches corresponding source data to the front end according to the identifiers; then, the front end acquires the searched source data from the background server, and filters the acquired source data to obtain a target array;
displaying a target array at a selected region of the shuttle box.
2. The data processing method of claim 1, wherein the step of displaying the data item at the candidate area of the shuttle box comprises:
acquiring a grabbing instruction, grabbing source data corresponding to the grabbing instruction from a background server, and generating a corresponding data item according to attribute information of the source data.
3. The data processing method of claim 1, wherein the monitoring the trigger event, and switching the tab according to the anchor point and the trigger event comprises:
monitoring the trigger event through a monitor;
according to the trigger event, carrying out highlight cancellation operation and hiding operation on the corresponding tab label and the corresponding content in the shuttle frame assembly;
and highlighting the corresponding tab label through the position of the anchor point, and removing the hidden operation of the content of the display block corresponding to the tab label to realize tab switching.
4. A data processing method according to any one of claims 1 to 3, wherein the steps of selecting a data item in the tab, obtaining corresponding source data according to an identifier of the selected data item, and filtering to obtain a target array comprise:
selecting a number of data items in the tab;
adding the source data corresponding to the selected data item to the selected array, and adding the source data corresponding to the selected data item and the identifier thereof to the data filtering array;
when the selected array is searched for repeated data items by a preset screening method, deleting source data corresponding to the repeated data items according to a preset deleting method, and updating the selected array to obtain a target array;
and when the selected array does not comprise repeated data items through the preset screening method, determining the selected array as the target array.
5. A data processing system, comprising:
the display module is used for displaying the data item at the to-be-selected area of the shuttle frame;
the processing module is used for monitoring a trigger event and switching the tabs according to the anchor points and the trigger event;
the screening module is used for selecting data items in the tabs, acquiring corresponding source data according to identifiers of the selected data items and filtering to obtain a target array; control buttons are arranged at the adaptive positions of the data items, after the control buttons at the required data item positions are clicked and selected at the current tab position, the front end calls corresponding identifiers according to the selected data items and feeds the identifiers back to the background server, and the background server searches corresponding source data to the front end according to the identifiers; then, the front end acquires the searched source data from the background server, and filters the acquired source data to obtain a target array;
the display module is further used for displaying the target array at the selected area of the shuttle box.
6. The data processing system of claim 5, further comprising:
the acquisition module is used for acquiring a capture instruction, capturing source data corresponding to the capture instruction from a background server, and generating a corresponding data item according to attribute information of the source data.
7. The data processing system of claim 5, wherein the processing module comprises:
the monitoring unit is used for monitoring the trigger event through a monitor;
the first processing unit is used for carrying out highlighting canceling operation and hiding operation on the corresponding tab label and the content in the shuttle frame assembly according to the trigger event;
and the second processing unit is used for carrying out highlight operation on the corresponding tab label through the position of the anchor point and carrying out hiding removal operation on the content of the display block corresponding to the tab label to realize tab switching.
8. A data processing system according to any one of claims 5 to 7, wherein the screening module comprises:
the selection unit is used for selecting a plurality of data items in the tab;
the adding unit is used for adding the source data corresponding to the selected data item to the selected array and adding the source data corresponding to the selected data item and the identifier of the source data to the data filtering array;
the screening unit is used for deleting source data corresponding to repeated data items according to a preset deleting system when the selected array is searched by the preset screening system and comprises the repeated data items, and updating the selected array to obtain a target array;
the screening unit is further used for determining the selected array as the target array when the selected array does not include repeated data items through a preset screening method.
9. A terminal device comprising a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor is configured to execute the computer program stored in the memory to perform the operations performed by the data processing method according to any one of claims 1 to 4.
10. A storage medium having stored therein at least one instruction which is loaded and executed by a processor to perform operations performed by a data processing method according to any one of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010103646.8A CN111338625B (en) | 2020-02-20 | 2020-02-20 | Data processing method, system, terminal equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010103646.8A CN111338625B (en) | 2020-02-20 | 2020-02-20 | Data processing method, system, terminal equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111338625A CN111338625A (en) | 2020-06-26 |
| CN111338625B true CN111338625B (en) | 2023-04-18 |
Family
ID=71181738
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010103646.8A Active CN111338625B (en) | 2020-02-20 | 2020-02-20 | Data processing method, system, terminal equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111338625B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112035094B (en) * | 2020-09-02 | 2024-04-16 | 中国银行股份有限公司 | Shuttle frame implementation method and device based on Vuetify frame |
| CN114064817A (en) * | 2021-11-16 | 2022-02-18 | 重庆赛迪奇智人工智能科技有限公司 | Data processing method and device, electronic equipment and storage medium |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107832038A (en) * | 2017-10-27 | 2018-03-23 | 中航信移动科技有限公司 | The implementation method and device of Component Gallery |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10216494B2 (en) * | 2016-12-03 | 2019-02-26 | Thomas STACHURA | Spreadsheet-based software application development |
| CN109684577A (en) * | 2018-12-27 | 2019-04-26 | 杭州云英网络科技有限公司 | A kind of configuration method of web page contents, system and electronic equipment |
| CN109918002A (en) * | 2019-01-15 | 2019-06-21 | 平安科技（深圳）有限公司 | Page switching control method, device, equipment and computer readable storage medium |
-
2020
- 2020-02-20 CN CN202010103646.8A patent/CN111338625B/en active Active
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107832038A (en) * | 2017-10-27 | 2018-03-23 | 中航信移动科技有限公司 | The implementation method and device of Component Gallery |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111338625A (en) | 2020-06-26 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110955631B (en) | File access tracking method and device, storage medium and terminal | |
| CN110955428A (en) | Page display method and device, electronic equipment and medium | |
| CN106294770A (en) | Information sharing method, device and terminal | |
| CN105335132B (en) | Method, device and system for customizing application program function | |
| CN103294335A (en) | Apparatus and method for creating a shortcut menu | |
| US20220197455A1 (en) | Method and apparatus for browsing table in document, and electronic device and storage medium | |
| CN111338625B (en) | Data processing method, system, terminal equipment and storage medium | |
| CN105373587A (en) | Picture display method and terminal | |
| CN107861750B (en) | Label management method, label management device and intelligent terminal | |
| CN110968314B (en) | Page generation method and device | |
| CN104216698A (en) | Webpage registration method and relative device | |
| CN113050941A (en) | Front-end page generation method, device, equipment and computer readable storage medium | |
| CN109683760B (en) | Recent content display method, device, terminal and storage medium | |
| CN111324398A (en) | Recent content processing method, device, terminal and storage medium | |
| CN103488508A (en) | Browser working method, browser and terminal equipment | |
| CN112817817A (en) | Buried point information query method and device, computer equipment and storage medium | |
| CN111310086A (en) | Page jump method and device and electronic equipment | |
| KR101996586B1 (en) | Information display method, terminal and server | |
| CN115981643A (en) | Configuration method, system, equipment and storage medium of business association component | |
| CN113590985B (en) | Page jump configuration method and device, electronic equipment and computer readable medium | |
| CN111240927B (en) | Method, device and storage medium for detecting time consumption of method in program | |
| CN105635461A (en) | Information screening method and apparatus, and terminal | |
| CN113094286A (en) | Page testing method and device, storage medium and electronic equipment | |
| JP6109443B1 (en) | Content display device, content display system, content display method, and content display program | |
| CN113378036A (en) | Page operation analysis and point burying method, device, equipment and storage medium |
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 |