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 相关文章推荐
javascript编程起步(第三课)
Feb 27 Javascript
对xmlHttp对象的理解
Jan 17 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
vue组件的写法汇总
Apr 12 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
纯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
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
PHP SOCKET编程详解
2015/05/22 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
Node.js实现发送邮件功能
2017/11/06 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
跟老齐学Python之开始真正编程
2014/09/12 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Python列表解析配合if else的方法
2018/06/23 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
物流管理专业职业生涯规划书
2014/01/06 职场文书
实习单位接收函模板
2014/01/10 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
《风筝》教学反思
2016/02/23 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript