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学习3:操作元素属性和特性
Feb 07 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
React简单介绍
May 24 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 Javascript
js实现简易点击切换显示或隐藏
Nov 29 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类
2006/11/27 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
django2 快速安装指南分享
2018/01/05 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
本科毕业生的求职信范文
2013/11/20 职场文书
给导游的表扬信
2014/01/10 职场文书
股权投资意向书
2014/04/01 职场文书
授权委托书协议书
2014/10/16 职场文书
班主任先进事迹材料
2014/12/17 职场文书
2015年新农合工作总结
2015/03/30 职场文书
JAVA springCloud项目搭建流程
2022/05/11 Java/Android
python playwrigh框架入门安装使用
2022/07/23 Python
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS