Springboot collection front-end implementation of progress bar display function example

Why use progress bars for the project

The main reason for the front-end to use progress bar display is to improve the user experience. It allows users to understand the progress and remaining time of the current operation, reducing the sense of uncertainty.

Especially when handling large files uploads, downloads, or long-running operations, the progress bar can provide visual feedback to prevent users from feeling lagging or unresponsive, thereby improving overall usage satisfaction.

Progress bar involves technology

• Thread: The corresponding content of the progress bar is generally a new thread for processing, because the processing time is relatively long.
• Redis: It is necessary to feedback the progress of the current task to the front-end in real time, and update the progress of the execution in a timely manner for each step of execution.
• ProgressBar: The front-end can use the corresponding progress bar component, such as ProgressBar.

Code implementation

Use new Thread to create a new thread to process the business, and continuously update the values ​​in Redis to maintain the progress and total amount in real time to ensure that the front-end can find this proportional relationship.

• Calling the business processing interface: This interface contains a long processing process

    @GetMapping("/startProgress")
      public R startProgress() {
          String key = ();
          Result result = new Result();
          ("0");
          (0);
          (100);
          ("File processing...");
          ("Test:"+key,result, (2L)); //
  
          new Thread(()->{
              for (int i = 0; i < 100; i++) {
                  try {
                      (100);
                      //A real-time update is done                    Result result1 = (key);
                      (()+1);
                      (key,result1);
                  } catch (InterruptedException e) {
                      throw new RuntimeException(e);
                  }
              }
              Result result1 = (key);
              ("1");
              ("File processing is completed");
              (key,result1);
          }).start();
          return ("The operation is successful",key);
      }
  
      @Data
      class Result{
          String status;
          Integer total;
          Integer proceed;
          String msg;
      }
  
  

• Polling business processing progress

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

Summarize

This is the article about the implementation of the progress bar display function of Springboot collection front-end. For more related content of Springboot front-end implementation progress bar display, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!