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


Posted in Javascript onMarch 02, 2017

Spring Boot+AngularJS+BootStrap实现进度条

原理

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

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

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

html

<input type="file" data-ng-model="file">

<uib-progress data-ng-show="progress">
  <uib-bar value="progress" type="{{type}}" data-ng-bind="progress + '%'"/>
</uib-progress>
<span class="err" data-ng-show="isShowMsg" data-ng-bind="Msg"></span>
<button class="btn btn-primary" type="button" data-ng-click="upload()">确认</button>

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<String, Object> batchModify(InputStream inputStream,HttpSession session) {
    Map<String, Object> 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<String, Object> 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<Page> pages = null;
      if (roleWithPages.get(r.getCell(0).toString()) == null) {
        pages = new HashSet<>();
      } else {
        pages = (Set<Page>) 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<Role> roles = new ArrayList<>();
    for (String rolename : roleWithPages.keySet()) {
      Role role = repo.findByName(rolename);
      role.setPages((Set<Page>) 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");
  }

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

Javascript 相关文章推荐
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
javascript如何定义对象数组
Jun 07 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
纯js仿淘宝京东商品放大镜功能
Mar 02 #Javascript
JSONP跨域请求
Mar 02 #Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 #Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 #Javascript
如何正确理解javascript的模块化
Mar 02 #Javascript
jquery实现左右滑动式轮播图
Mar 02 #Javascript
如何写好你的JavaScript【推荐】
Mar 02 #Javascript
You might like
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
判断浏览器的javascript版本的代码
2010/09/03 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
在Pandas中给多层索引降级的方法
2018/11/16 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
基于python实现查询ip地址来源
2020/06/02 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
采购员的工作职责
2013/12/26 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
解除财产保全担保书
2014/05/20 职场文书
邀请函的格式
2015/01/30 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL