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

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

Info

Publication number
CN108228753A
CN108228753A CN201711396648.5A CN201711396648A CN108228753A CN 108228753 A CN108228753 A CN 108228753A CN 201711396648 A CN201711396648 A CN 201711396648A CN 108228753 A CN108228753 A CN 108228753A
Authority
CN
China
Prior art keywords
data
user
bubble
dynamic
display
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Withdrawn
Application number
CN201711396648.5A
Other languages
English (en)
Inventor
周谦
季统凯
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
G Cloud Technology Co Ltd
Original Assignee
G Cloud Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by G Cloud Technology Co Ltd filed Critical G Cloud Technology Co Ltd
Priority to CN201711396648.5A priority Critical patent/CN108228753A/zh
Publication of CN108228753A publication Critical patent/CN108228753A/zh
Withdrawn legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/24—Querying
    • G06F16/245—Query processing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Computational Linguistics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

一种网页端实时数据的动态展示方法
技术领域
本发明涉及互联网web前端技术领域，尤其是一种网页端实时数据的动态展示方法。
背景技术
目前网站数据主要以表格、列表、轮播图的方式展现，往往受页面布局的影响不能全部展示数据。当用户或者用人机构发布一些需求和资源时无法做到实时推送获得及时反馈，或是用户登录网站时无法根据用户的地理位置有区域性的推送距离用户最近的服务和资源。
发明内容
本发明解决的技术问题在于提供一种网页端实时数据的动态展示方法；不受数据展现的容器限制，并可根据用户的选择有针对性地对数据库中的数据进行筛选，实时展示数据；主要解决网站在数据展现方面的单一性和滞后性的问题，提升用户的视觉体验，增加网站的访问量。
本发明解决上述技术问题的技术方案是：
所述的方法包括后端数据过滤、前后端数据绑定和显示端显示；
所述的后端数据过滤是通过用户选择的地区位置或者用户登录时的所属地在筛选数据时把用户的行政区划代码作为参数传递，后台根据这个代码快速筛选出相关的信息表并返回给显示端展示数据；
所述的前后端数据绑定是在前端页面对应的区域绑定vue中v-model指令并在methods对象属性中绑定相应方法及时把最新数据传递给后端，后端对数据的合法性进行验证，成功后创建与数据库连接及时对数据进行操作并存储到数据库，把最新数据渲染在显示端；
所述的显示端显示是前端发送Ajax数据请求向后端请求动态数据；并通过$.each方法循环数据，并动态创建a标签绑定数据；同时为每一个气泡绑定鼠标hover事件悬停效果和鼠标click事件弹出数据详情效果；通过随机函数为每一个气泡数据设置随机上升速度、气泡产生的随机位置，同时设置每一个气泡数据由小变大的动画效果和文字显示的方式，实现大量数据的动态显示。
本方法基于Javascript实现将大量数据以气泡的方式从小变大由下而上源源不断的展现给用户，弥补了数据展现受容器限制这一缺点，实现大量数据的动态显示，可根据用户选择的区域或服务类型有针对性地对数据库中的数据进行筛选，能快速有效地对数据进行过滤供显示端显示，替代传统网页数据全部分页的显示方式，实现了数据的有效性，并以vue+Javascript实现数据和页面的实时绑定，当用户或者机构发布一些需求和资源时本方法可以实时捕捉用户的行为并把数据及时存储到数据库，同时渲染在显示端，实现数据显示的实时性。
附图说明
下面结合附图对本发明进一步说明：
图1为本发明方法的流程图。
具体实施方式
如图1所示，本发明为达到上述目的，通过以下技术方案实现，显示端气泡生产方式：前端发送Ajax数据请求向后端请求动态数据并通过$.each方法循环数据并动态创建a标签绑定数据同时为每一个气泡绑定鼠标hover事件悬停效果和鼠标click事件弹出数据详情效果，并通过随机函数为每一个气泡数据设置随机上升速度、气泡产生的随机位置，同时设置每一个气泡数据由小变大的动画效果和文字显示的方式，实现大量数据的动态显示。
后端数据过滤方式：传统网站在根据区域筛选数据时一般是根据关键字比如“广东省”作为数据筛选条件往往响应时间比较慢，影响网站的整体体验效果，本方法是通过用户选择的地区位置或者用户登录时的所属地比如属于广东省的，给它设置广东省的行政区划代码440000在筛选数据时把用户的行政区划代码作为参数传递，后台根据这个代码快速筛选出属于广东省的信息表并返回给显示端展示数据，在我们这功能中，我们用行政区划代码作为筛选条件，数据库里该属性存的是Int类型，所以数据库能够快速检索出来，同时对前端发送过来的数据运用Filter方法进行拦截验证，确定数据的合法性和真实性，提升系统的安全等级。
前后端数据绑定方式：一般网站在做实时数据更新是每间隔一段时间请求一次数据然后重新渲染某个模块，这样做会增加服务的压力同时数据也会有滞后性，本方法在前端页面对应的区域绑定vue中v-model指令并在methods对象属性中绑定相应方法及时把最新数据传递给后端，后端对数据的合法性进行验证，成功后创建与数据库连接及时对数据进行操作并存储到数据库，把最新数据渲染在显示端，同时当服务器端数据变换时显示端也会迅速响应变化，实现数据与页面的双向绑定，体现数据显示的实时性。
本发明显示端数据以气泡的形式从小变大由下而上源源不断地展现给用户，且当用户移动鼠标悬停在某个气泡上时该气泡会停止运动，点击气泡即可在弹出层显示完整数据详情，方便用户了解更多信息，实现大量数据的动态显示。后端数据过滤方法根据用户选择的区域或服务类型有针对性地对数据库中的数据进行筛选，能快速有效地对数据进行过滤供显示端显示，替代传统网页数据全部分页的显示方式，实现了数据的有效性。前后端数据绑定方式以vue+Javascript实现数据和页面的实时绑定做到实时监听用户行为，实时动态更新数据。

