🍁 作者：知识浅谈，CSDN签约讲师，CSDN博客专家，华为云云享专家，阿里云专家博主 📌 擅长领域：全栈工程师、爬虫、ACM算法，大数据，深度学习 💒 公众号：知识浅谈

(🤞Springboot集合前端实现进度条显示🤞)

🎈项目为什么使用进度条

前端使用进度条显示的主要原因是提升用户体验。它能让用户了解当前操作的进度和剩余时间，减少不确定感。 特别是在处理大文件上传、下载或长时间运行的操作时，进度条可以提供视觉反馈，避免用户感到操作卡顿或无响应，从而提升整体使用满意度。

🎈进度条涉及技术

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

🎈代码实现

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

  1. 调用业务处理接口:该接口中包含较长时间的处理过程
      @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;
    }
  2. 轮询业务处理进度
    @GetMapping("/redis/{key}")
public R find(@PathVariable String key){
    return R.ok(RedisUtils.getCacheObject(key));
}

🍚总结

大功告成，撒花致谢🎆🎇🌟，关注我不迷路，带你起飞带你富。 Writted By 知识浅谈