項(xiàng)目為什么使用進(jìn)度條

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

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

進(jìn)度條涉及技術(shù)

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

代碼實(shí)現(xiàn)

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

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

    @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);
                      //每做完一個(gè)實(shí)時(shí)更新
                      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ù)處理進(jìn)度

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

總結(jié)

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

最新評(píng)論