Springboot集合前端实现进度条显示

🍁 作者：知识浅谈，CSDN签约讲师，CSDN博客专家，华为云云享专家，阿里云专家博主
📌 擅长领域：全栈工程师、爬虫、ACM算法，大数据，深度学习
💒 公众号：知识浅谈
🔥 微信：zsqtcyl 联系我领取福利

🎈项目为什么使用进度条

前端使用进度条显示的主要原因是提升用户体验。它能让用户了解当前操作的进度和剩余时间，减少不确定感。
特别是在处理大文件上传、下载或长时间运行的操作时，进度条可以提供视觉反馈，避免用户感到操作卡顿或无响应，从而提升整体使用满意度。

🎈进度条涉及技术

• 线程：进度条所对应的内容一般是新建一个线程进行处理，因为所需要处理的时间相对较长。
• Redis：要实时反馈给前端当前任务的进度，每执行一步，及时更新执行的进度。
• ProgressBar：前端可以使用对应的进度条组件，比如ProgressBar。

🎈代码实现

使用new Thread新建一个线程对业务进行处理，并不断更新Redis中的值，实时维护进度和总量，确保前端能查到这个比例关系。

1. 调用业务处理接口:该接口中包含较长时间的处理过程

     @GetMapping("/startProgress")
       public R startProgress() {
           String key = IdUtil.getSnowflakeNextIdStr();
           Result result = new Result();
           result.setStatus("0");
           result.setProceed(0);
           result.setTotal(100);
           result.setMsg("文件处理中...");
           RedisUtils.setCacheObject("Test:"+key,result, Duration.ofMinutes(2L)); //
   
           new Thread(()->{
               for (int i = 0; i < 100; i++) {
                   try {
                       Thread.sleep(100);
                       //每做完一个实时更新
                       Result result1 = RedisUtils.getCacheObject(key);
                       result1.setProceed(result1.getProceed()+1);
                       RedisUtils.setCacheObject(key,result1);
                   } catch (InterruptedException e) {
                       throw new RuntimeException(e);
                   }
               }
               Result result1 = RedisUtils.getCacheObject(key);
               result1.setStatus("1");
               result1.setMsg("文件处理完成");
               RedisUtils.setCacheObject(key,result1);
           }).start();
           return R.ok("操作成功",key);
       }
   
       @Data
       class Result{
           String status;
           Integer total;
           Integer proceed;
           String msg;
       }
   
   

2. 轮询业务处理进度

   @GetMapping("/redis/{key}")
   public R find(@PathVariable String key){
       return R.ok(RedisUtils.getCacheObject(key));
   }
   

🍚总结

大功告成，撒花致谢🎆🎇🌟，关注我不迷路，带你起飞带你富。
Writted By 知识浅谈