[發明專利]一種網頁端實時數據的動態展示方法

在審

• 申請號: 201711396648.5
• 申請日: 2017-12-21
• 公開（公告）號: CN108228753A
• 公開（公告）日: 2018-06-29
• 發明（設計）人: 周謙;季統凱
• 申請（專利權）人: 國云科技股份有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 北京科億知識產權代理事務所(普通合伙) 11350
• 代理人: 湯東鳳

本發明涉及互聯網web前端技術領域，尤其是一種網頁端實時數據的動態展示方法。本方法包括顯示端數據呈現方式、后端數據過濾方式和前后端數據綁定方式。本方法所述顯示端數據呈現方式以氣泡形式從小變大由下而上源源不斷地展現給用戶，且當用戶移動鼠標懸停在某個氣泡上時該氣泡會停止運動，點擊氣泡即可在彈出層顯示完整數據詳情，方便用戶了解更多信息，彌補數據展現受容器限制這一缺點，實現大量數據的動態顯示；后端數據過濾方式根據用戶選擇的區域或服務類型有針對性地對數據庫中的數據進行篩選；前后端數據綁定方式以vue+Javascript實現數據和頁面的實時綁定。本發明實現了網頁端實時數據的動態氣泡展示。

技術領域

本發明涉及互聯網web前端技術領域，尤其是一種網頁端實時數據的動態展示方法。

背景技術

目前網站數據主要以表格、列表、輪播圖的方式展現，往往受頁面布局的影響不能全部展示數據。當用戶或者用人機構發布一些需求和資源時無法做到實時推送獲得及時反饋，或是用戶登錄網站時無法根據用戶的地理位置有區域性的推送距離用戶最近的服務和資源。

發明內容

本發明解決的技術問題在于提供一種網頁端實時數據的動態展示方法；不受數據展現的容器限制，并可根據用戶的選擇有針對性地對數據庫中的數據進行篩選，實時展示數據；主要解決網站在數據展現方面的單一性和滯后性的問題，提升用戶的視覺體驗，增加網站的訪問量。

本發明解決上述技術問題的技術方案是：

所述的方法包括后端數據過濾、前后端數據綁定和顯示端顯示；

所述的后端數據過濾是通過用戶選擇的地區位置或者用戶登錄時的所屬地在篩選數據時把用戶的行政區劃代碼作為參數傳遞，后臺根據這個代碼快速篩選出相關的信息表并返回給顯示端展示數據；

所述的前后端數據綁定是在前端頁面對應的區域綁定vue中v-model指令并在methods對象屬性中綁定相應方法及時把最新數據傳遞給后端，后端對數據的合法性進行驗證，成功后創建與數據庫連接及時對數據進行操作并存儲到數據庫，把最新數據渲染在顯示端；

所述的顯示端顯示是前端發送Ajax數據請求向后端請求動態數據；并通過$.each方法循環數據，并動態創建a標簽綁定數據；同時為每一個氣泡綁定鼠標hover事件懸停效果和鼠標click事件彈出數據詳情效果；通過隨機函數為每一個氣泡數據設置隨機上升速度、氣泡產生的隨機位置，同時設置每一個氣泡數據由小變大的動畫效果和文字顯示的方式，實現大量數據的動態顯示。

本方法基于Javascript實現將大量數據以氣泡的方式從小變大由下而上源源不斷的展現給用戶，彌補了數據展現受容器限制這一缺點，實現大量數據的動態顯示，可根據用戶選擇的區域或服務類型有針對性地對數據庫中的數據進行篩選，能快速有效地對數據進行過濾供顯示端顯示，替代傳統網頁數據全部分頁的顯示方式，實現了數據的有效性，并以vue+Javascript實現數據和頁面的實時綁定，當用戶或者機構發布一些需求和資源時本方法可以實時捕捉用戶的行為并把數據及時存儲到數據庫，同時渲染在顯示端，實現數據顯示的實時性。

附圖說明

下面結合附圖對本發明進一步說明：

圖1為本發明方法的流程圖。

具體實施方式

如圖1所示，本發明為達到上述目的，通過以下技術方案實現，顯示端氣泡生產方式：前端發送Ajax數據請求向后端請求動態數據并通過$.each方法循環數據并動態創建a標簽綁定數據同時為每一個氣泡綁定鼠標hover事件懸停效果和鼠標click事件彈出數據詳情效果，并通過隨機函數為每一個氣泡數據設置隨機上升速度、氣泡產生的隨機位置，同時設置每一個氣泡數據由小變大的動畫效果和文字顯示的方式，實現大量數據的動態顯示。