vue从后台获取新数据后刷新_基于VUE的前端请求和更新数据的插件iwebData实现方法与流程...

本发明涉及前端开发领域，具体是一种以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，用于订阅实时更新；1.2在vuex中定义异步action方法，通过http调用后台的接口来获取初始化的数据和事件号eventcode，提交mutation将初始化数据保存在vuex的state中，并返回事件号eventcode；1.3在vuex的plugin中导入websocket插件，并在“onmessage”事件中通过事件里的事件号eventcode将事件中的数据提交给相对应的mutation，以实现数据的实时更新；1.4在vue的项目入口文件main.js中注入数据服务插件iwebdata，并通过vue.prototype属性将webdata插件注入到vue的属性中，从而使该插件在任何vue组件中都可以调用。步骤2中，在各个组件中调用iwebdata插件，根据配置的接口名称调用iwebdata的get()方法，提交mutation获取后台的数据并通过websocket向后台发送事件号eventcode订阅本次请求数据的更新推送。步骤3的具体实现过程为：3.1，后台接收前端的http请求并返回数据；3.2，webdata插件接收到后台返回的数据，提交vuex的mutation并将数据保存到state中；3.3，webdata插件通过websocket向后台发送本次http请求的url数据所对应的websocket事件号eventcode；3.4，后台接收前端的websocket信息，在该会话中加入要推送的事件号，当接收到数据变化时向前端推送该事件；3.5，前端接收到后端推送的数据更新事件，调用vuex的mutation更新数据。本发明与现有技术相比，其显著优点：(1)避免了单页面应用中vuex的websocket推送数据更新与http请求的数据事件差造成的数据错误问题。(2)服务端为特定的客户端推送特定的事件，减少了服务端的资源占用。(3)在调用iwebdata插件获取数据后，无论页面进行修改还是删除等操作，最新的数据都会自动地推送给需要的客户端，减少了前端数据同步的代码量，提升了开发效率。附图说明图1是本发明的前端数据结构图。图2是本发明的视图模型与数据模型之间通过数据服务插件联系起来整体的结构图。图3是本发明的数据服务插件内部的结构图。具体实施方式下面结合说明书附图1-图3和实施例对本发明作进一步说明。本发明的数据服务插件实现方法是由vue、vuex、websocket等基础模块共同完成的，其一种具体实现过程为：1．指定前后端的通信协议，将每个获得数据的http接口设定一个websocket的事件号eventcode，并在每个可以订阅更新的接口中返回该事件号eventcode，用于订阅实时更新。2．在vuex中定义异步action方法，通过http调用后台的接口来获取初始化的数据和事件号eventcode，提交mutation将初始化数据保存在vuex的state中，并返回事件号eventcode。3．在vuex的plugin中导入websocket插件，并在“onmessage”事件中通过事件里的事件号eventcode将事件中的数据提交给相对应的mutation，以便实现数据的实时更新。4．在vue的项目入口文件main.js中注入数据服务插件iwebdata，并通过vue.prototype属性将webdata插件注入到vue的属性中，从而使该插件在任何vue组件中都可以调用。5．在各个组件中调用iwebdata插件，根据配置的接口名称调用iwebdata的get()方法，提交mutation获取后台的数据并通过websocket向后台发送事件号eventcode订阅本次请求数据的更新推送。6．在获取数据的组件销毁前(vue-router的beforerouteleave钩子中)或其他不再需要数据更新事件推送服务时，调用iwebdata插件的unfollow()方法，通过websocket向后端发送数据取消不需要的数据更新推送。对于第四步中的iwebdata数据服务插件，其实现过程为：(1)定义插件的接口interface配置属性，用来存放接口名称对应的vuex中的action以及mutation的名称，用来做映射服务，接口interface中的对象格式如下：name：接口名称接口名称对象包含的参数格式如下：eventcode：websocket事件号mutation：对应的vuex中mutation的名称action：对应的vuex中action的名称(2)定义数据服务中的异步函数get()方法，使得用户在组件中通过接口interface的名称去获取数据并订阅数据更新。get()方法先根据调用的接口interface名称获取接口对应的mutation、action以及eventcode属性,然后用vuex中的dispatch方法，调用vuex中的action来发起http请求，获取接口的初始化数据。在action函数返回后台传的eventcode参数后，和配置中的eventcode对比，如果不一致则抛出异常，如果一致则调用websocket向后台发送该事件号，表明前端开始订阅该数据更新事件。后端返回的数据格式如下：data:接口返回的数据event:接口的websocket相关信息后端返回的数据中event对象的格式如下：subscribe:布尔值，代表该接口是否可通过订阅websocket事件来更新数据event:接口的websocket相关信息(3)定义数据服务中的unfollow()方法,该方法接收的参数为字符串或者数组对象，传递需要取消订阅的接口名称。unfollow()方法根据参数的接口interface名称查询配置中的对应事件号eventcode，然后通过websocket向后台发送取消取消订阅的事件号和取消订阅参数，从而使得页面跳转或者其他不再需要该数据推送更新时前端可以主动向后台发起请求关闭该数据更新推送。unfollow()方法中传递的内容如下：eventcodes:字符串类型或数组类型，表示想要取消订阅的某个事件号或事件号列表当前第1页1 2 3