CN114995817A - Web page large-screen data processing method based on Vuex - Google Patents

Web page large-screen data processing method based on Vuex Download PDF

Info

Publication number
CN114995817A
CN114995817A CN202210927107.5A CN202210927107A CN114995817A CN 114995817 A CN114995817 A CN 114995817A CN 202210927107 A CN202210927107 A CN 202210927107A CN 114995817 A CN114995817 A CN 114995817A
Authority
CN
China
Prior art keywords
data
screen
page
vuex
processing method
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202210927107.5A
Other languages
Chinese (zh)
Inventor
董超
周远兵
龚友涛
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Hangzhou Qianguan Digital Iot Technology Co ltd
Original Assignee
Hangzhou Qianguan Digital Iot Technology Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Hangzhou Qianguan Digital Iot Technology Co ltd filed Critical Hangzhou Qianguan Digital Iot Technology Co ltd
Priority to CN202210927107.5A priority Critical patent/CN114995817A/en
Publication of CN114995817A publication Critical patent/CN114995817A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/36Software reuse
    • YGENERAL 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
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE 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/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Image Generation (AREA)

Abstract

The invention discloses a web page large-screen data processing method based on Vuex, which comprises the following steps: establishing a plurality of data large-screen pages based on business requirements; establishing a display component for each data large-screen page; setting corresponding array variables aiming at the display component; establishing a plurality of front-end data storage areas respectively corresponding to the data large-screen pages based on Vuex; acquiring basic data through a rear-end interface; and determining vue a page rendering strategy according to the acquired basic data. According to the web page large-screen data processing method based on Vuex, a rear-end interface request is made under Vuex state management, data are stored in a classified mode, and global variables are set. And when the Vuex variable changes, re-rendering the correspondingly used large-screen module, and if the variable does not change, not rendering the correspondingly used large-screen module. Therefore, the times of page reconstruction are reduced, the times of interface requests are reduced, and the performance consumption caused by invalid rendering of multiple modules of the page is reduced.

Description

