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 相关文章推荐
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 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中include与require使用方法区别详解
2013/10/19 PHP
php对称加密算法示例
2014/05/07 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
python下载库的步骤方法
2019/10/12 Python
基于python实现把图片转换成素描
2019/11/13 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
夏季奶茶店创业计划书
2014/01/16 职场文书
小学生成长感言
2014/01/30 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
《长相思》听课反思
2014/04/10 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
2014年文秘工作总结
2014/11/25 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书