項目為什么使用進度條

前端使用進度條顯示的主要原因是提升用戶體驗。它能讓用戶了解當前操作的進度和剩余時間，減少不確定感。

特別是在處理大文件上傳、下載或長時間運行的操作時，進度條可以提供視覺反饋，避免用戶感到操作卡頓或無響應，從而提升整體使用滿意度。

進度條涉及技術

• 線程：進度條所對應的內容一般是新建一個線程進行處理，因為所需要處理的時間相對較長。
• Redis：要實時反饋給前端當前任務的進度，每執(zhí)行一步，及時更新執(zhí)行的進度。
• ProgressBar：前端可以使用對應的進度條組件，比如ProgressBar。

代碼實現(xiàn)

使用new Thread新建一個線程對業(yè)務進行處理，并不斷更新Redis中的值，實時維護進度和總量，確保前端能查到這個比例關系。

• 調用業(yè)務處理接口:該接口中包含較長時間的處理過程

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

• 輪詢業(yè)務處理進度

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

總結

到此這篇關于Springboot集合前端實現(xiàn)進度條顯示功能的文章就介紹到這了,更多相關Springboot前端實現(xiàn)進度條顯示內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論