Web page large-screen data processing method based on Vuex
Technical Field
The invention relates to a Vuex-based web page large-screen data processing method.
Background
At present, with the coming of the internet cloud era, the visual display of big data is more and more appeared in the demands of people, and the visual big screen becomes the optimal choice for meeting the secondary demands.
In the prior art known at present, visual large-screen data sources are mainly transmitted in a back-end interface mode, and when large-screen required data is too large or contents required to be displayed are too much, a large number of interface request interactions are caused, so that the fluency of the front end is reduced, and the readability is deteriorated.
Disclosure of Invention
The invention provides a Vuex-based web page large-screen data processing method for solving the above-mentioned technical problems, which specifically adopts the following technical scheme:
a web page large-screen data processing method based on Vuex comprises the following steps:
establishing a plurality of data large-screen pages based on business requirements;
establishing a display component for each data large-screen page;
establishing a plurality of front-end data storage areas respectively corresponding to the data large-screen pages based on Vuex;
setting corresponding array variables for the display assembly;
acquiring basic data through a rear-end interface;
and determining vue a page rendering strategy according to the acquired basic data.
Further, the specific method for determining vue the page rendering policy according to the obtained basic data condition is as follows:
in an initial state:
extracting first data corresponding to different data large-screen pages from the basic data and respectively storing the first data in front-end data storage areas corresponding to the different data large-screen pages;
processing the first data to obtain an array variable of a display assembly corresponding to the data large-screen page;
and triggering vue page rendering according to the calculated array variables to refresh the display component of each data large-screen page.
Further, in a non-initial state:
extracting first data corresponding to different data large-screen pages from the basic data and respectively storing the first data in front-end data storage areas corresponding to the different data large-screen pages;
processing the first data to obtain a new array variable of a display assembly corresponding to the data large-screen page;
for display elements with no change in array variables, page rendering is not triggered vue.
Further, for the display component with the changed array variable, page rendering is triggered vue according to the calculated array variable, and the display component with the changed array variable is refreshed.
Further, for the display element with the changed array variable, determining vue the page rendering strategy according to the change amplitude of the array variable.
Further, for the display element with the changed array variable, if the changed proportion of the array variable does not exceed the preset value, page rendering is not triggered vue, and if the changed proportion of the array variable exceeds the preset value, page rendering is triggered vue, and the display element with the changed array variable is refreshed.
Further, in determining the proportion of the change to the array variable, the new array variable is compared to the array variable last time the vue page was rendered.
Further, for the display element with the changed array variable, when the time that the change proportion of the array variable does not exceed the preset value exceeds the preset maximum time, page rendering is triggered vue, and the display element with the changed array variable is refreshed.
Further, the specific method for acquiring the basic data through the backend interface includes:
and setting an acquisition period, and acquiring the basic data at regular intervals in a preset acquisition period.
Further, a plurality of incompletely identical acquisition cycles are set for different time periods, and the basic data are acquired at regular time according to the corresponding acquisition cycles according to the current time.
Further, the specific method for establishing a display component for each data large-screen page is as follows:
and establishing a plurality of display components for each data large-screen page.
The web page large-screen data processing method based on Vuex has the advantages that a backend interface request is made under Vuex state management, data are stored in a classified mode, and global variables are set. And when the Vuex variable changes, re-rendering the correspondingly used large-screen module, and if the variable does not change, not rendering the correspondingly used large-screen module. Therefore, the times of page reconstruction are reduced, the times of interface requests are reduced, and the performance consumption caused by invalid rendering of multiple modules of the page is reduced.
Drawings
FIG. 1 is a schematic diagram of a Vuex-based web page large-screen data processing method of the invention;
FIG. 2 is a schematic diagram of a specific application embodiment of a Vuex-based web page large-screen data processing method.
Detailed Description
The invention is described in detail below with reference to the figures and the embodiments.
As shown in fig. 1, the web page large-screen data processing method based on Vuex specifically includes the following steps: and S1, establishing a plurality of data large-screen pages based on business requirements. And S2, establishing a display component for each data large-screen page. And S3, establishing a plurality of front-end data storage areas respectively corresponding to the data large-screen pages based on the Vuex. S4, setting corresponding array variables for the display components. And S5, acquiring basic data through a back-end interface. And S6, determining vue page rendering strategies according to the acquired situation of the basic data. Through the steps, the Vuex-based web page large-screen data processing method can reduce the page reconstruction times, reduce the interface request times and reduce the performance consumption caused by invalid rendering of multiple modules of the page. The above steps are specifically described below with reference to an embodiment in fig. 2.
For step S1, a plurality of data large screen pages are established based on business requirements.
As shown in fig. 2, the data large screen is used for counting community registration of students of the school. According to the data statistics requirement, a data large-screen page A and a data large-screen page B are firstly established. The data page large screen A is used for displaying the condition of the woman registration community, and the data page large screen B is used for displaying the condition of the man registration community.
For step S2, a display component is created for each data large screen page.
Preferably, multiple display components can be established for each data large screen page.
Specifically, in the embodiment of the application, two display components, namely a dance group girl daily attendance linear chart component and a vocal group girl daily attendance linear chart component, are established in the data large-screen page A and are respectively used for displaying the dance group girl attendance condition and the vocal group girl attendance condition in the girl group.
Similarly, two display components are also established in the data large-screen page B, wherein the two display components are respectively a dance group boy student daily registration number linear chart component and a vocal music group boy student daily registration number linear chart component which are respectively used for displaying the dance group boy student registration condition and the vocal music group boy student registration condition in the boy student group.
For step S3, a plurality of front-end data storage areas respectively corresponding to the data large-screen pages are established based on Vuex.
Specifically, a front-end data storage area A and a front-end data storage area B are newly built based on Vuex, and female student registration community data and male student registration community data are respectively stored.
For step S4, the corresponding array variable is set for the display element.
In the application, for the front-end data storage area A, an array variable a is set to represent the number of the dancing group girls who give out the name every day, and an array variable b is set to represent the number of the vocal music group girls who give out the name every day.
For the front-end data storage area B, an array variable a is set to represent the number of the dancing group boys who give out the name every day, and an array variable B is set to represent the number of the vocal music group boys who give out the name every day.
For step S5, the underlying data is obtained through the backend interface.
Specifically, based on the target web large-screen service logic and the rear-end interface, basic data required by the target large screen is obtained. In the present application, the basic data includes a student information list studentList and a community information list groupList.
Preferably, the specific method for acquiring the basic data through the backend interface is as follows:
and setting an acquisition period, and acquiring basic data at regular intervals in a preset acquisition period.
More preferably, a plurality of different acquisition cycles are set for different time periods, and the basic data is periodically acquired according to the corresponding acquisition cycle according to the current time.
For step S6, a policy for page rendering is determined vue based on the obtained underlying data.
The specific method for determining vue the page rendering policy according to the obtained basic data condition is as follows:
in an initial state, first data corresponding to different data large-screen pages are extracted from basic data and stored in front-end data storage areas corresponding to the different data large-screen pages respectively. And processing the first data to obtain an array variable of a display component corresponding to the data large-screen page. And triggering vue page rendering according to the calculated array variables to refresh the display component of each data large-screen page.
It will be appreciated that in the initial state, each display element is initially in a state in which no data is displayed, as the data large screen is first activated. And when the basic data is acquired from the back-end interface for the first time, performing unified refreshing on the whole situation according to the basic data.
Specifically, based on the mount life cycle of vue, the studentList and groupList processing classification is performed on the basic data to obtain a new data object girlData (first data), and the new data object girlData is stored in the front-end data storage area a. And in the front-end data storage area A, processing the data object girlData to obtain the number of the dancing girls in registration per day, and assigning a variable a. And processing the data object girlData to obtain the daily number of the registration persons of the girls in the vocal music group, and assigning a variable b. And rendering and refreshing two display components in the data large-screen page A, namely a dance group girl daily attendance linear chart component and a vocal music group girl daily attendance linear chart component through the two variables.
Synchronously, based on the mount life cycle of vue, the studentList and groupList processing classification is performed on the basic data to obtain a new data object, boyData (first data), and the new data object is stored in the front-end data storage area B. And in the front-end data storage area B, processing the data object boyData to obtain the daily number of the dancer boys, and assigning a variable a. And processing the data object boyData to obtain the daily number of the male students in the vocal music group, and assigning a variable b. And rendering and refreshing two display components in the data large-screen page B, namely a dance group male student daily attendance linear chart component and a vocal music group male student daily attendance linear chart component through the two variables.
Through the above process, the initialization of each display component is completed.
In a non-initial state, namely after initialization, when basic data are obtained through the back-end interface, first data corresponding to different data large-screen pages are extracted from the basic data and are respectively stored in front-end data storage areas corresponding to the different data large-screen pages. And processing the first data to obtain a new array variable of the display component corresponding to the data large-screen page. For display elements with array variables unchanged, page rendering is not triggered vue. And triggering vue page rendering for the display component with the changed array variable according to the calculated array variable, and refreshing the display component with the changed array variable.
In the above-described embodiment, for a display device in which an array variable is changed, rendering and refreshing are performed regardless of the magnitude of the change. However, it is foreseeable that in some usage scenarios, the sensitivity to data is strong. Therefore, when the data change is very small, it can be considered that refresh is not performed.
In this case, specifically, for the display element with the changed array variable, if the changed proportion of the array variable does not exceed the preset value, the page rendering is not triggered vue. If the change proportion of the array variable exceeds the preset value, page rendering is triggered vue, and the display component with the changed array variable is refreshed. The preset value can be set according to actual conditions.
And, when determining the proportion of the change of the array variable, the new array variable is compared with the array variable at the time of the previous vue page rendering. For example, the current value of the variable a is 100, the preset value is set to be 5%, and assuming that the variable a after the second update is 103, the variable a does not exceed the preset value by 5%, and therefore the variable a is not updated. Assuming that the variable a after the third update is 106, if 106 and 103 are calculated, the result will not exceed 5%, and no update is performed. However, 106 is already over 5% relative to 100 and needs to be updated. It will be appreciated that when the variable a is 106, we wish to update the display component. Thus, in determining the proportion of the change to the array variable, the new array variable is compared to the array variable last time the vue page rendering was performed.
Continuing with the above example, the variable a currently has a value of 100, however, there is a possibility that the value of the variable a will not change more than 5% after many rounds of data acquisition. In such a case, a slight change in the value of the variable a may occur, but since the amount of change is not large, it lasts for a very long time, and the corresponding display component is still not updated by rendering. However, in practical requirements, such a situation is not a desired result. Therefore, it is preferable that when the variable a of one display element is changed and does not exceed the preset change range, a maximum time is set, and after the maximum time is exceeded, the variable a is forcibly rendered and updated even if the change range of the variable a does not exceed the preset change range.
The foregoing illustrates and describes the principles, general features, and advantages of the present invention. It should be understood by those skilled in the art that the above embodiments do not limit the present invention in any way, and all technical solutions obtained by using equivalent alternatives or equivalent variations fall within the scope of the present invention.

