CN110308901A - Handle data variable method, apparatus, equipment and storage medium in front end page - Google Patents
Handle data variable method, apparatus, equipment and storage medium in front end page Download PDFInfo
- Publication number
- CN110308901A CN110308901A CN201910425550.0A CN201910425550A CN110308901A CN 110308901 A CN110308901 A CN 110308901A CN 201910425550 A CN201910425550 A CN 201910425550A CN 110308901 A CN110308901 A CN 110308901A
- Authority
- CN
- China
- Prior art keywords
- page
- access request
- vuex
- queue
- tool
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/3003—Monitoring arrangements specially adapted to the computing system or computing system component being monitored
- G06F11/302—Monitoring arrangements specially adapted to the computing system or computing system component being monitored where the computing system component is a software system
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/3051—Monitoring arrangements for monitoring the configuration of the computing system or of the computing system component, e.g. monitoring the presence of processing resources, peripherals, I/O links, software programs
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computing Systems (AREA)
- Quality & Reliability (AREA)
- Human Computer Interaction (AREA)
- Mathematical Physics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
This application involves data to show field, provides data variable method, apparatus, equipment and storage medium in processing front end page, and method includes: to receive the access request from terminal device, calls the Vuex page to monitor tool according to the access request；Tool is monitored by the Vuex page and traverses all files of project, to obtain multiple data variables；Tool is monitored by the Vuex page and monitors the variable condition situation of the data variable, when listening to the data variable and changing, tool is monitored by the Vuex page and reacquires the data variable, to update the data variable；The page view is updated according to the data variable of the update, to obtain the updated page.The data variable before and after tool observation and changes in contrast is monitored by the Vuex page to promote the efficiency of exploitation and debugging.
Description
Technical field
This application involves data to show data variable side in field more particularly to a kind of processing front end page of denomination of invention
Method, device, equipment and storage medium.
Background technique
In software field, front end project development and debugging will often use a large amount of data variable, the prior art
It can be checked or if developer thinks to find other correlations again in because data variable needs export just one by one in the console
Data variable, can only also repeat above step.So that developer can not observation variable situation of change, so that it cannot really
What fixed data variable impacts debugging and exploitation, can not search out the data variable for influencing project development.So that split
Many inconveniences are caused in hair and debugging, reduce the efficiency of exploitation and debugging.
Summary of the invention
This application provides a kind of methods of page development function by encapsulation, are able to solve the page in the prior art
Development efficiency it is too low, the problem of fast ripe iteration can not be done to version.
In a first aspect, the application provides a kind of data variable method in processing front end page, comprising:
The access request from terminal device is received, calls the Vuex page to monitor tool according to the access request；It is described
Vuex monitors tool and is used to that data variable to be managed and be monitored, and generates page view.The page view includes number
According to the current value and history value of variable.The current value refers to the data variable of last update.The history value refer to prior to
The data variable that current value obtains.
Tool is monitored by the Vuex page and traverses all files of project, to obtain multiple data variables.
Tool is monitored by the Vuex page and monitors the variable condition of the data variable, when listening to the data
When variable changes, tool is monitored by the Vuex page and reacquires the data variable, become with updating the data
Amount.
The page view is updated according to the data variable of the update, to obtain the updated page view.
Compared to the prior art, in scheme provided by the present application, the initial of component itself is used mainly to define using vuex
Usually there is a situation where that the data volume of management is excessive when data and obtaining asynchronous data in component, and designing the page, so
Cause developer usually can not carry out debugging monitoring to variable very well, and then reduces the working efficiency of exploitation and debugging.This hair
It is bright to provide a kind of visualization UI page monitoring tool realized by Vuex tool to solve this technical problem, specifically,
The data that Vuex tool is obtained replace initial data, to update data variable, observe and compare by the data variable of update
The data variable for changing front and back, to monitor the variable condition of the data variable value in the project of front end.Some
In possible design, after the access request of the reception from terminal device, the method also includes:
Create first queue and second queue, and the content of the content and the second queue to the first queue into
Row empties.The first queue, which refers to, occupies idling-resource higher than the idling-resource upper limit for storing one or more estimate
Access request queue.The second queue, which refers to, estimates the occupancy idling-resource lower than the free time for storing one or more
The access request queue of the resource upper limit.The resource includes at least central processor CPU time, Installed System Memory and Netowrk tape
At least one of in width.When the CPU time refers to CPU full speed operation, task the time it takes is completed.
The access request of the terminal device is received, and estimates the idling-resource that the access request occupies.
Estimate the idling-resource occupied when all access requests of presently described first queue execute.
If the access request of occupancy is greater than pre- when estimating all access request of presently described first queue and executing
If the occupancy idling-resource threshold value, and the access request occupy the idling-resource be less than preset access thresholds
When, then the access request is inserted into the tail of the queue of the second queue.
If the idling-resource of occupancy is greater than pre- when estimating all access request of presently described first queue and executing
If the occupancy idling-resource threshold value, and access request occupy the idling-resource be greater than preset access thresholds when, then
It improves the occupancy idling-resource threshold value and/or reduces access thresholds.
If the idling-resource of occupancy is less than pre- when estimating all access request of presently described first queue and executing
If the occupancy idling-resource threshold value, and access request occupy the idling-resource be less than preset access thresholds when, then
The access request is inserted into the tail of the queue of the first queue or the tail of the queue of the second queue.
In some possible designs, which is characterized in that before the access request of the reception from terminal device, institute
The method of stating includes:
At least one container Docker locally is being built, for providing the access service of terminal device.It is hung on each container
It carries the corresponding target version Vuex page and monitors tool.
After the access request of the reception from terminal device, further includes:
After receiving the access request, tool is monitored with the Vuex page of the determination terminal device access
Version number.
According to the version number, the address Docker that the Vuex page monitors tool is obtained.
According to the address Docker, the external linkage entrance that the Vuex page monitors tool is obtained.
The external linkage entrance that the Vuex page monitors tool is returned into the terminal device.
In some possible designs, the corresponding target version Vuex page of carry monitors tool on each container,
Include:
It is split as target version Vuex monitoring tool to monitor module, input/output module and data visualization mould
Block.
It is the input/output module and the monitoring module assignment higher than described by Linux control group CGroup
The resource of display module.The CGroup is used for the distribution of system resource, priority, refusal, management and monitoring.
In some possible designs, the access request includes at least the internet association of uniform resource locator, client
Carry out linking sources word in view address, the data being stored on user local terminal, user identifier and hypertext transfer protocol header
Section.
In some possible designs, the data variable according to the update updates the page view, at least
Including one of following implementations:
By the renewal time of setting to complete the operation of the update to the page view.The renewal time of the setting
It is updated including clock renewal, the least bit, daily one for updating, being spaced in update in X minutes and interval update in X seconds.The X is
Any positive integer.
Alternatively, being carried out by event trigger mechanism.The event trigger mechanism refers to when the data variable changes
When, the page view is updated.
In some possible designs, the page view further includes multinomial page style；The page style, which refers to, to be set
Set the standard form of page style.
It is described to obtain updated page view before, the method also includes:
Style of the page style as the page view is selected from the multinomial page style.
Second aspect, the application provide data variable in a kind of processing front end page, have and realize and correspond to above-mentioned first
The function of the method for data variable in the processing front end page that aspect provides.The function can be by hardware realization, can also be with
Corresponding software realization is executed by hardware.Hardware or software include one or more modules corresponding with above-mentioned function, institute
Stating module can be software and/or hardware.
Data variable device includes: in the processing front end page
Input/output module, for receiving the access request from terminal device.
Processing module, for calling the Vuex page to monitor tool according to the access request；The Vuex monitors tool and uses
In being managed and monitor to data variable, and generate page view.The page view includes the current value of data variable
And history value.The current value refers to the data variable of last update.The history value refers to the number obtained prior to current value
According to variable.Tool is monitored by the Vuex page and traverses all files of project, to obtain multiple data variables.Pass through institute
It states the Vuex page and monitors tool and monitor the variable condition of the data variable, when listening to the data variable and changing,
Tool is monitored by the Vuex page and reacquires the data variable, to update the data variable.According to the update
Data variable the page view is updated, to obtain the updated page view.
The another aspect of the application provides the equipment of data variable in processing front end page comprising at least one connection
Processor, memory, input-output unit, wherein for storing program code, the processor is used for the memory
The program code in the memory is called to execute method described in above-mentioned various aspects.
The another aspect of the application provides a kind of computer storage medium comprising instruction, when it runs on computers
When, so that computer executes method described in above-mentioned various aspects.
Detailed description of the invention
Fig. 1 is the flow diagram that the method for data variable in front end page is handled in the embodiment of the present application；
Fig. 2 is the structural schematic diagram that the device of data variable in front end page is handled in the embodiment of the present application；
Fig. 3 is the structural schematic diagram of computer equipment in the embodiment of the present application.
The embodiments will be further described with reference to the accompanying drawings for realization, functional characteristics and the advantage of the application purpose.
Specific embodiment
It should be appreciated that specific embodiment described herein is not used to limit the application only to explain the application.
The description and claims of this application and term " first " in above-mentioned attached drawing, " second " etc. are for distinguishing similar
Object, without being used to describe a particular order or precedence order.It should be understood that the data used in this way in the appropriate case may be used
To exchange, so that the embodiments described herein can be implemented with the sequence other than the content for illustrating or describing herein.This
Outside, term " includes " and " having " and their any deformation, it is intended that cover it is non-exclusive include, for example, containing
The process, method, system, product or equipment of series of steps or module those of are not necessarily limited to be clearly listed step or mould
Block, but may include other steps being not clearly listed or intrinsic for these process, methods, product or equipment or
Module, the division of module appeared in the application, a kind of only division in logic can be with when realizing in practical application
There is other division mode, such as multiple modules can be combined into or be integrated in another system or some features can neglect
Slightly, it or does not execute.
Fig. 1 is please referred to, a kind of method of data variable in processing front end page is provided to the application below and illustrate
It is bright, which comprises
101, the access request from terminal device is received, calls the Vuex page to monitor tool according to the access request.
The Vuex monitors tool and is used to that data variable to be managed and be monitored, and generates page view.The page
Face view includes the current value and history value of data variable.The current value refers to the data variable of last update.It is described to go through
History value refers to the data variable obtained prior to current value.
Wherein, the Vuex tool is matched data mode management tool in Vue project frame.The data
Conditioning management tool is for managing Vue destination nodes.The Vuex page monitoring tool of stating refers to through tool or recurrence
Algorithm completes monitoring of the interface UI to variable change.The operating system of the terminal device is Mac system or windows system
In one, and the terminal device contain Vuex offer vue plug-in unit.
102, tool is monitored by the Vuex page and traverses all files of project, to obtain multiple data variables.
Wherein, by it is described state the Vuex page and monitor tool position path in different front end projects, the Vuex tool
It completes to the data traversal in different front end projects.
103, the variable condition that tool monitors the data variable is monitored by the Vuex page, it is described when listening to
When data variable changes, tool is monitored by the Vuex page and reacquires the data variable, to update the number
According to variable.
Wherein, when being changed by judgment variable, data are updated, the real-time of monitoring, data variable hair will be improved
When changing, it can be monitored at the first time.
104, the page view is updated according to the data variable of the update, to obtain the updated page
View.
The page view is shown by way of table.
In some embodiments, after the access request of the reception from terminal device, the method also includes:
Create first queue and second queue, and the content of the content and the second queue to the first queue into
Row empties.The first queue, which refers to, occupies idling-resource higher than the idling-resource upper limit for storing one or more estimate
Access request queue.The second queue, which refers to, estimates the occupancy idling-resource lower than the free time for storing one or more
The access request queue of the resource upper limit.The resource includes at least central processor CPU time, Installed System Memory and Netowrk tape
At least one of in width.When the CPU time refers to CPU full speed operation, task the time it takes is completed.
The access request of the terminal device is received, and estimates the idling-resource that the access request occupies.
Estimate the idling-resource occupied when all access requests of presently described first queue execute.
If the access request of occupancy is greater than pre- when estimating all access request of presently described first queue and executing
If the occupancy idling-resource threshold value, and the access request occupy the idling-resource be less than preset access thresholds
When, then the access request is inserted into the tail of the queue of the second queue.
If the idling-resource of occupancy is greater than pre- when estimating all access request of presently described first queue and executing
If the occupancy idling-resource threshold value, and access request occupy the idling-resource be greater than preset access thresholds when, then
It improves the occupancy idling-resource threshold value and/or reduces access thresholds.
If the idling-resource of occupancy is less than pre- when estimating all access request of presently described first queue and executing
If the occupancy idling-resource threshold value, and access request occupy the idling-resource be less than preset access thresholds when, then
The access request is inserted into the tail of the queue of the first queue or the tail of the queue of the second queue.
In above embodiment, first queue is major queue, and second queue is quick queue, by the method for deque,
The waiting time of reduction user and more reasonable distributing system resource.
In some embodiments, before the access request of the reception from terminal device, which comprises
At least one container Docker locally is being built, for providing the access service of terminal device.It is hung on each container
It carries the corresponding target version Vuex page and monitors tool.
After the access request of the reception from terminal device, further includes:
After receiving the access request, tool is monitored with the Vuex page of the determination terminal device access
Version number.
According to the version number, the address Docker that the Vuex page monitors tool is obtained.
According to the address Docker, the external linkage entrance that the Vuex page monitors tool is obtained.
The external linkage entrance that the Vuex page monitors tool is returned into the terminal device.
In above embodiment, the browser refers to the application program for retrieving and showing web message resource.
Such as Mozilla Firefox, InternetExplorer, Microsoft Edge, Google Chrome, Opera and
The browsers such as Safari.The Vuex page, which is accessed, to user by the external linkage entrance monitors tool.
In some embodiments, the corresponding target version Vuex page of carry monitors tool, packet on each container
It includes:
It is split as target version Vuex monitoring tool to monitor module, input/output module and data visualization mould
Block.
It is the input/output module and the monitoring module assignment higher than described by Linux control group CGroup
The resource of display module.The CGroup is used for the distribution of system resource, priority, refusal, management and monitoring.
In above embodiment, hardware resource is distributed according to task and user using CGroup, improves overall efficiency,
Such as one process collection of isolation, and limit the resource that they are consumed.Such as: it binds the core of CPU, distributed for this group of process
Its memory used enough and corresponding network bandwidth and disk storage limitation are distributed for this group of process.
In some embodiments, the access request is with including at least the Internet protocol of uniform resource locator, client
Source chain field in location, the data being stored on user local terminal, user identifier and hypertext transfer protocol header.
In above embodiment, by identifying the access request content, limiting device is identified, limitation access is certain to be set
Standby access authority.Such as tool user of service realizes the management to tool user of service by the account number cipher of business account
And priority assignation.Such as A personnel are project implementation person, if being in the tool only that A is provided with read-only authority, therefore A personnel are only
The variation that tool checks data can be monitored by the Vuex page.In another example B personnel are project manager, B personnel tool is assigned
The all permissions used, then B personnel can set the detection etc. of data variable to the setting of entire front end item Path.
In some embodiments, the data variable according to the update updates the page view, includes at least
One of following implementations:
By the renewal time of setting to complete the operation of the update to the page view.The renewal time of the setting
It is updated including clock renewal, the least bit, daily one for updating, being spaced in update in X minutes and interval update in X seconds.The X is
Any positive integer.
Alternatively, being carried out by event trigger mechanism.The event trigger mechanism refers to when the data variable changes
When, the page view is updated.
In above embodiment, the event refers to the message exactly issued by some object.The event includes mouse
The various events of click event, KeyEvent and processing operation system.
For example user presses some button, some file is changed, and the object of trigger event is referred to as sender
(sender), capturing events and the object responded are referred to as recipient (receiver), and there may be multiple for an event
Recipient.
In some embodiments, the page view further includes multinomial page style；The page style refers to setting page
The standard form of face style.
It is described to obtain updated page view before, the method also includes:
Style of the page style as the page view is selected from the multinomial page style.
In above embodiment, the page style is included at least: red dominant hue page style, blue mass tone paging
Face style, cool tone page style and reduced form page style.Page Style Design can be completed by configuring this parameter
Middle different-style is built.Wherein page style element includes at least: head title color, font color, input frame, field
Color, the color of background colour and button.User experience is improved by page genre criteria template.
Such as when selecting blue mass tone paging face style as the page style, then by head title color, font color,
Input frame, the color of field, the color of background colour and button are disposed as blue.
The structural schematic diagram of the device 20 of data variable, can be applied in a kind of processing front end page as shown in Figure 2
Handle data variable in front end page.The device of data variable can be realized in processing front end page in the embodiment of the present application
Corresponding in processing front end page performed in embodiment corresponding to above-mentioned Fig. 1 the step of the method for data variable.Processing
The function that the device 20 of data variable is realized in front end page can also be executed corresponding by hardware realization by hardware
Software realization.Hardware or software include one or more modules corresponding with above-mentioned function, and the module can be software
And/or hardware.The device of data variable may include input/output module 201 and processing module in the processing front end page
202, the function realization of the processing module 202 and input/output module 201 can refer to is held in embodiment corresponding to Fig. 1
Capable operation, does not repeat herein.Input/output module 201 can be used for controlling the input, defeated of the input/output module 201
Out and acquisition operates.
In some embodiments, the acquisition module 201 can be used for receiving the access request from terminal device.
The processing module 202 can be used for calling the Vuex page to monitor tool according to the access request；The Vuex prison
It listens tool to be used to that data variable to be managed and be monitored, and generates page view.The page view includes data variable
Current value and history value.The current value refers to the data variable of last update.The history value refers to prior to current value
The data variable of acquisition.Tool is monitored by the Vuex page and traverses all files of project, is become with obtaining multiple data
Amount.The variable condition that tool monitors the data variable is monitored by the Vuex page, is sent out when listening to the data variable
When changing, tool is monitored by the Vuex page and reacquires the data variable, to update the data variable.Root
The page view is updated according to the data variable of the update, to obtain the updated page view.
In some embodiments, the processing module 202 is also used to:
Create first queue and second queue, and the content of the content and the second queue to the first queue into
Row empties.The first queue, which refers to, occupies idling-resource higher than the idling-resource upper limit for storing one or more estimate
Access request queue.The second queue, which refers to, estimates the occupancy idling-resource lower than the free time for storing one or more
The access request queue of the resource upper limit.The resource includes at least central processor CPU time, Installed System Memory and Netowrk tape
At least one of in width.When the CPU time refers to CPU full speed operation, task the time it takes is completed.
The access request of the terminal device is received, and estimates the idling-resource that the access request occupies.
Estimate the idling-resource occupied when all access requests of presently described first queue execute.
If the access request of occupancy is greater than pre- when estimating all access request of presently described first queue and executing
If the occupancy idling-resource threshold value, and the access request occupy the idling-resource be less than preset access thresholds
When, then the access request is inserted into the tail of the queue of the second queue.
If the idling-resource of occupancy is greater than pre- when estimating all access request of presently described first queue and executing
If the occupancy idling-resource threshold value, and access request occupy the idling-resource be greater than preset access thresholds when, then
It improves the occupancy idling-resource threshold value and/or reduces access thresholds.
If the idling-resource of occupancy is less than pre- when estimating all access request of presently described first queue and executing
If the occupancy idling-resource threshold value, and access request occupy the idling-resource be less than preset access thresholds when, then
The access request is inserted into the tail of the queue of the first queue or the tail of the queue of the second queue.
In some embodiments, the processing module 202 is also used to:
At least one container Docker locally is being built, for providing the access service of terminal device.It is hung on each container
It carries the corresponding target version Vuex page and monitors tool.
After the access request of the reception from terminal device, further includes:
After receiving the access request, tool is monitored with the Vuex page of the determination terminal device access
Version number.
According to the version number, the address Docker that the Vuex page monitors tool is obtained.
According to the address Docker, the external linkage entrance that the Vuex page monitors tool is obtained.
The external linkage entrance that the Vuex page monitors tool is returned into the terminal device.
In some embodiments, the processing module 202 is also used to:
It is split as target version Vuex monitoring tool to monitor module, input/output module and data visualization mould
Block.
It is the input/output module and the monitoring module assignment higher than described by Linux control group CGroup
The resource of display module.The CGroup is used for the distribution of system resource, priority, refusal, management and monitoring.
In some embodiments, the access request is with including at least the Internet protocol of uniform resource locator, client
Source chain field in location, the data being stored on user local terminal, user identifier and hypertext transfer protocol header.
In some embodiments, the processing module 202 is also used to:
By the renewal time of setting to complete the operation of the update to the page view.The renewal time of the setting
It is updated including clock renewal, the least bit, daily one for updating, being spaced in update in X minutes and interval update in X seconds.The X is
Any positive integer.
In some embodiments, the processing module 202 is also used to:
It is described to obtain updated page view before, the method also includes:
Style of the page style as the page view is selected from the multinomial page style.
Describe the creating device in the embodiment of the present application respectively from the angle of modular functionality entity above, below from
Hardware point of view introduces a kind of computer equipment, as shown in figure 3, comprising: processor, memory, input-output unit (can also
To be transceiver, do not identified in Fig. 3) and storage is in the memory and the calculating that can run on the processor
Machine program.For example, the computer program can be the side for handling data variable in front end page in embodiment corresponding to Fig. 1
The corresponding program of method.For example, when computer equipment realizes the device 20 of data variable in processing front end page as shown in Figure 2
Function when, before the processor is realized in embodiment corresponding to above-mentioned Fig. 2 when executing the computer program by handling
Each step in the processing front end page that the device 20 of data variable executes in end page face in the method for data variable.Alternatively, institute
It states and realizes that data become in the processing front end page of embodiment corresponding to above-mentioned Fig. 2 when processor executes the computer program
The function of each module in the device 20 of amount.In another example before the computer program can be to handle in embodiment corresponding to Fig. 1
The corresponding program of the method for data variable in end page face.
Alleged processor can be central processing unit (Central ProcessingUnit, CPU), can also be it
His general processor, digital signal processor (Digital Signal Processor, DSP), specific integrated circuit
(Application Specific Integrated Circuit, ASIC), ready-made programmable gate array (Field-
Programmable Gate Array, FPGA) either other programmable logic device, discrete gate or transistor logic device
Part, discrete hardware components etc..General processor can be microprocessor or the processor is also possible to any conventional processing
Device etc., the processor are the control centres of the computer installation, are filled using various interfaces and the entire computer of connection
The various pieces set.
The memory can be used for storing the computer program and/or module, and the processor is by operation or executes
Computer program in the memory and/or module are stored, and calls the data being stored in memory, realizes institute
State the various functions of computer installation.The memory can mainly include storing program area and storage data area, wherein storage
Program area can application program needed for storage program area, at least one function (for example sound-playing function, image play function
Energy is equal) etc.；Storage data area, which can be stored, uses created data (such as audio data, video data etc.) according to mobile phone
Deng.It can also include nonvolatile memory in addition, memory may include high-speed random access memory, such as hard disk,
Memory, plug-in type hard disk, intelligent memory card (Smart Media Card, SMC), secure digital (Secure Digital, SD)
Card, flash card (Flash Card), at least one disk memory, flush memory device or other volatile solid-states
Part.
The input-output unit can also be replaced with receiver and transmitter, can be same or different physics
Entity.When for identical physical entity, input-output unit may be collectively referred to as.The input and output can be transceiver.
The memory can integrate in the processor, can also be provided separately with the processor.
Through the above description of the embodiments, those skilled in the art can be understood that above-described embodiment
Method can be realized by means of software and necessary general hardware platform, naturally it is also possible to by hardware, but many situations
It is lower the former be more preferably embodiment.Based on this understanding, the technical solution of the application is substantially in other words to the prior art
The part to contribute can be embodied in the form of software products, which is stored in a storage and is situated between
In matter (such as ROM/RAM), including some instructions are used so that a terminal (can be mobile phone, computer, server or net
Network equipment etc.) execute method described in each embodiment of the application.
Embodiments herein is described above in conjunction with attached drawing, but the application is not limited to above-mentioned tool
Body embodiment, the above mentioned embodiment is only schematical, rather than restrictive, the ordinary skill of this field
Personnel are under the enlightenment of the application, when not departing from the application objective and scope of the claimed protection, can also make
Many forms, it is all using equivalent structure or equivalent flow shift made by present specification and accompanying drawing content, or directly or
Other related technical areas are used in indirectly, these are belonged within the protection of the application.
Claims (10)
1. a kind of method of data variable in processing front end page, which is characterized in that the described method includes:
The access request from terminal device is received, calls the Vuex page to monitor tool according to the access request；The Vuex
Monitoring tool is used to that data variable to be managed and be monitored, and generates page view；The page view includes that data become
The current value and history value of amount；The current value refers to the data variable of last update；The history value refers to prior to current
It is worth the data variable obtained；
Tool is monitored by the Vuex page and traverses all files of project, to obtain multiple data variables；
The variable condition that tool monitors the data variable is monitored by the Vuex page, is sent out when listening to the data variable
When changing, tool is monitored by the Vuex page and reacquires the data variable, to update the data variable；
The page view is updated according to the data variable of the update, to obtain the updated page view.
2. the method according to claim 1, wherein after the access request of the reception from terminal device,
The method also includes:
First queue and second queue are created, and the content of the content and the second queue to the first queue carries out clearly
It is empty；The first queue refer to for store it is one or more estimate to occupy idling-resource and be higher than the access of the idling-resource upper limit ask
Ask queue；The second queue, which refers to, estimates the occupancy idling-resource lower than the idling-resource upper limit for storing one or more
Access request queue；The resource includes at least in central processor CPU time, Installed System Memory and network bandwidth at least
One；When the CPU time refers to CPU full speed operation, task the time it takes is completed；
The access request of the terminal device is received, and estimates the idling-resource that the access request occupies；
Estimate the idling-resource occupied when all access requests of presently described first queue execute；
If the access request of occupancy is greater than preset account for when estimating all access request of presently described first queue and executing
When being less than preset access thresholds with the idling-resource of the idling-resource threshold value, and access request occupancy, then will
The access request is inserted into the tail of the queue of the second queue；
If the idling-resource of occupancy is greater than preset institute when estimating all access request of presently described first queue and executing
State occupy idling-resource threshold value, and access request occupy the idling-resource be greater than preset access thresholds when, then improve institute
It states and occupies idling-resource threshold value and/or reduction access thresholds；
If the idling-resource of occupancy is less than preset institute when estimating all access request of presently described first queue and executing
It states and occupies idling-resource threshold value, and when the idling-resource that occupies of access request is less than preset access thresholds, then it will be described
Access request is inserted into the tail of the queue of the first queue or the tail of the queue of the second queue.
3. the method according to claim 1, wherein before the access request of the reception from terminal device,
The described method includes:
At least one container Docker locally is being built, for providing the access service of terminal device；Carry pair on each container
The target version Vuex page answered monitors tool；
After the access request of the reception from terminal device, further includes:
After receiving the access request, the version of tool is monitored with the Vuex page of the determination terminal device access
Number；
According to the version number, the address Docker that the Vuex page monitors tool is obtained；
According to the address Docker, the external linkage entrance that the Vuex page monitors tool is obtained；
The external linkage entrance that the Vuex page monitors tool is returned into the terminal device.
4. according to the method described in claim 3, it is characterized in that, the corresponding target version Vuex of carry on each container
The page monitors tool, comprising:
It is split as target version Vuex monitoring tool to monitor module, input/output module and data visualization module；
It is that the input/output module and the monitoring module assignment are higher than the displaying mould by Linux control group CGroup
The resource of block；The CGroup is used for the distribution of system resource, priority, refusal, management and monitoring.
5. the method according to claim 1, wherein the access request include at least uniform resource locator,
The internet protocol address of client, the data being stored on user local terminal, user identifier and hypertext transfer protocol header
In source chain field.
6. the method according to claim 1, wherein the data variable according to the update is by the page
View update includes at least one of following implementations:
By the renewal time of setting to complete the operation of the update to the page view；The renewal time of the setting includes whole
Point is updated, least bit update, is updated daily, interval updates and be spaced one in updating within X seconds for X minutes；The X is any just whole
Number；
Alternatively, being carried out by event trigger mechanism；The event trigger mechanism refers to when the data variable changes, and incites somebody to action
The page view updates.
7. the method according to claim 1, wherein the page view further includes multinomial page style；It is described
Page style refers to the standard form of setting page style；
It is described to obtain updated page view before, the method also includes:
Style of the page style as the page view is selected from the multinomial page style.
8. a kind of front end page processing unit, which is characterized in that described device includes:
Input/output module, for receiving the access request from terminal device,
Processing module, for calling the Vuex page to monitor tool according to the access request；The Vuex monitor tool for pair
Data variable is managed and monitors, and generates page view；The page view includes the current value of data variable and goes through
History value；The current value refers to the data variable of last update；The history value refers to that the data obtained prior to current value become
Amount；Tool is monitored by the Vuex page and traverses all files of project, to obtain multiple data variables；Pass through the Vuex
The page monitors tool and monitors the variable condition of the data variable, when listening to the data variable and changing, passes through institute
It states the Vuex page and monitors the tool reacquisition data variable, to update the data variable；According to the data of the update
Variable updates the page view, to obtain the updated page view.
9. a kind of computer equipment, which is characterized in that the computer equipment includes:
At least one processor, memory and input-output unit；
Wherein, the memory is for storing program code, and the processor is for calling the program stored in the memory
Code is executed such as method of any of claims 1-7.
10. a kind of computer storage medium, which is characterized in that it includes instruction, when run on a computer, so that calculating
Machine executes such as method of any of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910425550.0A CN110308901A (en) | 2019-05-21 | 2019-05-21 | Handle data variable method, apparatus, equipment and storage medium in front end page |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910425550.0A CN110308901A (en) | 2019-05-21 | 2019-05-21 | Handle data variable method, apparatus, equipment and storage medium in front end page |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110308901A true CN110308901A (en) | 2019-10-08 |
Family
ID=68075303
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910425550.0A Pending CN110308901A (en) | 2019-05-21 | 2019-05-21 | Handle data variable method, apparatus, equipment and storage medium in front end page |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110308901A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114968243A (en) * | 2022-06-20 | 2022-08-30 | 平安普惠企业管理有限公司 | Communication unification method, device, equipment and storage medium for VUE parent-child assembly |
| CN114995817A (en) * | 2022-08-03 | 2022-09-02 | 杭州乾冠数字物联技术有限公司 | Web page large-screen data processing method based on Vuex |
| CN115185788A (en) * | 2022-09-07 | 2022-10-14 | 平安银行股份有限公司 | Data variable monitoring method and system and computer equipment |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107426004A (en) * | 2017-05-03 | 2017-12-01 | 深圳市众泰兄弟科技发展有限公司 | A kind of network security visible processing method based on big data |
| CN108063733A (en) * | 2017-12-29 | 2018-05-22 | 珠海国芯云科技有限公司 | The dynamic dispatching method and device of website visiting request |
| CN108845856A (en) * | 2018-06-11 | 2018-11-20 | 腾讯科技（深圳）有限公司 | Data Binding Method, device, storage medium and equipment |
| CN109376163A (en) * | 2018-09-18 | 2019-02-22 | 广州视源电子科技股份有限公司 | A kind of method, apparatus, terminal and the storage medium of data double-way binding |
| CN109670130A (en) * | 2018-11-28 | 2019-04-23 | 国云科技股份有限公司 | A kind of long task multi-page method for refreshing of front end page |
-
2019
- 2019-05-21 CN CN201910425550.0A patent/CN110308901A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107426004A (en) * | 2017-05-03 | 2017-12-01 | 深圳市众泰兄弟科技发展有限公司 | A kind of network security visible processing method based on big data |
| CN108063733A (en) * | 2017-12-29 | 2018-05-22 | 珠海国芯云科技有限公司 | The dynamic dispatching method and device of website visiting request |
| CN108845856A (en) * | 2018-06-11 | 2018-11-20 | 腾讯科技（深圳）有限公司 | Data Binding Method, device, storage medium and equipment |
| CN109376163A (en) * | 2018-09-18 | 2019-02-22 | 广州视源电子科技股份有限公司 | A kind of method, apparatus, terminal and the storage medium of data double-way binding |
| CN109670130A (en) * | 2018-11-28 | 2019-04-23 | 国云科技股份有限公司 | A kind of long task multi-page method for refreshing of front end page |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114968243A (en) * | 2022-06-20 | 2022-08-30 | 平安普惠企业管理有限公司 | Communication unification method, device, equipment and storage medium for VUE parent-child assembly |
| CN114995817A (en) * | 2022-08-03 | 2022-09-02 | 杭州乾冠数字物联技术有限公司 | Web page large-screen data processing method based on Vuex |
| CN115185788A (en) * | 2022-09-07 | 2022-10-14 | 平安银行股份有限公司 | Data variable monitoring method and system and computer equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108776934B (en) | Distributed data calculation method and device, computer equipment and readable storage medium | |
| CN110308901A (en) | Handle data variable method, apparatus, equipment and storage medium in front end page | |
| EP2486698B1 (en) | Method and system for reconstructing transactions in a communication network | |
| US7143158B2 (en) | Generating metrics for networked devices | |
| US11714823B1 (en) | Generating metric data from log data using metricization rules | |
| CN106302421B (en) | A kind of information intercepting processing method and device | |
| US11675473B1 (en) | User interface for summarizing data to generate previews of metric data | |
| CN107508914A (en) | A kind of accurate method for pushing of message and system based on cloud computing analysis | |
| CN109981715A (en) | A kind of method and device of session management | |
| CN106453139A (en) | Method and device of data packet scheduling | |
| WO2016101446A1 (en) | Data analysis method, apparatus, system, and terminal, and server | |
| CN101860454B (en) | Network performance data processing method and device thereof | |
| CN107948242A (en) | More service number template message sending methods and system | |
| CN101621758B (en) | Service container system for SP/CP | |
| CN110087226A (en) | Flow statistical method, device, storage medium and electronic device | |
| CN116974805A (en) | Root cause determination method, apparatus and storage medium | |
| CN110399095A (en) | A kind of statistical method and device of memory space | |
| CN109976868A (en) | DApp method for customizing, device and electronic equipment | |
| CN106534231A (en) | Method, device and system for controlling use limit of network resources | |
| CN113242254B (en) | Communication message processing method, device, terminal equipment and storage medium | |
| CN114401158A (en) | Flow charging method and device, electronic equipment and storage medium | |
| CN112988417A (en) | Message processing method and device, electronic equipment and computer readable medium | |
| CN106708706A (en) | Task program exception alarm information processing method and apparatus | |
| CN111611123A (en) | Data processing method, data processing system and equipment | |
| CN109194700A (en) | A kind of traffic management and control method and relevant apparatus |
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 |