SpringBoot如何实现一个实时更新的进度条(组图)

SpringBoot如何实现实时更新进度条的示例代码

更新时间：2020年5月28日09:09:19作者：听风，听雨，听世界

本文详细介绍了SpringBoot如何实现实时更新进度条。本文通过示例代码进行了详细介绍，该示例代码对每个人的学习或工作都有一定的参考学习价值。需要它的朋友将关注下面的编辑器，让我们一起学习

前言

博客作者最近收到了一个任务，可能的内容是：导入excel表以批量修改状态。在此期间，如果发生错误，则所有数据均将失败。为了防止重复提交，请执行诸如进度条之类的操作。

接下来，我将结合实际业务分析并记录此功能。

身体

˼·

前端使用引导程序，后端使用SpringBoot分发到注册表。最初的想法是在导入表后异步调用修改数据状态的方法，然后每次计算修改进度并将其存储在会话中，前台jquery编写计时任务。访问权限以获取会话中的进度，更新进度条的进度和百分比。但是，存在跨域问题，即服务之间无法共享会话。然后更改它以将其存储在Redis中，前台定时任务将直接运行以获取Redis数据。

ʵʩ

进度栏

先查看引导程序的进度栏

  

    40%
  

进度条的主要更新是更新style =“ width：40％;”的值。 div中的40％可以省略，仅此而已。

考虑将进度条放置在弹出层中。

定时任务

//点击确认导入执行此方法
function bulkImportChanges() {
  //获取批量操作状态文件
  var files = $("#importChanges").prop("files");
  var changesFile = files[0];
  var formData = new FormData();
  formData.append("importFile",changesFile);
  $.ajax({
    type : 'post',
    url : "/risk/bulk***es",
    data : formData,
    processData : false,   //文件ajax上传要加这两个的，要不然上传不了
    contentType : false,   //
    success : function(obj) {
      //导入成功
      if (obj.rspCode == "00") {
        //定时任务获取redis导入修改进度
        var progress = "";
        var timingTask = setInterval(function(){
          $.ajax({
            type: 'post',
            url: "/risk/t***k",
            dataType : 'json',
            success: function(result) {
              progress = result.value;
              if (progress != "error"){
                var date = progress.substring(0,6);
                //这里更新进度条的进度和数据
                $(".progress-bar").width(parseFloat(date)+"%");
                $(".progress-bar").text(parseFloat(date)+"%");
              }
            }
          });
          //导入修改完成或异常（停止定时任务）
          if (parseInt(progress)==100 || progress == "error") {
            //清除定时执行
            clearInterval(timingTask);
            $.ajax({
              type: 'post',
              url: "/risk/de***ess",
              dataType : 'json',
              success: function(result) {
                $("#bulkImportChangesProcessor").hide();
                if (parseInt(progress) == 100) {
                  alert("批量导入修改状态成功");
                }
                if (progress == "error") {
                  alert("批量导入修改状态失败");
                }
                //获取最新数据
                window.location.href="/risk/re***ByParam" rel="external nofollow" rel="external nofollow" ;
              }
            });
          }
        }, 1000)
      }else {
        $("#bulkImportChangesProcessor").hide();
        alert(obj.rspMsg);
        window.location.href="/risk/re***ByParam" rel="external nofollow" rel="external nofollow" ;
      }
    }
  });
}

说明：单击以确认导入文件成功，并每秒（一千毫秒）启动计时任务以访问后台以获取Redis存储的进度，并返回到更新进度栏。如果更新完成或更新失败（根据后台返回的数据确定），则停止定时任务以显示相应的信息并刷新页面。获取最新数据。

背景控制层