Claims (10)

1. A web page large-screen data processing method based on Vuex is characterized by comprising the following steps:
establishing a plurality of data large-screen pages based on business requirements;
establishing a display component for each data large-screen page;
establishing a plurality of front-end data storage areas respectively corresponding to the data large-screen pages based on Vuex;
setting corresponding array variables for the display components;
acquiring basic data through a rear-end interface;
and determining vue a page rendering strategy according to the acquired basic data.
2. The Vuex-based web page large-screen data processing method according to claim 1,
the specific method for determining vue the page rendering strategy according to the obtained basic data condition is as follows:
in an initial state:
extracting first data corresponding to different data large-screen pages from the basic data and respectively storing the first data in front-end data storage areas corresponding to the different data large-screen pages;
processing the first data to obtain an array variable of a display assembly corresponding to the data large-screen page;
and triggering vue page rendering according to the calculated array variables to refresh the display component of each data large-screen page.
3. The Vuex-based web page large-screen data processing method according to claim 2,
in a non-initial state:
extracting first data corresponding to different data large-screen pages from the basic data and respectively storing the first data in front-end data storage areas corresponding to the different data large-screen pages;
processing the first data to obtain a new array variable of a display assembly corresponding to the data large-screen page;
for display elements with array variables unchanged, page rendering is not triggered vue.
4. The Vuex-based web page large-screen data processing method according to claim 3,
and for the display component with the changed array variable, triggering vue page rendering according to the calculated array variable, and refreshing the display component with the changed array variable.
5. The Vuex-based web page large-screen data processing method according to claim 3,
and for the display component with the changed array variable, determining vue a page rendering strategy according to the change amplitude of the array variable.
6. The Vuex-based web page large-screen data processing method according to claim 5,
for the display component with the changed array variable, if the changed proportion of the array variable does not exceed a preset value, vue page rendering is not triggered, and if the changed proportion of the array variable exceeds the preset value, vue page rendering is triggered, and the display component with the changed array variable is refreshed.
7. The Vuex-based web page large-screen data processing method according to claim 6,
in determining the proportion of changes to the array variables, the new array variables are compared to the array variables the last time the vue page rendering was performed.
8. The Vuex-based web page large-screen data processing method according to claim 1,
the specific method for acquiring the basic data through the back-end interface comprises the following steps:
and setting an acquisition period, and acquiring the basic data at regular intervals of a preset acquisition period.
9. The Vuex-based web page large-screen data processing method according to claim 8,
and setting a plurality of incompletely identical acquisition cycles for different time periods, and acquiring the basic data at regular time according to the corresponding acquisition cycles according to the current time.
10. The Vuex-based web page large-screen data processing method according to claim 1,
the specific method for establishing the display assembly for each data large-screen page comprises the following steps:
and establishing a plurality of display components for each data large-screen page.
CN202210927107.5A 2022-08-03 2022-08-03 Web page large-screen data processing method based on Vuex Pending CN114995817A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210927107.5A CN114995817A (en) 2022-08-03 2022-08-03 Web page large-screen data processing method based on Vuex

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210927107.5A CN114995817A (en) 2022-08-03 2022-08-03 Web page large-screen data processing method based on Vuex