Claims (1)

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

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201711396648.5A CN108228753A (zh) 2017-12-21 2017-12-21 一种网页端实时数据的动态展示方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201711396648.5A CN108228753A (zh) 2017-12-21 2017-12-21 一种网页端实时数据的动态展示方法

Publications (1)

Publication Number Publication Date
CN108228753A true CN108228753A (zh) 2018-06-29

Family

ID=62647608

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201711396648.5A Withdrawn CN108228753A (zh) 2017-12-21 2017-12-21 一种网页端实时数据的动态展示方法

Country Status (1)

Country Link
CN (1) CN108228753A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109933321A (zh) * 2019-01-17 2019-06-25 平安科技（深圳）有限公司 基于Vue框架的表格显示方法及装置、存储介质
CN110908661A (zh) * 2019-11-22 2020-03-24 北京浪潮数据技术有限公司 一种界面验证vue组件的方法、装置、设备及存储介质
CN112230909A (zh) * 2019-07-15 2021-01-15 腾讯科技（深圳）有限公司 小程序的数据绑定方法、装置、设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103314395A (zh) * 2010-11-01 2013-09-18 寇博租赁有限公司 运用动态数据创建和链接三维空间物体并在地理信息系统技术领域可视化上述三维空间物体
CN104714948A (zh) * 2013-12-11 2015-06-17 部落邦（北京）科技有限责任公司 一种回放用户网页操作行为的方法、系统及热图展现装置
US20150170382A1 (en) * 2010-10-19 2015-06-18 Izenda, Inc. Systems and methods for automatic interactive visualizations
CN106874494A (zh) * 2017-02-23 2017-06-20 山东浪潮云服务信息科技有限公司 一种应用于游客偏好分析的前端展现方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150170382A1 (en) * 2010-10-19 2015-06-18 Izenda, Inc. Systems and methods for automatic interactive visualizations
CN103314395A (zh) * 2010-11-01 2013-09-18 寇博租赁有限公司 运用动态数据创建和链接三维空间物体并在地理信息系统技术领域可视化上述三维空间物体
CN104714948A (zh) * 2013-12-11 2015-06-17 部落邦（北京）科技有限责任公司 一种回放用户网页操作行为的方法、系统及热图展现装置
CN106874494A (zh) * 2017-02-23 2017-06-20 山东浪潮云服务信息科技有限公司 一种应用于游客偏好分析的前端展现方法

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
小贼先生: "原生js实现canvas气泡冒泡效果", 《HTTPS://WWW.CNBLOGS.COM/RONFFY/P/CANVAS-BUBBLE.HTML》 *
无风: "迈出全栈第一步，vue+node+mysql独立完成前后端分离的增删改查流程", 《HTTPS://SEGMENTFAULT.COM/A/1190000009246144》 *
本站编辑: "基于Vue.js实现简单搜索框", 《WWW.UXYS.COM/HTML/VUE/20161130/22556.HTML》 *

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109933321A (zh) * 2019-01-17 2019-06-25 平安科技（深圳）有限公司 基于Vue框架的表格显示方法及装置、存储介质
CN112230909A (zh) * 2019-07-15 2021-01-15 腾讯科技（深圳）有限公司 小程序的数据绑定方法、装置、设备及存储介质
CN112230909B (zh) * 2019-07-15 2023-05-23 腾讯科技（深圳）有限公司 小程序的数据绑定方法、装置、设备及存储介质
CN110908661A (zh) * 2019-11-22 2020-03-24 北京浪潮数据技术有限公司 一种界面验证vue组件的方法、装置、设备及存储介质
CN110908661B (zh) * 2019-11-22 2022-03-22 北京浪潮数据技术有限公司 一种界面验证vue组件的方法、装置、设备及存储介质