/**
 * 退单管理批量修改状态导入文件
 * @param importFile
 * @return
 */
 @ResponseBody
 @RequestMapping("/bulk***es")
 public Map bulk***es(MultipartFile importFile){
   log.info("退单管理批量修改状态导入文件，传入参数："+importFile);
 Map map = new HashMap<>();
 List fromExcel = null;
 try{
      //使用工具类导入转成list
  String[] header = {"sy***um","t***mt","ha***ult","re***nd","sy***nd","r**k"};
  fromExcel = importExcelUtil.importDataFromExcel(importFile, header, BulkImportChangesEntity.class);
  if (fromExcel.size()==0){
  map.put("rspCode","99");
  map.put("rspMsg","导入数据不能为空");
  return map;
  }
 }catch (Exception e){
  map.put("rspCode","99");
  map.put("rspMsg","导入操作表失败,请注意数据列格式");
  return map;
 }
 try {
  //这里会对list集合中的数据进行处理
  log.info("调用服务开始，参数："+JSON.toJSONString(fromExcel));
  //String url = p4_zuul_url+"/***/ri***eat/bu***nges";
  String url = p4_zuul_url+"/***-surpass/ri***eat/bu***nges";
  String result = HttpClientUtil.doPost(url,JSON.toJSONString(fromExcel));
  log.info("调用服务结束，返回数据："+result);
  if (result != null){
  map = JSONObject.parseObject(result, Map.class);
  log.info("批量修改状态导入："+JSON.toJSONString(map));
  }
 }catch (Exception e){
  map.put("rspCode","99");
  map.put("rspMsg","导入操作表失败");
  log.info("bu***es exception",e);
  return map;
 }
 return map;
 }
 /**
 * 获取退单管理批量修改状态导入文件进度条进度
 * @return
 */
 @ResponseBody
 @RequestMapping("/t***sk")
 public Map t***sk(){
 Map map = new HashMap<>();
    //获取redis值
 String progress = HttpClientUtil.doGet(
  p4_zuul_url + "/" + p4_redis + "/redis***ler/get?key=progressSchedule");
 if (progress != null){
  map = JSONObject.parseObject(progress, Map.class);
  log.info("进度条进度："+JSON.toJSONString(map));
  map.put("progressSchedule",progress);
 }else {
  HttpClientUtil.doGet(
   p4_zuul_url + "/" + p4_redis + "/redis***ler/del?key=progressSchedule");
 }
 return map;
 }
 /**
 * 清除redis进度条进度
 * @return
 */
 @ResponseBody
 @RequestMapping("/de***ess")
 public Map de***ess(){
 Map map = new HashMap<>();
 String progress = HttpClientUtil.doGet(
  p4_zuul_url + "/" + p4_redis + "/redis***ler/del?key=progressSchedule");
 if (progress != null){
  map = JSONObject.parseObject(progress, Map.class);
  log.info("返回数据："+JSON.toJSONString(map));
 }
 return map;
 }

导入时，调用第一个bulk *** es方法，定时任务调用t *** sk方法，导入完成或发生错误，调用de *** ess方法以删除redis数据以避免占用资源。

服务层

@Async//开启异步
 @Transactional(rollbackFor = Exception.class)//事务回滚级别
 @Override
 public void bulkImportChanges(List list) {
 //初始化进度
 Double progressBarSchedule = 0.0;
 redisClient.set("progressSchedule", progressBarSchedule + "");//存redis
 try {
  for (int i = 1; i <= list.size(); i++) {
  RiskRetreatEntity entity = riskRetreatMapper.selectRetreatListBySysRefNum(list.get(i-1).getSysRefNum());
  if (entity == null){
   //查询结果为空直接进行下次循环不抛出
   continue;
  }
  //实体封装
        ···
        //更新
  riskRetreatMapper.updateRetreatByImport(entity);
  //计算修改进度并存放redis保存(1.0 / list.size())为一条数据进度
  progressBarSchedule = (1.0 / list.size()) * i*100;
  redisClient.set("progressSchedule", progressBarSchedule+"");
  if (i==list.size()){
   redisClient.set("progressSchedule", "100");
  }
  }
 }catch (Exception e){
  //当发生错误则清除缓存直接抛出回滚
  redisClient.set("progressSchedule","error");
  log.info("导入更新错误，回滚");
  log.info("bulkImportChanges exception:",e);
  throw e;
 }
 }

每次更新数据存储进度时，发生错误时，它将回滚。如果启用异步，则需要在启动类中添加注释@EnableAsync。

@EnableAsync
···//其他注解
public class Application {
  public static void main(String[] args) {
    SpringApplication.run(Application.class, args);
  }
}

结果样式

结束

这一次结合了前端定时任务，后台事务和异步。总体而言，这是一个很好的体验。

本文到此结束，有关SpringBoot如何实现实时更新进度条示例代码的文章。有关更多有关SpringBoot实时更新进度条内容的信息，请搜索Script Home的上一篇文章，或继续浏览以下相关文章，希望您将来会更多支持Scripthome！

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-373830-1.html