[发明专利]一种网页端实时数据的动态展示方法

摘要

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

主权项

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