首页 / 专利库 / 电脑图像 / 渲染 / 一种网页端实时数据的动态展示方法

一种网页端实时数据的动态展示方法

阅读:1发布:2021-06-03

专利汇可以提供一种网页端实时数据的动态展示方法专利检索,专利查询,专利分析的服务。并且本 发明 涉及互联网web前端技术领域,尤其是一种网页端实时数据的动态展示方法。本方法包括显示端数据呈现方式、后端数据过滤方式和前后端数据绑定方式。本方法所述显示端数据呈现方式以气泡形式从小变大由下而上源源不断地展现给用户,且当用户移动 鼠标 悬停 在某个气泡上时该气泡会停止运动,点击气泡即可在弹出层显示完整数据详情,方便用户了解更多信息,弥补数据展现受容器限制这一缺点,实现大量数据的动态显示;后端数据过滤方式根据用户选择的区域或服务类型有针对性地对 数据库 中的数据进行筛选;前后端数据绑定方式以vue+Javascript实现数据和页面的实时绑定。本发明实现了网页端实时数据的动态气泡展示。,下面是一种网页端实时数据的动态展示方法专利的具体信息内容。

1.一种网页端实时数据的动态展示方法,其特征在于:所述的方法包括后端数据过滤、前后端数据绑定和显示端显示;
所述的后端数据过滤是通过用户选择的地区位置或者用户登录时的所属地在筛选数据时把用户的行政区划代码作为参数传递,后台根据这个代码快速筛选出相关的信息表并返回给显示端展示数据;
所述的前后端数据绑定是在前端页面对应的区域绑定vue中v-model指令并在methods对象属性中绑定相应方法及时把最新数据传递给后端,后端对数据的合法性进行验证,成功后创建与数据库连接及时对数据进行操作并存储到数据库,把最新数据渲染在显示端;
所述的显示端显示是前端发送Ajax数据请求向后端请求动态数据;并通过$.each方法循环数据,并动态创建a标签绑定数据;同时为每一个气泡绑定鼠标hover事件悬停效果和鼠标click事件弹出数据详情效果;通过随机函数为每一个气泡数据设置随机上升速度、气泡产生的随机位置,同时设置每一个气泡数据由小变大的动画效果和文字显示的方式,实现大量数据的动态显示。

说明书全文

一种网页端实时数据的动态展示方法

技术领域

[0001] 本发明涉及互联网web前端技术领域,尤其是一种网页端实时数据的动态展示方法。

背景技术

[0002] 目前网站数据主要以表格、列表、轮播图的方式展现,往往受页面布局的影响不能全部展示数据。当用户或者用人机构发布一些需求和资源时无法做到实时推送获得及时反馈,或是用户登录网站时无法根据用户的地理位置有区域性的推送距离用户最近的服务和资源。

发明内容

[0003] 本发明解决的技术问题在于提供一种网页端实时数据的动态展示方法;不受数据展现的容器限制,并可根据用户的选择有针对性地对数据库中的数据进行筛选,实时展示数据;主要解决网站在数据展现方面的单一性和滞后性的问题,提升用户的视觉体验,增加网站的访问量。
[0004] 本发明解决上述技术问题的技术方案是:
[0005] 所述的方法包括后端数据过滤、前后端数据绑定和显示端显示;
[0006] 所述的后端数据过滤是通过用户选择的地区位置或者用户登录时的所属地在筛选数据时把用户的行政区划代码作为参数传递,后台根据这个代码快速筛选出相关的信息表并返回给显示端展示数据;
[0007] 所述的前后端数据绑定是在前端页面对应的区域绑定vue中v-model指令并在methods对象属性中绑定相应方法及时把最新数据传递给后端,后端对数据的合法性进行验证,成功后创建与数据库连接及时对数据进行操作并存储到数据库,把最新数据渲染在显示端;
[0008] 所述的显示端显示是前端发送Ajax数据请求向后端请求动态数据;并通过$.each方法循环数据,并动态创建a标签绑定数据;同时为每一个气泡绑定鼠标hover事件悬停效果和鼠标click事件弹出数据详情效果;通过随机函数为每一个气泡数据设置随机上升速度、气泡产生的随机位置,同时设置每一个气泡数据由小变大的动画效果和文字显示的方式,实现大量数据的动态显示。
[0009] 本方法基于Javascript实现将大量数据以气泡的方式从小变大由下而上源源不断的展现给用户,弥补了数据展现受容器限制这一缺点,实现大量数据的动态显示,可根据用户选择的区域或服务类型有针对性地对数据库中的数据进行筛选,能快速有效地对数据进行过滤供显示端显示,替代传统网页数据全部分页的显示方式,实现了数据的有效性,并以vue+Javascript实现数据和页面的实时绑定,当用户或者机构发布一些需求和资源时本方法可以实时捕捉用户的行为并把数据及时存储到数据库,同时渲染在显示端,实现数据显示的实时性。附图说明
[0010] 下面结合附图对本发明进一步说明:
[0011] 图1为本发明方法的流程图

