CN110457024B - VUE-based front-end request and update data plug-in iwebData implementation method - Google Patents
VUE-based front-end request and update data plug-in iwebData implementation method Download PDFInfo
- Publication number
- CN110457024B CN110457024B CN201910687279.8A CN201910687279A CN110457024B CN 110457024 B CN110457024 B CN 110457024B CN 201910687279 A CN201910687279 A CN 201910687279A CN 110457024 B CN110457024 B CN 110457024B
- Authority
- CN
- China
- Prior art keywords
- data
- plug
- vue
- websocket
- iwebdata
- 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a VUE-based plug-in iwebData implementation method for front-end requests and updated data. According to the method, the functions of automatically updating the requested data and automatically updating the view after the data is requested for one time are realized through the management calling of the method in vuex and the encapsulation of the websocket module. The invention realizes the real-time subscription function of the front end to the websocket event through the encapsulation of the original websocket object and the protocol agreed with the background, the front end can manually subscribe the data websocket update service after initializing the data through the asynchronous request, and can also close the data push service, and simultaneously, the invention also solves the problem of data errors caused by the time difference between the HTTP asynchronous request background data return result and the websocket push event data in the VUE single-page application. Because the websocket events of the data updating service are respectively subscribed according to different clients, the use of the plug-in avoids that the back end continuously broadcasts all the events to the clients in all the sessions, greatly reduces the redundancy of the websocket events and reduces the resource occupation of the background.
Description
Technical Field
The invention relates to the field of front-end development, in particular to a method for achieving automatic updating of acquired data, data and views by using an HTTP and websocket based on an vue basic framework.
Background
With the development of web page technology, the web front end no longer has only the function of displaying views, especially the emergence of ES6 and node and webpack packaging tools, which results in more and more complex business logic for front end processing and more data for the front end. Variables and methods in a traditional html page are completely exposed in a global window object, so that data processing of a front-end project is very inconvenient, logic and data are mixed together, great difficulty is caused to development and maintenance of the project, and some BUGs are easily generated. In the project using the websocket synchronous data, the data source is also divided into two parts, namely an HTTP request and a websocket event, and how to process the data from different sources, so that the data is correctly transmitted and the data and the view are timely updated becomes a relatively troublesome problem.
Disclosure of Invention
The invention aims to provide a plug-in unit for front-end request and update data based on VUE
The iwebData implementation method realizes data initialization and real-time updating.
The technical solution for realizing the purpose of the invention is as follows: the front-end developer calls the setConfig () method of the plug-in when initializing the iwebData plug-in, binds the event number and the action and the mutation method in vuex related to the event number, and sets a name attribute of the Interface to obtain the information of the event number. And then, the plug-in is injected into the prototype of vue, so that the front-end component can request initialization data from the background through get () and event number eventCode parameters of the iwebData plug-in, and after the initialization is completed, the event number eventCode and subscription parameters are sent to the background through websocket to manage subscription and cancellation of the data updating service.
The method comprises the following specific steps:
step 1, importing an iwebData plug-in module in an entry file main.js of vue single-page application through an import command, and injecting the webData plug-in into an attribute of vue through a vue.prototype attribute so that the plug-in can be called in any vue component;
step 2, calling a get () method in the iwebData plug-in from the methods of the vue component, and calling a restful interface of a background through an HTTP request to obtain data required in the front end view;
step 3, submitting the data acquired from the background for storage by the rotation, sending an event number eventCode corresponding to the data to the background through the websocket, and subscribing the update and push of the requested data;
and 4, before the component for obtaining the data is destroyed, or when other data updating event pushing services are no longer needed, calling an underfall () method of the iwebData plug-in, sending an event number eventCode and a unsubscribe identifier underfall to the back end through a websocket, and canceling the updating pushing event of the data after the background receives the data sent by the front end.
The specific implementation method of the step 1 comprises the following steps:
1.1, appointing communication protocols of front and back ends, setting an event number eventCode of a websocket for each HTTP interface for obtaining data, and returning the event number eventCode in each interface which can subscribe for updating for subscribing real-time updating;
1.2 defining an asynchronous action method in vuex, calling a background interface through HTTP to acquire initialized data and event number eventCode, submitting rotation to store the initialized data in the state of vuex, and returning the event number eventCode;
1.3, introducing a websocket plug-in into a plugin of vuex, and submitting data in an event to corresponding mutation through an event number eventCode in the event in an event of 'onmessage' so as to realize real-time updating of the data;
1.4 inject the data service plug-in iwebData in the project entry file main.js at vue and inject the webData plug-in into the properties of vue via the vue.prototype property, so that the plug-in can be called in any vue component.
In step 2, the iwebData plug-in is called in each component, the get () method of iwebData is called according to the configured interface name, the data of the backstage is obtained by submission of the rotation, and the event number eventCode is sent to the backstage to subscribe the update push of the requested data.
The specific implementation process of the step 3 is as follows:
3.1, the background receives the HTTP request of the front end and returns data;
3.2, the webData plug-in receives the data returned by the background, submits the mutation of vuex and stores the data in the state;
3.3, the webData plug-in sends the websocket event number eventCode corresponding to url data of the HTTP request to the background through the websocket;
3.4, the background receives websocket information of the front end, adds an event number to be pushed into the session, and pushes the event to the front end when receiving data change;
and 3.5, the front end receives a data updating event pushed by the rear end and calls the mutation updating data of vuex.
Compared with the prior art, the invention has the following remarkable advantages: (1) the problem of data errors caused by poor data events of the websocket push data update and the HTTP request of vuex in single-page application is solved. (2) The server side pushes specific events for specific clients, and resource occupation of the server side is reduced. (3) After the iwebData plug-in is called to obtain data, the latest data can be automatically pushed to a required client no matter the page is modified or deleted, so that the code quantity of front-end data synchronization is reduced, and the development efficiency is improved.
Drawings
FIG. 1 is a front end data structure diagram of the present invention.
FIG. 2 is a block diagram of the view model and data model of the present invention in a relationship with each other through a data service plug-in.
FIG. 3 is a block diagram of the interior of the data service plug-in of the present invention.
Detailed Description
The invention will be further described with reference to the accompanying figures 1-3 and examples.
The data service plug-in implementation method is jointly completed by basic modules such as vue, vuex, websocket and the like, and one specific implementation process is as follows:
1. appointing communication protocols of front and back ends, setting an event number eventCode of websocket for each HTTP interface for obtaining data, and returning the event number eventCode in each interface which can subscribe for updating for subscribing for real-time updating.
2. An asynchronous action method is defined in vuex, initialized data and event number eventCode are obtained by calling a background interface through HTTP, the initialized data are saved in the state of vuex by submitting the rotation, and the event number eventCode is returned.
3. And importing a websocket plug-in into the plugin of vuex, and submitting data in the event to corresponding mutation through an event number eventCode in the event of 'onmessage' so as to realize real-time updating of the data.
4. Data service plug-in iwebData is injected in the project entry file main.js at vue and injected into the properties of vue via the vue.prototype property, so that it can be called in any vue component.
5. And calling the iwebData plug-in each component, calling a get () method of iwebData according to the configured interface name, submitting the data of the multicast acquisition background, and sending an event number eventCode to the background through websocket to subscribe the update push of the data requested this time.
6. Before the component for acquiring data is destroyed (vue-in the before RouteLeave hook of router) or when other data update event push services are no longer needed, the underfall () method of the iwebData plug-in is called, and data is sent to the back end through the websocket to cancel the data update push which is not needed.
For the iwebData data service plug-in the fourth step, the implementation process is as follows:
(1) defining the Interface configuration attribute of the plug-in, storing the action and the mutation name in vuex corresponding to the Interface name, and using the Interface configuration attribute as mapping service, wherein the object format in the Interface is as follows:
| NAME: interface name |
The interface name object contains the following parameter formats:
| eventCode: websocket event number |
| mutation: name of mutation in corresponding vuex |
| action: name of action in corresponding vuex |
(2) An asynchronous function get () method in the data service is defined, so that a user acquires data and subscribes to data updating in a component through the name of an Interface. The get () method first obtains the mutation, action and eventCode attributes corresponding to the Interface according to the called Interface name, then calls the action in vuex to initiate the HTTP request by using the dispatch method in vuex, and obtains the initialization data of the Interface. And after the action function returns the eventCode parameters transmitted by the background, comparing the eventCode parameters with the eventCode in the configuration, if the eventCode parameters are inconsistent, throwing exception, and if the eventCode parameters are consistent, calling websocket to send the event number to the background, so that the front end starts to subscribe the data updating event.
The format of the data returned by the back end is as follows:
| data returned by interface |
| event is websocket related information of interface |
The format of the event object in the data returned by the back end is as follows:
(3) defining an underfloor () method in a data service, wherein the received parameters are character strings or array objects, and transmitting interface names needing unsubscribing. The method of underfloor () inquires the corresponding event number eventCode in the configuration according to the Interface name of the parameter, and then sends the event number for canceling the subscription and the parameter for canceling the subscription to the background through the websocket, so that the front end can actively initiate a request to the background to close the data update push when the page skips or other data push updates are no longer needed.
The contents passed in the underfloor () method are as follows:
Claims (5)
1. a plug-in iwebData realization method based on VUE front end request and update data is characterized in that: calling a setConfig () method of the plugin when initializing the iwebData plugin, binding an action and a mutation method in the event number and vuex related to the event number, and setting a name attribute of an Interface to obtain information of the event number; and then, the plug-in is injected into the prototype of vue, so that the front-end component can request initialization data from the background through get () and event number eventCode parameters of the iwebData plug-in, and after the initialization is completed, the event number eventCode and subscription parameters are sent to the background through websocket to manage subscription and cancellation of the data updating service.
2. The plug-in iwebData implementation method based on VUE front-end request and update data according to claim 1, characterized by the following specific steps:
step 1, importing an iwebData plug-in module in an entry file main.js of vue single-page application through an import command, and injecting the webData plug-in into an attribute of vue through a vue.prototype attribute so that the plug-in can be called in any vue component;
step 2, calling a get () method in the iwebData plug-in from the methods of the vue component, and calling a restful interface of a background through an HTTP request to obtain data required in the front end view;
step 3, submitting the data acquired from the background for storage by the rotation, sending an event number eventCode corresponding to the data to the background through the websocket, and subscribing the update and push of the requested data;
and 4, before the component for obtaining the data is destroyed, or when other data updating event pushing services are no longer needed, calling an underfall () method of the iwebData plug-in, sending an event number eventCode and a unsubscribe identifier underfall to the back end through a websocket, and canceling the updating pushing event of the data after the background receives the data sent by the front end.
3. The plug-in iwebData implementation method based on VUE-based front-end request and update data according to claim 2, wherein the specific implementation method of step 1 is:
1.1, appointing communication protocols of front and back ends, setting an event number eventCode of a websocket for each HTTP interface for obtaining data, and returning the event number eventCode in each interface which can subscribe for updating for subscribing real-time updating;
1.2 defining an asynchronous action method in vuex, calling a background interface through HTTP to acquire initialized data and event number eventCode, submitting rotation to store the initialized data in the state of vuex, and returning the event number eventCode;
1.3, introducing a websocket plug-in into a plugin of vuex, and submitting data in an event to corresponding mutation through an event number eventCode in the event in an event of 'onmessage' so as to realize real-time updating of the data;
1.4 inject the data service plug-in iwebData in the project entry file main.js at vue and inject the webData plug-in into the properties of vue via the vue.prototype property, so that the plug-in can be called in any vue component.
4. The plug-in iwebData implementation method of VUE-based front-end request and update data according to claim 2, characterized in that: in step 2, the iwebData plug-in is called in each component, the get () method of iwebData is called according to the configured interface name, the data of the backstage is obtained by submission of the rotation, and the event number eventCode is sent to the backstage to subscribe the update push of the requested data.
5. The plug-in iwebData implementation method based on VUE front-end request and update data according to claim 2, wherein the specific implementation process of step 3 is:
3.1, the background receives the HTTP request of the front end and returns data;
3.2, the webData plug-in receives the data returned by the background, submits the mutation of vuex and stores the data in the state;
3.3, the webData plug-in sends the websocket event number eventCode corresponding to url data of the HTTP request to the background through the websocket;
3.4, the background receives websocket information of the front end, adds an event number to be pushed into the session, and pushes the event to the front end when receiving data change;
and 3.5, the front end receives a data updating event pushed by the rear end and calls the mutation updating data of vuex.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910687279.8A CN110457024B (en) | 2019-07-29 | 2019-07-29 | VUE-based front-end request and update data plug-in iwebData implementation method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910687279.8A CN110457024B (en) | 2019-07-29 | 2019-07-29 | VUE-based front-end request and update data plug-in iwebData implementation method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110457024A CN110457024A (en) | 2019-11-15 |
| CN110457024B true CN110457024B (en) | 2020-09-22 |
Family
ID=68483878
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910687279.8A Active CN110457024B (en) | 2019-07-29 | 2019-07-29 | VUE-based front-end request and update data plug-in iwebData implementation method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110457024B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111625239B (en) * | 2020-05-09 | 2023-05-02 | 北京仁科互动网络技术有限公司 | Method and device for updating virtual page instance state in SPA |
| CN112306474B (en) * | 2020-10-28 | 2022-09-20 | 科大国创云网科技有限公司 | VUE project smooth upgrading method based on modular template |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6584502B1 (en) * | 1999-06-29 | 2003-06-24 | Cisco Technology, Inc. | Technique for providing automatic event notification of changing network conditions to network elements in an adaptive, feedback-based data network |
| CN103176795A (en) * | 2013-02-04 | 2013-06-26 | 中国电子科技集团公司第二十八研究所 | Method for applying plug-in technology to data filtering of information distribution software |
| CN107239546A (en) * | 2017-06-05 | 2017-10-10 | 成都知道创宇信息技术有限公司 | A kind of method of webpage local content tracking with reminding |
| CN108076147A (en) * | 2017-12-13 | 2018-05-25 | 上海哔哩哔哩科技有限公司 | The server-side of Internet service renders hot update method, system and storage medium |
| CN108664239A (en) * | 2018-05-21 | 2018-10-16 | 中信百信银行股份有限公司 | A kind of across technology stack web front-end development system and method based on micro services |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8135770B2 (en) * | 2008-12-29 | 2012-03-13 | International Business Machines Corporation | Processing recurring events within personal information management clients |
-
2019
- 2019-07-29 CN CN201910687279.8A patent/CN110457024B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6584502B1 (en) * | 1999-06-29 | 2003-06-24 | Cisco Technology, Inc. | Technique for providing automatic event notification of changing network conditions to network elements in an adaptive, feedback-based data network |
| CN103176795A (en) * | 2013-02-04 | 2013-06-26 | 中国电子科技集团公司第二十八研究所 | Method for applying plug-in technology to data filtering of information distribution software |
| CN107239546A (en) * | 2017-06-05 | 2017-10-10 | 成都知道创宇信息技术有限公司 | A kind of method of webpage local content tracking with reminding |
| CN108076147A (en) * | 2017-12-13 | 2018-05-25 | 上海哔哩哔哩科技有限公司 | The server-side of Internet service renders hot update method, system and storage medium |
| CN108664239A (en) * | 2018-05-21 | 2018-10-16 | 中信百信银行股份有限公司 | A kind of across technology stack web front-end development system and method based on micro services |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110457024A (en) | 2019-11-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110457024B (en) | VUE-based front-end request and update data plug-in iwebData implementation method | |
| CN107026882B (en) | Resource acquisition method and related equipment | |
| CN105429858B (en) | A kind of real-time Message Passing method between multirobot | |
| CN108874558B (en) | Message subscription method of distributed transaction, electronic device and readable storage medium | |
| CN103188283A (en) | Method, server and system for file uploading and downloading | |
| CN111030784A (en) | Information synchronization method and device | |
| CN106230922A (en) | A kind of news subscribing method, message production unit and message reception units | |
| CN105184469A (en) | Method and device for collaborative editing of documents | |
| DE10239791A1 (en) | System for collecting and distributing calendar information | |
| EP2574004A1 (en) | Method, apparatus and system for improving synchronization efficiency of really simple syndication service | |
| DE112015003926B4 (en) | Method, system and computer program for publish/subscribe messaging using a message structure | |
| CN102480520B (en) | Media data synchronism method based on differential metadata description structure | |
| US8788710B2 (en) | Managed object member architecture for software defined radio | |
| CN110413418B (en) | Cache synchronization device and method, cache synchronization system and electronic equipment | |
| CN101098248A (en) | Method and system for implementing universal network management based on configuration describing document | |
| CN109462640B (en) | Metadata synchronization method, data terminal, interaction system and medium | |
| US20040122892A1 (en) | Method, apparatus, and computer-program product for event service declaration, registration, and notification | |
| CN104320441A (en) | Method of sharing information between wireless communication systems | |
| CN102625156B (en) | information synchronization method and system | |
| CN106899605B (en) | Communication method and device based on STOMP protocol | |
| CN101674143A (en) | Method and system for releasing news to mobile equipment at regular time | |
| CN108206864A (en) | Information of vehicles based on wechat synchronizes real time inquiry system and information synchronization method | |
| KR101699066B1 (en) | Message based on html5 sending method | |
| CN1968120B (en) | Method and system for group information management | |
| CN111478951B (en) | File issuing method and device |
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 |