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

这篇文章主要介绍了使用进度条提升用户体验的原因,特别是在处理大文件上传、下载或长时间运行的操作时,进度条通过实时反馈任务进度,减少用户的不确定感,文中给出了详细的代码示例,需要的朋友可以参考下

项目为什么使用进度条

前端使用进度条显示的主要原因是提升用户体验。它能让用户了解当前操作的进度和剩余时间，减少不确定感。

特别是在处理大文件上传、下载或长时间运行的操作时，进度条可以提供视觉反馈，避免用户感到操作卡顿或无响应，从而提升整体使用满意度。

进度条涉及技术

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

代码实现

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

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

    @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;
      }
  
  

• 轮询业务处理进度

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

总结

到此这篇关于Springboot集合前端实现进度条显示功能的文章就介绍到这了,更多相关Springboot前端实现进度条显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

• SpringBoot上传文件如何返回前端进度条