Publications (1)

Publication Number Publication Date
CN114995817A true CN114995817A (en) 2022-09-02

Family

ID=83022334

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210927107.5A Pending CN114995817A (en) 2022-08-03 2022-08-03 Web page large-screen data processing method based on Vuex

Country Status (1)

Country Link
CN (1) CN114995817A (en)

Citations (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105786631A (en) * 2014-12-19 2016-07-20 青岛海信移动通信技术股份有限公司 Method and device for controlling detection score to be displayed
CN106302008A (en) * 2016-08-05 2017-01-04 腾讯科技(深圳)有限公司 Data-updating method and device
CN106599146A (en) * 2016-12-06 2017-04-26 腾讯科技(深圳)有限公司 Cache page processing method and device and cache page update request processing method and device
CN108268499A (en) * 2016-12-30 2018-07-10 北京优朋普乐科技有限公司 A kind of Webpage display process and device
CN110308901A (en) * 2019-05-21 2019-10-08 平安普惠企业管理有限公司 Handle data variable method, apparatus, equipment and storage medium in front end page
CN112015509A (en) * 2020-08-31 2020-12-01 中移(杭州)信息技术有限公司 Data visualization large screen construction method, electronic device and storage medium
CN113312036A (en) * 2021-06-15 2021-08-27 曙光信息产业(北京)有限公司 Large-screen display method, device and equipment of Web page and storage medium
CN113703007A (en) * 2020-05-21 2021-11-26 比亚迪股份有限公司 Altitude data monitoring and displaying method, device, equipment and storage medium
CN114254228A (en) * 2021-12-20 2022-03-29 杭州安恒信息技术股份有限公司 Web application processing method and related device for dynamically binding data
CN114327564A (en) * 2021-12-30 2022-04-12 苏州浪潮智能科技有限公司 Method, system, device and medium for solving multi-layer nested array data response
CN114489916A (en) * 2022-03-08 2022-05-13 京东城市(北京)数字科技有限公司 Method and device for loading visual large-screen page component
WO2022141724A1 (en) * 2020-12-31 2022-07-07 南威软件股份有限公司 Visual configuration rendering method and system based on vue componentization, and terminal
CN114840785A (en) * 2022-04-07 2022-08-02 深圳市商汤科技有限公司 Data processing method and device, electronic equipment and storage medium

Patent Citations (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105786631A (en) * 2014-12-19 2016-07-20 青岛海信移动通信技术股份有限公司 Method and device for controlling detection score to be displayed
CN106302008A (en) * 2016-08-05 2017-01-04 腾讯科技(深圳)有限公司 Data-updating method and device
CN106599146A (en) * 2016-12-06 2017-04-26 腾讯科技(深圳)有限公司 Cache page processing method and device and cache page update request processing method and device
CN108268499A (en) * 2016-12-30 2018-07-10 北京优朋普乐科技有限公司 A kind of Webpage display process and device
CN110308901A (en) * 2019-05-21 2019-10-08 平安普惠企业管理有限公司 Handle data variable method, apparatus, equipment and storage medium in front end page
CN113703007A (en) * 2020-05-21 2021-11-26 比亚迪股份有限公司 Altitude data monitoring and displaying method, device, equipment and storage medium
CN112015509A (en) * 2020-08-31 2020-12-01 中移(杭州)信息技术有限公司 Data visualization large screen construction method, electronic device and storage medium
WO2022141724A1 (en) * 2020-12-31 2022-07-07 南威软件股份有限公司 Visual configuration rendering method and system based on vue componentization, and terminal
CN113312036A (en) * 2021-06-15 2021-08-27 曙光信息产业(北京)有限公司 Large-screen display method, device and equipment of Web page and storage medium
CN114254228A (en) * 2021-12-20 2022-03-29 杭州安恒信息技术股份有限公司 Web application processing method and related device for dynamically binding data
CN114327564A (en) * 2021-12-30 2022-04-12 苏州浪潮智能科技有限公司 Method, system, device and medium for solving multi-layer nested array data response
CN114489916A (en) * 2022-03-08 2022-05-13 京东城市(北京)数字科技有限公司 Method and device for loading visual large-screen page component
CN114840785A (en) * 2022-04-07 2022-08-02 深圳市商汤科技有限公司 Data processing method and device, electronic equipment and storage medium

Similar Documents

Publication Publication Date Title
US20210374540A1 (en) Method and apparatus for optimizing quantization model, electronic device, and computer storage medium
US10657118B2 (en) Update basis for updating digital content in a digital medium environment
CN101512483B (en) Dynamically generating customized user interfaces
CN106095437B (en) The implementation method and device of the user interface layout type of RTL from right to left
CN104992657A (en) Mura compensation module and method, display device and method
CN109308173A (en) Display methods and device, display terminal and computer storage medium
DE102014010217A1 (en) Dynamic information customization for a multi-power computing device
CN103309578A (en) Web page display method and terminal
Muskens et al. Never too old to use a tablet: designing tablet applications for the cognitively and physically impaired elderly
CN111125490A (en) Population activity number extraction method, device and medium based on Baidu thermodynamic diagram
CN111274308A (en) Node relation graph display method, device and equipment
US20210366083A1 (en) Picture processing method and device
CN114995817A (en) Web page large-screen data processing method based on Vuex
CN114036228A (en) Data synchronization method and device based on DataX, electronic device and storage medium
CN116226688B (en) Data processing, image-text searching and image classifying method and related equipment
CN111261088B (en) Image drawing method and device and display device
CN109151538B (en) Image display method and device, smart television and readable storage medium
CN110456999B (en) Program creation method, program creation device, electronic equipment and computer readable storage medium
CN109491740B (en) Automatic multi-version funnel page optimization method based on context background information
CN109803153B (en) Live video whiteboard drawing method and device
CN114387940B (en) Partition display updating method, playing box and display system of LED display screen
CN109657205A (en) The high method of adjustment of line of text and device, electronic equipment
Nicholas Family planning promotion, contraceptive use and fertility decline in Ghana
US9208593B1 (en) Proximity-based detail reduction of geographic data
Jensen et al. Introduction: Emerging patterns of news production and consumption across media

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20220902