Similar Documents

Publication Publication Date Title
CN103294711B (zh) 一种确定网页中的页面元素的方法以及装置
US9836800B2 (en) Apparatus for increasing social interaction over an electronic network
US10067662B2 (en) Content visualization
CN108228753A (zh) 一种网页端实时数据的动态展示方法
US9137275B2 (en) Recording and indicating preferences
US8180852B2 (en) Apparatus for increasing social interaction over an electronic network
CN103812753B (zh) 一种社交网络交互方法及应用平台
US9606979B2 (en) Event visualization
CN106415650A (zh) 征集和创建协作内容项
CN102236711A (zh) 一种用于确定推广关键词所对应的展现信息的方法与设备
JP2013517558A (ja) 関係性ベースの共有オンライン空間内参加者表現
CN103809884B (zh) 一种触控反馈方法、触控反馈屏及电子设备
CN103389853B (zh) 微博展示方法和系统
CN103001855A (zh) 一种客户端和用户群划分和信息传递的方法
Raake et al. Web 2.0 in der Finanzbranche
CN102984191A (zh) 用于确定行为相关质量信息的方法、装置和设备
CN106651453A (zh) 面向网络平台的自动推广方法、系统和计算设备
US20140095614A1 (en) Identity crowd-sourced curation
CN103514190A (zh) 一种用于确定目标推广信息的优化信息的方法和设备
JP2006107385A (ja) 投稿記事抽出方法及び装置及びプログラム
CN108334729A (zh) 健康资讯管理方法及管理系统
CN112218146A (zh) 视频内容发布方法及设备、服务器和介质
Letcher Implementation of a water allocation decision support system in the Namoi and Gwydir valleys
KR101677556B1 (ko) 생태 관광 정보 제공 방법
CN109582739A (zh) 表单管理方法、系统、设备及计算机可读存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
CB03 Change of inventor or designer information

Inventor after: Tu Xuping

Inventor after: Ji Tongkai

Inventor before: Zhou Qian

Inventor before: Ji Tongkai

CB03 Change of inventor or designer information
WW01 Invention patent application withdrawn after publication

Application publication date: 20180629

WW01 Invention patent application withdrawn after publication