具体实施方式

[0012] 如图1所示,本发明为达到上述目的,通过以下技术方案实现,显示端气泡生产方式:前端发送Ajax数据请求向后端请求动态数据并通过$.each方法循环数据并动态创建a标签绑定数据同时为每一个气泡绑定鼠标hover事件悬停效果和鼠标click事件弹出数据详情效果,并通过随机函数为每一个气泡数据设置随机上升速度、气泡产生的随机位置,同时设置每一个气泡数据由小变大的动画效果和文字显示的方式,实现大量数据的动态显示。
[0013] 后端数据过滤方式:传统网站在根据区域筛选数据时一般是根据关键字比如“广东省”作为数据筛选条件往往响应时间比较慢,影响网站的整体体验效果,本方法是通过用户选择的地区位置或者用户登录时的所属地比如属于广东省的,给它设置广东省的行政区划代码440000在筛选数据时把用户的行政区划代码作为参数传递,后台根据这个代码快速筛选出属于广东省的信息表并返回给显示端展示数据,在我们这功能中,我们用行政区划代码作为筛选条件,数据库里该属性存的是Int类型,所以数据库能够快速检索出来,同时对前端发送过来的数据运用Filter方法进行拦截验证,确定数据的合法性和真实性,提升系统的安全等级。
[0014] 前后端数据绑定方式:一般网站在做实时数据更新是每间隔一段时间请求一次数据然后重新渲染某个模,这样做会增加服务的压同时数据也会有滞后性,本方法在前端页面对应的区域绑定vue中v-model指令并在methods对象属性中绑定相应方法及时把最新数据传递给后端,后端对数据的合法性进行验证,成功后创建与数据库连接及时对数据进行操作并存储到数据库,把最新数据渲染在显示端,同时当服务器端数据变换时显示端也会迅速响应变化,实现数据与页面的双向绑定,体现数据显示的实时性。
[0015] 本发明显示端数据以气泡的形式从小变大由下而上源源不断地展现给用户,且当用户移动鼠标悬停在某个气泡上时该气泡会停止运动,点击气泡即可在弹出层显示完整数据详情,方便用户了解更多信息,实现大量数据的动态显示。后端数据过滤方法根据用户选择的区域或服务类型有针对性地对数据库中的数据进行筛选,能快速有效地对数据进行过滤供显示端显示,替代传统网页数据全部分页的显示方式,实现了数据的有效性。前后端数据绑定方式以vue+Javascript实现数据和页面的实时绑定做到实时监听用户行为,实时动态更新数据。
高效检索全球专利

专利汇是专利免费检索,专利查询,专利分析-国家发明专利查询检索分析平台,是提供专利分析,专利查询,专利检索等数据服务功能的知识产权数据服务商。

我们的产品包含105个国家的1.26亿组数据,免费查、免费专利分析。

申请试用

分析报告

专利汇分析报告产品可以对行业情报数据进行梳理分析,涉及维度包括行业专利基本状况分析、地域分析、技术分析、发明人分析、申请人分析、专利权人分析、失效分析、核心专利分析、法律分析、研发重点分析、企业专利处境分析、技术处境分析、专利寿命分析、企业定位分析、引证分析等超过60个分析角度,系统通过AI智能系统对图表进行解读,只需1分钟,一键生成行业专利分析报告。

申请试用

QQ群二维码
意见反馈