layui动态进度条实时展示java后端代码执行进度

33 篇文章 1 订阅
8 篇文章 0 订阅

java后端写了个for循环,需要处理几十万条数据,前端需要等待很长时间,默认的loading等待弹窗就不大适用了,会让人误以为页面卡住了,所以整了个进度条来实时显示for循环执行进度。
前端代码,需要引入layui.element:

 layui.use('element', function () {
  var element = layui.element;
     //弹出进度条
                var progressLayer = layer.open({
                    type: 0,
                    title: false,
                    closeBtn: 0,
                    btn: false,
                    content: '<div class="layui-progress layui-progress-big" lay-filter="progress" lay-showpercent="true"><div class="layui-progress-bar"></div></div>'
                });
                //ajax每隔一秒向后端请求一次进度异步渲染进度条
                      var scanTime = 1000;
                var timer = setInterval(function (){
                    $.ajax({
                        url: "/distributor/exportStatus",
                        success: function (data) {
                            var arr = data.split(",");
                            if(arr.length == 2){
                                var percent = arr[1];
                                element.progress('progress', percent +'%')
                                if(percent  == 100){
                                    //进度到100%,注意关闭定时器
                                    clearInterval(timer);
                                    //关闭弹出层
                                    layer.close(progressLayer);
                                    layer.closeAll();
                                    layer.msg('保存成功')
                                }
                            }
                        },
                        error: function (e) {
                            //关闭定时器
                            clearInterval(timer);
                            //关闭弹出层
                            layer.close(progressLayer);
                            layer.msg("保存失败");
                            layer.closeAll();
                        }
                    });
                }, scanTime);
                })

后端代码逻辑:获取for循环每次循环的索引,然后比上总数获得当前进度,然后存到session里面,供前端不停调用,代码如下:

// 接收 HttpServletRequest request
 HttpSession session = request.getSession();
            //定义double类型,用于保存当前百分比
            double currentPercent;
           //int类型,进度条显示的百分比
            int percent = 0;
              for (int i = 20; i < celldataArray.size(); i += 20)) {
              currentPercent=((double)i/celldataArray.size())*100;
                //因为百分比定义的为整数型,所以每次当前百分比和进度条显示的百分比之间差值大于1才更新
                if((int) Math.floor(currentPercent) - percent >= 1) {
                    percent = (int)Math.floor(currentPercent);
                    if (percent>=99){
                        percent=100;
                    }
                         //"write,数值形式"方便显示
                    session.setAttribute("exportStatus", "write," + percent);
                }
                }
    /**
     * 查询当前导出的进度(用于进度条显示)
     * @return
     */
    @RequestMapping("/exportStatus")
    @ResponseBody
    public String exportStatus(HttpServletRequest httpServletRequest) {
        return (String) httpServletRequest.getSession().getAttribute("exportStatus");
    }

效果图:
在这里插入图片描述

  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值