如何实现一个前后端实时通信的进度条功能

您所在的位置:网站首页 iapp浏览器加载进度条 如何实现一个前后端实时通信的进度条功能

如何实现一个前后端实时通信的进度条功能

2024-07-17 00:57| 来源: 网络整理| 查看: 265

1、需求背景 我们的产品有个下载导出成员信息表单的功能,但当数据量大的时候,处理时间较长,客户希望能有个进度条显示下载的进度,在焦急等待的时候,有个心理安慰 2、开发工具及框架 SpringBoot + Maven +JDK8 3、整体思路 数据传输的主要途径:request.session (1)前端页面编写调试 (2)后端最短路径传输模拟数据,调试 (3)后端业务逻辑处理,传输真实数据 (4)前端操作、页面优化

👉进度条最终效果 1\点击“导入excel表格” 在这里插入图片描述

2\刚下载完 在这里插入图片描述

3\下载完2秒左右关闭进度条

1. 前端页面编写

👉进度条核心标签:progress 👉js定时器:setInterval、setTimeout 思路: ① 如果你的项目和我一样,要运行后才能打开前端页面的话,建议自己新建一个项目,把前端页面调好后,再放到原项目中 ② 调试过程中,如果你的百分数直接从0到100,没有中间的数字,一定是不对的,继续调整 ③ 注意判断条件添加的位置:如果你的提示语显示顺序和百分数有关,那就一定要小心谨慎了,这里很有可能弄错

(1)测试代码编写:为便于调试,我把js代码也一并写到了html页面中(以下代码浏览器打开可直接运行)

进度调测试5 function download() { var pro=document.getElementsByTagName( "progress" )[0]; pro.style.display = 'block'; var progressValue = document.querySelector('#progress-value'); progressValue.style.display = 'block'; var value = 0; setInterval(function() { if (value


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3