項目為什么使用進度條

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

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

進度條涉及技術(shù)

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

代碼實現(xiàn)

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

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

    @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è)務(wù)處理進度

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

總結(jié)

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

最新評論