[发明专利]基于VUE的前端请求和更新数据的插件iwebData实现方法

说明书

本发明公开了一种基于VUE的前端请求和更新数据的插件iwebData实现方法。本方法通过对vuex中的方法的管理调用和websocket模块的封装，实现了请求一次数据后，请求的数据自动更新，并且自动更新视图的功能。本发明通过对原有websocket对象的封装以及和后台约定的协议，实现了前端对websocket事件的实时订阅功能，前端在通过异步请求初始化数据后可以手动的订阅该数据websocket更新服务，也可以关闭该数据的推送服务，同时也解决了VUE单页面应用中HTTP异步请求后台数据返回结果和websocket推送事件数据的时间差导致的数据错误问题。由于数据更新服务的websocket事件是根据不同的客户端分别订阅的，所以使用该插件避免了后端向所有会话中的客户端不停地广播所有事件，大大地减少了websocket事件的冗余，也降低了后台的资源占用。

技术领域

本发明涉及前端开发领域，具体是一种以vue为基础框架，利用HTTP和websocket实现获取数据，数据和视图自动更新的方法。

背景技术

随着网页技术的发展，web前端不再在只有显示视图的功能，尤其在ES6和node以及webpack打包工具的出现，导致前端处理的业务逻辑越来越复杂，同时也导致了前端的数据越来越多。传统的html页面中变量以及方法完全暴露在全局的window对象中，使得前端项目的数据处理十分不方便，逻辑和数据混杂在一起，给项目的开发和维护都造成了巨大的困难，也容易产生一些BUG。在使用了websocket同步数据的项目中，数据的来源也分成了HTTP请求和websocket事件两部分，如何处理好不同来源的数据，使得数据正确地传递、数据与视图及时地更新，就成为了一个比较麻烦的问题。

发明内容

本发明的目的在于提供一种基于VUE的前端请求和更新数据的插件

iwebData实现方法，实现了数据初始化和实时更新。

实现本发明目的的技术解决方案为：前端开发者在初始化iwebData插件时调用插件的setConfig()方法，将事件号和事件号相关的vuex中的action和mutation方法绑定，并设定一个接口Interface的名字属性，用来获得这一组事件号的信息。然后将插件注入到vue的prototype中，使得前端组件可以通过iwebData插件的get()和事件号eventCode参数向后台请求初始化数据，初始化完成后通过websocket向后台发送事件号eventCode和订阅参数来管理数据更新服务的订阅和取消。

具体步骤如下：

步骤1，在vue单页面应用的入口文件main.js中通过import命令导入iwebData插件模块，并通过Vue.prototype属性将webData插件注入到vue的属性中，使该插件在任何vue组件中都可以调用；

步骤2，从vue组件的方法中调用iwebData插件中的get()方法，该方法通过HTTP请求调用后台的restful接口获得前端视图中需要的数据；

步骤3，提交mutation保存从后台获取的数据，并通过websocket向后台发送该数据对应的事件号eventCode，订阅本次请求数据的更新推送；

步骤4，在获取数据的组件销毁前，或其他不再需要数据更新事件推送服务时，调用iwebData插件的unfollow()方法，该方法通过websocket向后端发送事件号eventCode与取消订阅标识unfollow，后台接收到前端发送的数据后取消该数据的更新推送事件。

步骤1的具体实现方法为：

1.1指定前后端的通信协议，将每个获得数据的HTTP接口设定一个websocket的事件号eventCode，并在每个可以订阅更新的接口中返回该事件号eventCode，用于订阅实时更新；