热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

SpringBoot+AngularJS+BootStrap实现进度条示例代码

Spring Boot+AngularJS+BootStrap实现进度条 原理 进度条的原理是在上传文件的时候,当程序运行到某一个

Spring Boot+AngularJS+BootStrap实现进度条

原理

进度条的原理是在上传文件的时候,当程序运行到某一个部分,往Session中设置一个1到100的值。然后前台再每隔很小的一段时间去请求这个值。

在AngularJS中,$http对象有3种状态,分别是success,progress,error,其中progress方法就会在success方法调用之前(也就是上传完成之前),不断地调用。而我们要做的就是在progress中在添加一个请求,去后台拿我们设置在session中的值。

代码,这里我用了一个插件用来上传文件,叫ng-file-upload

html




  




js

Upload.upload(
        {
          url: "",
          data: {
            file: file
          },
          method: 'post'
        }).then(function (res) {
          //这里是success方法
          $scope.isShowMsg = true;
          $scope.Msg = res.data.msg;
          if($scope.Msg == "导入数据不符合格式要求!")
          $scope.type = "progress-bar progress-bar-danger progress-bar-striped";//设置进度条样式
          else {
            $scope.type = "progress-bar progress-bar-success progress-bar-striped";
            $scope.progress = 100;//上传成功之后,将进度条设置为100
          }

        }, function (){
        //这里是error方法
        }, function (){
        //这里是progress方法
        $scope.type = "progress-bar progress-bar-info progress-bar-striped";

        $http({
        url:"",
        method: "get"
        }).success(function (res) {
            $scope.progress = res;//绑定进度条的值
          })
        });

上传部分代码(只需要关注设置session的地方

public Map batchModify(InputStream inputStream,HttpSession session) {
    Map res = new HashMap<>();
    Workbook workbook = null;
    try {
      workbook = Util.createWorkbook(inputStream);
    } catch (InvalidFormatException | IOException e) {
      e.printStackTrace();
    }
    session.setAttribute("progress", 5);//解析成功后我将进度设置为5
    Sheet sheet = workbook.getSheetAt(0);

    Map roleWithPages = new HashMap<>();
    for (int i = 1; i <= sheet.getLastRowNum(); i++) {
      Row r = sheet.getRow(i);
      if (r == null || r.getCell(0) == null || r.getCell(1) == null)
        continue;
      Set pages = null;
      if (roleWithPages.get(r.getCell(0).toString()) == null) {
        pages = new HashSet<>();
      } else {
        pages = (Set) roleWithPages.get(r.getCell(0).toString());
      }
      Page p = new Page();
      p.setId(Math.round(r.getCell(1).getNumericCellValue()));
      pages.add(p);
      roleWithPages.put(r.getCell(0).toString(), pages);
      session.setAttribute("progress", 5 + i*90/sheet.getLastRowNum());
      //我将处理文件主体进度总量设置为90(5是加上解析部分的进度)
    }

    List roles = new ArrayList<>();
    for (String rolename : roleWithPages.keySet()) {
      Role role = repo.findByName(rolename);
      role.setPages((Set) roleWithPages.get(rolename));
      roles.add(role);
    }
    repo.save(roles);
    session.setAttribute("progress", 100);//保存之后将进度设置为100
    res.put("msg", "数据导入成功!");
    return res;
  }

进度条部分代码,很简单,就是读Session中progress的值

public int getProgress(HttpServletRequest request){
    return (int) request.getSession().getAttribute("progress");
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 精选15款免费扁平化界面设计资源
    高质量的网页和移动元素是任何Web或移动项目的基础。优秀的UI设计组件不仅能够提升用户体验,还能显著缩短设计师的工作时间,帮助他们快速创建出引人注目的作品。本文将分享一系列免费的扁平化设计素材。 ... [详细]
  • 并发编程 12—— 任务取消与关闭 之 shutdownNow 的局限性
    Java并发编程实践目录并发编程01——ThreadLocal并发编程02——ConcurrentHashMap并发编程03——阻塞队列和生产者-消费者模式并发编程04——闭锁Co ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 本文详细介绍如何通过设置SSH密钥来获取连接GitHub远程仓库的权限,包括生成密钥、添加到GitHub账户以及验证连接等步骤。 ... [详细]
  • 在Linux系统上构建Web服务器的详细步骤
    本文详细介绍了如何在Linux系统上搭建Web服务器的过程,包括安装Apache、PHP和MySQL等关键组件,以及遇到的一些常见问题及其解决方案。 ... [详细]
  • Windows 环境下安装 Git 并连接 GitHub 的详细步骤
    本文详细介绍了如何在 Windows 系统中安装 Git 工具,并通过配置 SSH 密钥实现与 GitHub 的安全连接。包括下载、安装、环境配置及验证连接等关键步骤。 ... [详细]
  • Django xAdmin 使用指南(第一部分)
    本文介绍如何在Django项目中集成和使用xAdmin,这是一个增强版的管理界面,提供了比Django默认admin更多的功能。文中详细描述了集成步骤及配置方法。 ... [详细]
  • 深入理解ASP.NET MVC中的_ViewStart.cshtml
    本文介绍了_ViewStart.cshtml文件在ASP.NET MVC 3.0及以上版本中的作用和使用方法。该文件位于Views目录下,主要用于统一配置视图布局和其他全局设置。 ... [详细]
  • FineUI 是一款基于 jQuery 的专业级控件库,专为 ASP.NET WebForms 和 MVC 开发设计。它提供了丰富的用户界面组件,简化了复杂 Web 应用程序的开发过程。 ... [详细]
  • 在本周的白板演练中,Apache Flink 的 PMC 成员及数据工匠首席技术官 Stephan Ewen 深入探讨了如何利用保存点功能进行流处理中的数据重新处理、错误修复、系统升级和 A/B 测试。本文将详细解释保存点的工作原理及其应用场景。 ... [详细]
  • 提升Tumblr爬虫效率与功能
    本文介绍了对之前开发的Tumblr爬虫脚本进行升级,整合了两个脚本的功能,实现了自动分页爬取博客内容,并支持配置文件以下载多个博客的不同格式文件。此外,还优化了图片下载逻辑。 ... [详细]
  • Git管理工具SourceTree安装与使用指南
    本文详细介绍了Git管理工具SourceTree的安装、配置及团队协作方案,旨在帮助开发者更高效地进行版本控制和项目管理。 ... [详细]
  • Python 工具推荐 | PyHubWeekly 第二十一期:提升命令行体验的五大工具
    本期 PyHubWeekly 为大家精选了 GitHub 上五个优秀的 Python 工具,涵盖金融数据可视化、终端美化、国际化支持、图像增强和远程 Shell 环境配置。欢迎关注并参与项目。 ... [详细]
  • 本文将详细介绍如何在没有显示器的情况下,使用Raspberry Pi Imager为树莓派4B安装操作系统,并进行基本配置,包括设置SSH、WiFi连接以及更新软件源。 ... [详细]
  • 利用SSH隧道实现外网对局域网机器的安全访问
    本文探讨了一种常见的网络配置问题及其解决方案,即如何在外网环境下安全地访问位于局域网内的计算机。特别介绍了使用SSH反向隧道技术来实现这一目标的具体步骤和注意事项。 ... [详细]
author-avatar
gggs520_164
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有